project-design

プロジェクトデザインスキル

プロダクション品質で、視覚的に際立つ Web インターフェースを生成します。すべてのページは、AI によって生成されたのではなく、プロのデザイナーによって設計されたように見える必要があります。

使用する場面

このスキルは、視覚的な Web 出力 — ダッシュボード、ランディングページ、Web アプリ、ツール、ポートフォリオ、その他あらゆるページ種別 — のために HTML/CSS/JS を生成するたびに適用されます。

参照ファイル

ファイル	読むタイミング
references/aesthetics.md	カラーパレットの構築、タイポグラフィの選択、レイアウトの設計 — デザイン上の判断を下すための方法論
references/components.md	UI コンポーネントの構築 — ナビゲーション、カード、テーブル、ボタン、フォーム、ヒーローセクション、CTA
references/animations.md	モーションの追加 — スクロールリビール、ホバーエフェクト、モーダル、ドロワー、ページ読み込みシーケンス
references/charts.md	チャートの作成 — Chart.js/ECharts のセットアップ、チャート種別の選択、モックデータの生成、ダッシュボードレイアウト

---

優先順位の上書き: ユーザー設定が最優先

ユーザー（またはブリーフ）が何らかのデザイン上の好みを明示した場合、その好みは対応する Design Dial の結果を上書きします。優先順位は次のとおりです。

1. ユーザー指定の設定（最優先） — 「ダークモードを使って」「青にして」「Playfair Display フォントを使って」「ミニマリストなスタイルがいい」といった明示的な要望
2. Design Read による推論 — ブリーフの内容と文脈から推測されるシグナル
3. Design Dials（最低優先） — 時間ベースのランダム選択。ユーザーが指定しなかった次元にのみ使用されます

実際の動作:

• ユーザーが「ダークなポートフォリオを作って」と言う → Surface はダークに固定され、Surface ダイヤルはスキップされます。他のダイヤル（Accent、Typography、Family）は引き続きランダムに回転します。
• ユーザーが「緑とセリフフォントを使って」と言う → Accent は Green に固定され、Typography は Serif に固定されます。Surface と Family は引き続きランダムに回転します。
• ユーザーがデザインについて何も言わない → 4 つのダイヤルすべてがランダムに回転します（デフォルトの動作）。
• ユーザーが「Apple のウェブサイトみたいにして」と言う → これは完全なデザイン方向性です。すべてのダイヤルをスキップし、そのリファレンスから美的感覚を推論します。

ユーザーの好みに決して反論しないでください。 クリーム色の背景に紫のグラデーションを望むなら、それをうまく仕上げてください。ユーザーによる上書きは Design Dials の出力行に記録します。

Design Dials: Surface=USER(Dark) · Accent=3(Orange, #e87040) · Type=USER(Serif) · Family=2(Editorial) → Playfair Display

---

ステップ 0: Design Read（必須）

コードを書く前に、ブリーフを静かに分析し、1 行の Design Read を出力します。

Design Read: [ページ種別] · [オーディエンス] · [雰囲気を表す単語] · [美的ファミリー] · [ライト/ダーク/着色]

各シグナルの推論方法:

シグナル	情報源	例
ページ種別	ブリーフに明記、または内容から推論	SaaS ダッシュボード、エディトリアルブログ、開発ツール、ポートフォリオ
オーディエンス	誰がこれを使うのか？	エンタープライズの購買担当者、インディー開発者、Z 世代の消費者
雰囲気	感情的なトーンを捉えた 1 語	クリニカル、遊び心、禁欲的、温かい、生々しい、ラグジュアリー
美的ファミリー	これが属するデザインの伝統	スイス/インターナショナル、ネオ・ブルータリスト、エディトリアル、ソフトテック、インダストリアル
サーフェス	ライト、ダーク、または着色された背景	青みがかったダーク、温かみのあるオフホワイト、純白

Design Read は、その後のすべての判断の基点となります。2 つの選択が衝突する場合、Design Read が優先されます。

---

ステップ 0.5: シーン文 (暗い/色付きのサーフェスでは必須)

サーフェスダイヤル (ステップ 1) で暗い方向または色付きの方向 (インデックス 5 または 6) を選択した場合、色を選ぶ前に必ずシーン文を書く必要があります。これにより、暗いパレットが汎用的なブルーブラックにデフォルトするのではなく、物理的な環境に固定されます。

シーン: [誰が] がこの [どこで] を使っている、[どのような照明] の下で、[どのような気分] で

例:

• 「ポートフォリオマネージャーがマットブラックのスタンディングデスクでポジションを確認している、デスクランプが一つ、集中して警戒している」
• 「音楽プロデューサーが紫の LED ストリップがある薄暗いスタジオで、創造的に没頭している」
• 「研究者が夕暮れの大学図書館で、暖かい頭上照明の下、思索にふけっている」
• 「バーテンダーがウォールナットのバーの裏でタブレットを使って在庫を確認している、琥珀色のペンダントライト、ゆったりとした様子」
• 「建築家がコンクリートのロフトで設計図を確認している、床から天井までの窓から差し込む曇天の日光、精密な様子」

シーン文が暗いサーフェスの色合いを決定します:

• 紫の LED があるスタジオ → 深い紫の色合い、ブルーブラックではない
• 夕暮れの図書館 → 暖かいチャコール、ブルーブラックではない
• デスクランプがあるスタンディングデスク → 暖かいアクセントを持つニュートラルなほぼ黒
• 琥珀色の照明があるウォールナットのバー → 暖かいブラウンブラック
• 日光が差し込むコンクリートのロフト → クールグレー、ブルーブラックではない

禁止されるデフォルトシーン: 「暗い部屋の開発者のモニター」 — これは毎回同じブルーブラックを生み出す AI のデフォルトシーンです。具体的で多様にしてください。

シーンから色合いへの完全なマッピング表については、references/aesthetics.md の § Dark Surface Tint Guide を参照してください。

---

ステップ 1: デザインダイヤルを回す (必須)

あなたは以前の生成に関する記憶を持たず、チェックしなければ毎回同じダークブルーのカードレイアウトに収束してしまいます。これを防ぐために、コードを書く前に必ず 4 つの独立したダイヤルを回さなければなりません。これらのダイヤルは方向性を制約しますが、その方向性の中で完全な創造的自由を残します。

回し方

現在の UTC 時刻を取得し、4 つのインデックスを計算します:

dial_A = UTC_minute mod 8                → Surface
dial_B = (UTC_minute + 3) mod 7          → Accent Hue
dial_C = (UTC_hour) mod 6               → Typography
dial_D = (UTC_hour + UTC_minute) mod 12  → Aesthetic Family

ダイヤル A: サーフェス (mod 8)

インデックス	方向	説明
0	暖かいライト	暖かいアンダートーンを持つオフホワイト (クリームに近いが、汎用的なクリームではない — 個性を加える)。明るいカード、暗いテキスト。
1	クールライト	白または青みがかった白。鮮明で、クリーンで、軽やか。汎用的ではなく北極をイメージ。
2	ピュアホワイト	クリーンな #ffffff または #fafafa。最大のコントラスト、色合いなし。タイポグラフィとアクセントに仕事をさせる。
3	色付きライト	微妙な色合いを持つ明るい背景 — 淡いセージ、ラベンダーウォッシュ、ソフトピーチ、アイスブルー。白でもクリームでもない。
4	カラーポップ付きライト	白/明るいベースに 1 つの大胆な色付きセクションまたは要素 (色付きヒーロー、色付きサイドバー、色付きフッター)。ほとんどが明るい。
5	色付きダーク	青以外の色合いを持つ暗い背景 — 深い緑、ワイン、チャコールブラウン、濃い紫、またはスレートオリーブを試す。AI がいつも選ぶ #0a-#0f のブルーブラックではない。シーン文を使って色合いを固定する。
6	ニュートラルダーク	真の暗さ — 色合いのないほぼ黒。ピュアな #111 または #0f0f0f。モノクロームのサーフェス、アクセントに語らせる。シーン文を使用。
7	ミックス	明るいヘッダー/ヒーロー + 暗いコンテンツエリア、または明暗のセクションが交互に。ツートーンのページ。

ダイヤル B: アクセント色相 (mod 7)

インデックス	色相ファミリー	推奨範囲 (独自の具体的な色合いを選ぶ)
0	暖かい赤	ヴァーミリオン、テラコッタ、ラスト、レンガ — 汎用的な #ef4444 ではない
1	ゴールド / アンバー	マリーゴールド、ハニー、サフラン、ブラス — 暖かく豊か
2	緑	セージ、オリーブ、エメラルド、ライム、ミント — 1 つ選ぶ、ティールではない
3	オレンジ / コーラル	タンジェリン、ピーチ、サーモン、バーントオレンジ
4	ピンク / マゼンタ	ローズ、フクシア、ホットピンク、ダスティピンク — 大胆または落ち着いた
5	バイオレット / 紫	ラベンダー、グレープ、プラム、エレクトリックパープル — 完全に自分のものにする
6	クールブルー	コバルト、セルリアン、スカイ、スチール — ただし汎用的な #3b82f6 や #6366f1 ではない

ダイヤル C: タイポグラフィ（mod 6）

インデックス	ムード	フォント例（1つだけ選択 — これらは提案であり、唯一の選択肢ではありません）
0	セリフ	Libre Baskerville、Newsreader、Lora、Playfair Display、Cormorant Garamond、Source Serif 4
1	ジオメトリックサンセリフ	Instrument Sans、Geist、Sora、Urbanist、Figtree、Albert Sans
2	ヒューマニストサンセリフ	IBM Plex Sans、Nunito Sans、Atkinson Hyperlegible、Lexend
3	等幅	JetBrains Mono、Space Mono、IBM Plex Mono、Fira Code
4	ディスプレイ / 装飾	Fraunces、Bricolage Grotesque、Clash Display、Cabinet Grotesk
5	スラブ / メカニカル	Roboto Slab、Zilla Slab、Bitter、Arvo

ダイヤル D: 美的ファミリー（mod 12）

インデックス	ファミリー	サーフェスの傾向	タイポグラフィ	アクセントスタイル	レイアウト
0	スイス/インターナショナル	純白またはライトグレー	ジオメトリックサンセリフ	単一の彩度の高い色、控えめ	12列グリッド、厳密な整列
1	ネオブルータリスト	白または明るい色	システム等幅またはボールドサンセリフ	黒 + 1つの強烈な色	崩したグリッド、太いボーダー
2	エディトリアル/マガジン	オフホワイト（クリームではない）	セリフディスプレイ + サンセリフ本文	落ち着いた、エディトリアル	非対称、ゆとりある余白
3	ソフトテック	淡く色づいたライト	ラウンドサンセリフ	パステルグラデーション	角丸カード、柔らかい影
4	インダストリアル/実用主義	ほぼ黒またはコンクリートグレー	等幅	単一のネオンまたは警告色	高密度グリッド、装飾なし
5	アールデコ/ジオメトリック	深い色（ネイビー、フォレスト）	ディスプレイセリフまたはジオメトリックサンセリフ	ゴールド、ブラス	対称、幾何学模様
6	オーガニック/ナチュラル	アースカラー	ヒューマニストサンセリフ	温かみのある、自然な	流れるような、不規則な形状
7	レトロフューチャリスティック	色味を帯びたダーク	ディスプレイサンセリフまたはピクセルフォント	ネオン、ホログラフィック	非対称、レイヤード
8	ミニマリスト/禅	純白、最大限の余白	細いサンセリフ（ウェイト300-400）	単一の落ち着いたトーン、ごく控えめ	極端な余白、要素は少数
9	データ高密度/ミッションコントロール	ダークまたはニュートラル	等幅 + コンデンスドサンセリフ	ステータスカラー（緑/アンバー/赤）	マルチパネル、高密度グリッド、無駄のない空間
10	プレイフル/トイライク	明るい、彩度の高い背景	丸みのある/弾むようなサンセリフ	複数のボールドカラー	不規則、重なり合う、回転した要素
11	ラグジュアリー/洗練	深い黒またはダークカラー	細いセリフまたはエレガントなサンセリフ	メタリック（ゴールド、シルバー、カッパー）	ゆとりある間隔、最小限の要素、大きな文字

注: 美的ファミリーは傾向であり、厳密な制約ではありません。全体的なデザイン言語を導きますが、サーフェス/アクセント/タイポグラフィの各ダイヤルは、それぞれの特定の次元において優先されます。ファミリーはレイアウトの決定、間隔のリズム、ボーダーの処理、全体的な視覚言語に活用してください。

スピンを出力する

コードを書く前に、次を出力してください:

Design Dials: Surface=index · Accent=index · Type=index · Family=index → [specific font choice]

例:

Design Dials: Surface=2(Tinted Dark, wine) · Accent=1(Gold, #d4a030) · Type=0(Serif) · Family=5(Art Deco/Geometric) → Libre Baskerville

ルール

• ダイヤルに従ってください。 別の組み合わせのほうが「安全に感じる」からといって、それを上書きしないでください。
• 方向性の範囲内での創作の自由。 ダイヤルは方向性（例:「暖色系の明るいサーフェス + ゴールドのアクセント + セリフ体 + アールデコ系」）を設定しますが、具体的な色合い、余白、レイアウト、アニメーション、コンポーネントのスタイルはあなたが選びます。
• レイアウトはダイヤルの対象外です — コンテンツの種類に最適なレイアウトを選んでください（ダッシュボードならサイドバー、ランディングページなら全幅、複数指標のビューならベントーなど）。美的ファミリーはレイアウトのスタイル（例: 厳格なグリッドか崩したグリッドか）には影響しますが、レイアウトの種類には影響しません。
• ダイヤルは 8×7×6×12 = 4032 通りの組み合わせを生み出します。 これは意図的なものです — 連続して生成しても劇的に異なって見えるだけの多様性があります。
• 暖色系の明るいサーフェス上にセリフ体でオーガニック/ナチュラル系ファミリーの暗号資産ダッシュボードは、意図的に型破りです — そこがポイントです。それを積極的に受け入れてください。

---

ステップ 2: クラフトを持って構築する

以下を満たす、動作する HTML/CSS/JS を実装してください:

• プロダクション品質: クリーンでセマンティックな HTML。カスタムプロパティで整理された CSS。機能する JS。
• 視覚的に印象的: 一般的なテンプレートではなく、明確な美的視点。
• 一貫性: タイポグラフィ、色、余白、モーションなど、すべての要素が同じデザイン方向に寄与している。
• レスポンシブ: 375px のモバイル幅で動作する。優雅にスタックする。

必須要素（テンプレートではなく — 毎回新しく実装してください）

生成されるすべてのページに以下を含める必要があります:

1. 適切な DOCTYPE、charset、viewport メタ
2. preconnect を伴う <link> 経由で読み込まれる Google Fonts
3. :root でセマンティックな CSS カスタムプロパティとして定義されたすべての色
4. アニメーションを無効化する prefers-reduced-motion メディアクエリ
5. ボックスサイジングのリセットとフォントスムージング
6. 入場アニメーション戦略（プロジェクトごとに 1 つ選択し、プロジェクト間で変化させる）:
   • スクロールリビール — IntersectionObserver がビューポートへの進入時にフェード/スライドをトリガーする
   • ページロードスタッガー — 初回ロード時に要素が順番にアニメーションし、スクロールに依存しない
   • 状態駆動型トランジション — スクロール位置ではなく、ユーザー操作によって駆動される状態間（折りたたみ→展開、非表示→表示）で要素が遷移する
7. ライト/ダークテーマのトグル（必須）— すべてのページがトグルボタンでライトテーマとダークテーマの両方をサポートする必要があります:
   • すべての色を :root（ライトテーマ）と [data-theme="dark"]（ダークテーマ）で CSS カスタムプロパティとして定義する
   • ページヘッダーまたはナビゲーションにトグルボタン（太陽/月アイコン）を追加する
   • prefers-color-scheme: dark でシステム設定を検出し、初期デフォルトとする
   • ユーザー設定を localStorage に保存し、ページの再読み込み後も維持されるようにする
   • サーフェスダイヤルがデフォルト/プライマリテーマの方向性を決定しますが、もう一方のテーマも完全にデザインする必要があります
   • 実装の詳細については、以下のテーマサポートセクションを参照してください

固定の HTML スケルトンをコピーしないでください。コンテンツに合わせてドキュメントを構造化してください。

---

デザインルール

タイポグラフィ

• Google Fonts の <link>（または Google Fonts にないフォントは CDN）でフォントを読み込みます。常に 2 つ以上のウェイトを読み込んでください。
• これらをメインフォントとして絶対に使用しないでください — これらは AI のデフォルトまたは AI のアンチデフォルトの定番です：
  • AI のデフォルト：Inter、Roboto、Arial、Open Sans、Helvetica
  • AI のアンチデフォルト（デフォルトを避けるように指示されたときに AI が選ぶフォント）：Space Grotesk、DM Sans、Outfit、Plus Jakarta Sans、Manrope
  • AI お気に入りのセリフ（デフォルトとして禁止）：Fraunces、Instrument Serif — LLM が最も好むディスプレイ用セリフの 2 つ
• Style Preset がフォントを指定している場合は、そのフォントを使用してください。プリセットのフォントは、個性的で多様になるように選ばれています。
• セリフの規律：セリフはどのプロジェクトでもデフォルトとしては非推奨です。「クリエイティブ／プレミアム／エディトリアルに感じる」ことはセリフを選ぶ理由にはなりません — これは最もよくある AI の痕跡です。セリフが許容されるのは次の場合のみです：(a) ブランドブリーフが文字通りセリフフォントを指定している、または (b) 美的ファミリーが真にエディトリアル／ラグジュアリー／出版向けであり、この特定のセリフがこの特定のブランドに合う理由を説明できる場合。それ以外はすべて、デフォルトでサンセリフのディスプレイフォントを使用してください。
• 1 ページにつき最大 2 つのフォントファミリー。適切に調整された 1 つのファミリーとウェイトのコントラストが、競合する 2 つの書体より通常は優れています。
• 本文：最小 16px、行の高さ 1.4～1.6（実際の範囲：Apple 1.47、Stripe 1.4、Notion 1.55）、最大幅 65ch。一部のブランドは本文に微妙な正のトラッキングを加えています：IBM +0.16px、ElevenLabs +0.15～0.18px — プロフェッショナルと汎用品を分ける精密なディテールです。
• 見出し：レスポンシブなサイズ設定には clamp() を使用します。ディスプレイテキストには負のレタースペーシングを使用してください — 主要ブランドの 85% がディスプレイサイズで負のトラッキングを使用しています（Apple -0.28px、Vercel -2.4px、Linear -3px、Stripe -1.4px、Intercom -2.0px、Miro -2.0px、MiniMax -2.0px、Revolut -2.72px@136px）。AI はレタースペーシングを完全に省略する傾向があります。例外：SpaceX はエンジニアリング的／工業的な印象のために +1.6px の正のトラッキングを使用しています。
• フォントウェイトの多様性：すべての見出しを 600～700 にするのをデフォルトにしないでください。主要ブランド 73 社のうち、ディスプレイのウェイト 400～500 が最も一般的な範囲です（約 45%）。IBM と ElevenLabs は 300（ウルトラライト）、Shopify は 330、Ferrari は 500、Runway は 400 を使用しています。ディスプレイに 700 以上を使用するブランドは約 15% のみです。より洗練されたエディトリアルな印象のために、軽いウェイト（300～500）を検討してください。
• 単一フォントの規律：主要ブランドの約 40% はサイト全体で 1 つのフォントファミリーを使用しています（階層には異なるウェイト）。HashiCorp、MongoDB、Miro、NVIDIA、Vodafone、Renault、Lamborghini はすべて単一の独自サンセリフを使用しています。2 つのフォントファミリーが必要だと思い込まないでください — 適切に調整された 1 つのファミリーとウェイトのコントラストが、競合する 2 つの書体より通常は優れています。
• 15 社以上の主要ブランドの正確な値については、references/aesthetics.md § Real-World Typography References を参照してください。

カラー

• すべての色を :root 内のセマンティックな CSS カスタムプロパティとして定義してください。名前は見た目ではなく目的を反映させてください（例: 「light-gray」ではなく「surface」「emphasis」）。
• パレットはゼロから構築してください — その方法については references/aesthetics.md を参照してください。
• 本文テキストのコントラスト比は 4.5:1 以上。大きなテキストは 3:1 以上。
• ページごとにアクセントカラーは 1 つだけとし、どこでも一貫して使用してください。黒 CTA トレンド: 主要ブランドの約 25%（Expo、Intercom、Lovable、MiniMax、Miro、Ollama、Shopify）が純黒をプライマリ CTA カラーとして採用しています — 明るい面でも暗い面でも機能する、自信に満ちたエディトリアルな選択です。
• デフォルトで禁止: 紫/バイオレットのグラデーション、ありふれた青（#3b82f6）、AI パープル（#8b5cf6、#6366f1）、AI パープル 500（#a855f7）。例外: Design Read がこれらのいずれかを明示的に要求する場合（例: そのアイデンティティ自体が紫であるブランド）、コメントで正当性を文書化し、コントラストを検証してください。
• 禁止の暗い面: #0a〜#0f の青黒レンジ（#0a0e1a、#0d1117、#0f172a、#111827、#1e1b4b）。これらはまさに AI ダークモードのデフォルトです。Scene Sentence と Dark Surface Tint Guide を使って、青みのない暗い面を選んでください。
• デフォルトの背景として禁止のウォームニュートラル: クリーム、ベージュ、サンド、リネン、アイボリー、シャンパン — 彩度の低いウォームニュートラル全般（HSL 色相 30〜60、彩度 15% 未満）。具体的に禁止の hex 値: #f5f1ea、#f7f5f1、#fbf8f1、#efeae0、#ece6db、#faf7f1、#e8dfcb。これらは 2025〜2026 年の AI デフォルトです。例外: Design Read が明示的に温かみを求める場合（例: ベーカリー、ウェルネス、職人的ブランド）にのみ使用し、かつ他のどの面も機能しない理由を説明できる場合に限ります。
• 禁止のプレミアムアクセント: 真鍮/粘土/オックスブラッド系（#b08947、#b6553a、#9a2436、#9c6e2a、#bc7c3a、#7d5621）およびエスプレッソのテキスト（#1a1714、#1a1814、#1b1814）。これらは AI の「プレミアム消費者向け」デフォルトです。プレミアム消費者向けブリーフの代替案（ローテーションし、再利用しないでください）:
  • コールドラグジュアリー: シルバーグレー + クローム + スモーク（Tesla、Apple Watch を想起）
  • フォレスト: ディープグリーン + ボーン + アンバーのアクセント（Filson、Patagonia を想起）
  • ブラックアンドタン: 真のオフブラック + ウォームタン、鋭いコントラスト、ベージュなし
  • コバルト + クリーム: 彩度の高い青を単一のニュートラルに合わせる、真鍮なし
  • テラコッタ + スレート: ウォームなラストをクールなグレーに合わせる、真鍮なし
  • オリーブ + ブリック + ペーパー: 落ち着いたオリーブとブリックレッドのアクセント
  • ピュアモノクローム + ポップ: オフホワイト + オフブラック + 1 つの明るいアクセント（エレクトリックブルー、エメラルド、ホットピンク）
• アンチデフォルトのデフォルトに注意: ティール/エメラルドは新たな AI パープルになっています（青/紫を避けるよう指示されたときの定番）。ウォームアンバー/ゴールドは「洗練された代替」になりつつあります。意識して、さらにバリエーションを増やしてください。

レイアウト

• 2D レイアウトには CSS Grid を、1D には Flexbox を使用します。
• スペーシングシステム: 4px の倍数（8、12、16、24、32、48、64）。セクションのスペーシング: 実際のブランドでは、主要セクション間に 80～120px を使用しています（73 ブランドの中で最も一般的なのは 96px）。ヒーローセクションでは 120px 以上を使うことがよくあります。AI はセクションのスペーシングを 48～64px と狭くしがちです。
• コンテナ: max-width は 1100～1400px の範囲（値を変化させます）とし、auto マージンと左右のパディングで中央揃えにします。
• 100vh ではなく min-height: 100dvh を使用します。
• モバイル: 768px 未満ではすべてが 1 カラムに積み重なります。
• セクションレイアウトの繰り返し禁止: 連続する 2 つのセクションで同じレイアウトファミリーを使用してはいけません（例: 2 つの中央揃えテキストブロック、2 つのジグザグ画像テキストペア）。セクションを上から下まで監査してください。8 つのセクションがあるページでは、少なくとも 4 つの異なるレイアウトファミリーを使用する必要があります。
• アイブロウの抑制: アイブロウラベル（見出しの上にある小さな大文字テキスト）は、3 セクションにつき最大 1 つまでです。すべてのセクションにアイブロウがあると、どれも目立ちません。
• ジグザグの上限: 交互に並ぶ画像テキストセクションは、連続して最大 2 つまでです。2 つの後は、まったく異なるレイアウトで区切ってください。
• 分割ヘッダーの禁止: セクションヘッダーとしての「左に大きな見出し + 右に小さな説明パラグラフ」というパターンは、デフォルトとして禁止します。見出しと説明の両方が必要な場合は、縦に積み重ねてください（見出しを上に、本文を下に、max-width 65ch）。
• Bento の背景の多様性: Bento セクションや機能グリッドセクションは、テキストが入った白地に白のカードだけにしてはいけません。複数セルのグリッドでは、少なくとも 2～3 のセルに実際の視覚的変化が必要です。実画像、ブランドに合ったグラデーション、パターン、または淡い色の背景などです。
• コンテンツ密度: セクションごとのデフォルトのコンテンツ構成: 短い見出し（8 語以下）+ 短いサブパラグラフ（25 語以下）+ 1 つの視覚素材、または 1 つの CTA。それ以上のものは、そのセクションの役割によって正当化される必要があります。

ヒーローセクションの規律

• ビューポートへの収まり: ヒーローは読み込み時にビューポートを埋めるべきですが、最初の CTA を見るためにスクロールを強制してはいけません。高さ 768px でテストしてください。
• スタックの規律: ヒーロースタック内のテキスト要素は最大 4 つまでです（例: アイブロウ + 見出し + サブ見出し + CTA）。4 つを超えると視覚的なノイズが生じます。
• 上部パディングの上限: ヒーローの上部パディングは 20vh を超えないようにしてください。過剰な上部パディングはコンテンツをフォールドの下に押しやります。
• 中央揃えへの偏りの排除: すべてのヒーローを中央揃えにする必要はありません。デザインリードに基づいて、左揃え、分割画面、または非対称レイアウトを検討してください。

CTA の規律

• 意図の重複なし: 同じページに同じ意図の CTA を 2 つ配置してはいけません（例: 異なるセクションに 2 つの「Get Started」ボタン）。各 CTA は異なる目的を持つべきです。
• ボタンのコントラストチェック: プライマリ CTA は、ボタンのテキストとボタンの背景の間に 4.5:1 以上のコントラスト比が必要です。
• ボタンテキストの折り返し禁止: CTA のテキストは決して 2 行に折り返してはいけません。折り返す場合は、テキストを短くするかボタンの幅を広げてください。
• ビューポートごとに 1 つのプライマリ: どのスクロール位置でも、プライマリスタイルのボタンは 1 つだけ表示されるようにしてください。

コンポーネント

• 詳細なパターンについては references/components.md を参照してください。
• カード: border-radius は最大 16px（24px 以上は決して使用しない）。73 の主要ブランドで最も一般的なカードの角丸は 12px（約 35%）、次に 16px（約 20%）です。Meta の 32px や Mastercard の 40px は、標準的なコンテンツカードではなく、ヒーローレベルのショーケースカード向けの稀な例外です。ボーダーまたはシャドウは控えめに、両方は使わないでください。
• ボタン: 明確なホバー状態 + アクティブ時の押下（scale(0.97-0.98)）。
• テーブル: 数値列には font-variant-numeric: tabular-nums を使用してください。
• ステータス: 常に色 + アイコン/テキストを使用し、色だけに頼らないでください。
• ローディング: スピナーではなく、スケルトンプレースホルダーを使用してください。
• 空の状態: 役立つメッセージ + アクションボタン。決して空白にしないでください。

アニメーション

• transform と opacity のみをアニメーション化します。レイアウトプロパティは絶対にアニメーション化しないでください。
• transition: all は使用しないでください。正確なプロパティを指定してください。
• linear やデフォルトの ease-in-out は使用しないでください。カスタムの cubic-bezier カーブを使用しますが、プロジェクトごとに異なるカーブを選んでください。
• 必須要素 #6 にある 3 つの選択肢から、進入アニメーションの戦略を選んでください。毎回 IntersectionObserver をデフォルトにしないでください。
• prefers-reduced-motion: reduce を尊重してください。
• タイミングのガイドラインについては references/animations.md を参照してください。

チャート

• CDN 経由で Chart.js または ECharts を使用してください。
• データに合ったチャートタイプを選んでください: トレンド → 折れ線、比較 → 棒、割合 → ドーナツ。
• チャートの色にはページのカラーパレットを使用してください — ライブラリのデフォルトは絶対に使用しないでください。
• 必ず含めてください: 軸ラベル、ツールチップ、凡例。
• セットアップのガイドラインについては references/charts.md を参照してください。

アイコン

• インライン SVG または CDN のアイコンライブラリを使用してください。推奨ライブラリ（優先順）: Phosphor、Lucide、Heroicons、Tabler、Radix Icons、Solar（Iconify 経由）。
• プロジェクトごとに 1 つのアイコンファミリーを使用してください。ストローク幅を統一してください（グローバルに標準化します。例: 1.5 または 2.0）。
• 構造的なアイコンとして絵文字を絶対に使用しないでください。
• SVG アイコンを手書きで作らないでください — 選択したライブラリにグリフがない場合は、2 つ目のライブラリをインストールするか、シンプルな幾何学図形を使用してください。手描きの SVG パスは一貫して品質が低くなります。

画像とビジュアルアセットの戦略

ビジュアルアセットの優先順:

1. まず画像生成ツール — 環境内で画像生成ツール（generate_image、MCP 画像ツールなど）が利用可能な場合は、それを使ってセクション固有のアセット（ヒーロー写真、製品写真、テクスチャ背景）を作成してください。セクションに適したアスペクト比で生成してください。
2. 次に実際の Web 画像 — プレースホルダー写真には https://picsum.photos/seed/{descriptive-seed}/{w}/{h} を使用してください（seed はセクションを説明するものにします。例: crypto-dashboard-hero）。または Unsplash/Pexels の直接 URL を使用してください。
3. 最後の手段: ユーザーに伝える — どちらも不可能な場合は、明確にラベル付けされたプレースホルダースロット（``）を残し、必要な画像をメモしてください。

ルール:

• すべての画像に alt テキストを必ず含めてください。装飾的な画像には alt="" を使用します。
• スクリーンショットを偽装しないでください: div ベースの偽アプリのスクリーンショット、偽のブラウザクローム、偽のターミナルウィンドウをヒーロー画像として構築しないでください。これは AI デザインの最大の特徴です。スクリーンショットが必要な場合は、実際の画像を使用するか、プレビューを完全に省略してください。
• 装飾的な画像: CSS グラデーション、SVG パターン、抽象的な図形を使用してください — 画面を指さす人物のストックフォトは使用しないでください。
• ソーシャルプルーフ用のロゴプレースホルダー: 「Trusted by / Used by」のロゴウォールには、Simple Icons CDN（https://cdn.simpleicons.org/{slug}/{color}）の実際の SVG ロゴを使用するか、シンプルなモノグラム SVG を生成してください。プレーンテキストのワードマーク（<span>Acme Co</span> を行内にスタイル設定したもの）は使用しないでください。ロゴウォール = ロゴのみで、各ロゴの下に業界/カテゴリのラベルは付けないでください。
• 画像に重ねるピル/ラベルは禁止: 「Brand · 02」や「Field notes」のようなタグを付けた <span> オーバーレイを写真に重ねないでください。画像を単独で見せるか、下（画像の外側）にキャプションを追加してください。
• 装飾としての写真クレジットキャプションは禁止: ストック画像の下に「Field study no. 12 · Ines Caetano」のような文字列を入れるのは気取っています。写真クレジットは、実際の写真家をクレジットする場合にのみ使用してください。
• ヒーローには実際のビジュアルが必要: テキスト + グラデーションブロブはヒーローではありません — それはプレースホルダーです。ミニマリストのサイトでも、少なくとも 2〜3 枚の実際の画像が必要です。

モックデータ

• 自然なばらつきのあるもっともらしい数値を使用してください（丸い数値は避けます）。
• 実世界のラベルを使用してください（実際の名前、現実的な日付）。
• 時系列: 自然な変動のある 7〜30 個のデータポイント。

アクセシビリティ (CRITICAL)

• コントラスト: 本文テキストは 4.5:1 以上、大きなテキストは 3:1 以上、UI コンポーネントは隣接する色に対して 3:1 以上にしてください。
• フォーカス状態: すべてのインタラクティブ要素には、視認できるフォーカスリング (2〜4px のアウトライン) が必要です。代替手段を用意せずに outline を削除しないでください。
• 代替テキスト: 意味のあるすべての画像には、説明的な alt テキストが必要です。装飾的な画像には alt="" を使用します。
• 見出しの階層: h1 → h6 を順番に使用し、レベルを飛ばさないでください。h1 は 1 ページに 1 つだけにします。
• 色だけに頼らない: 情報を色だけで伝えないでください。常にアイコン、テキスト、またはパターンと組み合わせます。
• キーボードナビゲーション: Tab の順序は視覚的な順序と一致させる必要があります。すべてのインタラクティブ要素にキーボードで到達できるようにしてください。
• Aria ラベル: アイコンのみのボタンには aria-label が必要です。フォーム入力には関連付けられた <label> が必要です。
• スキップリンク: 最初にフォーカス可能な要素として「メインコンテンツへスキップ」リンクを含めてください。
• モーションの抑制: prefers-reduced-motion: reduce を尊重し、すべてのアニメーションを無効化または簡略化してください。

フォームとフィードバック

• 表示されるラベル: すべての入力には、プレースホルダーだけでなく、視認できる <label> が必要です。
• エラーの配置: エラーメッセージは、フォームの上部だけでなく、関連するフィールドの直下に表示してください。
• 必須インジケーター: 必須フィールドには、アスタリスクまたは「(必須)」というテキストを付けます。
• 送信時のフィードバック: 送信時にローディング状態を表示し、その後、成功またはエラーの状態を表示します。
• 空の状態: データが存在しない場合は、役立つメッセージ + アクションボタンを表示し、空白の領域にはしないでください。
• 確認ダイアログ: 破壊的な操作 (削除、リセット、すべてクリア) の前には確認を行います。
• 入力タイプ: セマンティックな type 属性 (email、tel、number、url) を使用して、適切なモバイルキーボードを呼び出します。
• エラーの明確さ: エラーメッセージには原因と修正方法を明記してください (「無効な入力」だけでは不十分です)。

インタラクション状態

• ホバーのフィードバック: すべてのクリック可能な要素には、視認できるホバー状態 (色の変化、下線、または微妙な変形) が必要です。
• アクティブ/押下のフィードバック: ボタンは押下時にわずかに拡大縮小し (scale(0.97-0.98))、触感的なフィードバックを提供します。
• 無効状態: 無効な要素には、低減された不透明度 (0.4-0.5) + cursor: not-allowed + pointer-events: none を使用します。
• ローディング状態: コンテンツの読み込みにはスケルトンプレースホルダーを使用し、スピナーはアクションにのみ使用します。300ms を超える操作にはローディングフィードバックを表示します。
• タッチターゲット: すべてのインタラクティブ要素は、モバイルで少なくとも 44×44px でなければなりません。視覚的な要素が小さい場合は、パディングを使用してヒット領域を拡張します。

---

コピールール (テキストコンテンツ)

AI が生成したテキストは、最も明らかな痕跡の 1 つです。すべての表示テキストにこれらのルールを適用してください:

禁止パターン

• em ダッシュ（—）をどこにも使用しないでください。代わりにカンマ、ピリオド、セミコロンを使用します。em ダッシュは LLM テキストの最大の特徴です。これはゼロトレランスのルールです。「控えめに使う」ではなく、ゼロです。
• 区切りとしての en ダッシュ（–）は禁止です。日付範囲にはハイフン（2018-2026）を使用します。数値範囲にはハイフン（€40-80k）を使用します。
• マーケティングの決まり文句は禁止: 「Revolutionize」「Supercharge」「Unleash」「Seamlessly」「Cutting-edge」「Next-generation」「Game-changing」「Empower」「Elevate」「Transform your workflow」。プレスリリースではなく、人間のように書いてください。
• 格言的なリズムは禁止: モチベーションポスターのように読める、短くて力強く並列な文構造は避けてください。（「Simple. Fast. Powerful.」/「Built for speed. Designed for scale.」）
• 番号付きセクションマーカーは禁止: 内容が本当に連続している場合（プロセスのステップなど）を除き、セクションに「01」「02」「03」というラベルを付けないでください。「00/INDEX」「001/Capabilities」スタイルの眉見出しも禁止です。
• 装飾用テキストストリップは禁止: 「INNOVATION · DESIGN · EXCELLENCE」や「BRAND · MOTION · SPATIAL」のような、スクロールするマーキーや繰り返しのテキストストリップを追加しないでください。
• ヒーロー内のバージョンラベルは禁止: 「V0.6」「BETA」「INVITE-ONLY PREVIEW」は、ブリーフが明示的に製品ローンチに関するものでない限り禁止です。
• スクロールキューは禁止: 「Scroll」「↓ scroll」「Scroll to explore」、アニメーションするマウスホイールアイコンは禁止です。ユーザーはスクロールの仕方を知っています。
• ロケール・天気ストリップは禁止: ヘッダー・フッターの「LIS 14:23 · 18°C」は、ブリーフが本当に場所やタイムゾーン分散スタジオに関するものでない限り禁止です。
• 偽の精密な数値は禁止: 92%、4.1×、48k のような数値は、実データに基づくか、モックであると明示的にラベル付けされている必要があります。エンジニアリング上の精密さを偽装しないでください。
• 1 ページにつき 1 つのコピーレジスター: 技術的な等幅フォント（「47 tasks · 0.6 ctx-switches/day」）、エディトリアルな散文、マーケティングのパンチを同じ構成に混在させないでください。
• 引用は 3 行以内: testimonial の引用は一目で収まる必要があります。帰属: 名前 + 役割 +（任意で）会社。名前だけ（「- Sarah」）は絶対に避けてください。

コピーのセルフ監査

納品前に、ページ上のすべての可視文字列を読み、次のことを自問してください:

1. 人間のコピーライターはこれを書くでしょうか？ それとも ChatGPT のように聞こえるでしょうか？
2. これは製品に固有のものでしょうか、それともカテゴリ内のどの製品にも当てはまるでしょうか？
3. 見出しは実際に何かを述べているでしょうか、それとも曖昧な定型文でしょうか？
4. 文法的に壊れたフレーズや、AI が幻覚的に生み出した言葉遊びはありますか？
5. 「思慮深く聞こえようとする LLM」のように読める文字列はありますか？（受動的攻撃的な謙遜、偽の職人ラベル、模造詩的なマイクロメタ）

---

テーマサポート（ライト / ダーク — 必須）

生成されるすべてのページには、ライト/ダークテーマの切り替えを必ず含める必要があります。これは任意ではありません。ユーザーは、あらゆるモダンなウェブサイトでテーマを切り替えられることを期待しています。

デフォルトの動作（ライト/ダーク切り替え）

サーフェスダイヤルは、どちらのテーマがプライマリ（システム設定がない場合に初回読み込みで表示される）かを決定しますが、両方のテーマを完全に実装する必要があります:

1. すべての色に CSS カスタムプロパティ — すべての色を :root（ライト）と [data-theme="dark"]（ダーク）で --var として定義します。
2. 切り替え UI — ヘッダー/ナビにシンプルな切り替えボタン（太陽/月アイコン）を追加します。設定は localStorage に保存します。
3. システム設定の検出 — 保存された設定がない場合は、prefers-color-scheme: dark を初期デフォルトとして使用します。
4. 両方のテーマを完全に設計する必要があります — 単に「色を反転させる」だけではありません。各テーマには独自のサーフェス階層、コントラスト検証、アクセント調整が必要です。

ダークモードの設計ルール

ダークバリアント（すべてのページがダークテーマ用に必要とするもの）を設計する際は、次のようにします。

1. シーン文: ダークパレットの基準としてシーン文（ステップ 0.5 を参照）を書きます。デフォルトでブルーブラックにしてはいけません。
2. サーフェスの階層: 暗い背景には、明るい背景よりも多くのエレベーションのレベルが必要です（少なくとも 4 つの異なるサーフェスレベル）。
3. コントラストの独立性: ダークモードのコントラスト比は独立して検証します。ライトモードで合格した色が暗いサーフェスでも機能するとは仮定しないでください。
4. アクセントの調整: アクセントカラーは、同じ視覚的な重みを保つために、暗い背景ではより明るく／より彩度が高い色が必要になることがよくあります。
5. トークンの戦略: 同じ CSS カスタムプロパティ名を使い、値だけを変えます:

:root {
  --surface-primary: #fafafa;
  --surface-elevated: #ffffff;
  --text-primary: #1a1a1a;
  --accent: #d4a030;
}

[data-theme="dark"] {
  --surface-primary: #1a1816;  /* from Scene Sentence */
  --surface-elevated: #242220;
  --text-primary: #e8e4e0;
  --accent: #e8b84a;  /* lighter for dark bg */
}

6. トグルの実装:

// Detect system preference, respect stored preference
const stored = localStorage.getItem('theme');
const prefersDark = matchMedia('(prefers-color-scheme: dark)').matches;
document.documentElement.dataset.theme = stored || (prefersDark ? 'dark' : 'light');

// Toggle handler
function toggleTheme() {
  const current = document.documentElement.dataset.theme;
  const next = current === 'dark' ? 'light' : 'dark';
  document.documentElement.dataset.theme = next;
  localStorage.setItem('theme', next);
}

---

アンチパターン（絶対にやってはいけない）

• ❌ プライマリフォントに Inter、Roboto、Arial
• ❌ デフォルトとしての紫／バイオレットのグラデーション背景（例外: ブランドで義務付けられ、文書化されている場合）
• ❌ デフォルトの背景としてのクリーム／ベージュ／サンド（例外: デザインリードが、明確な根拠とともに warmth を明示的に要求している場合）
• ❌ ブルーブラックの暗いサーフェス（#0a0e1a、#0d1117、#0f172a、#111827）— シーン文を使って青みのない色調を基準にしてください
• ❌ 中央揃えのヒーロー + 3 つの均等な機能カード（AI レイアウトの第 1 位）
• ❌ 同じサイズのカードグリッドを延々と繰り返す
• ❌ カードの border-radius: 24px+
• ❌ transition: all または linear イージング
• ❌ ナビゲーション／アクションアイコンとしての絵文字
• ❌ グラデーションテキスト（background-clip: text）— テキストには単色を使用してください
• ❌ コントラスト比 4.5:1 未満のグレーテキスト
• ❌ フルハイトセクションに 100vh（100dvh を使用してください）
• ❌ モバイルでの横スクロール
• ❌ 表示されるテキスト内の em ダッシュ
• ❌ 見出しのマーケティングバズワード
• ❌ 番号付きセクションマーカー（「01」「02」「03」）
• ❌ div ベースの偽のスクリーンショットやブラウザクローム
• ❌ すべてのセクションの eyebrows ラベル
• ❌ 3 つ以上連続するジグザグレイアウト
• ❌ 連続するセクションで同じレイアウトファミリー
• ❌ 1 つのページに同じ意図の 2 つの CTA
• ❌ 前回生成したものと同じデザインをコピーすること

Claude 固有の欠陥（既知の失敗モード）

これらは Claude が特に生成しがちなパターンです。注意して避けてください:

1. border + box-shadow の組み合わせ — Claude は同じ要素に 1px の border と大きな box-shadow の両方を追加し、「ゴーストカード」効果を生み出しがちです。ルール: どちらか一方を選び、同じ要素に両方を使わないでください。
2. border-radius のインフレ — Claude はカードに 24px〜40px の border-radius を使いがちです。ルール: カードは最大 16px、ピル形状はタグ／バッジ／ボタンにのみ使用してください。
3. 手描きの SVG イラスト — Claude は装飾として手描きの SVG イラストを描こうとします。品質は常に低くなります。ルール: アイコンライブラリ（Lucide、Phosphor、Heroicons）または CSS ベースの装飾要素を使用し、手描きの SVG は決して使わないでください。
4. repeating-linear-gradient のストライプ — Claude は body::before やセクションの背景に repeating-linear-gradient で斜めストライプパターンを追加しがちです。ルール: 禁止です。references/aesthetics.md にある他のサーフェス処理を使用してください。
5. 見出しのグラデーションテキスト — Claude は大きな見出しに background-clip: text + グラデーションを頻繁に適用します。ルール: 禁止です。すべてのテキストに単色を使用してください。
6. デフォルトの濃いブルーブラック — ダークモードを求められると、Claude はほぼ常に #0a〜#0f のブルーブラックの範囲を選びます。ルール: シーン文を使って、特定の青みのないダーク色調を基準にしなければなりません。

---

AI Slop テスト（2 つのレイヤー）

納品する前に、両方のレイヤーを実行してください:

レイヤー 0: 本番環境で見分ける手がかり (73 ブランドのベンチマーク)

これらは、AI が生成した UI と実際の本番サイトとの間にある具体的で測定可能な違いであり、73 の主要ブランドのデザインシステムを分析して導き出したものです。

手がかり	AI のデフォルト	実際のブランドの範囲	修正
ディスプレイのウェイト	600-700	300-500 (ブランドの 45%)	ディスプレイには 400-500、エディトリアルには 300 を試す
ディスプレイのレタースペーシング	0 (なし)	-0.28px から -3px (85% が負の値)	ディスプレイに letter-spacing: -1px から -2px を追加する
本文のレタースペーシング	0	0 から +0.24px (IBM +0.16px、Revolut +0.24px)	本文に控えめな正のトラッキングを検討する
カードの border-radius	24px 以上	12px (35%)、16px (20%)	カードは 16px までに抑える
ボタンの形状	8-12px の角丸	9999px のピル (40%) または 0-8px (30%)	ピルかシャープのどちらかに徹底し、中間を避ける
セクションの間隔	48-64px	80-120px (96px が最も一般的)	主要なセクション間には 96px を使う
シャドウの戦略	カードに box-shadow	ヘアラインのボーダーまたはサーフェスリフト (60%)	ドロップシャドウよりも 1px のボーダーを優先する
CTA の色	青 #3b82f6	黒 (25%)、ブランド固有 (30%)	黒のピル CTA を試す
キャンバスの温かみ	毎回同じクリーム色	各ブランドのウォームホワイトは独自	プロジェクトごとにウォームホワイトの色相を変える
フォントファミリー	2 ファミリー	1 ファミリー (ブランドの 40%)	ウェイトのコントラストを活かした単一ファミリーを検討する

レイヤー 1: 一次チェック

1. これが AI によって生成されたものだと誰かに見抜かれるでしょうか? はいなら → そのデザインには独自の視点が欠けています。作り直してください。
2. 配色だけから誰かがトピックを推測できるでしょうか? はいなら → そのパレットはありきたりすぎます (金融なら青、健康なら緑)。もっと自明でない選択を探してください。
3. すべてのセクションが同じに見えるでしょうか? はいなら → レイアウトのリズムを変化させてください。カードのサイズを混ぜ、テキストと画像の配置を交互にし、グリッドを崩してください。
4. これは前回作ったのと同じデザインでしょうか? はいなら → 少なくともフォント、カラーパレット、レイアウト構造を変更してください。

レイヤー 2: 二次チェック (アンチ・アンチ・デフォルト)

最初のレイヤーは明らかな AI のデフォルトを捉えます。このレイヤーは、明らかなデフォルトを避けるときに手を伸ばしてしまうデフォルト — 時間とともに移り変わっていく「アンチデフォルトのデフォルト」を捉えます。

5. あなたの「代替」の選択は、実は最も一般的な代替なのでしょうか? ある定型を避けるとき、しばしば次に人気の選択肢に落ち着いてしまいます。自問してください: 「もし 100 の AI エージェントがすべて明らかなデフォルトを避けたら、そのほとんどは代わりに何を選ぶだろうか?」 — そして何か別のものを選んでください。
6. ページの種類だけで誰かがあなたの美的ファミリーを推測できるでしょうか? (例:「開発者ツール = ダークモード + 等幅フォント + 緑のアクセント」、「フィンテック = ネイビー + 白 + クリーンなサンセリフ」) はいなら → その期待を覆してください。
7. 前回使ったのと同じ「安全な代替」のフォント/色/レイアウトを使っているでしょうか? アンチデフォルトは繰り返しによって新たなデフォルトになります。最近何を使ったかを記録し、意図的に避けてください。
8. あなたのデザインは、認識できる「AI 美学の流派」に属しているように感じられるでしょうか? (例:「Linear クローン」、「Vercel ルック」、「Stripe スタイル」) もし明らかにひとつの流派に属しているなら → 別の伝統の要素を混ぜ込んでください。

---

リファインメントパス（必須）

初期ビルドを完了したら、2回目のパスで洗練と仕上げを行います。要素を追加してはいけません。代わりに、既存のものをよりまとまりのある、きびきびとしたものにします。これは canvas-design スキルの原則に着想を得ています。「ユーザーはすでに完璧ではないと言った。それは pristine（純粋無垢）でなければならない。」

リファインメントパスでは、次のことを問いかけます:

1. スペーシングの一貫性: すべてのマージンとパディングはスペーシングシステムに従っていますか？ ぎこちない隙間はありませんか？
2. 色の調和: ページ上のすべての色は同じデザインの方向性に寄与していますか？ 浮いた色合いはありませんか？
3. タイポグラフィのリズム: 見出しのサイズ、ウェイト、レタースペーシングはセクション間で一貫していますか？
4. コンポーネントの仕上げ: すべてのボタンに hover + active 状態はありますか？ すべてのカードに一貫した border-radius はありますか？
5. コピーの品質: 表示されるすべての文字列を読み直してください。AI っぽいフレーズはありませんか？ すり抜けてしまった em ダッシュはありませんか？
6. ダークモードの同等性: もう一方のテーマに切り替えてください。同じように洗練されて見えますか、それとも一方のテーマが明らかに後回しにされていますか？
7. モバイルチェック: 375px ですべてがきれいに積み重なりますか？ 横方向のオーバーフローはありませんか？

もっと追加したいという衝動は間違っています。 何かが不完全に感じられるなら、たいていの場合、修正すべきはより良いスペーシング、より良いコントラスト、またはより良いタイポグラフィであって、別のグラデーションや別のアニメーション、別のセクションではありません。

---

納品前チェックリスト

すべての項目を実行してください。それぞれが機械的に合格しなければなりません — 主観的な判断はなしです。

デザインダイヤル & デザインリード

• Design Dials 行が存在する（Surface + Accent + Typography + Aesthetic Family のインデックスと選択）
• Design Read 行が存在する（ページ種別 · オーディエンス · 雰囲気 · 美学ファミリー · サーフェス）
• サーフェスの特性がダイヤルで指定された方向性と一致している（指定どおり light/dark/tinted）
• アクセントの色相がダイヤルで指定された色相ファミリーと一致している
• フォントがダイヤルで指定されたタイポグラフィのムードと一致している
• Aesthetic Family の影響がレイアウトスタイルとビジュアル言語に見られる

シーン文（dark/tinted サーフェスのみ）

• Scene Sentence が存在する（Surface インデックス 5 または 6 の場合）
• シーンが「暗い部屋の開発者のモニター」または同等のありきたりなシーンではない
• ダークサーフェスの色合いがシーンの環境と一致している（デフォルトのブルーブラックではない）

タイポグラフィ

• フォントが Google Fonts（または CDN）経由で 2 つ以上のウェイトで読み込まれている
• プライマリフォントがダイヤルで指定されたタイポグラフィのムードと一致している
• プライマリフォントが Inter / Roboto / Arial / Open Sans / Helvetica / Space Grotesk / DM Sans / Plus Jakarta Sans / Manrope ではない
• 本文テキストが 16px 以上で行の高さが 1.5〜1.6
• 見出しがレスポンシブサイズ調整のために clamp() を使用している
• 使用するフォントファミリーは最大 2 つ

色 & サーフェス

• すべての色が :root の CSS カスタムプロパティとして定義されている
• カスタムプロパティ名が意味的に適切である（--light-gray ではない）
• アクセントカラーが一般的な青（#3b82f6）や AI パープル（#8b5cf6、#6366f1、#a855f7）ではない
• 背景がクリーム／ベージュ／サンド（#f5f1ea、#f7f5f1、#fbf8f1 など）ではない（Design Read が要求しない限り）
• 背景がブルーブラック（#0a0e1a、#0d1117、#0f172a、#111827）ではない — 16 進値を確認すること
• アクセントが真鍮／粘土／オックスブラッド（#b08947、#b6553a、#9a2436）ではない（Design Read が要求しない限り）
• 本文テキストのコントラストが 4.5:1 以上であることを確認済み
• 大きなテキストのコントラストが 3:1 以上であることを確認済み
• CTA ボタンのテキスト／背景のコントラストが 4.5:1 以上

レイアウト

• 連続する 2 つのセクションが同じレイアウトファミリーを共有していない
• アイブロウの数が ceil(sectionCount / 3) 以下
• 連続するジグザグの交互配置が 2 回以下
• 高さ 768px でスクロールせずに CTA が見えるよう、ヒーローがビューポートに収まる
• ヒーローのスタック内のテキスト要素が 4 つ以下
• コンテナの max-width が設定され、コンテンツが中央揃えになっている

コピー

• 表示されるすべてのテキストに全角ダッシュ（—）が含まれていない
• 見出しにマーケティングのバズワードが含まれていない
• 格言的な並列構文が使われていない
• 番号付きのセクション見出しがない（本当に連続している場合を除く）
• 装飾用のテキストストリップや無意味なマーキーがない（例:「BRAND · MOTION · SPATIAL」）
• ヒーローにバージョン表記がない（例:「v2.0」「Beta」）。ただしブリーフが明示的に要求している場合を除く
• スクロールを促す表示がない（例:「Scroll ↓」、下矢印インジケーター）
• すべての見出しが具体的な内容を示している（曖昧な決まり文句ではない）

CTA とボタン

• 2 つの CTA が同じ意図のテキストを共有していない
• CTA テキストが 2 行に折り返さない
• ビューポートごとに表示されるプライマリボタンは 1 つだけ
• すべてのボタンにホバー状態とアクティブ状態がある

Claude 固有の不具合

• 同じ要素にボーダーと box-shadow の組み合わせがない（どちらか一方を選ぶ）
• カードの border-radius が 16px を超えていない（ピル形状はタグ/バッジ/ボタンのみ）
• 手描きの SVG イラストがない
• repeating-linear-gradient のストライプ背景がない
• グラデーションテキスト（background-clip: text）がない
• ダークサーフェスが #0a〜#0f の青黒の範囲にない（Scene Sentence が色味の基準を定めている必要がある）

テクニカル

• prefers-reduced-motion メディアクエリが含まれている
• 入場アニメーションの戦略が含まれている（スクロールリビール / ページロード時のスタッガー / 状態駆動 — この 3 つのうち 1 つ）
• どこにも transition: all がない
• UI 要素に linear イージングがない
• 100vh がない（100dvh を使用）
• 幅 375px で水平スクロールが発生しない
• すべての画像に alt テキストがある（装飾画像は alt="" を使用）
• キーボードナビゲーション用のフォーカス状態が視認できる
• div ベースの偽スクリーンショットやブラウザクロームがない

テーマ切り替え

• ライト/ダークテーマの切り替えボタンがある（ヘッダー/ナビに太陽/月アイコン）
• すべての色が CSS カスタムプロパティを使用している（コンポーネントスタイルにハードコードされた hex がない）
• [data-theme="dark"] セレクターがダークテーマの値を定義している
• 保存された設定がない場合、初期テーマとして prefers-color-scheme: dark を検出する
• テーマ設定が localStorage に保存される
• ライトテーマとダークテーマの両方でコントラスト比が検証されている（本文テキストは 4.5:1 以上）
• ダークテーマが単なる「色の反転」ではない — 独自に設計されたサーフェス階層がある

アクセシビリティ

• 見出しの階層が連続している（h1 → h2 → h3、レベルを飛ばさない）
• ページごとに h1 が 1 つ
• アイコンのみのボタンに aria-label がある
• フォーム入力に関連付けられた <label> 要素がある
• 色が唯一の指標になっていない（常にアイコン/テキスト/パターンと組み合わせる）
• インタラクティブ要素にキーボードで到達できる（タブ順が視覚的な順序と一致する）
• モバイルでタッチターゲットが 44×44px 以上

フォームとインタラクション（該当する場合）

• すべての入力に表示されるラベルがある（プレースホルダーのみではない）
• エラーメッセージが関連するフィールドの下に表示される
• 必須フィールドが明示されている
• 無効化された要素が透明度の低下と cursor: not-allowed を持つ
• すべてのクリック可能な要素に視認できるホバー状態がある
• ボタンにアクティブ/プレス状態がある（scale(0.97-0.98)）

アンチスロップ（レイヤー 2）

• デザインが調整された方向性に従っている — 「安全なデフォルト」ではない
• 美的ファミリーがページタイプだけから推測できない（例: 暗号資産 ≠ 常にダーク）
• デザインが明確に 1 つの認識可能な「AI 美学派」に属していない（Linear クローン、Vercel ルックなど）
• サーフェスがダークブルーブラックでない（青色相を持つ #07〜#0f の範囲）。ただし調整で明示的に選択された場合を除く
• フォントが Inter、Plus Jakarta Sans、Space Grotesk、DM Sans、Manrope ではない