DESIGN.md — 桜色グラデと水引円の新年飲料LP（Soft Pink New Year Beverage LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: やさしい・柔らかい、上品・高級、かわいい、和風
• キーワード: 桜色グラデーション・ミルクティーブラウン・水引の円弧線・円形写真・新年の華やぎ・余白多め
• 地の質感: 霧のようにぼかしたピンクと白のグラデーション。紙の質感やノイズは入れない
• 形: 正円の写真フレーム、片側だけ大きく丸めた写真、細い線の同心円弧、放射状の花模様
• 温度感: 暖かくやわらかい。甘さと上品さが半分ずつ

Colors

• 地は上から下へ、ピンクと生成り白のグラデーションを交互に流す
• 文字はブラウン系の濃淡だけで組み、黒は使わない
• ピンクと金茶は細い線の装飾だけに使い、面にはしない
• 赤やビビッドなピンクは写真の中だけに出す
• ボタンは塗らない。細い枠線と透明な地で静かに見せる
• page は文字 #AE8A77 × 背景 #FBECED のコントラスト比が 2.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-body-accessible（#896552、4.53:1）を使う。
• hero-product は文字 #AB8D72 × 背景 #F5D5DA のコントラスト比が 2.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#765D46、4.5:1）を使う。
• circle-ingredient は文字 #AE8A77 × 背景 #FEFDFD のコントラスト比が 3.09:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-body-accessible（#896552、4.51:1）を使う。
• info-footer は文字 #8A6A5A × 背景 #F5D5DA のコントラスト比が 3.59:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#765B4D、4.57:1）を使う。

Typography

• 欧文の見出しは太いサンセリフ。和文の見出しは細めで大きく組み、太さの差を見せる
• 見出しはすべて中央ぞろえ。素材の説明ブロックだけ左ぞろえ
• 本文は行間2.0前後と広めにし、1行15〜20文字で改行する
• 文字色はブラウン系だけ。強調は太さで表す
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は画面端まで寄せることもある
• 本文ブロックの幅: 画面幅の約 80%
• 余白: セクション間 72px、基本単位 8px、カード内 0px（375px 幅換算）
• カードや枠を使わず、グラデーション地の上に要素を直接置く
• 円形写真は左右に少しずらして並べ、リズムを出す
• 写真の下に欧文見出しと2〜3行の説明文を左ぞろえで置く
• 装飾の円弧は画面端からはみ出させてよい

Elevation & Depth

• 影は使わず、すべてフラットにする
• 商品の切り抜き写真にだけ、ごく淡い落ち影を付ける
• 奥行きはぼかしたグラデーションと線の重なりで出す

Shapes

• 角丸: 小 4px ／ 中 16px ／ 大 200px。ボタンはピル型。
• 写真の切り抜き: 素材写真は正円。シーン写真は片側だけ半円状に大きく丸める
• セクション境界: 境界線は引かない。グラデーションと余白で区切る
• 細い線（1〜2px）の同心円弧を水引の模様として重ねる
• 放射状の花火（菊）の模様を余白に薄く散らす
• 四角い写真は使わない

Components

• 商品の切り抜きFV（hero-product）: 商品を大きく傾けて置き、素材写真と円弧線を周りに散らす
• 発売日と商品名の見出し（release-title）: 発売日・欧文名・和文名の3段を中央ぞろえで積む
• 半円の角丸写真（half-round-photo）: 画面端に寄せ、反対側だけ大きく丸めたシーン写真
• 素材の円形写真と説明（circle-ingredient）: 正円の素材写真、欧文の小見出し、左ぞろえの説明文をひと組にする
• 詳細のアコーディオンボタン（accordion-outline）: 細い枠線のピル型ボタン。右端に＋を置き、地は透明
• 水引の円弧装飾（mizuhiki-ornament）: ピンクと金茶の細い同心円を重ね、画面端からはみ出させる
• 注釈（note-text）: ※から始まる2行の注意書き。中央または右ぞろえ
• 販売情報のフッター（info-footer）: 太字ラベルと通常の値を中央に積み、リンクには下線を付ける

Do's and Don'ts

Do - 地はピンクと生成り白のぼかしグラデーションで流れを作る - 写真は正円か半円で切り抜く - 文字はブラウン系の1色にそろえる - 余白を広く取り、要素を詰め込まない - 季節の和柄（水引・花火）は細い線で薄く添える

Don't - 黒や濃いグレーの文字を使わない - ボタンを塗りつぶしたり、強い色にしたりしない - 影の強いカードや四角い枠を置かない - ビビッドな色を面に広く使わない - 装飾を太い線や濃い色で描かない

Page Structure

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

1. ヘッダー（ブランドを示す）: 左上にロゴと欧文の名前を小さく置く。地は透明
2. ファーストビュー（新商品を印象づける）: 商品の切り抜きを素材写真・円弧線と重ねる。下に発売日と商品名の大見出し、注釈を置く
3. 商品コンセプト（味の特徴を伝える）: 半円の写真の下に、太字のコピー4行を中央ぞろえで置く
4. 情緒のメッセージ（季節の気分を伝える）: 反対側に寄せた半円のシーン写真と、中央ぞろえの短文5行
5. 素材の紹介（原料ごとの魅力を伝える）: 素材を1つずつ、円形写真・欧文見出し・説明文の組で縦に3つ並べる
6. 商品詳細（仕様を折りたたんで見せる）: 枠線のピル型アコーディオンと注釈
7. パッケージの紹介（デザインの意図を伝える）: 円の中に商品の切り抜きを置き、欧文の大見出しと説明文を添える
8. 販売情報（販売場所と問い合わせ先を示す）: 中央ぞろえのラベルと値を2組置く。地はピンクのグラデーション

Imagery

• 商品はやや傾けた白背景の切り抜きで、柔らかい光を当てる
• 素材写真（果物・茶葉・ミルクの質感）は白か淡いピンクの円の中に置く
• シーン写真は着物の袖や手元を浅い被写界深度で撮り、パステル調に仕上げる
• ピンクと赤のスタイリング写真は、斜めの色面で構成する
• 装飾は細い同心円の線、放射状の花、たなびく雲（霞）の形
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では見出しと商品写真を左右2カラムに配置する
• 半円の写真とテキストを左右に交互に置き、ジグザグにする
• 素材の円形写真3つを横一列に並べ、高さを少しずつずらす
• 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 行書くと起動時に読み込まれる。