Webデザイン改善スキル「Hallmark」の機能と使い方
Claude Code / Codex / Cursorで使えるデザインスキル
バイブコーディングでWebサイトを作ってみたものの、なんだかデザインが垢抜けない…
そんなお悩みはありませんか?
せっかく良いサービスを提供しているのに、デザインのせいで魅力が伝わらないのはもったいない。とくに仕事に直結するサイトなら、見た目や使いやすさはとても重要になってきますよね。
こんにちは、ウミノです。普段はnoteメンバーシップ「自動化オタクの頭の中(ジドオタ)」で、非エンジニアでも自動化・仕組み化を取り入れて自分の時間を作り出そう!をコンセプトにした発信をしています。
今回は、AIを使ってWebサイトのデザインを自動で整えてくれる「Hallmark(ホールマーク)」という便利なスキルをご紹介します。
デザインの知識がなくても、AIの力でサイトの目的を達成しやすくなるので、ぜひ最後まで読んでみてください😊
ClaudeやCursor、Codexで使えるデザイン支援スキル
最近はClaudeやCursor、CodexといったAIツールを使って、誰でも簡単にWebサイトを作れるようになりましたよね。
でも、AIに指示を出して出来上がったサイト、どれも似たり寄ったりになってませんか?そんなときに活用できるのが、今回ご紹介する「Hallmark」というデザイン支援スキルです。
このツールはAIが作成するWebサイトなどのデザインを美しく整えてくれるスキル(Skills)です。デザインやプログラミングの深い知識がなくても、AIに指示を出すだけでプロのデザイナーが手がけたような洗練されたレイアウトを実現してくれます。
実際にWebサイトを立ち上げるとなると、配色や余白のバランスなど、細かな調整にどうしても時間がかかってしまいます。
Hallmarkを使えば、そうした時間のかかる作業をAIがサポートしてくれるため、本来注力すべきサービス作りや文章作成に集中できるようになります。時短しながらクオリティを上げられる、とても実用的なツールなんです。
https://github.com/Nutlope/hallmark
オープンソースだからこそ確認できる安全性
便利なAIツールが増える一方で、セキュリティへの不安を感じる方も多いはず。わたしは基本的に、出所が不明な「野良スキル」と呼ばれるものは、セキュリティの観点から安易に導入しないように気をつけています。
ですが、このHallmarkはオープンソースとしてGitHubというプラットフォームで公開されています。中身のプログラムがどうなっているかをしっかりとチェックできる状態になっているため、Codexに安全性を自分で確認したうえで安心して導入することができました。ツール選びにおいて、中身が透明であることはとても大切なポイントになります。
なお、開発者のHassanさんはTogether AIという企業の開発者であり、公式アカウントのバッヂもついているのでより安心して試せました。(一応、npmではなくてコピーでインストールしました)
目的に合わせて使い分けるHallmarkの4つの機能
まずHallmarkができることはざっくりこんな感じ。
AIっぽい雑なデザインを避ける
LPやWebページの見た目を整える
ファーストビューの印象を強くする
クリックされる導線をわかりやすくする
余計なカード、表、説明文を削る
情報の優先順位を整理する
見出し、説明文、ボタンの強弱をつける
文字サイズや余白を整える
色の使い方を調整する
カードやセクションの見た目を洗練させる
スマホ表示で崩れないように確認する
PC表示で見栄えが悪くないか確認する
「どこをクリックすればいいか」を明確にする
既存サイトの雰囲気を読み取って改善する
URLやスクショを見て、改善案を出す
実際のHTML/CSSに反映する
ローカルで表示確認する
必要ならVercelなどにデプロイする
そしてHallmarkの便利なところは、たった4つのコマンドでそれらをいい感じにやってくれるところ。
/build:サイトデザインを構築
まず1つ目の「build(ビルド)」は、ユーザー側の質問に答えていくだけで、最適なサイトデザインを構築してくれる機能です。ゼロからデザインを考えるのが苦手な方でも、対話形式で進められるのでとても使いやすい機能になっています。
/study:他のサイトから学ぶ
2つ目の「study(スタディ)」は、特定のサイトのスクリーンショットやURLを読み込ませる機能です。読み込んだサイトのデザインテーマや特徴をAIが自動で抽出し、似た雰囲気のデザインを見事に再現してくれます。気になるデザインのサイトを見つけたときに、そのエッセンスを自分のサイトに取り入れることができるので非常に便利ですよね。
/redesign:すでにあるサイトを再構築
3つ目の「redesign(リデザイン)」は、既存の文章やブランドのイメージを維持したまま、サイト構成を再構築してくれる機能です。今の雰囲気を残しつつ改善したいときに役立ちます。
/audit:監査レポートを作成する
そして4つ目の「audit(オーディット)」はAIのレポートを取得する機能です。デザイン・導線・表示崩れ・実装面のリスクを監査した上で、クリック動線や危険性などをレポートにしてくれるんです。
たとえばわたしの公式サイトについては以下のようなレポートを出してくれました。
Hallmark Audit
結論として、見た目と導線はかなり良い状態です。
https://www.umino-ai.com/
は Systeme ページ内で Vercel版を iframe 表示していて、Vercel側の最新版は読み込まれています。スマホ/PC幅でも横はみ出しはありませんでした。
指摘
P1: iframe構造でスクロール体験が少し不安定
www.umino-ai.com 側は Vercelページを height:100vh の iframe で表示しています。中身のLPは長いので、ブラウザ全体ではなく iframe 内をスクロールする形になります。
いま表示はできていますが、スマホで「ページ全体をスクロールしている感覚」とズレる可能性があります。該当: /tmp/umino-ai-home.html (line 166)
P2: CTAリンクがHTML直書きではなくJS後付け
ヒーローカードや無料講座カードは、HTML上では data-link だけで、JSが動いてから href が入ります。通常は問題ありませんが、JS失敗時はクリック先が消えます。
該当: index.html (line 1098), index.html (line 1506)
P2: index.html が約6MBで重い
写真やフォントがHTML内にbase64で埋め込まれていて、単一HTMLとしてはかなり大きいです。表示はできていますが、モバイル回線では初回読み込みが重くなりやすいです。
該当: index.html (line 1123)
P3: 削除済み要素のCSSが少し残っている
fcard-meta はHTMLから消えていますが、CSSだけ残っています。表示には影響なし。掃除対象です。
該当: index.html (line 607)
優先して直すなら、次は iframeのスクロール問題 と リンクのhref直書き化 です。
成果につながるコンバージョン視点でのデザイン改善
ここからは、実際にわたしがHallmarkを使って感じた利点についてお話しします。
先ほどご紹介した「redesign」というコマンドを自分のサイトに使ってみたところ、デザインの見栄えがだいぶ良くなりました。
そして驚いたのは、単に余白などの見た目を美しく整えるだけではなく、「そのサイトの目的をどう達成するか」という、コンバージョンや成果の視点をしっかりと持ってデザインを構築してくれた点です。
たとえばわたしのサイトの場合、「メルマガの無料講座に登録してもらう」という一番の目的を、サイトの構成からAIが自動的に汲み取ってくれたんです。これにはわたしも本当に驚かされました。
これまでのわたしのサイトでは、一番目立つ場所にメッセージ性の強い文章を配置していました。今思えば、どうでもいいメッセージですねw
しかし、Hallmarkによる改善後は「いかに無料講座への登録へつなげるか」を何よりも重視した、読者を迷わせない動線へと大きく変更されました。目的志向で改善案を提示してくれるのは、とてもありがたいです😊
一番クリックしてほしいものがファーストビューに入って、かつクリックするとちゃんとそこに飛ぶのが嬉しい。
デザインの質を上げたい方はもちろん、サイトの目的達成を加速させたい方にとって、Hallmarkはご自身の判断で試してみる価値が十分にあるツールだと思いました。
一応今回のスキルはCodexに内容をチェックさせていますが、ご自身の責任でインストールしてくださいね。
https://github.com/Nutlope/hallmark
最後までお読みくださりありがとうございました。
普段はnoteメンバーシップ「自動化オタクの頭の中(ジドオタ)」で、非エンジニアでも自動化・仕組み化を取り入れて自分の時間を作り出そう!をコンセプトにした発信をしています。
1100部以上販売した「Substackの教科書(4980円)」も、6月のジドオタ会員さんは100円で購入できます。(会員には甘いんです)
その他の特典はメンバーシップ掲示板で「6月の特典」をご覧ください。







index.htmlが6MBあって「重いけど表示はできてる」っていう監査結果に笑いました。それ多分自分のサイトでもやらかしてるやつです…!AIに「安全か確認して」まで頼めるの地味にすごいですね。今度Codexで自分のSubstackも一回audit投げてみます。
難しそうなことでも、やってみたい!を引き出してくれたり、わかりやすく教えてくれたり、しかもnote会員には甘いウミノさんが大好きです✨