DESIGN.md — 生成り×若草色のやさしい青汁ストーリーLP（Warm Cream Organic Green Juice Story LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: やさしい・柔らかい、ナチュラル、親しみ・手作り感、信頼・誠実
• キーワード: 生成り・若草色・縦書き・吹き出し・手描きイラスト・対話型ストーリー
• 地の質感: 無地のクリーム面と白い面を交互に置く。写真は自然光で淡い。紙のようにフラットな質感。
• 形: 角丸の大きいカード、片側の角だけ尖った吹き出し、黄色い丸ラベル、円形に切り抜いた写真。
• 温度感: 暖かい。ベージュや卵色の暖色が基調で、グリーンは鮮度と健康を表す差し色。

Colors

• クリーム地と白地を交互に置き、話の段落を区切る。
• 文字は黒ではなく焦げ茶にする。
• グリーンは結論の見出し・数値・成分名に限って使う。
• 黄色は丸ラベルとマーカーだけに使う。
• 悩みや質問はピーチの吹き出し、回答や解決は黄緑の吹き出しで色を分ける。
• ページ外側は一段濃いベージュにし、中央の本文カラムを浮かせる。

Typography

• 全体を太めの丸ゴシックにして、柔らかく親しみのある印象にする。
• 重要な見出しは縦書きにし、焦げ茶とグリーンの 2 行を組み合わせる。
• 本文はほぼ中央揃えで、1 行 15〜18 文字の短い行で語りかける。
• 数値は欧文太字で特大にし、単位を小さく添える。
• 強調したい語句には黄色マーカーを敷く。
• 文字の傍点は小さなグリーンの点で付ける。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。左右の吹き出しを交互にずらして配置する
• 本文ブロックの幅: 画面幅の約 82%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 本文カラムの外側にベージュの余白を 8px ほど見せる。
• 吹き出しは画面端まで伸ばし、左右交互に置く。
• セクションの間は下向きの三重シェブロンや点線でつなぐ。
• 写真は左右どちらかに寄せて、少し重ねてずらす。
• 大きなセクション面は上側だけ角丸のパネルにする。

Elevation & Depth

• 影はほぼ使わない。フラットな面と線で区切る。
• 商品写真にだけ柔らかい落ち影を付ける。
• 立体感は面の色差で出す。

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: 角丸の四角か円形に切り抜く。風景写真は幅いっぱいに置き、端をフェードさせる。
• セクション境界: 上端が大きく角丸になったパネルでつなぐ。直線の区切りは使わない。
• 吹き出しは片側をピル型にし、尻尾を付ける。
• ラベルは黄色の円に下向きの尻尾を付ける。
• Point 番号は黄色の多角形バッジに入れる。
• 成分名は細い線のピル枠で囲む。

Components

• 黄色丸ラベル（label-circle）: 直径約 80px の黄色い円に下向きの尻尾を付け、場面転換の短い語を入れる。
• 悩み吹き出し（speech-bubble-worry）: 白またはピーチの角丸吹き出しを焦げ茶の線で囲み、横に円形の人物イラストを添える。
• Q&A吹き出し（qa-bubble）: 大きな Q（ピーチの面）と A（黄緑の面）を左に置いた横長の吹き出し。
• Point番号バッジ（point-badge）: 黄色の多角形に Point と数字を入れ、その下に見出しを置く。
• お客様の声カルーセル（voice-bubble）: クリーム色の大きな円の中に感想を書く。左右に矢印を付け、小さな円の尻尾を添える。
• 特大数値（stat-big-number）: 放射線の飾りの中に、グリーンの特大数字と小さな単位、吹き出しラベルを置く。
• 比較棒グラフ（comparison-bar）: 自社素材の棒をグリーンのグラデーションのピル型で一番長く描き、他の素材は淡いクリームとピンクで描く。
• 線囲み成分カード（outline-pill-card）: 焦げ茶の線のピル型枠の上端に見出しを載せ、成分の説明を書く。
• おすすめチェックリスト（check-list）: 線囲みの角丸カードを縦に並べ、それぞれにグリーンのチェックと一文を入れる。

Do's and Don'ts

Do - 語りかける短い文を中央揃えで積み重ね、ストーリーとして読ませる。 - 悩みは左右交互の吹き出しと人物イラストで見せる。 - 結論の見出しはグリーンの縦書きにする。 - 数値は円グラフ・棒グラフ・特大数字で見せる。 - クリーム地と白地を交互に置き、角丸パネルでつなぐ。

Don't - 純黒の文字や強いコントラストの配色は使わない。 - 角張ったボタンや直線の区切りを多用しない。 - グリーンを背景の広い面に使わない（差し色にとどめる）。 - 派手な影やグラデーションの装飾は付けない。 - 1 行の長い文章を左揃えで詰めて組まない。

Page Structure

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

1. ファーストビュー（初めての人でも安心できることを伝える）: 縦書きの特大キャッチと商品パッケージを置き、背景に斜線の帯、手前に飲用写真と吹き出しを重ねる。
2. ブランド紹介（何の悩みを解決する商品かを示す）: ロゴを中央に置き、縦書きで悩みのキーワードを並べ、食べ物の写真を添える。
3. 悩みの提起（読者が共感できる場面を見せる）: 左右交互の吹き出しと円形の人物イラストを 6 つ並べる。
4. コンセプト（食事に近い自然さを打ち出す）: 黄色丸ラベルから縦書きの見出しへつなぎ、水彩風のグラスのイラストを添える。
5. お客様の声・味（飲みやすさを証明する）: 円形の声カード、写真のコラージュ、円グラフの数値、返金保証の吹き出しで構成する。
6. 疑問への回答（栄養面の疑問を解消する）: 大きなはてな付きの黄色い円、Q&A吹き出し、特大数値、栄養素の円を放射状に並べた図。
7. 素材の秘密（主原料の価値を伝える）: 放射線の上に素材のイラストを置き、成分表の図、縦書きの結論、×印リストで見せる。
8. 3つの魅力（優位性をデータで示す）: Point バッジを付け、レーダーチャート、比較棒グラフ、成分ピルで説明する。
9. 生産地ストーリー（希少性と産地の信頼を伝える）: 円形の手元写真、地図のシルエット、風景写真を使い、循環フロー図で示す。
10. ブランドの想い（誠実さを印象づける）: ロゴ、グリーンの見出し、畑に置いた商品写真、生産者の写真 3 枚を並べる。
11. まとめ・おすすめ（対象者を明確にして購入へ促す）: 黄色丸ラベルを付け、斜線で挟んだ見出しとチェックリストで構成する。
12. 開発者ストーリー（共感で締めくくる）: 線画イラストと吹き出しを置き、最後に縦書きのメッセージと商品画像を配置する。

Imagery

• 人物は細い焦げ茶の線画に淡いパステルで塗る。円形のフレームに入れることが多い。
• 食べ物や素材は柔らかい水彩・色鉛筆風のイラストで描く。
• 写真は自然光で明るく、淡い緑のボケ背景にした生活シーンにする。
• 葉を手のひらに載せたカットや畑の風景で、オーガニック感を出す。
• 放射線、点線、手描きの矢印などのラフな装飾を添える。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版も約 375px 幅の SP カラムを中央に置く構成。
• PC の左右の余白はベージュ地にし、白い大きな欧文ロゴを透かしのように繰り返す。
• PC の左右固定エリアにはロゴ・購入ボタン・QR コードを置く。
• 要素の比率は SP と同じままにし、カラムの幅は広げない。

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