はじめに：結論からお伝えします

AIで作ったWebページの「AIっぽさ」をなくすデザインスキル「hallmark（ホールマーク）」を、Claude Codeで試しました。

結論は次の2つです。

• もともときれいに作れるAI（Claude Opus 5.5）と比べると、見た目の差は小さいです。差が出たのは、営業時間や価格などの事実を勝手に作らないことと、予約フォームの不具合などを見つける「点検の深さ」でした。

• よくある「AIが作った感じ」のページを作り直すと、見た目が大きく変わりました。空白と丸いボタンばかりだったカフェのページが、森の写真と縦書きの見出しを使った、落ち着いたページになりました。

つまり、hallmarkは「一からきれいなページを作る道具」というより、「AIっぽいページを点検して、人が作ったようなページに直す道具」として効きます。無料で、コマンド1つで入れられます。

この記事では、架空のキャンプ場カフェ「喫茶ほとり」のページを題材に、実際に試した流れと結果をご紹介します。検証は2026年11月9日〜10日に行いました。

hallmarkとは？AIの「いつもの見た目」を避けるデザインスキル

hallmarkは、AIサービスの会社Together AIが公開したオープンソースのデザインスキルです。「スキル」とは、Claude CodeなどのAIに追加できる「仕事のやり方の手引き」のようなものです。

AIに「カフェのホームページを作って」と頼むと、どこかで見たようなページになりがちです。たとえば、見出しの上に小さな英字ラベルが付き、アイコン付きのカードが3つ並び、ボタンの角は丸くなります。hallmarkは、こうした「AIの癖」をルールとしてまとめ、作るときに避けたり、できたページを点検したりします。

出典：Hallmark - everydev.ai、Hallmark - aicoolies.com、creativeainews.com

入れ方はコマンド1つ

ターミナルで次のコマンドを実行すると入ります。最後の -g -a claude-code は「どのフォルダでも使えるように、Claude Code向けに入れる」という指定です。

npx skills add nutlope/hallmark -g -a claude-code

最初は指定を付けずに実行したのですが、入れるAIツールを選ぶ画面でスペースキーが検索欄に入力されてしまい、Claude Codeをうまく選べませんでした。はじめから指定を付けておくと迷いません。

インストール中の安全性チェックでは、パッケージの検査（Socket）は警告0件、脆弱性の検査（Snyk）は「低リスク」、AIによる判定だけが「中リスク」でした。中リスクの理由までは確認できていません。

検証1：hallmarkにカフェのページを作ってもらう

まずは、hallmarkに一からページを作ってもらいました。Claude Codeで /hallmark と打つと起動し、作る前に「何を作るか」「見せられる素材はあるか」「誰向けか」「何をしてほしいか」「雰囲気はどうしたいか」を聞いてきます。雰囲気については「クリーンでモダンは雰囲気として扱わない」と書かれていて、あいまいな指定を避ける作りです。

今回は次のように伝えました。

架空のカフェ「喫茶ほとり」（キャンプ場のカフェ）のLPを作って。
素材はなし。写真はHallmarkのライブラリの仮画像でOK。
対象者：遠方からやってくるキャンパー。落ち着いて過ごせる店を探している。
目的：席の予約。
トーン：editorial。雰囲気は「静か・木の温もり・紙・昼下がり・手書き感」。基調色はおまかせ。

できあがったのは、セピア色の写真と紙のような背景の、雑誌のようなページです。「テントをたたんだら、座っていって。」のように、キャンパーに向けた言葉を選んでいます。店主からの手紙の部分は縦書きで、文字には手書き風のフォントが使われていました。

作り方で目を引いた3つのこと

1. 店の情報を作らない：架空の店なので、営業時間や住所は【営業時間を記入】のような点線の空欄になっていました。予約フォームも、送信先がないうちは「送信されていません」と表示する作りです。

2. 写真の持ち主を書く：写真はライセンス付きで公開されているWikimedia Commonsのもので、撮影者とライセンスがページの一番下に自動で書かれます。

3. 別のAIにチェックさせる：最初の画面を作ったあと、作業の経緯を知らない別のAIにレビューさせていました。「写真の小屋が、閉まった冬の納屋に見える」など5つの指摘を受けて、写真をテントのものに差し替えるなど、すべて直しています。

ただし、完璧ではありませんでした。画面上部に浮いているメニューが、スクロールすると見出しに重なってしまう箇所があります。別のAIによるチェックでも、ここは見落とされていました。

検証2：hallmarkなしで作るとどうなる？

hallmarkの効果を確かめるために、同じ頼み方を、hallmarkを使わずにClaude Code（Claude Opus 5.5）に頼んでみました。hallmarkは「何か新しく作って」と頼むと自動で動くので、文頭に「Hallmarkスキルは使わずに」と書き添えています。

結果は、hallmarkなしでもかなり丁寧なページでした。縦書きの見出し、手描き風の地図、席ごとのイラストなど、見た目だけならこちらのほうが凝っていると感じる人もいると思います。今のClaudeは、hallmarkがなくても「いかにもAI」なページは作らないようです。

ただし、大きな違いが1つありました。

hallmarkなしのほうも、完成後の報告で「店の情報はすべて私が考えた仮のものです」と正直に書いていました。ただ、そのまま公開すると、事実と違う情報が載ったページになります。実際のお店のページをAIに作らせるなら、ここは大きな差です。

とはいえ、見た目の差が小さかったのも事実です。そこで次は、hallmarkの「点検」の機能を、このhallmarkなしのページに使ってみました。

検証3：hallmarkなしのページを点検して、仕上げてもらう

点検（audit）の結果は「不合格」

hallmarkなしで作ったページを、/hallmark audit index.html で点検しました。結果は「hallmarkの基準を通りません」で、自動検査だけで不合格16件、AIの癖の指摘が21件、警告が4件ありました。

人の目ではよく見えたページでも、点検すると次のような問題が見つかりました。

• 予約フォームが、実際にはどこにも送信していないのに「席を取っておきます」と完了したように表示する。お客さんが予約できたと思い込んでしまうので、一番重い問題とされていました。

• 画面の幅によって崩れる。幅1920pxでは絵が切れて余白ができ、1280pxでは手書き風のメモが絵に重なります。

• 「生成りの紙＋明朝体＋柿渋色」は、AIがよく選ぶ定番の組み合わせ。各セクションの頭に付いた「一　店のこと」のような番号付きのラベルも、AIの癖として指摘されていました。

もう1つ、面白いことがありました。ページを作ったAIは、最初に「パソコンとスマホの表示を確認しました」と報告していました。しかし点検の中で、「実際は幅1440pxでしか見ていませんでした」と自分から訂正しています。

仕上げ（redesign polish）で不合格18件→0件

点検結果にもとづいて、/hallmark redesign index.html polish で直してもらいました。polishは、配色や構成は変えずに細かい問題を直す、一番浅い直し方です。

直したあとには、直す前と後を並べた比較ページ（.hallmark/compare.html）も自動で作られます。作業中には、修正で自分が持ち込んだ問題（カップの絵が灰色になるなど）を別のAIのレビューで見つけて、直していました。

一番重いとされた予約フォームも、実際に入力して送信すると「まだ送信されていません。このフォームは受付先に接続する前の見本です。ご予約はお電話でお願いします。」と正直に表示されるようになりました。

ただし、仕上げは「見た目をほとんど変えない」モードなので、比較画像を並べても、言われないと気づかない程度の差でした。ここまでの率直な感想は、「なんかあんまりよくわからん結果でしたね」「どうも撮れ高がない気がする」です。

検証4：「よくあるAIのページ」を丸ごと作り直してもらう

比べる相手がきれいすぎたので、やり方を変えました。軽いAIモデル（Claude Haiku）に、雰囲気を指定せず「おまかせ」で頼んだページを、hallmarkで丸ごと作り直してもらいます。「普通の人が普通に頼んだらこうなる」というページを、直す前の状態にしたかったからです。

Hallmarkスキルは使わずに、普通に作って。
架空のカフェ「喫茶ほとり」（キャンプ場のカフェ）のLPを、index.html 1枚で作って。
目的は席の予約。デザインはおまかせ。

直す前：AIの癖がそろったページ

できあがったのは、まさに「AIが作った感じ」のページでした。

• 各セクションの見出しの上に、小さな英字ラベル（ABOUT、MENU、SEATSなど）が付く

• 見出しの一部だけ色を変える（「ひと息」だけオレンジ）

• アイコン付きのカードが3つ横に並ぶ

• 「人気No.1」などのバッジ付きの角丸カード、丸いボタン

• 地図は「地図（準備中）」の枠だけ

住所・電話番号・価格は、こちらも創作です。予約フォームは、送信すると「HT-20261109-9203」のような予約番号を表示しますが、実際にはどこにも送信していません。検証3でhallmarkが一番重いとした問題と同じです。

hallmarkは、作り直す前に3つ質問してくる

このページを /hallmark redesign index.html full で作り直します。fullは、構成やメニューまで作り直す一番深い直し方です。なお、hallmarkを動かすのはHaikuではなく、いつものClaude Opus 5.5にしました。Haikuのままだと、変化が「hallmarkの効果」なのか「モデルの差」なのか分からなくなるからです。

hallmarkはまずページを診断し、不合格20件、AIの癖の指摘が24件、警告9件を挙げました。さらに「ペット同伴はテラス席のみのはずなのに、他の席でも予約できてしまう」といった仕組みの不具合も見つけています。そのうえで、作り直す前に次の3つを質問してきました（質問は英語でした）。

1. 今の配色やフォントは、変えてはいけないブランドか

2. 今のページの何が嫌で、どんな雰囲気にしたいか

3. 見せられる写真はあるか

これには「配色もフォントも自由に変えてOK」「どこにでもあるAIっぽいカフェのLPに見えるのが嫌。山小屋のような静けさと、使い込んだ木の温かみがほしい」「写真はライブラリの仮画像でよい」と答えました。予約の仕組みの不具合は、今回はデザインの効果だけを見たいので、直さずに一覧で教えてもらうように頼んでいます。

直した後：同じ文章とは思えないページに

約14分で、次のページになりました。

文章はほとんどそのままです。変えたのは英字の小見出しの削除や時刻の表記などで、どこをどう変えたかを一覧で報告してくれます。元からあった「人気No.1」については、「事実と合っているか確認してください」と書いていました。

できあがったページを見たときの感想は、「ええ感じやわ、このサイト」でした。

気になるところもあります。店の紹介の写真が「かんな」など大工道具の写真だったり、丸太小屋の写真が手入れされていない小屋に見えたりします。「使い込んだ木」という言葉に引っぱられた選び方です。どちらも仮画像なので、実際に使うときはお店の写真に差し替える前提です。hallmark自身も、「一番効くのは、薪ストーブの席の実際の写真です」と写真の差し替えを勧めていました。

試して分かったこと

4つの検証をまとめると、次のようになります。

hallmarkの一番の価値は、「きれいに作ること」より「はっきりした基準で点検して直すこと」だと感じました。どこがどういう理由で「AIっぽい」のかを、番号付きで示してくれます。直したあとは、文章やリンクが消えていないかも数えて報告してくれます。

こんな人に向いています

• AIで作ったホームページが「どこかで見た感じ」になって困っている人

• 公開前に、予約フォームやスマホ表示に問題がないか点検したい人

• Claude CodeやCursorをすでに使っている人（入れるのはコマンド1つです）

注意したいこと

• 写真は仮のもの：ライブラリの写真は雰囲気に合わせて選ばれますが、内容がお店と合わないことがあります。公開するなら、実際の写真への差し替えが前提です。

• 仕組みの不具合は別で直す：予約のルールの不具合（当日予約できてしまう、定員を確かめていないなど）は、今回のように頼むと一覧にしてくれますが、デザインの作り直しとは別に直す必要があります。

• 時間と利用料：hallmark自体は無料ですが、点検や作り直しには10分以上かかり、その分のAIの利用料は使っているAIツール側でかかります。

• 途中の質問や報告が英語になることがある：「日本語で答えて」と一言添えると、日本語でやりとりできました。

よくある質問

hallmarkは無料で使えますか？

はい。MITライセンスのオープンソースで、APIキーも不要です。ただし、動かすAIツール（Claude Codeなど）の利用料は別にかかります。

プログラミングが分からなくても使えますか？

入れるのはコマンド1つで、使うときも /hallmark audit index.html のように打つだけです。ただし、Claude CodeなどのAIツールをターミナルで使える状態にしておく必要があります。

すでにあるサイトにも使えますか？

使えます。点検だけなら audit、見た目を変えずに細かく直すなら redesign polish、丸ごと作り直すなら redesign full を使います。直す前のファイルは控えておいてくれますが、一時フォルダに置かれるので、必要なら自分でコピーしておくと安心です。

hallmarkを使えばAIっぽさは完全になくなりますか？

今回の検証では、作り直し後も「写真の代わりのイラスト」などが指摘として残りました。最後に人の目で確かめ、実際の写真や正しい店の情報に差し替えることは必要です。

まとめ

hallmarkは、AIで作ったページを「どこかで見た感じ」から卒業させるための、点検と作り直しの道具でした。きれいに作れるAIと比べると見た目の差は小さい一方で、よくあるAI製のページは大きく変わり、事実を創作しない姿勢と点検の細かさはどの場合でも役に立ちます。AIでホームページを作っている方は、公開前の点検として試してみてください。

参考

• Hallmark - everydev.ai

• Hallmark - aicoolies.com

• Hallmark: anti-AI-slop design skill - creativeainews.com

• Hallmark - DEV Community