DESIGN.md — 紺×朱線のアイソメ食材図解 啓発LP（Isometric Food Illustration Navy Public Campaign LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: 自治体・公共・団体 ／ 雰囲気: 信頼・誠実、シンプル・ミニマル、清潔・爽やか、ナチュラル
• キーワード: アイソメトリック・食材図解・紺の面・朱の見出し線・白カード・余白多め
• 地の質感: フラットでノイズなし。イラストだけに淡い陰影がある
• 形: 角丸小さめの白カード。見出し下の線は中央がV字に折れる
• 温度感: やや寒色寄り。食材イラストで温かさを足している

Colors

• 地は白と淡い青灰（#F8F9FD）を交互に敷いて、セクションを区切る
• 紺は FV のコピー面とフッターに大きく使い、ページの最初と最後を締める
• 朱色は見出し下の V字ラインにだけ使い、面には使わない
• 紺の小さな三角矢印で、図解の流れを下へ導く
• 赤い文字は『もっと見る』などのリンクに限る
• 色数が増えるのはイラストだけ。UI は紺・朱・墨・白に絞る

Typography

• 全体を太めのゴシック 1 書体で統一する
• 見出しは中央揃え。まとめの文は左揃えの太字にする
• 字間はやや広め（0.05〜0.08em）
• 本文は行間 1.9 前後で、ゆったり読ませる
• 明朝や装飾的な書体は使わない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。取組カードだけ 2 列
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 72px、基本単位 8px、カード内 24px（375px 幅換算）
• 左右の余白は約 30px で固定
• 図解カードどうしの縦の間隔は 16px
• カードは上にイラスト図解、区切り線、下に説明文の 2 段にする
• セクション見出しの下に V字ラインを全幅で引く
• セクション間に紺の三角矢印を置き、流れを示す

Elevation & Depth

• 図解カードは影なし。白面と青灰地の差だけで浮かせる
• 取組カードにはごく薄い影（0 2px 6px rgba(0,0,0,.08)）を付ける
• 紹介カードは 1px の淡いベージュ枠で囲む

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: イラストは白背景の切り抜き。バナー画像は角丸カードの上端に合わせて四角く切る
• セクション境界: 直線で背景色を切り替える。見出しには中央 V字の朱線を付ける
• ボタンは完全なピル型にする
• カードの角丸は 10px 前後
• 食材のマスは細い縦線で区切ったグリッドにする
• 連結線は黒の細線で、端に丸い点を付ける

Components

• 白ピルの動画ボタン（button-video）: 紺地の上に白いピル。右端に紺の丸い再生アイコンを置く
• V字ライン見出し（heading-v-line）: 中央揃えの太字見出しの下に朱の横線を引き、中央を下向きの V字に折る
• 食材つながり図解カード（diagram-card）: 上段におにぎりのイラスト、下段に原料のイラストとラベル。細い線と点で結び、区切り線の下に説明文を置く
• 紺の三角矢印（arrow-down）: 下向きの紺の三角形。1 個か 3 連で並べて流れを示す
• 紺の吹き出しラベル（speech-badge）: 紺のピルに白の短文を入れ、下に小さなしっぽを付ける
• 取組紹介カード（topic-card）: 2 列のグリッド。生成りの面に人物のアイソメイラストと太字タイトルを入れる
• もっと見るリンク（link-more）: 中央に置く赤い太字テキストと右向きの矢印
• フッターの白枠ボタン（button-outline-footer）: 紺地の上に白い枠線と白文字のピルボタンを置く

Do's and Don'ts

Do - 食材はアイソメトリックのフラットなイラストで描き分ける - 図解は『上の完成品→線→下の原料』の構造でそろえる - 見出しにはすべて同じ V字の朱ラインを付ける - 白地と青灰地を交互に置いて、リズムを作る - 余白はたっぷり取り、1 カードにつき 1 テーマにする

Don't - 朱色を面やボタンの塗りに使わない - 写真を多用しない（バナー以外はイラストにする） - グラデーションや強い影を付けない - UI の色を紺・朱・墨・白以外に増やさない - 装飾フォントや手書き風の書体を混ぜない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（テーマを食材の世界観で印象づける）: 上部にアイソメ食材を散らした大きなイラスト。その下の紺の面に白の大コピー、動画ボタン、縦書きの SCROLL を置く
2. 導入文（問題意識を短く伝える）: 紺地のまま、白の太字で 5 行ほどの文を左揃えで置く
3. 問いかけ（なぜこのテーマかを示す）: 白地に中央見出しと短い本文。V字ライン、主役のイラスト、紺の三角 3 連を続ける
4. 分類別の図解（食材と原料のつながりを解説する）: 青灰地に V字見出しを置き、その下に図解カードを縦に並べる。分類ごとに繰り返す
5. まとめの一文（組み合わせの多様さを伝える）: 左揃えの太字メッセージに紺の三角を添える
6. 食材の散布イラスト（世界の広がりを視覚化する）: 白地の全幅に、食材イラストを等間隔で散らす
7. 補足トピック（追加の豆知識を示す）: 白カードの上部に紺の吹き出しラベル、中央に散らしたイラスト、下に太字の文
8. 取組の宣言（活動の主旨をまとめる）: 白地にロゴ、主役のイラスト、小さな本文、大きめの太字メッセージを置く
9. 関連コンテンツ（企画への導線を作る）: 下線付きの見出しの下に、バナー画像付きの枠カードを置く
10. 外部発信（外部メディアへ誘導する）: 左揃えの見出しの下に、ロゴ・説明・イラスト帯を入れた枠カード
11. 全国の取組紹介（事例を一覧で見せる）: 2 列の生成りカード 4 枚と、赤の『もっと見る』リンク
12. フッター（問い合わせ先とリンクを置く）: 紺地に白のリンク一覧、白枠のピルボタン、事務局情報、コピーライト

Imagery

• 食材・調味料・家畜などを 30 度のアイソメトリックで描く。フラットな塗りに、ごく薄い陰影だけ付ける
• 背景は白。イラストは輪郭線なしで描き、色は自然な食材の色にする
• FV では食材を細い黒線のグリッドでつなぎ、ネットワーク風に見せる
• 図解の食材は小さなマスに 1 つずつ置き、マスを細い縦線で区切る
• 人物もアイソメで描き、農業や食品ロスなどの場面を表す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC の FV は左にイラスト、右に紺の面とコピーを置く 2 分割
• PC は本文幅を約 66% に絞り、中央に寄せる
• PC の図解カードは 2 列に並べ、食材数の多いものだけ全幅にする
• PC の取組カードは 4 列
• PC のフッターはリンクを横一列に並べ、縦線で区切る

Agent Prompt Guide

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。