DESIGN.md — 橙グラデと金の輝きの季節限定ドリンク LP（Vivid Mango Orange Gradient Drink Campaign LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: ポップ・元気、上品・高級、力強い・インパクト
• キーワード: オレンジグラデーション・白抜き明朝・きらめき装飾・波形の境界・中華風飾り枠・シズル感のある商品写真
• 地の質感: 細かい粒子ノイズが乗ったグラデーション地。艶のある果物とドリンクの写真に光の粒を散らす
• 形: 波形・しずく形の境界、中華窓のような飾り枠、角丸のクリーム色カード
• 温度感: 暖色一色の高温・ジューシーな印象

Colors

• 地は全面暖色グラデーション。上部は黄オレンジ、下へ朱赤に濃くする
• セクションごとにオレンジ↔朱赤を交互にして波形で切り替える
• 文字は色地の上では白、クリーム色カード上では赤茶を使う
• 強調語は朱赤のマーカー帯に白文字で載せる
• ボタンは白地に赤系文字で色地から浮かせる
• 別商品の告知だけコーラルピンク地にして区別する
• page は文字 #C22A04 × 背景 #FEB422 のコントラスト比が 3.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-accessible（#FFDFA1、4.5:1）を使う。
• feature-frame は文字 #FEF7E9 × 背景 #FEB422 のコントラスト比が 1.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-accessible（#FFDFA1、4.54:1）を使う。
• button-primary は文字 #E36572 × 背景 #FEFEFE のコントラスト比が 3.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら on-cta-accessible（#DA3647、4.53:1）を使う。
• share-buttons は文字 #E44313 × 背景 #FEFEFE のコントラスト比が 4.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#D63F12、4.55:1）を使う。

Typography

• 英字見出しはセリフ体の大文字にし、下に和文ラベルを円枠で 1 文字ずつ並べる
• 商品名は太い明朝の白抜きにし、筆記体の曲線を添える
• 本文は中央揃えのゴシックで行間を広くとる
• 価格はセリフ体の数字を大きく、容量表記は小さく上に置く
• 特長番号はセリフ体の巨大数字にして写真枠と重ねる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム中央揃え
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 見出し→写真→説明の縦積みを繰り返す
• ラインナップは写真と価格を左右交互にジグザグ配置
• カードは左右 6% 程度の余白で中央に置く
• 特長は番号を左上に重ね、飾り枠写真の下に見出しと本文を置く

Elevation & Depth

• 影はほぼ使わず、色の明暗と光のきらめきで奥行きを出す
• 白ボタンにごく薄いドロップシャドウ
• 商品写真の足元に柔らかい影

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は切り抜き。素材写真は中華窓形の飾り枠やU字の大きな円弧でマスクする
• セクション境界: ゆるい波形の曲線、しずくが垂れるU字形
• ボタンは角丸 8〜12px の長方形
• カードは角丸大きめ、豆知識カードは四隅に中華雷紋の飾り
• 帯ラベルは両端に切り欠きのあるリボン形

Components

• 英字＋円枠和文見出し（heading-en-ja）: 大きな白セリフ英字の下に、横線と円枠で 1 文字ずつ囲んだ和文ラベル
• 強調マーカー（marker-highlight）: 本文中の語を朱赤の帯に白文字で載せる
• リボン帯ラベル（ribbon-label）: カード上辺に重なる深紅のリボン形ラベル、白文字
• クリーム商品カード（cream-card）: 角丸の淡いクリーム地に赤のセリフ英字と商品写真、価格
• 価格表示（price-block）: 商品名・区切り線・容量表記・大きなセリフ数字を縦に積む
• 番号付き飾り枠（feature-frame）: 巨大な白数字と中華窓形の金縁枠に素材写真
• 豆知識カード（trivia-card）: 淡黄地に赤の細線枠と四隅の雷紋、赤茶文字、キャラクターを角に配置
• 白ボタン（button-primary）: 色地上の白い角丸ボタン、赤系太字
• SNS 共有ボタン（share-buttons）: 白地の 2 つ並びボタンにアイコンと文字

Do's and Don'ts

Do - 暖色グラデーションを全面に使い、明暗の切り替えで区切る - 光の粒・レンズフレアを見出しや写真の周りに散らす - 見出しは英字セリフと和文明朝の組み合わせにする - セクションの境界は波形や曲線にする - 商品写真は切り抜いて果物素材と重ね、シズル感を出す

Don't - 寒色やグレーの面を使わない - 直線の水平区切りだけで済ませない - 本文に明朝の細字を小さく使わない（可読性低下） - ボタンをオレンジ地にしない（地と同化する） - フラットなベタ塗りだけにしない（粒子と光で質感を出す）

Page Structure

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

1. ファーストビュー（新作の世界観と商品を一目で伝える）: 英字商品名と円枠和文、縦書きキャッチ、大きなドリンクと果物の写真
2. キャンペーン導入（企画の第何弾かと概要を伝える）: ポップな斜め英字ロゴ、円形バッジ、中央揃え本文とマーカー強調
3. 商品コンセプト（味わいのイメージを伝える）: U字の円弧で果物写真を切り抜きしずくを垂らし、筆記曲線付き商品名と引用風リード
4. ラインナップ（商品と価格を見せる）: 波形で区切った帯に写真と価格を左右交互配置
5. 再登場商品（定番の組み合わせ商品を訴求）: リボン帯付きクリームカードに赤セリフ英字と価格
6. 注意事項（原材料の注意とアレルギー情報へ誘導）: 朱赤地に小さな注釈と黄色の下線リンク
7. 特長（素材のこだわりを 3 点説明）: 巨大番号＋中華窓形飾り枠写真＋線付き小見出し＋明朝見出し＋本文
8. 豆知識（商品の由来を親しみやすく紹介）: 雷紋付き淡黄カード、キャラクター、下に商品写真と透かし英字
9. 関連コンテンツ（店内 BGM など付加情報へ誘導）: 朱赤の額縁ボックスに白ボタン
10. 別商品の告知（次の新作を予告）: コーラルピンク地にロゴ枠、発売日を罫線で挟み、商品写真と白ボタン
11. シェア・フォロー（SNS 拡散とフォロー）: 斜線付き見出し、白い共有ボタン 2 つ、白アイコン列、注釈
12. フッター（ブランド表記）: 白地にロゴとコピーライト

Imagery

• ドリンクは切り抜きで、マーブル状の果肉が見える角度で撮る
• 完熟果物の断面・水滴などで瑞々しさを強調する
• 背景に果物のスライスを放射状にぼかして配置する
• 白い十字の光の粒を各セクションに数点散らす
• 素材写真は中華窓形の金縁枠に収める
• マスコットキャラクターを小さく角に添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に SP 幅の縦長カラムを置き、左右をオレンジグラデーションで埋める構成を推奨
• ラインナップは PC で写真と価格を横並び 2〜3 列にしてもよい
• 特長は PC で写真と説明を左右に並べる
• 見出しサイズは PC で 1.3〜1.5 倍にする

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