DESIGN.md — 空色×緑の爽やか青汁定期便 LP（Fresh Sky Blue Green Juice Subscription LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 清潔・爽やか、信頼・誠実、情報量多め・訴求型、ナチュラル
• キーワード: 空色・野菜の緑・明るい朝・定期便オファー・写真主体・光のフレア
• 地の質感: 白〜淡グレーの地に、明るく高キーの写真と柔らかいレンズフレアを重ねる。紙の質感は使わない。
• 形: 角丸の白カード、ピル型 CTA、斜めの写真区切り、文字の帯ラベル
• 温度感: やや寒色寄りの爽やかさ。暖色はオレンジとベージュで少しだけ足す。

Colors

• 地は白と淡グレーを交互に使い、写真セクションで区切る
• 空色は見出し・帯ラベル・FAQ に使うブランド色。大きな面には使わない
• 主 CTA は緑のみ。単品購入はオレンジにして主・副を色で分ける
• 割引率は赤ピンクのギザギザバッジだけで見せる
• 強調語は黄マーカーか空色/緑の帯に白抜きにする
• 素材や製法の話は深緑でまとめ、ブランドの空色と分ける
• button-primary は文字 #FFFFFF × 背景 #1BAB43 のコントラスト比が 3.02:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#158835、4.56:1）を使う。
• button-secondary は文字 #FFFFFF × 背景 #E49C33 のコントラスト比が 2.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#A36A16、4.54:1）を使う。
• badge-discount は文字 #FFFFFF × 背景 #E8335A のコントラスト比が 4.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#E61E49、4.52:1）を使う。
• label-band は文字 #FFFFFF × 背景 #049CE4 のコントラスト比が 3.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#037DB7、4.54:1）を使う。
• point-badge は文字 #FFFFFF × 背景 #248E5E のコントラスト比が 4.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#228659、4.54:1）を使う。
• faq-bar は文字 #FFFFFF × 背景 #049CE4 のコントラスト比が 3.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#037DB7、4.54:1）を使う。

Typography

• 大見出しは細めの明朝を空色・緑・濃グレーで大きく入れる
• 本文はゴシックで、行間は広めの 1.8〜1.9
• 価格の数字はとても太い丸ゴシックで 60px 前後まで大きくする
• 英字の小ラベル(POINT/RECIPE など)は字間を広くして見出しの上に置く
• 注釈は 9px 前後でブロックの下にまとめる
• 手書き風の書体はレビューのハッシュタグとレシピ名だけに使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長やレシピは写真と文章を左右交互に並べる
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• オファーブロックは白カードにして上部・中盤・下部の 3 回繰り返す
• 写真は画面幅いっぱいに置き、その上に見出しを重ねる
• 特典やメリットは番号付きの横長行を縦に 4 つ並べる
• レビューはベージュの見出し帯とアレンジ枠つきの白カードを縦に積む
• FAQ は空色バーを縦に並べるアコーディオンにする

Elevation & Depth

• 白カードには薄い影(0 2px 8px rgba(0,0,0,.12))をつける
• CTA ボタンには下方向に少し影をつける
• 写真の重なりは影ではなく斜めの区切りで見せる

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 四角か角丸の写真。素材写真は切り抜いて余白に置く
• セクション境界: 斜めカットの写真区切りと、角丸カードの境界
• CTA は完全なピル型
• 帯ラベルは角丸なしの四角
• POINT 番号は円形バッジにする
• 特長カードの角は 24px で大きめに丸める

Components

• 主 CTA ボタン（button-primary）: 緑のピル型ボタン。右端に矢印を置き、影をつける
• 単品購入ボタン（button-secondary）: オレンジのピル型ボタン。主 CTA より少し小さくする
• 定期便オファーカード（price-offer-card）: 商品写真・通常価格・特大の初回価格・割引バッジ・特典 2 行を 1 枚の白カードにまとめる
• 割引ギザギザバッジ（badge-discount）: 赤ピンクの星形に白文字で割引率を入れる
• 白抜き帯ラベル（label-band）: 空色の四角帯に白文字。見出しを 1 行ずつ帯にのせる
• 番号付きメリット行（merit-row）: 左に空色の番号タブ、右は白地に枠線。強調語には黄マーカーを引く
• POINT 円バッジ（point-badge）: 緑の円に英字の POINT と番号、短い悩み語を入れる
• お客様の声カード（review-card）: 上部はベージュ地に人物写真と見出し。下部は感想とクリーム地のアレンジ枠
• FAQ バー（faq-bar）: 空色のバーに白文字の質問、右端に＋
• 単品価格ボックス（price-box-dark-head）: 濃グレーのヘッダー付き白箱。通常価格＋送料を並べ、下にオレンジのボタンを置く

Do's and Don'ts

Do - 価格オファーは同じデザインで 3 回繰り返す - 強調語は黄マーカーか色帯にして、1 文に 1〜2 箇所までにする - 写真は明るく高キーにし、空色の光やフレアを足す - データはグラフで見せ、空色・オレンジ・濃グレーで色を分ける - 注釈はブロックの直下に小さくまとめる

Don't - 主 CTA に緑以外の色を使わない - 暗い背景を広い面積に使わない(製法パートの一部だけにとどめる) - 見出しを太い黒ゴシックだけで組まない - 角丸と四角の帯を混ぜて乱雑にしない - 空色と深緑を同じ見出しの中に混ぜない

Page Structure

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

1. ファーストビュー（商品とひと言の価値を伝える）: 青空背景に手書き風の白いキャッチを置き、商品箱を大きく見せる。下に 3 つの丸バッジで特長を並べる
2. 定期便オファー（最初に価格と特典を見せる）: 白カードに特大の価格、割引バッジ、緑の CTA、特典 2 行、単品価格ボックスを入れる
3. 悩みの提起（毎日の食事の悩みに共感してもらう）: 和食の写真を斜めに区切って重ね、悩みを白い帯の短い文で 3 つ並べる
4. ブランド紹介（食品メーカーとしての信頼を伝える）: 大きな明朝見出しと光の写真。最後は空色地のラベルで締める
5. 特長 POINT 01〜03（成分の価値を説明する）: グレー地に POINT 番号と明朝見出しを置く。素材の切り抜き写真と色帯のハイライトを使い、棒グラフも入れる
6. 凝縮・利用シーン（飲む場面を想像してもらう）: 注ぐ瞬間の大写真に黄色の手書き見出し。続けて女性が飲む写真を置く
7. 定期便メリット（定期便を選ぶ理由を示す）: 空色の吹き出し見出しの下に、番号付きの行を 4 つ並べる
8. 原料・製法のこだわり（品質を裏付ける）: 畑の写真と深緑の明朝見出し。角丸カードに地図と工程図を入れる
9. 栄養充足（一食分の価値を数字で示す）: 空色の大見出しとレーダーチャートを使う
10. 味・飲み方（飲みやすさと手軽さを伝える）: 白い渦の背景に空色の見出し。手順 2 枚を空色の枠のカードに入れる
11. 特典・アレンジレシピ（続ける楽しさを伝える）: 写真と文章を左右交互に置く。レシピ名は手書き風の文字を枠で囲み、空色のピル型サブボタンをつける
12. お客様の声（第三者の評価を見せる）: ベージュの見出し帯がついたカードを 3 枚縦に並べる
13. 最終オファー（購入を後押しする）: 冒頭のオファーとメリット行、単品ボックスをそのまま繰り返す
14. よくある質問（不安を解消する）: 空色の Q&A の大見出しの下に、空色のアコーディオンバーを並べる

Imagery

• 写真は自然光の白く明るいキッチンや食卓。浅い被写界深度で撮る
• 緑の飲み物のグラスを主役にし、注ぐ瞬間や泡も見せる
• 野菜・粉末・蜜などの素材は切り抜いて余白に置く
• 空色のレンズフレアや虹色の光を重ねる
• 工程図はシンプルなフラットイラスト(緑の葉・矢印・クリーム色の円)
• 人物は飲む・持つなどのナチュラルな日常のしぐさで撮る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では中央に 750px 前後の SP 幅カラムを置き、左右は淡グレーで埋める
• PC では大写真をカラムの幅に収め、見出しサイズは 1.3 倍程度にとどめる
• メリット行やレシピは PC でも同じ構成のまま余白だけ広げる
• CTA は PC で幅 400px 程度に固定する

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