DESIGN.md — 桜ピンク×ミントの春限定ドリンク LP（Spring Sakura Pink Seasonal Drink LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: かわいい、やさしい・柔らかい、ポップ・元気、情報量多め・訴求型
• キーワード: 桜色グラデーション・苺の赤・ミントグリーン・細身セリフ英字・円形切り抜き・季節限定
• 地の質感: 淡いピンクのグラデーションに花びらのぼかしを散らし、透明感と空気感を出す
• 形: 波形の区切り、円・楕円の写真切り抜き、角丸カード、ピル型ボタン、斜めのリボンラベル
• 温度感: 暖かく甘い春の温度感。後半はミントグリーンに切り替えて爽やかさを出す

Colors

• 前半は淡ピンクのグラデーション地、商品ブロックは濃い桜ピンクの地にする。
• 英字の大見出しは赤、和文の見出しはローズレッドにする。
• 日付リボンと後半のキャンペーン地はミントグリーンにして、ピンクと補色の対比を作る。
• 本文は黒を使わず、こげ茶にする。
• 濃いピンクの面の上では、白文字と黄色の強調文字を使う。
• 主ボタンは赤いピル型に統一する。
• button-primary は文字 #FFEEED × 背景 #F14A61 のコントラスト比が 3.17:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DB112D、4.53:1）を使う。
• share-button は文字 #E34159 × 背景 #FEEAE5 のコントラスト比が 3.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#D21F39、4.53:1）を使う。

Typography

• 英字の大見出しの直下に、小さな和文の訳を太字で添える。
• 価格や日付の数字は大きなセリフ体か、太い欧文で見せる。
• 本文は中央揃えを基本にする。特長の説明だけは左揃えにする。
• 本文中の強調語は、ピンクの帯の上に白文字で置く。
• 曲線に沿って英字を回り込ませる装飾テキストを使う。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 72px、基本単位 8px、カード内 24px（375px 幅換算）
• 商品は写真と円形パネルを左右交互に配置する。
• 特長は大きな切り抜き写真、番号、テキストの順に縦に並べる。
• 企画の見出しは上下の罫線で挟み、日付リボンを左上にはみ出させる。
• キャンペーンの詳細は角丸カードに収め、ラベルと内容の組を縦に並べる。
• シェアボタンは 2 つ横に並べる。

Elevation & Depth

• 白カードには、ごく薄く柔らかな影を付ける。
• 主ボタンには赤みのある落ち影を付ける。
• 商品写真には、接地する部分に柔らかい影を付ける。

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 円・楕円・有機的な形で切り抜く。片側を大きく丸めた切り抜きも使う
• セクション境界: 波形や斜めのライン、ドット付きのスカラップ（波形の縁）で切り替える
• 直角の箱はなるべく使わない。
• 日付は斜めのリボン型にする。
• ラベルは枠線のみのピル型にする。
• イラストは円形の枠に収める。

Components

• 主ボタン（button-primary）: 赤いピル型のボタン。白い太字で、外部リンクのアイコンを付ける
• 英和の二段見出し（heading-en-ja）: 細身セリフの英字の下に、小さな和文訳を添える
• 日付リボン（date-ribbon）: ミントの斜めリボンに、白い日付と丸囲みの曜日を載せる
• 商品円形パネル（product-blob）: 白い楕円の中に商品名と大きな価格を置き、手書き英字を重ねる
• 特長番号（feature-number）: 水色の斜体数字に、手書きの線を添える
• 枠線ラベル（outline-label）: 小さな項目名を枠線のみのピル型で示す
• キャンペーンカード（campaign-card）: 白い角丸カードに期間、ステップ、ボタンをまとめる
• SNS アコーディオン（accordion-sns）: 白い角丸バーに SNS アイコン、ラベル、山形の開閉矢印を並べる
• シェアボタン（share-button）: 淡いピンク面にアイコンと赤文字を置き、2 つ横に並べる

Do's and Don'ts

Do - 花びらのぼかしを地の上に散らして、季節感を出す。 - 英字見出しには必ず和文訳を添える。 - セクションの境界は波形や曲線にする。 - 差し色のミントは、日付と後半の地に限定して使う。 - 価格は大きなセリフ数字で見せる。

Don't - 本文に純黒を使わない。 - ビビッドな青や紫を主要色にしない。 - 角張った四角い写真を並べない。 - 太い黒枠の箱を使わない。 - 濃いピンク面の上に濃い色の小さな文字を置かない。

Page Structure

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

1. ファーストビュー（季節の新商品を印象づける）: 桜と苺に囲まれた商品写真を大きく置き、縦組みのロゴを添える。下に波形のピンク帯と発売日を大きく載せる
2. リード（季節の情緒で共感を呼ぶ）: 明朝の赤いキャッチを置き、中央揃えの本文に帯状の強調を入れる
3. ラインナップ（商品と価格を見せる）: 濃い桜ピンクの地に、円形パネルと商品写真を交互に並べる
4. 特長（素材と味のこだわりを伝える）: 円形の切り抜き写真のまわりに回り込む英字を置き、番号と見出し、本文を 3 回繰り返す
5. コラボ企画（話題性を作る）: 円形のイラスト、罫線で挟んだ見出し、白カードのロゴの順に並べる
6. 特典の告知（来店を促す）: 日付リボンと見出しを置き、特典画像と注釈を続ける
7. SNS キャンペーン（投稿参加を促す）: 濃いピンクの角丸パネルに期間、項目ラベル、SNS アコーディオンを入れる
8. 関連商品（定番商品を回遊させる）: ピンクから黄緑へのグラデーション地に白カードを置き、価格表を枠で囲む
9. キャンペーン（クーポン応募へ誘導する）: ミント地に白カードを置き、ステップと赤いボタンを入れる
10. シェア・フォロー（拡散を促す）: シェアボタン 2 つ、SNS アイコン、注釈の順に並べる
11. フッター（ブランド表記）: こげ茶の地にロゴとコピーライトを置く

Imagery

• 商品は白背景で切り抜き、透明カップの層がよく見える明るい写真にする。
• 桜の花と苺を前景にぼかして入れる。
• 素材はアップで撮り、ハイキーで柔らかな光にする。
• 人物はポップな手描き少女漫画風のイラストにして、円形の枠に収める。
• 花びらは半透明のぼかしで散らす。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に SP 幅のカラムを置き、左右は淡ピンクの地か花の背景で埋める構成を推奨する。
• PC では商品パネルや特長を横 2 カラムに広げてもよい。
• 英字見出しは PC で 1.5 倍程度に拡大する。
• ボタンは最大幅 360px 程度に抑える。

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