DESIGN.md — マンゴー色グラデの季節限定ドリンク LP（Juicy Mango Gradient Seasonal Drink LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: ポップ・元気、上品・高級、やさしい・柔らかい
• キーワード: マンゴーイエロー・グラデーション・シズル写真・波形の区切り・キラキラ装飾・明朝×丸みサンセリフ
• 地の質感: 細かな粒子ノイズ入りのグラデーション地と、光のきらめき・浮遊する果肉・パールの装飾
• 形: 波形・アーチ形・円形の切り抜き、角丸カード、帯状の白ラベル
• 温度感: 暖かく甘い。夏のトロピカル感

Colors

• 地は黄〜橙のグラデーションと生成りを交互に使い、境界は波形でつなぐ
• 色地上の文字は白、生成り地上の文字はオレンジにする
• 強調語は白帯ラベル＋オレンジ文字か、オレンジ帯＋白文字で示す
• CTA と ORDER 系ボタンは濃いオレンジの単色塗り
• 次回予告など別の話題はピンク系の地に切り替えて差をつける
• 黒は使わない。濃い文字はカード内のチャコールだけにする
• button-mobile-order は文字 #FDFDFB × 背景 #FE7C02 のコントラスト比が 2.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#B85901、4.62:1）を使う。
• label-band は文字 #FC8102 × 背景 #FEFEFE のコントラスト比が 2.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#B55D01、4.6:1）を使う。
• price-block は文字 #FDFEFE × 背景 #FF9D01 のコントラスト比が 2.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#A76600、4.57:1）を使う。
• topping-card は文字 #FC8102 × 背景 #FFFADC のコントラスト比が 2.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#B55D01、4.52:1）を使う。
• button-secondary は文字 #FE6366 × 背景 #FEFEFE のコントラスト比が 2.9:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#ED0206、4.51:1）を使う。
• oval-badge は文字 #FDFEFE × 背景 #FE7C02 のコントラスト比が 2.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#B85901、4.53:1）を使う。

Typography

• 英字見出しは細めのセリフ体を大きく使い、下に小さい和訳を添える
• 和文の見出しは明朝の太字で上品さを出す
• 本文はゴシックを中央揃えにし、行間を広めにとる
• 番号（01/02）は縦長の細いセリフ数字を大きく置く
• 価格は数字だけを大きくし、サイズ表記は小さく上に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長は写真と文字を左右交互にずらして置く
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは中央揃えを基本にする
• 商品紹介は写真と価格を左右交互にジグザグで配置
• 見出しの上に小さい星のきらめき記号を置く
• カードは左右 24px ほどの余白をとる
• 波形の区切りの前後は 60px 以上あける

Elevation & Depth

• 商品カップの写真には柔らかい落ち影をつける
• カード・ボタンは影なしのフラットか、ごく薄い影にとどめる
• 光のフレアと浮遊する果肉で奥行きを出す

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 切り抜きのカップ写真。素材写真は大きな円で切り抜く
• セクション境界: ゆるい波形の曲線と、大きなアーチ形
• トッピングカードは上部がアーチ形の縦長カード
• ORDER SHEET はタブ付きの角丸の枠線カード
• 帯ラベルは角丸なしの長方形
• 背景に大きな淡色の円を重ねてリズムをつける

Components

• モバイル注文 CTA（button-mobile-order）: 濃いオレンジの角丸パネルに英字の太いタイトルとアイコン、内側に白い枠で先行発売日を入れる
• 帯ラベル見出し（label-band）: 白帯の中にオレンジの明朝文字。2 段で重ねて特長名を示す
• 商品価格ブロック（price-block）: オレンジ帯の商品名＋小さいサイズ表記＋白い大きなセリフ数字
• アーチ形トッピングカード（topping-card）: 上部がアーチの枠に写真、下段は淡色地に明朝の名前と下線、短い説明文。左上に円形の番号バッジ
• ORDER SHEET カード（order-sheet）: タブ付きの白い枠線カード。ベース商品名、＋アイコン、オレンジのトッピングボタン、楕円の素材写真を並べる
• 下線付き明朝見出し（heading-underline）: オレンジの明朝文字に細い下線を全幅で引く
• 白のサブボタン（button-secondary）: 白地の角丸ボタンに色付き文字。色地の上に置く
• 楕円ロゴバッジ（oval-badge）: 白縁の濃オレンジ楕円に白いポップ文字を傾けて入れ、周りに星を散らす

Do's and Don'ts

Do - 黄〜橙のグラデーション地に粒子のノイズと光のフレアを重ねる - 商品写真は切り抜き＋落ち影で、果肉やパールを周りに浮かせる - 色地と生成り地を波形で交互に切り替える - 英字のセリフ見出しと和文の小見出しを必ずセットにする - 強調語は白帯ラベルで区切る

Don't - 寒色や黒の地を使わない - 四角いままの区切りで単調にしない - 本文を左揃えのまま長く詰め込まない - 太いゴシックの大見出しを多用しない（明朝とセリフを主にする） - 影の強いボタンや立体的なボタンを使わない

Page Structure

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

1. ファーストビュー（新商品の世界観と発売日を伝える）: 果実に囲まれたカップを大きく配置し、英字のタイトルと縦書きのコピー、大きな日付を白文字で置く
2. 先行注文 CTA（モバイル注文へ誘導する）: 濃いオレンジのパネルに先行発売日を入れ、下に補足リンクを添える
3. シリーズ導入（企画の全体像（第1弾・第2弾）を示す）: ポップなロゴ英字と円形の番号バッジ、白帯の強調を入れた中央揃えの文
4. 商品紹介（主役商品の特徴を一言で伝える）: 生成りのアーチ地に明朝の大見出し、下線付きコピー、短い説明
5. ラインナップ（3 種類と価格を見せる）: グラデーション地に大きな円を重ね、写真と価格を左右交互に配置。最後に注釈と 3 杯並びの写真
6. 特長（素材のこだわりを 3 点で示す）: 大きな番号、円形に切り抜いた素材写真、帯ラベル見出し、本文を交互に並べる
7. 期間限定トッピング（追加トッピングを紹介する）: オレンジ地にアーチ形カードを縦に並べ、番号バッジを付ける
8. カスタム提案（おすすめの組み合わせを提案する）: 生成り地に商品写真、下線付き見出し、ORDER SHEET カード、説明文を 3 セット並べる
9. 次回予告（第2弾への期待を高める）: 楕円バッジと大きな英字の COMING SOON を淡い色で置く
10. タイアップ告知（店内コンテンツへ誘導する）: 装飾枠付きのオレンジ箱に明朝の見出しと白いボタン
11. 関連商品バナー（別シリーズを紹介する）: 珊瑚ピンクの地に線画ロゴ、日付を線で挟み、商品写真と白いボタン
12. シェア・フォロー・フッター（拡散と SNS への誘導）: 黄色地に白いシェアボタン 2 つ、英字見出しと SNS アイコン、注釈、白地のフッター

Imagery

• 果実とドリンクの暖色系シズル写真。逆光でつやを出す
• カップは白背景で切り抜き、柔らかな影を付ける
• 立方体の果肉や透明なパールをぼかして浮遊させ、奥行きを出す
• 光のフレア・四芒星・小さな点のきらめきを散らす
• ピンク系の地には水彩風の葉と花びらのイラストを添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は SP と同じ 1 カラムを中央に固定幅（約 480〜750px）で置き、左右は黄色のグラデーション地で埋める
• PC 化する場合、ラインナップは 3 カラム、トッピングは 2 カラムに広げてよい
• 波形の区切りは全幅に伸ばす

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