AI生成サイトが全部同じ問題｜hallmarkで脱テンプレ感
Claude CodeでLPやコーポレートサイトを作ってみて、「悪くないんだけど、どこかで見たことのあるサイトに仕上がる」と感じたことはないでしょうか。フォントが似ている、配色が似ている、セクションの順番まで似ている。AIで作ったサイトは、なぜ全部同じ顔に見えるのか。この記事では、その構造的な原因を整理した上で、2026年に急速に注目されている hallmark（Together AI 関連メンテナンスの anti-AI-slop デザインスキル）を中心に、Claude Code で「テンプレ感」を消すための実務的な処方箋をまとめます。
株式会社Fyveは中小企業向けにAI業務効率化と Web サイト制作を提供しており、Claude Code を使った受託開発を日常的に行っています。私たち自身がコーポレートサイトや業種特化LPを Claude Code で構築している立場から、「AIに任せても凡庸にならないサイト制作」をどう設計するか、現場目線で解説します。
AIで作ったサイトが全部同じに見える、という構造的な問題
Claude Code、Cursor、v0、Lovable、bolt.net など、AIにサイトを一気に作らせる環境が普及しました。生産性は劇的に上がった一方で、「出来上がりがどこかで見たことのある顔をしている」という違和感が同時に広がっています。これは個別の AI ツールの欠陥ではなく、LLM がコードを生成する仕組みそのものに由来する構造的な問題です。
「mode collapse」と呼ばれる現象
研究者やデザイナーは、この現象を mode collapse（モード崩壊） と呼びます。生成モデルは「もっともらしい出力」を優先するため、学習データの中央値に収束していきます。Web デザインの文脈では、Tailwind のランディングページ、shadcn/ui のコンポーネント、Inter や Geist などのフォントが学習データに大量に含まれているため、AIは無意識のうちにそれらを「無難な正解」として再生産してしまうのです。
具体的には次のようなパターンに集約されます。
- マクロ構造の固定化: hero → 3 features → CTA → footer の決まり切ったセクション順序
- フォントの偏り: Inter / Geist / Satoshi など数種類への収束
- 配色の中庸化: zinc / slate / neutral の無難なグレースケール + 紫からブルーのグラデーション
- 同じコンポーネント語彙: 角丸カード、フカフカのボタン、影付きの hero、機能を3つ並べた特徴セクション
- 「fabricated copy」: 「+47% コンバージョン」「導入企業 50,000社」など根拠のない実績風コピー
結果として、別のブリーフから生成された2つのサイトが「色違いのテンプレート」にしか見えない、という事態が頻発します。生成AI業界では、この一連の現象を AI slop（AI生成のスロップ＝凡庸な使い回し） と総称するようになっています。
2025〜2026年に起きている anti-AI-slop ムーブメント
この問題意識から、anti-AI-slop と呼ばれるムーブメントが立ち上がっています。Anthropic 公式の frontend-design スキルや Claude cookbook on frontend aesthetics、サードパーティでは impeccable、kami、taste-skill といった「AI に美意識を渡す」ための取り組みが相次いで公開されました。さらに「デジタルがツルツルしすぎ」という反動から、テクスチャや物理感を取り戻す tactile rebellion という潮流まで生まれています。
そのなかでも、2026年に入って急速に注目されているのが hallmark です。
hallmark とは何か｜「Made, Not Generated」を掲げるデザインスキル
基本情報
hallmark は、Claude Code / Cursor / Codex などの AI コーディングアシスタント向けに作られた anti-AI-slop デザインスキル です。GitHub の Nutlope/hallmark リポジトリで MIT ライセンスで公開されており、Together AI と連携してメンテナンスされています。ライブショーケースは usehallmark.com で、22 のテーマを T キーで切り替えながら確認できます。
Anthropic 純正のスキルではなく、第三者によるオープンソースのスキルである点が特徴です。Claude Code の skills の仕組みが整備されたことで、こうした「外部からデザイン規律を注入する」アプローチが現実的に運用できるようになりました。
核心コンセプト: 構造の多様性を強制する
hallmark の公式の自己紹介はとても短く、こう書かれています。
- A design skill for AI coding assistants.
- Makes the UIs they generate look made, not generated.
- Hallmark is opinionated, short, and boring on purpose.
キーフレーズは「Made, Not Generated（作られたものに見せる、生成されたものではなく）」。色やフォントだけを変える「視覚的バリエーション」ではなく、ページの骨格・セクション順序・コンポーネントの語彙そのものを毎回変える structural variety（構造的多様性） を強制する点が、他のデザインスキルとの決定的な違いです。
4つの普遍規律
hallmark には全モード共通の4つの普遍規律があります。
- Pre-emit self-critique: 出力前に Philosophy / Hierarchy / Execution / Specificity / Restraint / Variety の6軸を1〜5で自己採点する。3未満なら作り直し。アーティファクトの先頭にスコアを刻印する
- Honest copy — no fabricated content: 「+47% conversion」「trusted by 50,000+ teams」などの実体のない数字を絶対に書かない。プレースホルダーで止めるか、別の構造に切り替える
- Locked tokens — no mid-render improvisation: テーマ選定後は
var(--color-accent)のような名前付きトークンのみを使い、インラインで OKLCH / hex / rgb() を書くことを禁止 - Re-drawn chrome forbidden: 偽のブラウザバー、電話フレーム、コードブロック窓、IDE 風 chrome を勝手に描画しない。ユーザーの環境がすでに本物を提供しているため
さらにレスポンシブ対応も 非交渉のハードフロア として組み込まれており、320 / 375 / 414 / 768px すべてでの動作検証が義務付けられています。横スクロール禁止、2行のクリック可能テキスト禁止、画像を含むグリッドは minmax(0, 1fr) 必須など、モバイル崩れを構造から防ぐルールが厳密です。
hallmark の4モードを実務でどう使い分けるか
hallmark の最大の特徴は、デザインの場面を 4つの動詞（モード） に分解している点です。Claude Code から呼び出すときは、それぞれの動詞に合わせた指示を出します。
1. default（新規ページ・アプリの生成）
もっとも基本のモード。「コマンドを付けない」状態で発火する、新規ページ生成のフローです。22 のテーマカタログから1つを選択し、回転（rotate）させることで連続して作ったページが似た顔にならないようにします。ユーザーがブランド色を指定したり、複数属性の vibe を指定した場合は「カスタムテーマ」分岐に切り替わります。
Claude Code への頼み方の例:
- 「hallmark を使って、介護施設向けの採用ランディングページを作って。読者は40代の主婦層」
- 「hallmark の default モードで、税理士事務所のコーポレートサイトのトップページを設計して」
細かいテーマ選定は hallmark 側に任せ、ブリーフ（誰向け・何のページ・トーン）だけを明確に渡すのがコツです。
2. audit（既存ページの採点・チェック）
hallmark audit <target> で起動するモード。既存ページを anti-pattern リストに照らして採点し、改善 punch list を返してくれます。このモードはコードを編集しません。診断専用です。
hallmark の audit が強力なのは、65 ものスロップ判定ゲートでチェックが行われる点です。タイポグラフィのキャップ、フォーカスリングの有無、APCA/WCAG コントラスト、ナビ・フッター・ヒーローの指紋（fingerprint）、honest-copy ルール、レイアウト安全性。1つでも落ちると「出荷不可」扱いになります。
Claude Code への頼み方の例:
- 「うちの既存トップページに hallmark audit をかけて、anti-pattern を一覧化して」
- 「現状のサイトのスロップ判定結果と、優先度付きの修正リストを出して」
3. redesign（既存実装の境界内で視覚層だけ作り直す）
hallmark redesign <target> [--mood <name>] で起動するモード。ルート構成・コンポーネント所有・コピーの意図・ブランド・情報設計（IA）はすべて保持したまま、視覚層のみを再設計します。「サイトの骨は変えたくないが、AI 製の顔つきを消したい」というニーズに最適です。
安全レールも明示されていて、ユーザーの明示的な承認なしには既存の production ファイルやルートツリー、コンポーネントディレクトリ、過去のサイトを削除しないことが規約として定められています。複数コンポーネントの削除が必要になる場合は事前確認を取る、というルールも組み込まれています。
4. study（参考デザインから DNA を抽出）
hallmark study <screenshot|URL> で起動するモード。参考にしたいデザインのスクリーンショットや URL を渡すと、その デザインDNA（macrostructure / archetypes / type-pairing / colour anchor） を抽出して診断レポートを作り、最終的に design.md として書き出してくれます。
このモードは「センスのある誰かの設計を、AIに学習させる」操作です。後の default モードや redesign モードで、抽出した DNA を参照させることで、「あのサイトみたいに作って」をかなり高い精度で実現できます。
中小企業のサイト制作にどう活きるか
ここまでは hallmark の機能解説でした。ここからは、中小企業のサイト制作という現場で、これがどう実務的に効くのかを整理します。
1. 業種特化LPの量産で「テンプレ感」を消せる
私たちはこれまで、複数の業種特化LP（介護、建設、保育園、補助金、クリニック等）を Claude Code で作ってきました。テンプレートの共通基盤を持っているため生産性は高い一方で、注意しないと「業種が違うだけで構造が同じLP」が量産されてしまうリスクがあります。
hallmark の default モードと 22 テーマの rotate ルールは、まさにこのリスクへの処方箋になります。同じ会社が同時期に複数LPを公開しても、構造から異なるページとして仕上がるため、ブランド全体の「AI製感」を構造的に消せます。
2. 既存サイトの全面リニューアルではなく、段階的な改善が可能
中小企業のサイトは「全面作り直し」の予算を取れないケースが大半です。ここで活きるのが audit と redesign の組み合わせです。
- まず audit で現状サイトの問題点を採点・一覧化する(編集は走らないので破壊リスクなし)
- punch list を見て、優先度の高い改善箇所だけ redesign で視覚層を作り直す
- 情報設計やコピーは触らないので、SEO 評価や運用フローへの影響を最小化できる
「半額予算で半分のインパクト」を実現する、現実的な段階改善アプローチです。
3. 参考サイトの「真似」が構造的にできるようになる
クライアントから「あの会社のサイトみたいにしてほしい」という依頼は日常的に発生します。これまでは制作側の感覚で再現していましたが、study モードを挟むことで、参考サイトの DNA を design.md として明示化してから制作に入ることが可能になりました。判断の根拠が言語化されるため、クライアントとのすり合わせも明確に進みます。
4. デザイン規律を「ファイルとして残せる」
hallmark のもう一つの価値は、ルールセットがすべて SKILL.md と references/ 配下の30以上の md ファイルとして公開されている点です。anti-patterns、color、component-cookbook、copy、custom-craft、custom-theme、design-md、export-formats、floating-nav、genres、hero-enrichment、imagery-kit、interaction-and-states、layout-and-space、macrostructures、microinteractions、motion、preview-examples、responsive、slop-test、structure、study、typography、verbs。
これらを参照ファイルとして自社のプロジェクトに組み込めば、デザイン判断の規律が「人の頭の中」ではなく「リポジトリ内のドキュメント」として残ります。担当者が変わっても、AIに任せても、同じ品質基準で出力が続く状態が作れます。
hallmark を使うときの注意点
hallmark は強力ですが、運用にあたって押さえておくべき注意点もあります。
1. オープンソース・サードパーティ製であること
hallmark は Anthropic 純正のスキルではありません。MIT ライセンスで公開されているオープンソースのスキルです。サポート保証はなく、本番案件で使う前にプロジェクト方針・セキュリティ要件と照合する必要があります。社外秘の情報を扱う場合は、SKILL.md と references の中身を一度通読してからの導入を推奨します。
2. 「使えば誰でも上手くいく」ものではない
hallmark は規律を強制するスキルですが、ブリーフ（誰向けに何を作るか）が曖昧だと、出力もブレます。ユーザー像、解決したい課題、コンバージョン目標などの言語化は依然として人間の役割です。AIに丸投げするためのスキルではなく、「人間の意思決定を AI の出力に確実に反映させるための土台」と捉えるのが正確です。
3. 既存プロジェクトでは破壊的変更に注意
hallmark の安全レールは明示されていますが、redesign を走らせる前には「modify / create / delete 予定のファイル一覧」が出力されるので、必ず内容を確認してから進めてください。複数コンポーネント削除を伴う変更は、Git でブランチを切ってから実行するのが安全です。
まとめ｜AI生成サイトを「AIっぽくない」に変える、現実的な処方箋
AIで作ったサイトが全部同じに見える問題は、特定のツールの欠陥ではなく、LLM の学習データバイアスが生み出す構造的な現象です。だからこそ、フォントや色を一段階こだわって変えるだけでは解決しません。ページの骨格・セクション順序・コンポーネントの語彙 という、構造の階層に介入する仕組みが必要になります。
hallmark はその仕組みを「Claude Code から呼び出せる skill」として実装した、現時点で最も完成度の高い anti-AI-slop ツールの一つです。新規生成（default）、診断（audit）、視覚刷新（redesign）、参考抽出（study）の4モードに分かれており、中小企業のサイト制作の実務にもそのまま組み込めます。
私たちは、AI に任せる範囲を広げながらも、出てくる成果物の質を上げ続ける必要があります。スピードと差別化の両立を実現するための「規律」を、ドキュメントとして外部から注入する。hallmark のような skill の登場は、その方向性を後押しする現実的な選択肢として、今後ますます重要になっていくはずです。
Claude Code 関連の Skills 設計や運用ノウハウについては、こちらの記事もあわせてどうぞ。
「Claude Code を自分で使いこなしたい」「自社の業務に組み込みたい」
── そんな方は、まず初回無料相談でお話ししてみませんか。
御社の業務に合わせたClaude Code導入支援
「AIツールを導入したが、現場で使われない」を終わらせる。
業務課題のヒアリングから設計、ハンズオン実践、運用定着まで一貫して支援します。