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

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: ナチュラル、やさしい・柔らかい、上品・高級、清潔・爽やか
• キーワード: マンゴーイエロー・水彩イラスト・白抜き文字・円形切り抜き・初夏・グラデーション
• 地の質感: ざらっとした粒状ノイズ入りのグラデーション地。水彩・ガッシュ風の葉と果実を重ねる
• 形: 円形の素材写真、片側だけ大きく丸めたシーン写真、細い白線のピル型ボタン
• 温度感: 暖色中心。ティールの葉をアクセントにして少しだけ涼しさを足す

Colors

• 地は黄〜橙〜ベージュの縦グラデーションで、セクションごとに少しずつ色を変える
• 文字は全部白。濃い色の文字は使わない
• 白文字が読めるよう、文字の下に薄く影を付ける
• ティールと深緑は葉のイラストにだけ使うアクセント
• 赤橙は果実イラストと写真の中だけに使う
• べた塗りの帯やカードは作らず、色の切り替えはグラデーションで溶かす

Typography

• 英字の見出しは縦長の太い書体にし、金属っぽいグラデーションと影を付ける
• 和文はゴシック太字の白で統一する
• コンセプト文は中央寄せで、行間を 2.0 前後まで広げる
• 素材の見出しは前置きを小さく、素材名を大きくした 2 段組みにする
• 注釈は 11px ほどで右寄せか中央寄せにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。素材紹介は円形写真を左右交互に置く
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 80px、基本単位 8px、カード内 0px（375px 幅換算）
• カードや枠は使わず、背景の上に要素を直接置く
• 円形の写真は画面幅の 60〜70% にして、画面端に少しはみ出させる
• 素材名は円のすぐ横や下に重ねて配置する
• 商品パッケージの写真はセクションの境目にまたがるように置く
• 葉のイラストは画面の左右の端に断片的に見せる

Elevation & Depth

• 影は商品パッケージに付けるやわらかいドロップシャドウだけ
• 白文字には読みやすくするための薄い影を付ける
• 円形写真は影を付けず、ふちをぼかして背景になじませる

Shapes

• 角丸: 小 2px ／ 中 12px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 素材は正円で切り抜き、シーン写真は片側を大きな半円にしたカプセル形
• セクション境界: 直線の境目は作らず、グラデーションと葉のイラストでつなぐ
• 主なボタンは白い細線のピル型で、塗りはなし
• 販売店舗のバッジは角丸 2px ほどの白線の枠にする
• SNS のアイコンは各ブランドの角丸スクエアか正円のまま使う

Components

• 斜めに置いた商品ビジュアル（hero-product）: カップ商品を少し傾けて大きく見せ、周りに果実と葉のイラストを散らす
• 英字の商品名ロゴ（title-metallic）: 縦長の太い英字にクリーム〜白のグラデーションと影を付け、2 行で見せる
• 販売店舗のバッジ（badge-outline）: 白い細線で囲んだ小さな四角に販売場所を入れる
• カプセル形のシーン写真（capsule-photo）: 手で商品を持つ屋外の写真を、右側を大きく丸めたカプセル形で切り抜く
• 素材の円形カット（ingredient-circle）: 素材のシズル写真を正円に入れ、前置きと素材名の 2 段見出しを重ねる。左右交互に並べる
• 詳細を開くボタン（button-outline）: 白い細線のピル型ボタン。右端に＋アイコンを付け、開閉式にする
• SNS のアイコン列（sns-row）: 40px ほどのアイコンを 4 つ、等間隔で横に並べる
• 注釈（note-text）: ※から始まる白い小さな注釈を、写真や情報のすぐ下に置く

Do's and Don'ts

Do - 地は黄〜橙のグラデーションに、粒状ノイズの質感を加える - 画面の端に水彩風の葉や果実のイラストを、断片的に散らす - 文字はすべて白にし、薄い影を付ける - 素材は正円で切り抜き、左右交互に配置する - ボタンは白い細線のピル型にして、控えめに見せる

Don't - 黒や濃い色の文字を背景の上に置かない - 原色の塗りボタンや目立つ購入 CTA を置かない - 四角いカードや区切り線でセクションを分けない - 寒色の地を広く使わない - 情報を詰め込みすぎない

Page Structure

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

1. ヘッダー（ブランドを示し、メニューへ誘導する）: 背景は透明。左にロゴ、右に白い三本線のメニューを置く
2. ファーストビュー（新商品と発売日を印象づける）: 傾けた商品写真と果実のイラストを置き、その下に発売日、英字の商品名、和名、販売店舗のバッジ、注釈を並べる
3. 利用シーン・コンセプト（飲む場面と味のコンセプトを伝える）: カプセル形のシーン写真の下に、中央寄せの白い太字のコンセプト文を 5 行ほど置く
4. 素材紹介（3 つの素材の魅力を見せる）: 円形の素材写真 3 つを左右交互に置き、前置きと素材名の 2 段見出しを添える
5. 商品情報（商品名と販売エリアを再提示する）: 商品写真を大きく見せ、キャッチ、商品名、販売エリア、開閉式の詳細ボタン、注釈を並べる
6. 問い合わせ・SNS（問い合わせ先と SNS へ誘導する）: 問い合わせ先を中央寄せで置き、リンクには下線を付ける。その下に SNS アイコンを 4 つ並べる

Imagery

• 商品写真は真俯瞰に近い斜めの角度で撮り、自然光で明るく見せる
• 素材の写真はカットフルーツ・茶葉・ミルクのしぶきなどのシズル写真を、白い背景から切り抜いて使う
• 利用シーンは木のテーブルと緑のボケを背景に、手で商品を持つカットにする
• イラストは水彩・ガッシュ風のマンゴー、角切りの果実、葉（ティール・深緑・茶）を描く
• 背景に茶色やベージュの葉のシルエットを薄く重ねる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はファーストビューで商品写真を中央に、商品情報を右に置き、英字の商品名を下に大きく見せる
• PC ではシーン写真を左、コンセプト文を右に置く 2 カラムにする
• PC の素材紹介は 3 つの円を横一列に並べる
• PC では締めの商品情報を、左に商品写真・右に文字の 2 カラムにする
• PC のヘッダーには横並びのメニューと SNS アイコンを置く

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