--- version: alpha name: Isometric Food Illustration Navy Public Campaign LP description: 白と淡い青灰の地に、紺の面と朱色の見出し線を合わせた行政系の食育啓発LP。アイソメトリックの食材イラストを図解カードに並べ、食材と原料のつながりを線で結んで見せる。情報は落ち着いていて、イラストの楽しさで親しみを出している。 colors: primary: '#3D4D7E' on-primary: '#F8FDFE' background: '#FFFFFF' background-alt: '#F8F9FD' surface: '#FEFEFE' accent-1: '#A02E1A' cta: '#A40C1A' text: '#3F3F3F' line: '#E5E1DA' tint-1: '#FAF6F3' accent-2: '#A69D8E' on-cta: '#3D3E43' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 30px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.08em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.06em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.08em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.05em body-md: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.06em note: fontFamily: Zen Kaku Gothic New fontSize: 12px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.04em accent: fontFamily: Montserrat fontSize: 10px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.1em label-button: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em rounded: sm: 4px md: 10px lg: 16px full: 999px spacing: unit: 8px card: 24px section: 72px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-video: backgroundColor: '{colors.on-primary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 46px heading-v-line: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 90px diagram-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 380px arrow-down: backgroundColor: '{colors.primary}' height: 24px speech-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 36px topic-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 310px link-more: textColor: '{colors.cta}' typography: '{typography.label-button}' height: 30px button-outline-footer: textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 50px --- # DESIGN.md — 紺×朱線のアイソメ食材図解 啓発LP（Isometric Food Illustration Navy Public Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 自治体・公共・団体 ／ **雰囲気**: 信頼・誠実、シンプル・ミニマル、清潔・爽やか、ナチュラル - **キーワード**: アイソメトリック・食材図解・紺の面・朱の見出し線・白カード・余白多め - **地の質感**: フラットでノイズなし。イラストだけに淡い陰影がある - **形**: 角丸小さめの白カード。見出し下の線は中央がV字に折れる - **温度感**: やや寒色寄り。食材イラストで温かさを足している ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#3D4D7E` | FVコピー面・フッター・矢印の紺 | 10% | 画素の実測 | | `on-primary` | `#F8FDFE` | 紺地の上の白文字 | 2% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 50% | 画素の実測 | | `background-alt` | `#F8F9FD` | 図解セクションの淡い青灰地 | 21% | 画素の実測 | | `surface` | `#FEFEFE` | 図解カードの白面 | 12% | 画素の実測 | | `accent-1` | `#A02E1A` | 見出し下のV字ラインの朱 | 0% | 画素の実測 | | `cta` | `#A40C1A` | 「もっと見る」テキストリンクの赤 | 0% | 画素の実測 | | `text` | `#3F3F3F` | 見出し・本文の墨色 | 2% | 画素の実測 | | `line` | `#E5E1DA` | カード内の区切り線・連結線 | 0% | 画素の主要色に補正 | | `tint-1` | `#FAF6F3` | 取組カードの生成り面 | 4% | 画素の実測 | | `accent-2` | `#A69D8E` | イラストの盆などに使うグレージュ | 4% | 画素の実測 | | `on-cta` | `#3D3E43` | 白ピルボタンの紺文字 | 0% | 画素の主要色に補正 | - 地は白と淡い青灰（#F8F9FD）を交互に敷いて、セクションを区切る - 紺は FV のコピー面とフッターに大きく使い、ページの最初と最後を締める - 朱色は見出し下の V字ラインにだけ使い、面には使わない - 紺の小さな三角矢印で、図解の流れを下へ導く - 赤い文字は『もっと見る』などのリンクに限る - 色数が増えるのはイラストだけ。UI は紺・朱・墨・白に絞る ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の紺地に置く大コピー | ゴシック | Zen Kaku Gothic New | 700 | 30px | 1.6 | 0.08em | | `headline-lg` | セクションの大見出し（中央揃え） | ゴシック | Zen Kaku Gothic New | 700 | 24px | 1.5 | 0.06em | | `headline-md` | まとめのメッセージ・左揃えの見出し | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.7 | 0.08em | | `headline-sm` | カードのタイトル | ゴシック | Zen Kaku Gothic New | 700 | 15px | 1.6 | 0.05em | | `body-md` | カードの説明文・本文 | ゴシック | Zen Kaku Gothic New | 500 | 14px | 1.9 | 0.06em | | `note` | 食材のラベル・住所 | ゴシック | Zen Kaku Gothic New | 400 | 12px | 1.7 | 0.04em | | `accent` | 縦書きの SCROLL などの英字 | 欧文サンセリフ | Montserrat | 600 | 10px | 1.2 | 0.1em | | `label-button` | ピルボタンとリンク | ゴシック | Zen Kaku Gothic New | 700 | 15px | 1.4 | 0.08em | - 全体を太めのゴシック 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-d3057d75`（元 LP の URL から採番） - **元 LP**: https://nippon-food-shift.maff.go.jp/onigiri/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。