DESIGN.md — 青空ブルー×マンゴー黄の夏季限定ドリンク LP（Tropical Summer Fruit Tea Drink LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: 清潔・爽やか、ポップ・元気、上品・高級
• キーワード: 夏季限定・シズル感・青空とフルーツ・波形の区切り・細い欧文見出し・円形の価格カード
• 地の質感: 光のボケや水しぶきが入った写真合成。黄色のセクションだけ紙のような粒子感がある
• 形: 波形・弧形のセクション境界、円形カード、角丸の白ボタン
• 温度感: 暖色の果実を寒色の青い背景で引き立てる、明るく爽やかな配色

Colors

• 地は青のグラデーション（濃い→淡い）を基本にする。商品の一覧は淡い水色、トッピングはクリーム色に切り替える
• 果実の黄色・オレンジは写真と CTA に集め、青との補色関係で目を引く
• 青い地の上の文字は白にする。白い地のカードの文字は茶色、価格はゴールド
• 英字の大見出しは水色の細い線で書き、小見出しは同じ色の和文を添える
• 見出しの強調は黄色の文字と、下に敷く半透明の帯で行う
• 別商品の告知はオレンジのグラデーションの地で区切る
• button-primary は文字 #FEFFFD × 背景 #FCC40C のコントラスト比が 1.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら on-cta-accessible（#316100、4.59:1）を使う。
• button-secondary は文字 #3DB5EC × 背景 #FEFEFE のコントラスト比が 2.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#117CAD、4.62:1）を使う。
• share-buttons は文字 #04ABF7 × 背景 #FEFEFE のコントラスト比が 2.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#037CB3、4.59:1）を使う。

Typography

• 英字見出しは細い字（weight 300）を大きく置き、下に和文を小さく添える
• 本文と商品名は明朝にして、品のある印象を残す
• 本文は中央揃えにし、短く改行する
• 番号や価格は細い欧文で大きく見せる
• 注釈だけゴシックで小さく書く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品の一覧は写真と円形カードを左右交互に並べる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 96px、基本単位 8px、カード内 24px（375px 幅換算）
• セクションの上部に英字見出しを中央揃えで置き、余白を広く取る
• 商品写真と円形の価格カードは左右交互に重ねて配置する
• 特長の番号は左右に伸びる細い横線で挟む
• 見出しブロックの下にも細い横線を引いて本文と分ける
• 写真は全幅で使い、端で切れてもよい

Elevation & Depth

• CTA ボタンには下方向にやわらかい影をつける
• 白いボタン・シェアボタンは影を薄くして浮かせる
• 商品のカップ写真に落ち影をつけて立体感を出す
• 円形カードは影を使わず、細いゴールドの縁取りにする

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は背景を切り抜いて置く。シズル写真は全幅で、端で切れる配置にする
• セクション境界: ゆるい波形・弧形のカーブで区切る
• 価格カードは真円にし、白地に細いゴールドの線で縁取る
• ボタンは角丸 12px 程度の長方形
• 告知枠は四隅にドットのある二重線の額縁にする
• トッピングのカードは上の角が四角、下の角が丸い白い面にする

Components

• モバイルオーダー CTA（button-primary）: 黄色の角丸の面。上に太い英字と LINE アイコン、下に白いパネルを入れて先行発売の日付を見せる
• 白い詳細ボタン（button-secondary）: 白い角丸のボタン。文字は青またはオレンジにし、薄い影をつける
• 円形の価格カード（price-circle）: 白い真円に細いゴールドの縁取り。シリーズ名、商品名（明朝）、サイズ、ゴールドの価格を縦に並べる
• 英字の大見出し（section-title）: 水色の細い英字を大きく置き、下に和文の小見出しを添える
• 特長の番号（feature-number）: 白い細字の数字を左右の細い横線で挟む。下に黄色の文字と帯で見出しを入れる
• マーカーの見出し（marker-heading）: 黄色または茶色の明朝の見出しの下に、半透明の帯を敷く
• 額縁の告知枠（frame-banner）: 半透明の青い面に白い二重線と四隅のドットで額縁を作り、中に白いボタンを置く
• SNS シェアボタン（share-buttons）: 青い地に白い角丸ボタンを 2 つ横に並べ、アイコンと文字を入れる。上に斜線で挟んだ見出しを置く

Do's and Don'ts

Do - 果実・しぶき・氷のシズル写真を大きく使い、余白を広く取る - セクションは波形の境界と地の色の切り替えでテンポよく区切る - 英字見出しは細い字にして軽さを出す - 本文は白抜きの明朝で中央揃えにする - 価格は円形カードにゴールドの数字で見せる

Don't - 黒や濃いグレーの地を使わない - 英字見出しに太い字を使わない - セクションの境界を直線だけにしない - 価格を赤い目立つ数字にしない - 文字を詰め込みすぎない

Page Structure

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

1. ファーストビュー（新商品と発売日を伝える）: 果実が舞う中にドリンクを置いた合成写真を全幅で使う。縦書きのコピー、細い英字の商品名と日付を置く
2. 先行注文の CTA（モバイルオーダーへ誘導する）: 青い地に黄色の大きな CTA カードを置く
3. コンセプト（味の魅力を短い言葉で伝える）: 青いグラデーションの地に、黄色の明朝コピーと白い本文を中央揃えで置く。周りに果実が舞う。下端は弧形
4. ラインナップ（商品と価格の一覧）: 淡い水色の地に葉の影を入れる。カップの写真と円形の価格カードを左右交互に並べる
5. 注意事項（アレルギー情報へのリンクと注釈）: 白い文字でリンクに下線を引き、注釈を小さく書く
6. 特長（果実と茶葉のこだわりを伝える）: 英字の大見出しの下に、写真・番号・黄色の見出し・本文のセットを 2 つ並べる
7. 期間限定トッピング（追加のトッピングを紹介する）: クリーム色の地に、白いカードと果肉の写真、手書き風の英字を添えた見出しを置く
8. BGM の告知（関連コンテンツへ誘導する）: 光のボケが入った青い地に額縁の枠を置き、中に白いボタンを入れる
9. 別商品の告知（同時期の別シリーズを紹介する）: 粒子感のあるオレンジのグラデーションの地に、白線のロゴ、日付、商品写真、白いボタンを置く
10. シェア・フォロー（SNS で広めてもらう）: 鮮やかな青の地に、シェアボタン 2 つ、セリフ体の英字見出し、SNS アイコンを並べる
11. フッター（注釈とコピーライト）: 注釈を白い小さな文字で書き、白い地にロゴとコピーライトを置く

Imagery

• マンゴーの角切り・オレンジ・パッションフルーツが空中に舞う合成写真
• 水しぶきと氷を入れ、背景はボケた光の水色にする
• カップは切り抜いて落ち影をつけ、少し傾けて置く
• 淡い地には葉の影を薄く重ねる
• 黄色・オレンジの地は紙のような粒子のテクスチャにする
• 茶葉や葉の線画のイラストを添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はない。PC では中央 480〜600px の SP のカラムを保ち、両側を青いグラデーションで埋めることを推奨する
• PC に広げる場合、ラインナップは 2〜4 列のカードにしてもよい
• シズル写真は全幅で使い、高さは抑える
• 英字見出しは PC で 64〜80px に拡大する

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