DESIGN.md — 生成り地×極太黒文字×黄マーカーの栄養食品 LP（Bold Black Type Yellow Marker Food LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: 力強い・インパクト、情報量多め・訴求型、ポップ・元気
• キーワード: 極太ゴシック・黄色マーカー・生成り地・シズル写真・白カード・紺ピルボタン
• 地の質感: 紙のようなフラットな生成り地。グラデーションは使わず、写真の質感で厚みを出す
• 形: 角丸の小さい白カード。ボタンは紺のピル型。料理は円形の器や全面写真で見せる
• 温度感: 温かみのある中間色の地に黒と黄色を強く効かせ、元気で前のめりな印象

Colors

• 地は生成りベージュで統一し、白カードで情報を浮かせる
• 見出しは黒の極太文字。強調語の下にだけ黄色マーカーを敷く
• 紺はブランドの記号として、ロゴ円・タブ・詳細ボタンに使う
• 購入導線は赤橙か緑の横長ボタンで目立たせる
• 黄色の全幅帯はブランド紹介に 1 回だけ使う
• 暗色は動画と CM の帯に限る
• button-cta-banner は文字 #FFFFFF × 背景 #FD2B14 のコントラスト比が 3.8:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E91902、4.56:1）を使う。

Typography

• 見出しは字間を詰めた極太にする。強調語は 1.3〜1.6 倍に拡大し、大小を混ぜる
• 強調語だけに黄色マーカーを敷く
• 理由の番号は隅付き括弧と丸数字で示す
• 料理写真の上は白い極太文字に黒い影を付けて可読性を保つ
• 本文は短く、2〜4 行で止める
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは 2 列グリッドも可
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• 見出しは左寄せで大きく組み、商品画像を重ねて置く
• 理由セクションは番号付きで縦に並べる
• 特長は写真付きの小カードを並べる
• FAQ は線で区切った一行アコーディオンにする
• 購入エリアは白カードで、プランごとに区画を分ける

Elevation & Depth

• 白カードには弱い影（0 2px 6px rgba(0,0,0,.1)）を付ける
• 商品の切り抜きには柔らかい落ち影を付ける
• ボタンは影なしのフラット

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 商品は切り抜き。料理は円形の器を真上から撮るか全幅の写真。声の人物は切り抜き
• セクション境界: 直線で区切る。黄色帯や柄背景のバナーで切り替える
• カードは角丸小さめ
• 詳細ボタンは黒か紺のピル型にし、右端に＋アイコンを付ける
• 購入ボタンは横長の角丸にし、右矢印を付ける

Components

• 紺ピルボタン（button-primary）: 詳細や購入に使う紺のピル型ボタン
• 赤橙の横長バナー（button-cta-banner）: 関連商品へ送る全幅バー。右端に矢印と商品画像を置く
• 黄色マーカー（marker-highlight）: 強調語の下に敷く黄色の帯
• 特長カード（feature-card）: 上に写真、下に短い見出しを置き、右下に黒丸の＋を付けた白カード
• お客様の声カード（voice-card）: 人物の切り抜き、黄色のペルソナラベル、マーカー付きの感想を載せる白カード
• カテゴリタブ（filter-tab）: 選択中は紺で塗り、他は白地に紺の枠線を付けたピル型
• FAQ 行（faq-row）: 左に Q、右に黒丸の＋を置き、下線で区切る
• 購入プランカード（purchase-card）: アイコン、プラン名、説明、紺ボタンを縦に並べ、お得バッジを付ける

Do's and Don'ts

Do - 見出しは極太で大きく、字間を詰めて組む - 強調語には必ず黄色マーカーを敷く - シズル感のある料理写真を大きく使う - 白カードの右下に＋アイコンを置いて詳細へ誘導する - 理由を番号付きで 3 つ程度並べる

Don't - 細い明朝や繊細な書体を使わない - 地を真っ白にしない（生成りを保つ） - マーカーを多用して強調をぼかさない - グラデーションや装飾的な影を多用しない - パステル調の淡い配色にしない

Page Structure

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

1. ファーストビュー（インパクトのある一言で興味を引く）: 人物と商品の切り抜きに特大の黒コピーを重ね、動画ボタンを添える
2. 問いかけ（何がすごいのかと疑問を投げる）: 小さな前置きに続けて特大の問いを置き、横に商品を並べる
3. 理由1 栄養（栄養バランスを訴求する）: 商品の大きな切り抜きに、マーカー付きの見出しと白カード 2 枚を添える
4. 理由2 おいしさ（味と技術を伝える）: 円形の器の料理写真に白い極太文字を重ね、下に特長カードを 4 枚並べる
5. 理由3 ラインアップ（種類の豊富さを示す）: タブで絞り込み、商品カルーセルと紺の情報パネルを置く
6. 認証・実績（信頼性を補強する）: 黄黒の警告柄バナーとスポーツ選手の画像、動画を並べる
7. 締めコピーと CM ギャラリー（記憶に残す）: 特大コピーに商品を挟み込み、縦長の動画サムネを並べる
8. お客様の声（共感と信頼を得る）: ペルソナラベル付きの声カードを 2×2 で並べる
9. よくある質問（不安を解消する）: 線で区切ったアコーディオンにする
10. ニュース（話題性を示す）: サムネカードを 3 枚横に並べる
11. ブランド紹介（ブランドの定義を伝える）: 黄色の全幅帯に大きな紺の円ロゴと説明文を置く
12. 購入案内（購入方法を選ばせる）: 定期購入の大カードと、3 プランのカードで構成する
13. 関連商品バナー（クロスセルにつなげる）: 柄背景の枠に写真と CTA ボタンを置く

Imagery

• 料理は真上か斜めから寄り、湯気が立つようなシズル感で撮る
• 商品パッケージは白背景で切り抜き、落ち影を付ける
• 人物は表情豊かに撮って切り抜き、コピーと重ねる
• 食材は小さな正方形写真で質感を見せる
• 関連バナーは食欲をそそる暖色の柄背景にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 900px 前後の幅に収め、左右は生成り地にする
• SP では声カードや特長カードを 1〜2 列に落とす
• 特大コピーは SP で 48〜56px に縮め、改行位置を調整する
• カルーセルは SP でスワイプ操作にする
• ブランド紹介帯は SP でロゴの下に本文を縦積みする

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 行書くと起動時に読み込まれる。