Claude CodeやCodexにLPを任せても、ファーストビューと見出しまわりだけは先にFigmaで決めてから渡す

どんな問題を解決するか / いつ使うか

「いい感じのLPを」と頼むと形はすぐ出るが、余白・文字の大きさ・色の数まで任せきりにすると、どこかで見たような「AIっぽいLP」になりやすい。手を動かすのはAIに任せつつ、見せ方の判断は人が持ちたいときに。

やり方

1. Figmaでファーストビューと見出しまわりだけを作る。決めるのは主に次の2つ。
   • どこを一番大きく見せるか（主役）
   • どこで余白を取るか
2. そのデザイン（Figmaのリンク、書き出し画像、数値）をエージェントに渡し、残りのセクションはその基準に合わせて作らせる。
3. 出てきたものと比べて、「見出しが基準より○px小さい」「ここの余白が詰まっている」のようにズレを具体的に伝える。

注意点

• 全ページをFigmaで作り込む必要はない。いちばん印象を左右する部分だけ人が決めるのが、手間と質のバランスがよい。
• 決めた値は DESIGN.md にも書いておくと、次のページでもブレない（DESIGN.md（トークン＋ルール）を置き、AGENTS.md / CLAUDE.md から必ず読ませる）。
• 画像モックで先に方向を決める方法は コードより先に画像生成でデザインモックを作る。最初にスタイル案を4つ出させて選ぶ。

出典

• 投稿者: @yoshiki_design
• 投稿: @yoshiki_design · 2026-10-15
• 収集日: 2026-10-16（JST、10/15・10/16分の巡回をまとめて実施）