DESIGN.md — 朱赤×焦げ茶のポップな機能性サプリ LP（Playful Red and Cocoa Diet Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: ポップ・元気、情報量多め・訴求型、親しみ・手作り感、信頼・誠実
• キーワード: 朱赤・焦げ茶・料理写真・キャラクター・図解とグラフ・白カード
• 地の質感: 黒板・木目・クラフト紙・ドット柄の地紋の上に、白い角丸カードを重ねる
• 形: 角丸カード、円形バッジ、赤い四角に白抜きの一文字、波線の下線
• 温度感: 暖色寄りでにぎやか。終盤は水色と緑で爽やかに落ち着かせる

Colors

• 朱赤は大事なキーワード、白抜きの一文字バッジ、注意書きの枠線だけに使う。
• 焦げ茶はセクション見出しの帯と大きな見出し文字に使い、ブランドの重さを出す。
• 地の色は白・クリーム・クラフト紙・黒板・水色を順に切り替え、単調にしない。
• グラフでは比較対象を灰色、推したい成分をオレンジにして差を見せる。
• 暗い地のキャッチは黄色、キーワードは朱赤にする。
• 終盤の品質セクションは水色と緑にして、清潔感と安心感で締める。
• kanji-badge は文字 #FEFE9E × 背景 #E03C2A のコントラスト比が 4.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D6311F、4.6:1）を使う。
• mechanism-card は文字 #E03C2A × 背景 #FEFEFE のコントラスト比が 4.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D6311F、4.56:1）を使う。

Typography

• 見出しは極太のゴシックにし、キーワードだけを朱赤にして大きくする。
• キーワードを赤い四角に白抜きで入れ、見出しの中に混ぜて使う。
• 見出しの下には赤い波線を引いて強調する。
• 吹き出しや添え文は手書き風の書体にし、斜めに置いてもよい。
• 本文は 14px 前後、行間 1.8 で読みやすくする。
• 試験の概要は 10px の小さな文字でまとめて置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分カードの一部は 2 カラム
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 各セクションは全幅の背景にし、中身は左右 5% の余白をとる。
• 白カードは背景の地紋より一段手前に重ねて置く。
• グラフ・図解はカードの横幅いっぱいに置き、下に注釈を添える。
• 料理写真は画面の端からはみ出させ、にぎやかさを出す。
• お客様の声は本文、写真、年代バッジの順で縦に並べる。

Elevation & Depth

• 白カードには下方向に薄い影（0 4px 8px rgba(0,0,0,.08)）をつける。
• 商品パッケージの写真は少し影を落として浮かせる。
• 重ねて置く写真は傾けて、影をつける。

Shapes

• 角丸: 小 6px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 料理は円形の皿ごと切り抜く。体験の写真は角丸、終盤の写真は傾けた矩形
• セクション境界: 基本は直線で切り替える。焦げ茶の帯の下だけ三角の矢印を出し、次へつなぐ
• バッジは円形かピル型にする。
• 成分カードの間には赤い丸に白いプラス記号を置く。
• 利用シーンの番号は焦げ茶の丸に入れる。
• ラベル見出しは朱赤の枠線のピル型にし、カードの上辺にまたがせる。

Components

• 一文字バッジ（kanji-badge）: キーワードの一文字を朱赤の四角に白抜きで入れ、見出しや写真の上に置く
• 焦げ茶の見出し帯（section-band）: 全幅か、カード上部の焦げ茶の帯に白文字の見出しを入れる
• チェックリスト（check-list）: 赤いチェックマークの後に太字の悩みを並べ、点線で区切る
• 比較グラフ（bar-chart）: 灰色とオレンジの円柱バーを赤い矢印でつなぎ、オレンジの吹き出しで効果を示す
• 作用の図解カード（mechanism-card）: 焦げ茶の帯の見出しの下にイラストの図解を置き、赤い波線つきの結論を添える
• 成分カード（ingredient-card）: 左に水彩の素材イラスト、右に成分名と説明を置く。カードの間はプラス記号でつなぐ
• お客様の声カード（voice-card）: 太字の本文の下に食事写真を置き、右下にオレンジの円で年代を示す
• 枠線つきの説明ボックス（outline-label）: 朱赤の枠線ボックスで、ピル型の見出しを上辺にまたがせる
• Q&A カード（faq-card）: 質問のキーワードだけ朱赤にし、本文を続ける白カードを縦に並べる

Do's and Don'ts

Do - 効果の主張には必ずグラフ・図解・注釈をセットにする。 - キーワードは朱赤にし、一文字バッジや波線で視覚的に強調する。 - 料理写真とゆるいキャラクターを各所に置き、楽しい食事の印象を保つ。 - 地の質感（黒板・クラフト紙・ドット）をセクションごとに変える。 - 白カードは角丸 16〜24px にして、薄い影をつける。

Don't - 朱赤を広い面の地色に使わない。 - 寒色を前半に多用しない。前半は暖色でまとめる。 - 注釈を省いたり、本文と同じ大きさにしたりしない。 - 角の鋭いカードや細い明朝で、ポップさを崩さない。 - 写真を無機質な白抜きだけで並べない。

Page Structure

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

1. ファーストビュー（食事を楽しむ人物と商品で第一印象をつくる）: 笑顔の人物写真に極太のキャッチを重ねる。朱赤の円形バッジ、商品、成分の白ボックス 4 つを置く
2. 悩みの提起（対象の読者に自分ごと化させる）: 料理写真を周りに散らし、中央にチェックリストを 5 項目並べる
3. 共感（我慢したくない気持ちに寄り添う）: 黒板風の地に、角砂糖と油のアイコン、料理写真、黄色の大きなキャッチを置く
4. 主張と根拠（働きと届出の情報を示す）: 一文字バッジの見出し、白い帯のコピー、皿の上の商品、届出表示の本文で構成する
5. 試験データ（数値で信頼させる）: OFF バッジの見出し、比較グラフ、小さな試験概要を 2 セット並べる
6. 利用シーン（使う場面を想像させる）: 斜めに切った料理写真の帯を 3 段重ね、短いコピーを添える
7. 成分紹介（主成分の由来を伝える）: 木目の暗い地に果実の写真、金のメダルバッジ、キャラクターの吹き出しを置く
8. 作用の図解（仕組みを図で理解させる）: ドット地に、焦げ茶の帯の白カードを 2 つ並べ、イラストの図解を入れる
9. サポート成分（独自の処方を見せる）: 焦げ茶の帯から矢印で続け、白木目の地に成分カード 4 つをプラス記号でつなぐ
10. 制度の説明（機能性表示食品とは何かを説明する）: クラフト紙の地に紙吹雪を散らし、商品と朱赤の枠線の説明ボックスを置く
11. お客様の声（利用者の実感を伝える）: 緑のリボン見出しの下に、写真つきの白カードを 3 枚並べる
12. 飲み方（続け方を示す）: クリーム地に、SCENE 番号つきの線画カードを 3 枚並べる
13. 品質（製造の安心感を伝える）: 水色の地と葉の装飾、研究者の写真、円形の認証バッジ 2 つ
14. ブランドメッセージ（価値観に共感させる）: 水彩の皿とカトラリーのイラストに中央揃えの本文を添え、傾けた写真をコラージュする
15. よくある質問（不安を解消する）: ドット地にキャラクターと見出しを置き、Q&A の白カードを縦に並べる

Imagery

• 料理は真上か斜め上から撮り、皿ごと切り抜いて端からはみ出させる。
• 人物は自然光で、食事中の笑顔を撮る。
• キャラクターは太い線のレトロな漫画調で、リボンをつけた女の子や動物にする。
• 成分は水彩タッチのイラストで描く。
• 利用シーンは茶色の線画に、淡いオレンジを差して描く。
• 品質のパートは白衣の研究者の写真と、新緑の葉の装飾を組み合わせる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に 480〜600px の SP レイアウトを置き、背景を全幅に広げることを推奨する。
• PC では、成分カードやお客様の声を 2〜3 カラムにしてもよい。
• グラフと図解は最大幅を 600px 程度にする。
• 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 行書くと起動時に読み込まれる。