DESIGN.md — 桜ピンク×空色の季節限定カフェ LP（Sakura Pink and Sky Blue Seasonal Cafe LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: やさしい・柔らかい、かわいい、上品・高級、ナチュラル
• キーワード: 桜・春の空・手書き文字・波形の区切り・紙の質感・季節限定
• 地の質感: 和紙や画用紙のような細かい紙目を地に敷き、ベタ塗りにしない
• 形: ゆるい波形のセクション境界、白いピル型ボタン、角丸の大きいカスタマイズカード
• 温度感: 春らしい暖かさ。ピンクの甘さを空色で冷まして爽やかに保つ

Colors

• 地は桜色と空色をセクションごとに交互に切り替える
• 境界は直線にせず波形で色をつなぐ
• 見出し・商品名・価格はすべて濃い桜色で統一する
• ボタンは白地＋桜色文字、一覧導線は透明地＋桜色枠線
• 空色地の上の手書きコピーは白文字にする
• 夜の商品は薄紫→白→ピンクの縦グラデで差別化
• 緑はロゴ程度にとどめ面で使わない
• page は文字 #AF606A × 背景 #F4BBC9 のコントラスト比が 2.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。
• button-primary は文字 #E0566E × 背景 #FEFDFC のコントラスト比が 3.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら on-cta-accessible（#DA3450、4.51:1）を使う。
• customize-card は文字 #F3ECF0 × 背景 #FEACB2 のコントラスト比が 1.54:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら surface-accessible（#D90312、4.55:1）を使う。

Typography

• 情緒コピーは手書き、情報はゴシックと役割を分ける
• 英字見出しは字間を大きく取り細めに組む
• 英字見出しの直下に手書きの日本語サブを添える
• コンセプト文は縦書きで右から並べる
• 特長は短い句を×印でつないで縦に積む
• 本文は細めで小さく、行間を広く取る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品は写真と説明を上下に積む
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 商品は写真と説明を左右交互に配置（SPでは縦積み）
• 各カテゴリ末尾に一覧への枠線ボタンを中央配置
• 余白を多めにとり1画面1商品を基本とする
• 写真は背景に溶け込む切り抜きで配置
• 見出しは中央揃え、説明文は写真側に寄せる

Elevation & Depth

• 基本はフラット、カードに影はつけない
• 切り抜き商品写真にのみ柔らかい接地影
• ボタンは影なしの白ベタ

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 商品は背景を抜いた切り抜き。FVは波形に切った写真
• セクション境界: 大きくうねる波形カーブで色を切り替える
• ボタンはすべてピル型
• カスタマイズ情報は角丸大のピンクカード
• ギフトカードは実物の角丸カード比率
• 花びら型など有機的な形をアクセントに

Components

• 商品情報ボタン（button-primary）: 白ベタのピル型。桜色文字で商品詳細へ誘導
• 一覧導線ボタン（button-outline）: 透明地に細い桜色枠のピル型。各区画の最後に中央配置
• 注釈リンク（text-link-underline）: アレルゲン情報等の小さな下線リンク
• 英字＋手書き見出し（section-heading）: 小さな英字ラベル、大きな英字、手書きサブの3段構成
• ×でつなぐ特長（feature-cross-list）: 短い特長句を×印で区切り縦に3つ並べる
• カスタマイズカード（customize-card）: 角丸の桜色カードに手書き見出しと追加料金を2行で提示
• 属性タグ（badge-tag）: 価格横の細枠の小さな角丸タグ
• 商品ブロック（product-block）: 切り抜き写真＋説明・商品名・価格・ボタンの組

Do's and Don'ts

Do - 桜色と空色の地を交互に使い、境は波形にする - 情緒的なコピーは手書き体で書く - 地に紙の質感を薄く重ねる - 舞う花びらを余白に散らして動きを出す - ボタンは白ピル型に統一する - 注釈は小さく控えめに添える

Don't - 濃い原色や黒の地を使わない - 直線や角ばった区切りを使わない - 太い極太ゴシックで見出しを組まない - ボタンに強い影やグラデをつけない - 1画面に商品を詰め込みすぎない

Page Structure

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

1. ファーストビュー（季節の世界観と主力商品を一目で伝える）: 左右に商品写真、中央に縦書き手書きコピー。下端を波形で切る
2. コンセプト（季節の想いを情緒的に伝える）: 青空と桜の背景に白の縦書き手書き見出しと縦書き本文
3. 主力商品紹介（看板商品の味わいを伝える）: 手書きキャッチ、×でつなぐ特長3つ、大きな切り抜き商品
4. カスタマイズ提案（追加オプションで単価を上げる）: 角丸桜色カードに選択肢2つと価格
5. 商品詳細CTA（詳細ページへ誘導）: 商品写真＋商品名・価格・注釈・白ピルボタン
6. 第2商品（別ドリンクを紹介）: 濃い桜色の紙地に大きな写真、ホット/アイス2ボタン
7. 第3商品（夜のイメージで差別化）: 薄紫→ピンクのグラデ地に白い玉ぼけ、一覧ボタン
8. フード（関連フードの紹介）: 英字見出し＋手書きサブ、写真と説明を左右交互
9. グッズ（季節グッズの販売）: 紙質感の桜色地に3商品を左右交互配置
10. コーヒー豆（季節の豆を紹介）: 淡い桜色地にパッケージ写真と説明
11. ギフト（ギフト需要の取り込み）: 空色の紙地に英字小見出しごとにカード画像と枠線ボタン

Imagery

• 商品は背景を抜いて柔らかい自然光で撮影
• 桜の花と花びらを切り抜いて余白に散らす
• 春の青空と雲を背景写真に使う
• 地は細かな紙目テクスチャを薄く敷く
• 夜桜区画は白い丸いぼけを点在させる
• 添え物の果物を商品横に置き味を示す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央寄せの狭めの幅で、SPに近い構成
• SPは写真と説明を左右交互から縦積みに変える
• 縦書きコピーはSPでも縦書きを維持し文字を縮める
• 波形境界はSPでも振幅をやや小さくして残す
• ボタンはSPで幅を広げ最低44pxの高さを確保

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