DESIGN.md — 赤橙から若草へ移ろうティー飲料 LP（Vivid Fruit Gradient to Fresh Green Tea Drink LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: 上品・高級、ポップ・元気、ナチュラル、清潔・爽やか
• キーワード: 果実グラデーション・アーチ型カード・明朝見出し・葉と花の散らし・商品ボトル主役・季節限定感
• 地の質感: ノイズ粒子の入ったグラデーション地。細い枠線入りのクリーム色カード。
• 形: 上辺が半円のアーチ型パネル、丸いバッジ、大きな有機曲線の色面。
• 温度感: 前半は暖色で甘く濃厚、後半は寒色寄りの緑で爽やか。

Colors

• 上から赤→橙→黄→若草→緑と背景色を連続的に移ろわせ、商品ごとに色の世界を変える。
• 商品カードは常にクリーム〜白の面に細い茶または青緑の枠線を入れる。
• 暖色セクションの本文は濃茶、緑セクションの見出しは青緑、緑地上は白文字。
• 販売店告知は緑ベタ＋白文字＋内側の細い白枠で目立たせる。
• 商品名の下にだけ淡色マーカー帯を敷く。
• フッター手前は淡緑＋濃緑文字、最後は白地で締める。
• store-banner は文字 #F5FEF5 × 背景 #3A9A5B のコントラスト比が 3.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#31824D、4.6:1）を使う。
• circle-badge は文字 #F5FEF5 × 背景 #FF741D のコントラスト比が 2.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#C84D00、4.51:1）を使う。
• button-secondary は文字 #3A9A5B × 背景 #FFFFFF のコントラスト比が 3.53:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#31824D、4.51:1）を使う。
• share-buttons は文字 #3A9A5B × 背景 #FFFFFF のコントラスト比が 3.53:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#31824D、4.51:1）を使う。

Typography

• 見出しとキャッチは明朝の太字、本文と注釈は太めのゴシックにする。
• 濃い背景の上の白い明朝には軽いドロップシャドウを付ける。
• 助詞（の・が・を）を一回り小さくして、リズムを出す。
• FVの紹介文は中央揃えで行間を広く取る。
• 英字のスクリプト体は「新発売」の装飾として大きく薄く重ねる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。製法比較のみ 2 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 28px（375px 幅換算）
• 商品カードは左右 6% 程度の余白で中央に配置。
• 丸バッジはカード左上の枠をはみ出して重ねる。
• 商品ボトルはカード上部からはみ出すほど大きく配置する。
• セクション間は大きな曲線の色面でつなぎ、直線の区切りは避ける。
• 注釈は該当ブロックの直下に小さく置く。

Elevation & Depth

• 商品ボトルには床に落ちる柔らかい影を付ける。
• 白い角丸ボタンには薄いドロップシャドウを付ける。
• カード自体はほぼフラット。細い内枠線で奥行きを出す。
• 濃い地の上の見出し文字に淡いシャドウを付ける。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 200px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品ボトルは切り抜きで、傾けて配置したり枠からはみ出させたりする。
• セクション境界: 大きな有機曲線と、上辺がアーチ形のパネル
• 商品セクションは上辺が半円のアーチ型の白い枠で囲む。
• 訴求ラベルは塗りの円形バッジにする。
• CTAボタンは角丸12px程度の白い長方形。
• 販売店バナーは角丸小さめで、内側に細い枠線を入れる。

Components

• 販売店限定バナー（store-banner）: 緑の帯に白文字で販売日と取扱店を表示し、右端に円形ロゴを置く。内側に細い白枠を入れる。
• アーチ型商品カード（arch-product-card）: 上辺が半円の細い枠の中に商品ボトル、リード文、商品名、区切り線、本文、容量と価格を順に並べる。
• 丸い訴求バッジ（circle-badge）: 直径約95pxの橙の円に白い明朝で2行の短い訴求を入れ、カード左上に重ねる。
• マーカー付き商品名（marker-title）: 明朝の商品名の下半分に淡い色の帯を敷き、左に葉のアイコンを添える。
• 白い角丸ボタン（button-secondary）: 緑地の上に置く白ボタン。緑文字にアイコンを添え、上に斜線で挟んだ問いかけを置く。
• 製法比較の2列図解（process-compare）: 白いパネルに2列で手順を並べる。中央に点線と番号、上部にラベル枠、銅版画風のイラストを入れる。
• SNSシェアボタン（share-buttons）: 淡緑地にオフホワイトの角丸四角を2つ並べ、緑のアイコンと文字を入れる。
• 英字フォロー見出し（follow-heading）: 左右に細い横線を伸ばした濃緑のセリフ英字の見出し。下にSNSアイコンを3つ並べる。

Do's and Don'ts

Do - 商品ごとにテーマカラー（暖色・緑）を決め、背景グラデーションをその色へ移ろわせる。 - 商品ボトルは大きく切り抜き、少し傾けたり枠からはみ出させたりして動きを出す。 - 葉・果実・花びら・キラッとした光のモチーフを余白に散らす。 - 見出しは明朝、本文は太めのゴシックで、上品さと読みやすさを両立する。 - 価格・容量・注釈はカード内の本文の後に必ず置く。

Don't - フラットな単色背景だけでセクションを並べない。 - 角張った箱だけのカードにしない。アーチや曲線を使う。 - ネオン色や黒の大面積は使わない。 - 本文を細いゴシックで小さくしない。 - 商品カード内に複数の強い色を混ぜない。

Page Structure

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

1. ファーストビュー（2本の商品を一目で見せる）: 赤〜橙の有機曲線グラデーション地に、白い角丸フレームと傾けたボトル2本を重ね、右上にロゴを置く。
2. コンセプト紹介（商品化の意図と飲用シーンを伝える）: 白い明朝のキャッチ2行のあと、黄色グラデーション地に中央揃えの本文を置き、末尾に発売日の注釈を添える。
3. 販売店告知（購入できる場所を知らせる）: 緑の限定販売バナーと、その下に小さな注釈。
4. 商品紹介1（1つ目の商品の味と特長を伝える）: 橙の地にアーチ型のクリーム色カードと丸バッジを置き、ボトル・商品名・本文・価格を並べる。
5. 商品紹介2（2つ目の商品の味と特長を伝える）: 黄〜橙の地にマンゴー色の大きな曲線を敷き、同じ型のカードに注釈を追加する。
6. 新商品告知（季節限定の新フレーバーを打ち出す）: 淡い若草地に花のイラストを散らし、金と青緑の明朝見出しを置く。続けて販売日入りの緑バナーと「期間限定」の丸バッジ、大きなボトル、英字スクリプトを配置する。
7. 新商品詳細（新商品の味を説明する）: 淡緑の四角いカードに青緑の枠線を入れ、商品名には淡緑のマーカーを敷く。
8. こだわり（製法の信頼感を伝える）: 緑の地に白い明朝の見出しと本文。続けて白パネルに製法比較の2列図解を置く。
9. 外部誘導CTA（工場見学ページへ送客する）: 斜線で挟んだ問いかけの下に、白い角丸ボタンとアイコン。
10. シェア・フォロー（SNSでの拡散を促す）: 淡緑地にシェアボタンを2つ並べ、横線付きの英字見出しとSNSアイコンを置く。
11. フッター（注釈とブランドの表示）: 淡緑地に注釈を載せ、その下の白地にロゴとコピーライトを中央揃えで置く。

Imagery

• 商品ボトルは白背景で撮って切り抜き、柔らかい接地影を付ける。
• 果実・茶葉・花はやや厚塗り風のイラストにし、ノイズ質感を加える。
• 背景は大きな葉や果実のシルエットを曲線色面として重ねる。
• 四芒星のきらめきを白で小さく散らす。
• 製法図解はセピア色の銅版画・線画風イラストにする。
• 角切りの黒糖キューブや花びらを手前に浮かせて奥行きを出す。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では中央に SP 幅（約 480〜600px）のコンテンツ列を置き、左右は背景グラデーションと装飾イラストで埋める。
• 商品カードは最大幅 520px 程度に抑える。
• PC の FV はボトル 2 本を左右に広げ、キャッチを横に並べてもよい。
• 製法比較は PC でも 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 行書くと起動時に読み込まれる。