DESIGN.md — 桃色グラデの季節限定ドリンク LP（Peach Blush Seasonal Beverage LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: かわいい、やさしい・柔らかい、ポップ・元気、清潔・爽やか
• キーワード: 桃色の地・果実シズル・ピル型ボタン・縦書き明朝コピー・太い欧文見出し・季節限定
• 地の質感: ふんわりした霧やぼかし、果実の断面や氷の水滴がつややかに見える写真の質感
• 形: ピル型ボタンと角丸カード。商品写真は背景を切り抜き、白いぼかしの円で浮かせる
• 温度感: 暖かく甘い。夏らしい明るさがある

Colors

• 地はページ全体を淡い桃色 1 色にし、白やグレーの地は使わない
• 見出し・説明文・ボタンはすべて同じコーラルレッドにそろえる
• 商品名と価格だけ濃いグレーにして、情報としての重みを出す
• 味の違いは写真カードの背景色で表す（ピンク→イエローのグラデ、深い赤茶など）
• 写真カード上のボタンは白い塗りに、カードの色に合わせた文字色を載せる
• コラボや特集のブロックは白カードで区切る
• page は文字 #CA5562 × 背景 #FDE4E0 のコントラスト比が 3.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-body-accessible（#BA3A48、4.58:1）を使う。
• button-primary は文字 #FFFFFE × 背景 #EB4553 のコントラスト比が 3.81:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E72031、4.51:1）を使う。
• button-on-photo は文字 #D96521 × 背景 #FFFFFF のコントラスト比が 3.6:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#BE591D、4.53:1）を使う。
• photo-card は文字 #FFFFFE × 背景 #E28EA9 のコントラスト比が 2.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#CE416E、4.56:1）を使う。
• feature-card-white は文字 #E94754 × 背景 #FFFFFF のコントラスト比が 3.82:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E52534、4.52:1）を使う。

Typography

• 情緒的なコピーは明朝、情報はゴシックで使い分ける
• セクション名は極太の欧文大文字で 1 語だけにする
• リード文は中央揃えにして、行間を広め（2.2 前後）にとる
• 特長の説明は左揃えで 3〜4 行に収める
• 価格は欧文数字で書き、サイズ表記と並べる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品は縦に 1 点ずつ並べる
• 本文ブロックの幅: 画面幅の約 87%
• 余白: セクション間 90px、基本単位 8px、カード内 24px（375px 幅換算）
• 商品写真を中央に大きく置き、その下に商品名・価格・説明・ボタンの順で積む
• 写真カードは左右に約 25px の余白をとり、角丸の面で区切る
• 特長ブロックは写真とテキストを左右に交互にずらして置く
• アウトラインボタンと下線リンクを縦に並べて、セクションの終わりを示す
• セクションの区切りはサーモン色のグラデ帯で示す

Elevation & Depth

• カードに影は付けない。フラットな面で見せる
• 切り抜いた商品写真には柔らかい落ち影を付ける
• 特長写真の背後に白いぼかしの円を置き、浮遊感を出す

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 14px。ボタンはピル型。
• 写真の切り抜き: 商品は背景を切り抜く。カード内は全面写真を角丸でトリミングする
• セクション境界: 直線ではなく、サーモン色の縦グラデ帯やぼかした霧でなじませる
• ボタンはすべてピル型
• カードは角丸 10〜14px
• 属性タグは角丸の細い枠で囲む
• バッジは白地に細枠の正円にする

Components

• 商品情報ボタン（button-primary）: コーラルの塗りに白文字のピル型ボタン
• 写真カード上の白ボタン（button-on-photo）: 白い塗りに、カードの色に合わせた文字色を載せたピル型ボタン
• 一覧へのサブボタン（button-outline）: 透明の地にコーラルの細枠と文字のピル型ボタン
• 下線テキストリンク（link-underline）: 成分情報などへのリンク。コーラル文字に全幅の下線を引く
• 味別の写真カード（photo-card）: 全面写真の上に明朝見出し・リード・商品写真・価格・白ボタンを重ねた縦長カード
• 属性タグ（tag-attribute）: 価格の横に置く細枠の小さなタグ
• 販売区分バッジ（badge-circle）: 白地に細枠の正円。商品写真の右上に置く
• 欧文セクション見出し（section-title）: 極太の欧文大文字をコーラルで中央に置く
• 特集白カード（feature-card-white）: 白い角丸カードに欧文見出し・リード・写真・アウトラインボタンを入れる

Do's and Don'ts

Do - 果実とドリンクの写真を大きく、つややかに見せる - 見出し・本文・ボタンの色をコーラル 1 色でそろえる - 余白は広めにとり、1 画面に 1 商品だけを見せる - 味ごとに背景写真カードの色を変えて違いを伝える - ファーストビューのキャッチは縦書きの明朝にする

Don't - 黒や濃紺の地を使わない - 四角い角張ったボタンにしない - 商品を表組みや細かいグリッドに詰め込まない - 見出しに複数の強調色を混ぜない - 硬い直線の区切り線でセクションを分けない

Page Structure

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

1. ファーストビュー（季節感と 3 商品を一目で伝える）: 山盛りの果実写真の手前に 3 杯を並べ、右上に縦書きの明朝キャッチ、下に太い欧文タイトルを置く
2. リード文（シリーズの魅力を短く伝える）: 中央揃えのコーラル文字 5 行。行間を広くとり、周りに果実片を浮かべる
3. 特長紹介（食感や素材のポイントを示す）: 白いぼかし円で浮かせた拡大写真と、小見出し＋3〜4 行の説明を左右交互に置く
4. 商品 1（主力商品の購入導線）: 切り抜き写真、商品名、価格、属性タグ、コーラルのピルボタンの順に並べる
5. 商品 2 写真カード（爽快系の味を訴求する）: ピンクからイエローへのグラデ写真カードに、白い明朝見出しと白ボタンを載せる
6. 商品 3 写真カード（果肉感のある味を訴求する）: 果肉の全面写真を使った深い赤茶のカードに、白文字と白ボタンを載せる
7. 一覧リンク（関連一覧と成分情報へ誘導する）: アウトラインのピルボタンと下線リンクを縦に並べる
8. フード（関連フードを紹介する）: サーモン色のグラデ帯で区切り、欧文見出しの下に切り抜き写真と商品情報を置く
9. グッズ（関連グッズを複数紹介する）: 欧文見出しの下に、カラバリをピラミッド状に並べた写真と商品情報・ボタンを繰り返す
10. 特集バナー（別企画へ送客する）: 白い角丸カードに欧文見出し・リード・人物写真・アウトラインボタンを入れる

Imagery

• 果実の断面やみずみずしい丸ごとの果実を山盛りにした、明るい高キーの写真
• ドリンクは背景を切り抜き、氷や水滴の質感を強調する
• 炭酸の泡や果実片が宙に舞う、躍動感のあるシズル写真
• ぼかした果実片や霧のような布のぼかしを装飾として散らす
• グッズは複数色を三角形に積んで並べ、白い地で撮る
• 人物写真は青空の下で撮った、明るい屋外のスナップ
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でも SP の 1 カラムをそのまま中央に置く（幅約 450px）
• PC の左右の余白はさらに淡い桃色で塗り、中央の列との境目に薄い影を付ける
• PC では左の余白にロゴマークを固定表示する
• 文字サイズと構成は SP と同じにして、拡大しない

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