DESIGN.md — はちみつ色×オレンジのポップなグミサプリ LP（Warm Honey Pop Gummy Supplement LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: ポップ・元気、かわいい、やさしい・柔らかい、情報量多め・訴求型
• キーワード: はちみつ色・丸ゴシック・円形モチーフ・波線の区切り・グラデーション CTA・ハート
• 地の質感: フラットな淡い暖色の面に、ふんわり光るグロー（白や黄色）と線画イラストを薄く重ねる
• 形: 円・ピル・角丸カード・波線。とがった形はほとんど使わない
• 温度感: とても暖かい。黄・橙・赤ピンクだけで組み、寒色は使わない

Colors

• 地はクリームとはちみつ色を交互に使い、白の地はほとんど使わない
• オレンジはFAQ・カードの枠・帯・フッターなど面積の大きいところに使う
• 赤ピンクはラベル・吹き出し・キャッチの一部の文字にだけ使う
• 主 CTA は左が橙、右がピンクのグラデーションにし、白いフチを付ける
• 本文の強調はオレンジの文字にする。マーカーは引かない
• 大見出しは墨色の文字に黄色いフチを付けて読みやすくする
• button-primary は文字 #FEF7F3 × 背景 #F64F31 のコントラスト比が 3.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DB290A、4.57:1）を使う。
• button-sns は文字 #FEF7F3 × 背景 #F64653 のコントラスト比が 3.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#E40B1B、4.54:1）を使う。
• scene-label は文字 #FEF7F3 × 背景 #F64653 のコントラスト比が 3.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#E40B1B、4.54:1）を使う。
• faq-bar は文字 #FEF7F3 × 背景 #F5642D のコントラスト比が 2.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#CE400A、4.54:1）を使う。
• ingredient-badge は文字 #FEF7F3 × 背景 #F5642D のコントラスト比が 2.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#CE400A、4.54:1）を使う。

Typography

• 見出しは太い丸ゴシックで、字間を少し広げる
• 本文も太めにし、行間は 1.9 前後と広くとる
• 大見出しには白か黄色のフチ文字を使う
• 見出しの一部の語だけを赤ピンクやオレンジにする
• 見出しも本文も中央揃えを基本にする。解説カードの中だけ左揃えにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。円形の特長は縦に積む
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• CTA は FV のあと・動画のあと・利用シーンのあと・まとめ買いのあとの 4 回置く
• 悩みの吹き出しは人物の左右に散らして置く
• 特長は直径 180px 前後の円を縦に並べる
• お客様の声は横にスライドするカードにし、左右の端に前後のカードを少し見せる
• FAQ はオレンジの帯を 8px 間隔で縦に積む

Elevation & Depth

• CTA の下に濃い色の影を付けて、立体的なボタンに見せる
• 円形写真のまわりにピンクや黄色の柔らかいグローを付ける
• 円バッジの外側に白いフチを付ける
• カードに影はほぼ付けない

Shapes

• 角丸: 小 8px ／ 中 14px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: シーン写真は円形。成分写真は角丸の長方形にし、オレンジの枠を付ける
• セクション境界: なだらかな波線。直線で切り替える箇所もある
• CTA とバッジはピル型にする
• ラベルは角丸の長方形にし、下に三角のしっぽを付けて吹き出しにする
• 米粒や不定形のブロブ形を背景にあしらう
• FAQ の帯は角丸なしの四角にする

Components

• グラデーション購入ボタン（button-primary）: 橙→ピンクのピル型に白い二重フチを付ける。左に商品の小さな画像、右に三角の矢印を置く
• SNS誘導ボタン（button-sns）: 赤ピンクのピル型。左に SNS のアイコンを置き、白いフチを付ける
• 悩み吹き出し（worry-bubble）: 淡いグラデーションの楕円に、悩みを短い言葉で 5 つほど書く
• 特長の円バッジ（feature-circle）: 黄色の円に白いフチを付け、上にイラスト、下に 2 行の見出しを置く
• シーンのラベル付き円写真（scene-label）: 赤ピンクか黄橙の吹き出しラベルの下に、グローを付けた円形写真を置く
• 成分解説カード（info-card）: オレンジの枠を付けた角丸カード。上半分は黄色の地で、波線で白い本文エリアと区切る
• お客様の声カード（voice-card）: 淡黄のグラデーションのカードに、丸いアバターと年代・性別を置く。左右に黄色の矢印ボタンを付ける
• FAQ アコーディオン（faq-bar）: オレンジの四角い帯。左に Q.、右に＋を白文字で置く
• 成分の強調帯（ingredient-badge）: 写真の上に白い米粒形の囲みとオレンジのピル帯を重ね、数字を大きく見せる

Do's and Don'ts

Do - 地は暖かいクリーム系だけでまとめる - 形は円・ピル・波線で柔らかくそろえる - CTA は同じデザインで何度も繰り返す - ハートや線画イラストを背景に薄く散らす - 見出しは短く、2 行以内に収める

Don't - 青や緑などの寒色を使わない - 細い明朝体や細い字のゴシックを使わない - 鋭い角や直線的なグリッドを多用しない - 真っ白な地のセクションを続けない - CTA を単色のフラットなボタンにしない

Page Structure

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

1. ファーストビュー（使うタイミングと効果をひと目で伝える）: はちみつ色のグラデーション地。赤ピンクのキャッチの下に大きな商品名、線画の人物、白くグローする円の中に商品と吹き出しを置く
2. 独自成分の提示（差別化の要素を示す）: グラスの線画を背景に、米粒形の白い囲みの中に赤いピルのバッジを置く
3. CTA と SNS での評判（購入へ誘導し、口コミで信頼を補う）: ピル型の CTA と、傾けて重ねた SNS 投稿のカード。ハート型の上に見出しを置き、SNS ボタンを付ける
4. コンセプト（商品の立ち位置を伝える）: 食卓の写真の下に、一部の語を色分けした見出しと中央揃えの本文を置く
5. 紹介動画（食べている様子を見せる）: 縦長の動画をスライドで見せ、左右に黄色の丸い矢印ボタンを置く。下に CTA
6. 悩みの提起（共感を得る）: 白い地の中央に人物を置き、まわりに楕円の吹き出しを散らす。下に橙と赤の太い矢印
7. 解決と特長（得られる効果を示す）: フチ文字の見出しの下に、黄色の円バッジを 3 つ縦に並べる
8. 成分の解説（根拠を示す）: オレンジの枠を付けた写真カードで配合量を強調する。続けて波線で区切った解説カードを置く
9. 利用シーン（使う場面をイメージさせる）: 吹き出しラベル付きの円形写真を 3 つ並べ、そのあとに CTA
10. パッケージの魅力（持ち運びやすさと形のかわいさを伝える）: 不定形のブロブの中に商品写真を置き、白いピル型の吹き出しにコピーを入れる
11. お客様の声（体験談で信頼を高める）: ぼかした写真を背景に、淡黄のカードを横にスライドさせる
12. イメージバナー（使ったあとの気分を印象づける）: 伸びをする人物の写真に、オレンジのフチ文字のキャッチを重ねる
13. よくある質問（購入前の不安をなくす）: はちみつ色の地にオレンジの帯を 4 つ積む
14. まとめ買いの案内・CTA・フッター（法人向けの案内と最後のひと押し）: オレンジの帯で大容量品を案内し、CTA を置く。波線で区切ったオレンジのグラデーションのフッター

Imagery

• 商品は淡い黄色の地で、柑橘や料理と一緒に明るく撮る
• グミは半透明のオレンジのハート型。装飾として散らす
• 乾杯や飲み会の写真は暖色の照明で撮り、円形に切り抜く
• 細い線画で、人物やグラスを淡いベージュの線で描く
• 特長は小さなフラットイラスト（時計・口・寝起きなど）で示す
• 人物は自然光の部屋で、明るい表情で撮る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では FV を横並びにする（左にコピー、中央に商品、右に成分と CTA）
• PC ではコンセプトを写真とテキストの 2 カラムにする
• 特長の円バッジとシーン写真は PC では 3 つ横に並べる
• 成分の写真カードと解説カードは PC で左右に並べる
• FAQ は PC で幅を 60% ほどに絞って中央に置く
• 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 行書くと起動時に読み込まれる。