DESIGN.md — 橙×緑の子ども向け栄養サプリ訴求 LP（Bright Orange Kids Supplement Story LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: ポップ・元気、情報量多め・訴求型、親しみ・手作り感、やさしい・柔らかい
• キーワード: 子育て・オレンジ・マーカー強調・インフルエンサー体験談・斜め帯・六角形バッジ
• 地の質感: 紙・黒板・木目などの質感背景に写真を重ね、白カードと太い黒枠の吹き出しを載せる
• 形: 斜めに傾いた白帯見出し、黒枠の手書き風吹き出し、六角形・円形の成分バッジ
• 温度感: 暖色中心。問題提起部のみ紺・黒で冷たく沈める

Colors

• 地はグレー・オレンジ・緑・紺をセクション単位で切り替え、物語の転換を色で示す
• 問題提起は紺や黒の暗色面＋白文字で不安感を出す
• 解決・商品紹介はオレンジ主体に戻し明るく転換する
• 本文中の重要文は黄色マーカーかオレンジ文字で強調
• 緑地の体験談では強調を黄色文字にする
• 警告・数値は赤系で目立たせる
• nutrient-hex-badge は文字 #E2E7EC × 背景 #D77646 のコントラスト比が 2.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#A54F24、4.51:1）を使う。
• follower-badge は文字 #E2E7EC × 背景 #D77646 のコントラスト比が 2.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#A54F24、4.51:1）を使う。
• qa-bar は文字 #E2E7EC × 背景 #D77646 のコントラスト比が 2.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#A54F24、4.51:1）を使う。
• connector-pill は文字 #E2E7EC × 背景 #CA4344 のコントラスト比が 3.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#BC3536、4.56:1）を使う。

Typography

• 見出しは太く、数値だけを1.5〜2倍に拡大
• 見出し内の重要語は色替え（オレンジ/赤）
• 本文は丸ゴシックで行間広め
• 章番号はグレーの巨大数字を見出し背後に半分はみ出して置く
• 「＼ ／」の囲みで短い導入句を添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、悩み・症状は 2 カラムのカードグリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• 全幅の写真と色面を交互に積む
• 体験談は写真→名前バッジ→見出し→本文→写真の順
• 見出しは斜め帯や吹き出しに入れてリズムを作る
• 白カードは左右に約6%の余白

Elevation & Depth

• 白カードにはうっすらした影
• 吹き出しは影なしで黒太枠
• 写真はわずかに傾けた白フチ付きで重ねる

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 全幅の矩形写真、症状カードは角丸、人物は円形・六角形
• セクション境界: 斜めカットや、紙を破ったような波形の境界
• 成分は六角形や円形のバッジにする
• 見出し帯は-3〜-5度傾ける
• 吹き出しは不規則な黒枠の円形にする

Components

• 斜め帯見出し（slanted-headline-band）: 白地の傾いた帯に太字見出しと巨大番号
• 悩み吹き出し（worry-bubble）: 黒枠の白い円形吹き出しに短い悩みを入れて散らす
• 成分六角バッジ（nutrient-hex-badge）: 色違いの六角形に成分名と含有量
• フォロワー数バッジ（follower-badge）: オレンジ円に数値、横に名前とIDのピル
• 体験談カード（testimonial-card）: グレーまたは緑地の全幅ブロック、マーカー強調入り本文
• Q&Aバー（qa-bar）: オレンジ枠にQ見出し、回答は白カードに顔写真付き
• 症状カード（symptom-card）: 暗色地に角丸写真＋下部黒帯キャプションの2列
• つなぎラベル（connector-pill）: 「さらに」等の短語を円や台形のラベルで章間に置く
• レシピカード（recipe-card）: 黒枠白カードにオレンジタイトル帯、材料の点線リスト、番号付き手順

Do's and Don'ts

Do - 子どもの笑顔写真を大きく全幅で使う - 数値を大きく色替えして目立たせる - セクションごとに地の色を変えて流れを作る - 重要文は黄色マーカーで強調 - 専門家・メディア掲載を早い段階で見せる

Don't - 細い明朝で上品にまとめない - 余白を広げすぎて情報密度を下げない - 暗色面を解決パートに使わない - 強調色を一文に3色以上混ぜない - 写真をくすんだ寒色に加工しない

Page Structure

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

1. ファーストビュー（悩みと解決を一目で伝える）: 子どもの全幅写真に大きな見出し、商品写真と配合量バッジ、六角成分バッジ
2. 権威・共同開発（信頼性付与）: 専門家写真と×で結ぶ実績ラベル、アプリ画面
3. メディア掲載（社会的証明）: 斜めストライプ地に雑誌・交通広告画像と帯見出し
4. 悩みの提起（共感）: 暗色写真上に黒枠吹き出しを4つ散らす
5. 解決提示（商品で解決できると示す）: 笑顔の子ども写真に縦書き大見出し、特長吹き出し
6. お客様の声（インフルエンサー体験談）: 写真＋フォロワーバッジ＋見出し＋マーカー本文を繰り返す
7. 専門家紹介・Q&A（専門性の説明）: オレンジ地に吹き出し見出し、プロフィールカード、Q&A
8. 問題の深掘り（不足の危機感を高める）: 警告アイコン、黒板・紺地、症状カード2列、棒グラフ
9. 原因説明（摂取しにくい理由）: 白カード内で2種類比較、線画イラスト
10. 特長（配合成分の優位性）: 金色エンブレム、番号付き斜め帯見出し、比較グラフ・図解
11. 配合成分（栄養価の可視化）: 食材写真の反復、六角形成分グリッド
12. 安心・安全（品質保証）: 青空と工場写真、赤い円形認証バッジ、無添加項目のオレンジ円
13. レシピ（使い方の具体化）: 料理写真とレシピカード、星の装飾
14. 締めのメッセージ（想いを伝え購入へ）: 商品写真と大見出し、専門家の顔写真

Imagery

• 自宅で食べる子どもの自然な笑顔・食事シーンを明るく撮る
• SNS投稿風の家庭写真を白フチで傾けて重ねる
• 問題提起では頭を抱える親子写真を暗く落とす
• 食材写真（肉・野菜・魚）を切り抜きで配置
• 白い六角形を並べた幾何学パターンの商品パッケージ風装飾
• シンプルな線画イラストと星・紙吹雪の装飾
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に SP 幅（約 750px）のカラムを置き、左右は淡色背景で埋める
• PC でも1カラムの縦長構成を保つ
• 症状カードは PC で3〜4列に広げてもよい
• 見出しサイズは PC で約1.3倍

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