DESIGN.md — 淡いピーチ×金泡のカジュアル酒類 LP（Soft Peach Bubbly Liqueur Jelly LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: かわいい、やさしい・柔らかい、上品・高級、ナチュラル
• キーワード: ピーチベージュ・金の泡・有機曲線・明朝見出し・大きな欧文透かし・フレーバー色
• 地の質感: フラットな淡色の面に白い泡の線画と金色の丸を散らし、炭酸のはじける感じを出す
• 形: 写真は不定形のブロブ形や角丸で切り抜く。セクション境界は波のようなゆるい曲線
• 温度感: 暖色寄り。肌色に近いピーチと金で温かく甘い印象

Colors

• 地はピーチベージュと白を曲線で交互に切り替える
• 金色は泡・Point/Step 文字・見出し枠など装飾に限定する
• 見出しは濃グレー、キーワードだけピンクにしてその上に点を打つ
• 商品ボタンは各フレーバーのパッケージ色で塗る
• 大きな欧文透かしは地色より少し濃いか白で、主張させない
• フッターはライトグレー、最下部は金の細い帯
• step-badge は文字 #BA9F49 × 背景 #FFFFFF のコントラスト比が 2.58:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#887434、4.57:1）を使う。
• button-flavor は文字 #FFFFFF × 背景 #1C8B3E のコントラスト比が 4.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#1B873C、4.59:1）を使う。
• pagetop は文字 #FFFFFF × 背景 #D6B45B のコントラスト比が 1.99:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら dark-section-accessible（#907224、4.55:1）を使う。

Typography

• セクション見出しは明朝体で字間を広く取る
• 特長見出しは太いゴシックで大きく、強調語はピンク
• Point/Step は欧文セリフの金色で数字だけ大きくする
• 本文は小さめで細く、行間を広めにする
• 欧文の大透かしは見出しの背後に重ねる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、PC は特長を左右交互、手順を 4 列、商品を 3 列
• 本文ブロックの幅: 画面幅の約 76%
• 余白: セクション間 90px、基本単位 8px、カード内 16px（375px 幅換算）
• 特長は写真ブロブと文章を左右交互にずらして置く
• 手順は写真が全幅に近い角丸で、角に白い円のステップ番号を重ねる
• 商品は中央揃えで縦に並べ、ゆったり間を空ける
• 見出しの周囲に大小の金の丸を散らす

Elevation & Depth

• 影はほぼ使わずフラット
• 白い円バッジは写真に重ねて浮いて見せる
• 奥行きは重ねた曲線形と透かし文字で出す

Shapes

• 角丸: 小 2px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 特長は不定形のブロブ形、手順は角丸長方形、商品は背景なしの切り抜き
• セクション境界: ゆるい波形の曲線で地色を切り替える
• ボタンは角張った長方形で右端に細い矢印
• 見出し枠は上下の線と左右の山形でリボン状にする
• ステップ番号は白い正円

Components

• リボン枠見出し（ribbon-heading）: 上下2本線と左右の山形で囲む明朝見出し。背後に大きな欧文と金の丸
• Point ラベル（point-label）: 金色の欧文セリフと下に斜めの細線
• ブロブ写真（blob-photo）: 白縁の不定形で切り抜いた商品写真
• ステップ円バッジ（step-badge）: 白い円に金色の Step と大きな数字
• 商品詳細ボタン（button-flavor）: フレーバー色の長方形、白文字と右矢印
• ショップ枠ボタン（button-outline）: 白地に黒の細枠、中央文字と右矢印
• 手書き線見出し（handwritten-label）: 金の手描き曲線で囲む小見出し
• ページトップ（pagetop）: 金色の円に白い山形

Do's and Don'ts

Do - 地色は淡いピーチと白に抑える - 金の泡を見出し周りに散らす - 写真は曲線で切り抜いて柔らかく - 強調語はピンク＋上に点 - 商品ボタンは味の色で分ける - 飲酒注意の表記をフッターに入れる

Don't - 濃い原色を地に敷かない - ボタンをピル型にしない - 写真を四角いまま並べない - 影やグラデを強くかけない - 本文を大きく太くしない

Page Structure

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

1. ヘッダー（ロゴとメニュー）: 白地に左ロゴ、右に三本線
2. ファーストビュー（商品の世界観を伝える）: 角丸の商品集合写真に白抜き縦書きコピーと白帯のサブコピー
3. 商品とは（特長）（3つの魅力を示す）: ピーチ地にブロブ写真とPoint見出しを左右交互
4. 飲み方（手順を説明）: 角丸写真にStep円バッジ、下に短い説明
5. アレンジ提案（楽しみ方を広げる）: 手書き線見出しと色背景の写真1枚
6. 商品ラインアップ（各味を紹介し詳細へ誘導）: 白地に缶の切り抜き、色付き商品名、フレーバー色ボタン
7. ショップ・シェア（購入とSNS拡散）: 枠線ボタンとSNSアイコン横並び
8. フッター（注意書きとリンク）: グレー地に中央ロゴ、注意文、リンク、金の帯

Imagery

• 木のテーブルと淡いピンクの壁で暖かい自然光の商品写真
• グラスに注ぐきらめくゼリーをアップで
• 手で缶を持つカットで親しみを出す
• アレンジは単色の背景にフルーツを添える
• 白い線の泡と金の丸を装飾に散らす
• 商品は背景なしの切り抜きで正面から
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は横長のファーストビューでコピーを左右に分ける
• PC の特長はブロブ写真と文章を左右交互にする
• PC の手順とアレンジは4列に並べる
• PC の商品は3列＋2列の中央揃え
• PC はヘッダーにテキストメニューを横並び

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