AIにデザインブリーフを渡してLP制作した話
デザインブリーフを言語化し、Claude Code にLP制作を依頼。アートディレクションをAIに伝える方法と、実際のワークフロー
「いい感じに作って」では伝わらない
LP のデザインを Claude Code に依頼するとき、「かっこいい感じで」「モダンな雰囲気で」と言っても、出てくるのは「AIっぽいデフォルト」。紫のグラデーション、均等3カラム、よく見るレイアウト。
アートディレクションを AI に伝えるには、「デザインブリーフ」を書く必要がありました。
デザインブリーフとは
制作の方向性を言語化した設計書です。通常はクリエイティブチームに共有するもの。これを Claude Code 向けに書きました。
含めた内容：
- ページの目的 — 誰に、何を、どう伝えるか
- メッセージ — 全体を貫くキーメッセージ
- セクション構成 — 各セクションの役割と主役要素
- 視覚文法 — セクションごとのビジュアルの方向性
- 配色の方針 — ダーク/ライトの切り替えリズム
- タイポグラフィ — 見出しと本文の使い分け
視覚文法という考え方
今回のブリーフで特に効果的だったのは、セクションごとに「視覚文法」を定義したこと。
たとえば、あるセクションは「求心」——情報を中央に集約するレイアウト。別のセクションは「循環」——要素が変換・流動するイメージ。また別のセクションは「遠心」——中心から外に広がる展開。
抽象的に聞こえますが、Claude Code はこの指示をかなり正確に解釈してくれました。「求心」と書くと要素が中央に寄り、「遠心」と書くとカードが放射状に配置される。
明暗リズムの設計
LP全体の背景色の切り替えも設計しました。
Dark → Light → Light → Dark → Light → Dark → Dark
上から下に読み進める中で、ダークセクションが2回ピークを作る「二峰構造」。単調にならず、読者の注意を引き戻す効果を狙いました。
実際のワークフロー
Phase 1：情報設計（人間）
ページの目的、構成、主役セクションを人間が決定。入力資料を3層に分離しました。
- コンテンツソース — テキスト原稿、数値データ
- 情報設計 — 構成、導線、ストーリー
- ビジュアル方向 — トーン、参考サイト、NG 事項
この分離が重要でした。全部をまとめて渡すと、Claude Code がどこを参照すべきか迷います。
Phase 2：方針の固定
CLAUDE.md（プロジェクトの方針ファイル）にデザインの方向性を記載。触ってはいけないファイル、参照すべきデザイントークン、配色ルールを明文化。
これにより、セッションをまたいでも方針がブレなくなります。
Phase 3：HTML プレビュー
WordPress に直接実装する前に、単体の HTML ファイルとしてデザインカンプを生成。ブラウザで開くだけで確認できるので、イテレーションが速い。
Phase 4：レビュー3ラウンド
- 構造レビュー — セクションの順序、情報の過不足
- ビジュアル調整 — 配色、タイポグラフィの詳細
- 参考サイトの適用 — 具体的なビジュアルリファレンスを渡して精度を上げる
うまくいったこと
- CLAUDE.md で方針を固定するとブレない — 毎回指示しなくても一貫性を保てる
- HTML プレビューを挟むと安全 — 本番環境を壊すリスクがない
- 改善指示は3点に絞る — 一度に大量の修正を依頼すると、別の箇所が崩れる
うまくいかなかったこと
- リファレンスの役割を明示しないと混乱する — 「この参考サイトの色を使って」なのか「レイアウトを参考に」なのか、具体的に伝える必要がある
- コンテンツの正確性は AI に任せない — 数値や固有名詞は必ず人間が確認
- 指示は小分けにする — セクション単位で依頼した方が精度が高い
デザインブリーフを書く意味
デザインブリーフは、本来は人間のチームに共有するもの。でも、AI に渡すために書くことで、自分自身のアートディレクションが言語化され、整理されました。
「なんとなくいい感じ」を分解して言葉にする。そのプロセス自体が、デザインの質を上げてくれる。AI が相手だからこそ、曖昧さが許されない分、思考が鍛えられます。
