DESIGN.md — ライムグリーン×深緑の腸活ドリンクLP（Lime Green Gut Health Energy Drink LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: 情報量多め・訴求型、力強い・インパクト、清潔・爽やか、ナチュラル
• キーワード: ライムグリーン・斜めリボン見出し・太ゴシック・写真合成・腸活・価格カード
• 地の質感: 水しぶきや光の粒を重ねた写真合成と、コンクリート調グレーの地を使う。単色の面は少なめ。
• 形: 平行四辺形のリボン、角が小さい四角い白枠ボックス、正円の悩みバッジ、四隅だけのかぎ括弧の枠。
• 温度感: やや涼しい。緑と白が中心で、価格まわりだけ橙の暖色。

Colors

• 地は白と淡いグレーを交互に使い、ブランド紹介だけ深緑の全面背景にする。
• 黄緑は平行四辺形のリボン見出しと強調語の下線だけに使う。
• 購入ボタンは橙のグラデにして、緑系の画面の中でいちばん目立たせる。
• 価格の数字は赤ピンクにし、税込表記は小さく添える。
• 悩みセクションはグレーのコンクリート調にして暗めにし、解決のセクションで明るい水色系に切り替える。
• 実績バッジの数値だけ金リングで縁取る。
• ribbon-heading は文字 #FFFFFF × 背景 #84C558 のコントラスト比が 2.08:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#4F822D、4.6:1）を使う。
• button-primary は文字 #FFFFFF × 背景 #EB8B04 のコントラスト比が 2.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#AC6603、4.51:1）を使う。

Typography

• 見出しはほぼ太さ800〜900のゴシックで、1行を8〜12文字に抑えて改行する。
• 見出しの中のキーワードは黄緑のリボンや白抜きの黒ボックスに入れて強調する。
• 強調したい語は文字サイズを1.3倍にして、ほかの語との大小差をつける。
• 写真の上の白文字には暗めの影をつけて読めるようにする。
• 本文は中央揃えにし、行間は1.8以上とる。
• 英字の商品名は細長いコンデンスド書体で横幅いっぱいに組む。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。写真グリッドだけ2〜4列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションは全幅の背景で区切り、中身は中央揃えにする。
• 見出し・写真・説明を縦に積み、写真は全幅で大きく見せる。
• 価格カードは3段で縦に並べ、それぞれ見出しリボン、商品写真、価格、ボタン、注釈の順にする。
• 悩みは左寄せのチェックリストにし、写真の人物と左右交互に配置する。
• 原因や効果は正円を3つ・2つと並べるか、3×2のグリッドで並べる。

Elevation & Depth

• 白枠ボックスと価格カードには薄い影をつける（0 2px 6px rgba(0,0,0,.15)）。
• 購入ボタンは下側に濃い橙の影をつけて立体的に見せる。
• 悩みの正円は白地に薄い影をつけて浮かせる。
• 写真の上の文字には黒い影（0 2px 4px rgba(0,0,0,.5)）をつける。

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は四角のまま全幅で配置する。人物は切り抜いて背景と合成する。SNSの画面はスマホ型の角丸カードにする。
• セクション境界: 基本は直線で切り替える。FVの下端などに斜めの帯を重ねることがある。
• 見出しは平行四辺形のリボン（skew -12°前後）にする。
• ラベルは黒線の白い四角ボックスにし、下に吹き出しの三角をつける。
• 注釈や補足は四隅だけのかぎ括弧の枠で囲む。
• 悩み・効果は正円のバッジにする。
• 購入ボタンは角丸6px前後の横長にする。

Components

• 斜めリボン見出し（ribbon-heading）: 黄緑の平行四辺形に白の太字。見出しの中のキーワードを強調する。
• 購入ボタン（button-primary）: 橙のグラデにした横長ボタン。白の太字で、下に影をつける。
• 価格プランカード（price-card）: 黄緑の見出しリボンの下に、商品写真・数量ラベル・赤い価格・ボタン・かぎ括弧の注釈を並べる。
• 吹き出しラベル（label-box）: 黒線の白い四角に太字の短い語を入れ、下に三角をつける。図解の注記にも使う。
• 悩み・効果の円バッジ（circle-badge）: 白い正円の中に2〜3行の太字を入れる。3つ・3つや3つ・2つで並べる。
• 悩みチェックリスト（check-list）: チェックボックスのアイコンに短い悩みを1行ずつ並べ、キーワードは大きくする。
• 実績メダル（stat-medal）: 金のリングで囲んだ円に、満足度の%や星評価を大きく入れる。
• 黒地の強調語（dark-label）: 濃いグレーの帯に白文字で強調語を入れ、文中に挟む。

Do's and Don'ts

Do - キーワードは必ず黄緑のリボンか黒地の帯に入れて目立たせる。 - 購入ボタンは橙だけで作り、ほかの要素に橙を使わない。 - 写真の上には白の極太文字を重ねて勢いを出す。 - 悩み→原因→改善→解決の流れで、背景の明るさも暗→明に変える。 - 数値（%・★・価格）は大きく、単位は小さくする。

Don't - 細い明朝体やかわいい丸ゴシックは使わない。 - 黄緑を広い面の背景に敷かない（リボンや帯だけにする）。 - 大きな角丸やピル型でやわらかくしすぎない。 - 余白を広くとりすぎず、詰めた情報量を保つ。 - 価格の色を緑にしない。

Page Structure

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

1. ファーストビュー（商品と新しさを一目で伝える）: 黄緑の光と柑橘の水しぶきの上に缶を3本合成する。上部に白の極太キャッチ、下部に英字の商品名を大きく置く。
2. 成分の根拠（研究に基づく成分配合を示す）: 白地に黒の太字見出しとリボンを置き、腸のイラストに吹き出しラベルで成分を示す。
3. コンセプト（小腸と大腸の両方に働きかけることを伝える）: 吹き出しラベルを2つ並べ、人物写真の上に斜めの黄緑の帯と白の大文字を置く。
4. 商品ラインナップ（3つの味を見せる）: 自然素材と一緒にテーブルに置いた缶の写真の上に、英字のタイトルを置く。
5. ブランド紹介（作り手と店舗で信頼をつくる）: 深緑の背景にロゴ、白枠の見出し、人物写真、白いカードの説明を置き、続けて店舗写真を2×2で並べる。
6. 店舗・スタッフ（専門スタッフがいることを示す）: 白地に葉の装飾をあしらい、スタッフ写真を4列と3列で並べ、資格名を大きな太字にする。
7. 実績（満足度と口コミの評価を示す）: 金色の光の背景に、金リングのメダルを2つ並べる。
8. 著名人の愛用（SNSの投稿で社会的証明を見せる）: 放射線の装飾をつけた見出しの下に、スマホ型のSNS画面を3×2で並べる。
9. 開発の想い（開発の理由を語って共感を得る）: グレーの地に白いカードを置き、四隅を黄緑の括弧で飾って、中央揃えの本文を入れる。
10. 価格プラン（3つの購入段階を選べるようにする）: 価格カードを縦に3枚並べ、各カードに購入ボタンを置く。
11. 悩みの提起（体調の悩みに当てはまるか確認してもらう）: コンクリート調のグレーの地に、悩んでいる人物の写真とチェックリストを置く。下向きの山形矢印を挟む。
12. 原因（生活習慣が原因だと示す）: 原因を円バッジで並べ、黒帯の強調語を入れる。さらに悪化する可能性を、人物を左右に置いた帯で示す。
13. 改善の効果（腸活のメリットを並べる）: 明るい光の背景に効果の円バッジを3×2で並べ、笑顔の人物写真とリボン見出しを置く。
14. 腸活の考え方（小腸と大腸の役割を解説する）: 淡い水色の地に腸の図解と黒見出しの説明ボックスを置き、四角で囲んだキーワード文を入れる。

Imagery

• 商品の缶は柑橘や水しぶき、黄緑の光彩と合成し、躍動感を出す。
• 人物は明るい屋外で自然に笑う男女を撮り、背景はぼかす。
• 悩みの場面はグレーの色調で、頭を抱える・横になる人物を使う。
• 腸はやわらかいピンクのイラストにし、緑の光で注目する部分を示す。
• 店舗やスタッフは植物の多い自然光の写真にし、エプロン姿で商品を持たせる。
• 装飾として葉っぱのイラストや、ぼけた光の粒を散らす。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元のLPはPCでも中央に約750px幅のSP型カラムで表示している。SPでもそのまま1カラムにする。
• SPでは写真を全幅で配置し、テキストブロックは左右に約6%の余白をとる。
• スタッフ写真の4列グリッドは、SPでは2列にしてもよい。
• 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 行書くと起動時に読み込まれる。