DESIGN.md — 桜色水彩の春限定フルーツ菓子 LP（Spring Watercolor Fruit Sweets LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: かわいい、やさしい・柔らかい、ナチュラル、上品・高級
• キーワード: 春の季節感・水彩にじみ・額縁フレーム・果物の切り抜き・明朝見出し・余白多め
• 地の質感: 白地にピンクの水彩にじみを置き、ところどころに線画の植物を添える。紙のように軽い質感。
• 形: 細い二重の額縁線で全体を囲む。斜めに傾けたラベル札、円形バッジ、角を少し斜めに切った台形の色面。
• 温度感: 暖かく柔らかい。桜色と果物の自然な色が主役。

Colors

• 地は白を基本にし、淡いピンクの水彩にじみを背景に不規則に散らす。
• 強い色の面は特長訴求の1ブロックだけにし、桜ピンクで塗る。
• 紫は円形バッジなどの小さな強調に使う。
• 見出しと本文は黒ではなく少し紫みのある濃いグレーにする。
• 果物の色は写真で出し、UIの色数は増やさない。
• 額縁線とラベル枠は細いグレーブラウン1色にする。
• feature-panel は文字 #FFF3F4 × 背景 #ED8593 のコントラスト比が 2.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#DA2039、4.56:1）を使う。
• page-top は文字 #FFF3F4 × 背景 #FDA34C のコントラスト比が 1.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#B15802、4.54:1）を使う。

Typography

• 見出しと本文は明朝で統一し、上品さを出す。
• 商品名見出しは中央揃えで大きく、字間を少し空ける。
• 本文は小さめで行間を2.0前後に広く取る。
• ピンク面の中だけは細いゴシックの白文字にする。
• 太字や袋文字は使わない。
• 1段落は3〜4行に収める。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（額縁線の内側）
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 60px、基本単位 8px、カード内 24px（375px 幅換算）
• 画面の左右端から約12pxの位置に細い縦線を引き、額縁の中にすべてを収める。
• 商品写真 → 商品名見出し → 説明文の順を味ごとに繰り返す。
• 果物の切り抜き写真を額縁線からはみ出させ、端に浮かせる。
• 本文は左揃え、見出しは中央揃え。
• 特長ボックスは左右どちらかに寄せ、画面外まで伸ばす。

Elevation & Depth

• 商品パッケージに柔らかく大きめのドロップシャドウを付けて浮かせる。
• 果物の切り抜きにも薄い影を付ける。
• ボックスやボタンには影を付けず、平面のままにする。

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 999px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品と果物は背景を消して切り抜き、斜めに少し傾けて散らす。人物も背景なしの切り抜き。
• セクション境界: 区切り線は使わず、水彩にじみと余白で区切る。
• ラベル札は細い線の長方形を数度傾けて手作り感を出す。
• 強調バッジは正円にする。
• 特長ボックスは片側の角を斜めに切った変形四角にする。
• ページトップボタンは水彩風の丸にする。

Components

• 額縁フレーム線（frame-border）: ページ全体を囲む細い二重線。上部に飾りタイトル帯を重ねる。
• 傾いたラベル札（flavor-tag）: 白地に細枠、明朝の味名を入れ、少し傾けて商品の下に並べる。
• 円形強調バッジ（badge-circle）: 紫の正円に白い明朝2行。周りに手書きの集中線を添える。
• 特長ボックス（feature-panel）: 桜ピンクの変形四角に白文字の見出しと説明文を入れる。
• 味別紹介ブロック（product-block）: 影付き商品写真＋果物切り抜き、その下に中央の明朝見出しと左揃え本文。
• SNS誘導（sns-link）: 四角いSNSアイコンの右に、字間を広げた2行のゴシック文言。
• ページトップボタン（page-top）: 右下に固定する水彩風の橙の丸。欧文手書きの白文字。
• タイトル上の小見出し帯（title-ribbon）: 額縁上辺に重ねた白抜き帯に、小さなゴシックと飾り記号。

Do's and Don'ts

Do - 白地と淡いピンクの水彩にじみで、春の柔らかい空気を作る。 - 商品と果物は切り抜いて影を付け、画面の端からはみ出させる。 - 見出しは明朝で、味ごとに同じ型を繰り返す。 - 濃い色の面は1か所に絞る。 - 桜の枝や線画の葉など、小さな季節の装飾を四隅に置く。

Don't - 原色の太い帯や大きな購入ボタンで騒がしくしない。 - 角丸の大きいカードを並べない。 - 太いゴシックや袋文字の見出しにしない。 - 背景をベタ塗りのピンクで埋めない。 - 果物写真を四角い枠のまま置かない。

Page Structure

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

1. ファーストビュー（季節限定の新商品であることを伝える）: 額縁上辺に小見出し帯、水彩の季節文字と商品ロゴ、手書き風の吹き出しを重ねる。
2. ラインナップ一覧（味の種類をひと目で見せる）: パッケージ3つを少し重ねて並べ、下に傾けたラベル札を置く。
3. 商品紹介（1つめの味）（味の特徴を説明する）: 大きな商品写真と果物の切り抜き、中央の明朝見出し、左揃えの本文。
4. 特長訴求（改良点を印象づける）: 人物の切り抜きと紫の円形バッジ、その下にピンクの変形ボックスで見出しと説明。
5. 商品紹介（2つめの味）（別の味を同じ型で紹介する）: 商品写真の左右に果物を散らし、見出しと本文を繰り返す。
6. 商品紹介（3つめの味）（最後の味を紹介する）: 同じ型。背景に水彩ピンクのにじみを置く。
7. SNS誘導（公式アカウントへ誘導する）: SNSアイコンと2行の文言を横に並べる。
8. フッター（ページを締めて先頭へ戻す）: 果物の切り抜きを下端に寄せ、右下に丸いページトップボタンを置く。

Imagery

• 果物は丸ごとと断面の両方を白背景で撮り、きれいに切り抜く。
• 果汁でみずみずしく、彩度は高めで明るく仕上げる。
• 人物は白い服で明るい笑顔、指さしポーズの切り抜き。
• 背景には桜色の水彩にじみ、桜の花びら、線画の葉やつるを添える。
• 小さな果物片や丸い粒を周りに散らしてリズムを作る。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央固定幅の額縁内で、商品写真と説明文を左右交互に並べる。
• PCではタイトルとラインナップを横長にまとめ、吹き出しを右に置く。
• PCの見出しは左揃え、SPは中央揃え。
• 果物の切り抜きはPCでは額縁の外側に大きく散らす。
• SNS誘導はPCでは1行に横並びにする。

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