DESIGN.md — 若草緑と生成りの線画ストーリー型青汁 LP（Gentle Green Storytelling Health Drink LP）

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

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: ナチュラル、やさしい・柔らかい、親しみ・手作り感、清潔・爽やか
• キーワード: 読み物型・若草色の帯見出し・黄色マーカー・モノクロ線画・生成り地・中央揃え
• 地の質感: フラットな単色面。紙のような生成りと白を交互に使い、影はほぼ付けない
• 形: 角丸カード、角なしの四角い帯見出し、角丸や有機的な形で切り抜いた写真
• 温度感: やや暖かいニュートラル。緑で爽やかさを足す

Colors

• 地は白と生成りを数セクションごとに切り替える
• 見出しは緑の帯に白文字で、話題が変わるところに置く
• 強調したい語句は黄色マーカーで下半分を塗る
• 強い強調は文字を緑にし、大きめの太字にする
• グラフは淡いパステル（サーモン・クリーム・黄緑）だけで塗り、濃い色は使わない
• イラストはモノクロの線画と灰色の塗りに限り、カラーは写真で出す
• band-heading は文字 #FFFFFF × 背景 #64B402 のコントラスト比が 2.6:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#498401、4.58:1）を使う。
• nutrient-diagram は文字 #669D24 × 背景 #FCF7F1 のコントラスト比が 3.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#527E1D、4.52:1）を使う。

Typography

• 本文は中央揃えにし、短い文節ごとに改行する
• 行間は 2.0 前後と広く、字間も少し空ける
• 本文は太さ 500 のゴシックで、少し太めにして柔らかく見せる
• 強調語は太字＋黄色マーカー。さらに強めるときは緑の文字で 1.3 倍に
• 注釈は ※ を付け、右寄せか本文のすぐ下に小さく置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラムで中央揃え
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• 写真は左右 8% の余白を取った角丸か、画面幅いっぱいの全幅にする
• 文章 → イラスト → 文章のリズムで縦に並べる
• グラフや比較は生成り地の上の白い角丸カードに入れる
• 章の頭には必ず緑の帯見出しを置く

Elevation & Depth

• 影は基本的に使わない
• カードは地との色の差だけで浮かせる
• グラフの数値は白い縁取りの袋文字で読みやすくする

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸の長方形が中心。一部は上下が膨らんだ有機的な形や全幅で切る
• セクション境界: FV の写真の下端を大きな円弧で白地に切り替える。それ以外は直線で地の色を切り替える
• 帯見出しは角なしの長方形で、2 行なら行ごとに帯を分ける
• カードの角丸は 12〜20px
• 下向きの合図は小さな▼を 3 つ並べる
• リストの行頭は緑の丸かチェック記号にする

Components

• 緑帯見出し（band-heading）: 文字の幅に合わせた緑の帯に白い太字。行ごとに帯を分ける
• 黄色マーカー強調（marker-text）: 強調語の下半分〜全体を淡い黄色で塗る
• グラフカード（chart-card）: 白い角丸カードに Q 番号とパステルの円グラフ・棒グラフを入れ、出典を添える
• 特長カード（point-card）: 緑の●付き小見出しの下に、マーカー入りの説明を書く白いカード
• おすすめチェックリスト（check-list）: 淡い黄緑のラベル見出しの下に、緑のチェックとキーワードを緑字にした項目を並べる
• 淡色リストボックス（bullet-box）: 淡い黄緑の角丸ボックスに、緑の丸を行頭にした短い項目を縦に並べる
• 成分の数値ダイアグラム（nutrient-diagram）: 中央の商品写真を円形に囲み、緑の大きな数字と小さな単位を点線でつなぐ
• 注釈（note-text）: ※から始まる灰色の小さな出典・調査の注記

Do's and Don'ts

Do - 語りかける口調の短い文を、中央揃えで細かく改行する - 段落ごとに 1〜2 か所だけ黄色マーカーを入れる - 話題の切り替えにモノクロの線画イラストを挟む - 白と生成りの地を交互にして章を区切る - 数値の主張には必ず ※ 注釈を付ける

Don't - 濃い原色や黒い面を広く使わない - イラストに鮮やかな色を塗らない - ドロップシャドウや光沢を付けない - 左揃えの長い段落を続けない - 1 文の中でマーカーを使いすぎない

Page Structure

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

1. ファーストビュー（会社のあいさつとブランドの第一印象）: 青空を背景に商品を手で持つ全幅写真。上部に白い大見出し、下端は円弧で白地へ
2. 会社紹介（創業の歴史と実績で信頼を作る）: 中央揃えの本文にマーカーを入れ、女性 3 人の線画と、角丸写真＋注釈を添える
3. 悩みの提起（調査データ）（健康への不安を数字で共感させる）: 生成り地に緑帯見出し。白カードにパステルの円グラフを 2 つ入れる
4. 開発者のストーリー（開発者の体験から食事の悩みを語る）: 人物の線画と食卓の線画を挟みながら、本文と大きなマーカー強調文を交互に置く
5. 素材の発見（主原料の素材の魅力を伝える）: 野菜の線画、角丸の畑の写真、レーダーチャート、成分の数値ダイアグラム
6. 商品の誕生（素材を手軽に摂れる商品として紹介）: 全幅の手と葉の写真、家族の食卓の線画、有機的な形で切り抜いたグラスの写真
7. 原材料のこだわり（原材料がシンプルなことを証明する）: 淡色のリストボックス、▼3 つで成分表の写真へ誘導、白い特長カード、棒グラフの比較カード
8. 生産者紹介（産地と農家さんの思いを伝える）: 山並みと生産者が並ぶ線画、作業の写真、マーカー入りの本文
9. 生産者との約束（素材をまるごと使う理由を語る）: 白カードに緑の見出しと引用、握手の線画、大きな強調文
10. 色と栄養の説明（色が薄いことへの不安を解消する）: グラスの写真、植物と根の線画に手書きの注記、点線枠の横棒グラフ
11. ネーミングの由来（ブランドへの愛着を作る）: 中央にロゴマーク、引用の文章、全幅の商品写真
12. おすすめの人（自分ごと化させてターゲットを絞る）: 緑帯見出し、商品の線画、白カードのチェックリスト、まとめの本文

Imagery

• イラストは均一な太さの墨線で描き、淡いグレーの塗りを少し入れる。人物は親しみのあるタッチにする
• 写真は自然光で明るく、白・木・緑を基調に浅い被写界深度で撮る
• 葉や畑の写真は鮮やかな若草色の逆光にする
• 商品写真はグラスに入った淡い緑の飲み物と商品の筒を、生活の場面に置いて撮る
• 手書き風の短い一言や放射線などで、イラストに動きを足す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に 375〜480px 幅のカラムを置き、左右に淡いグレーの地を見せる
• 本文は中央揃えを保ち、行の長さを広げすぎない
• 全幅写真はカラム幅に収める
• グラフカードは PC でも 1 カラムのまま

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