DESIGN.md — 桜ピンク×抹茶緑の和風季節スイーツLP（Sakura Pink Japanese Tea House Seasonal Dessert LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 和風、かわいい、やさしい・柔らかい、情報量多め・訴求型
• キーワード: 桜・抹茶・和紙テクスチャ・季節限定・切り抜き商品写真・価格カード
• 地の質感: ピンクの地に薄い和紙・布目調のテクスチャ。花びらが舞うぼかし装飾。
• 形: 角丸の白カードと金茶の細枠、ピル型ラベル、リボン型見出し帯。
• 温度感: 暖かく柔らかい春の空気感。

Colors

• 地は桜ピンク一色で通し、白カードで情報を区切る。
• 価格とサイズラベルは濃いピンクに統一する。
• 抹茶グリーンは個数ラベルと説明帯、クーポン地に限定。
• リンクボタンは金茶のグラデーションで和の上品さを出す。
• 本文は黒ではなく焦茶を使う。
• おトク数字は水色ボックス、強調語は黄色マーカーで差す。
• page は文字 #895740 × 背景 #EBBEC1 のコントラスト比が 3.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-accessible（#F3D9DB、4.5:1）を使う。
• button-link は文字 #FEFAE9 × 背景 #B18967 のコントラスト比が 3.02:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#916B4A、4.55:1）を使う。
• price-card は文字 #E95D7F × 背景 #FEF2F2 のコントラスト比が 3.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D91E4B、4.53:1）を使う。
• heading-ribbon は文字 #FEFAE9 × 背景 #E95D7F のコントラスト比が 3.17:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D91E4B、4.56:1）を使う。
• heading-band は文字 #E95D7F × 背景 #FEF2F2 のコントラスト比が 3.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D91E4B、4.53:1）を使う。
• badge-new は文字 #FEFAE9 × 背景 #D8357A のコントラスト比が 4.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#D62A73、4.52:1）を使う。
• label-count は文字 #FEFAE9 × 背景 #8FAD64 のコントラスト比が 2.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#627A40、4.58:1）を使う。
• coupon-panel は文字 #E95D7F × 背景 #FDF3F3 のコントラスト比が 3.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D91E4B、4.55:1）を使う。
• period-box は文字 #D8357A × 背景 #FEF2F2 のコントラスト比が 4.08:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#D62A73、4.55:1）を使う。

Typography

• 見出しと価格は明朝で和の品格を出す。
• 本文と注釈はゴシックで読みやすく。
• 価格の¥記号は数字より小さくする。
• クーポン部は太ゴシックで訴求を強める。
• 字間はやや広めにとる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品紹介は写真と説明を左右交互に配置。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 商品写真は画面幅の60%程度で大きく見せる。
• フレーバー紹介は写真と文章を左右に振り分けジグザグ配置。
• 価格カードは2列で中央に点線区切り。
• セクション見出しの上下に桜の枝装飾を置く。
• 注釈はカード直下に左揃えで並べる。

Elevation & Depth

• 価格カードとボタンに淡い影。
• 切り抜き商品写真に柔らかいドロップシャドウ。
• 商品名の背後に白い円形グロー。

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 商品は背景を抜いた切り抜き写真。
• セクション境界: 直線の切り替えはなく、桜の花群のイラストで緑地へつなぐ。
• サイズラベル・個数ラベルはピル型。
• 見出しはリボン型または左右がぼける白帯。
• カードは白地に金茶の細枠と角丸。
• 吹き出しは角丸の枠線＋しっぽ。

Components

• 特設サイトボタン（button-link）: 金茶グラデの横長角丸ボタン、右に＞矢印、点線の内枠。
• 価格カード（price-card）: 白カードにピンクのピルラベルと大きな明朝価格を2列で並べる。
• リボン見出し（heading-ribbon）: 濃いピンクのリボン帯に白明朝文字。
• 白帯見出し（heading-band）: 左右がフェードする白帯にピンク明朝。
• 新作バッジ（badge-new）: マゼンタの円に白文字の新作表示。
• 個数ラベル（label-count）: 抹茶グリーンのピル型に白文字。
• 吹き出し（speech-bubble）: 金茶枠の角丸吹き出しに一部ピンク塗りの強調語。
• クーポン特典パネル（coupon-panel）: 淡色面に左上タブ見出し、黄色マーカーで強調。
• 期間表示（period-box）: 色付き見出しセルと白い枠セルを横に並べた角丸ボックス。

Do's and Don'ts

Do - 地は桜ピンクの和紙調を全体に保つ。 - 花びらを半透明で散らす。 - 価格は明朝の大きな数字で見せる。 - 商品は切り抜き写真に影をつける。 - 注釈は※付きで小さく整理する。

Don't - 原色の赤や黒を使わない。 - 角ばった硬いカードにしない。 - 写真を四角く切って並べない。 - 本文を純黒にしない。 - 見出しに太いゴシックを多用しない（クーポン部以外）。

Page Structure

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

1. ファーストビュー（季節キャンペーンの世界観と期間を伝える）: 暖簾風の上部、縦書き明朝タイトル札、商品を寄せ集めた切り抜き写真、右上に緑の円で期間。
2. 特典告知バナー（クーポン特典へ誘導）: 白地に緑とピンクの文字の横長バナー、下向き矢印。
3. シズル映像（食感・質感を訴求）: 全幅の接写写真。
4. おすすめ商品一覧（季節限定フレーバーを紹介）: リボン見出し、写真と説明を左右交互に配置、新作バッジ。
5. セット提案と価格（組み合わせ購入を促す）: 金茶枠のカードに写真と見出し、緑帯と価格2列。
6. 限定商品紹介（新商品の魅力訴求）: 白帯見出し、商品写真2点、限定スタンプ、説明文、価格カード、注意事項カード。
7. ドリンク商品紹介（別カテゴリ商品の訴求）: 写真2点、説明、価格カード、特設サイトボタン。
8. ボックス商品（まとめ買いのおトクを訴求）: 斜線つきキャッチ、吹き出し、箱写真と水色数字・緑ラベルを交互配置、価格カードを反復。
9. クーポン特典詳細（特典内容と条件を明示）: 桜並木イラストから緑地へ、白い大カード内に淡色パネル、マーカー強調、期間ボックス、注釈。
10. 全体注釈（法的注意事項）: 緑地に白の小さな※リスト。

Imagery

• 商品はやや上から撮った切り抜き写真に柔らかい影。
• 桜の枝・花群の写真調装飾を上下端に置く。
• 大きくぼかした花びらを前景に散らす。
• 質感が伝わるマクロ接写を全幅で1枚入れる。
• パッケージは斜め俯瞰で立体的に見せる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC版は中央に SP 幅相当のカラムを置き、左右は同じ桜色テクスチャで埋めるのを推奨。
• PC では商品紹介を2列グリッドにしてもよい。
• 価格カードは PC でも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 行書くと起動時に読み込まれる。