DESIGN.md — 抹茶×桜の水彩にじみ季節限定カフェ LP（Watercolor Matcha Sakura Seasonal Cafe LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: ナチュラル、やさしい・柔らかい、和風、上品・高級
• キーワード: 水彩にじみ・抹茶グリーン・桜ピンク・切り抜き写真・季節限定・余白多め
• 地の質感: 和紙に水彩を落としたような淡いにじみが全面に続く。面のフラットな塗りはほぼない。
• 形: 円形の写真マスク、ピル型ボタン、筆でちぎったような不定形パネル。
• 温度感: 春の暖かさ。淡いクリーム地に若草色と桜色が混ざる。

Colors

• 地はクリーム色に若草色・桜色の水彩にじみを重ね、単色ベタ背景は使わない。
• 英字セクション見出しと主ボタンは抹茶グリーンで統一する。
• ほうじ茶系の商品だけボタンをブラウンにして商品の色と合わせる。
• 本文と商品名は黒ではなくグレーで柔らかく見せる。
• ピンクは桜のイラストとにじみだけに使い、文字やボタンには使わない。
• 緑の円のにじみの上に白文字を置いて素材ポイントを示す。
• button-primary は文字 #FEFDF4 × 背景 #859C42 のコントラスト比が 3.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#6A7C34、4.53:1）を使う。
• button-brown は文字 #FEFDF4 × 背景 #AA732B のコントラスト比が 3.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#9C6927、4.61:1）を使う。
• brush-label は文字 #FEFDF4 × 背景 #859C43 のコントラスト比が 3.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#6A7C35、4.52:1）を使う。

Typography

• メインタイトルだけ毛筆体にし、縦に置いて欧文の小さなサブタイトルを添える。
• セクション見出しは太い英字の大文字を中央か右に寄せて置き、下に日本語サブコピーを 2〜3 行で添える。
• 素材ポイントは小さな説明文に太字の素材名を続け、『×』でつなぐ。
• リード文と本文は中央揃え、商品紹介ブロックは左揃えにする。
• 価格は商品名のすぐ下に、少し大きい欧文で置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品紹介は写真と文字を左右交互に半分ずつずらす
• 本文ブロックの幅: 画面幅の約 80%
• 余白: セクション間 110px、基本単位 8px、カード内 24px（375px 幅換算）
• セクションの間は水彩の背景が続く広い余白でつなぎ、区切り線は引かない。
• 写真は左右の端に寄せてはみ出させ、桜の枝を画面の端から差し込む。
• 商品ブロックは写真→商品名→価格→説明→ボタンの順に縦に並べる。
• 一覧へのリンクはアウトラインボタンと下線付きテキストリンクを中央に縦に並べる。

Elevation & Depth

• 影は基本的に使わない。切り抜き写真をそのまま浮かべて奥行きを出す。
• カード画像にはごく薄い影か、影なしの角丸を使う。
• 円形マスクの写真は後ろに緑のにじみ円を少しずらして重ねる。

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 商品は背景を抜いた切り抜き、素材アップは円形マスク、カード画像は角丸の長方形
• セクション境界: 直線は使わず、水彩のにじみで自然につなぐ。特集パネルは筆でちぎったような不定形の縁にする
• ボタンはすべてピル型にする。
• 吹き出しは白い円にしっぽを付けた形にする。
• 鋭い角の箱は使わない。

Components

• 商品詳細ボタン（button-primary）: 抹茶色のピル型ボタンに白い太字。各商品の直下に置く。
• ほうじ茶色ボタン（button-brown）: 商品の色に合わせたブラウンのピル型ボタン。
• 一覧リンクボタン（button-outline）: 白っぽい地に抹茶色の細い枠と文字のピル型ボタン。
• 情報リンク（text-link-underline）: 抹茶色の太字に下線を付けた中央揃えのテキストリンク。
• 素材ポイント円（ingredient-circle）: 緑の水彩円の中に白文字で素材名を置き、隣に円形マスクのアップ写真を重ねる。
• 筆塗り特集パネル（brush-panel）: 縁がかすれた黄緑の不定形パネル。中に英字見出しとおすすめ商品を並べる。
• 白い円の吹き出し（speech-bubble）: おすすめ商品の上に、特徴をひと言書いた白い円の吹き出しを高さをずらして置く。
• 筆ストローク見出し帯（brush-label）: 緑の筆の帯の上に白い欧文を2段ずらしで置く。

Do's and Don'ts

Do - 背景は全面を水彩のにじみ（クリーム・若草・桜色）で途切れなくつなぐ。 - 桜の枝のイラストを画面の左右の端から交互に差し込む。 - 商品は切り抜き写真にし、横に抹茶の粉や茶葉など素材を添える。 - 英字見出しは抹茶色の太いサンセリフで大きく置く。 - ボタンはピル型にし、主ボタンは塗り、副ボタンは枠線で区別する。

Don't - 真っ白や濃い色のベタ背景のセクションは作らない。 - ピンクをボタンや見出し文字に使わない。 - 直線の区切り線や角張った箱は使わない。 - 黒い文字や強いドロップシャドウは使わない。 - 割引率や煽りのバッジなど訴求の強い装飾は入れない。

Page Structure

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

1. ファーストビュー（季節限定のテーマと看板商品を印象づける）: 中央に看板ドリンクの切り抜き、周りに桜の枝、毛筆の縦書きタイトルと欧文の小さな添え字。
2. コンセプト（商品の世界観を短く伝える）: 太字のリード 2 行と本文 4 行を中央揃えにする。
3. 素材ポイント（素材ごとの魅力を見せる）: 緑のにじみ円に白文字の素材名を置き、円形マスクのアップ写真を左右交互に重ねる。
4. 商品紹介（ドリンク）（商品名・価格と詳細ページへの導線）: 切り抜き写真、商品名、価格、説明、ピル型ボタンを縦に並べる。背景のにじみを商品の色に合わせて変える。
5. 一覧リンク（ほかの商品への回遊）: 枠線のピル型ボタンと下線付きリンクを中央に置く。
6. 特集パネル（カスタマイズのおすすめを紹介する）: 筆塗りの不定形パネルに英字見出し、筆帯ラベル、吹き出し付きの商品 3 点を高さをずらして並べる。
7. スイーツ（フード商品を紹介する）: 右寄せの英字見出しとサブコピー、写真を大きく置き、下に商品情報とボタン。
8. ギフトカード（季節デザインのカードを紹介する）: 中央の英字見出し、角丸のカード画像、カード名、注釈、塗りと枠線のボタンを縦に並べる。
9. グッズ（季節のグッズを並べる）: 写真と商品情報を左右交互にジグザグ配置し、最後に特集ページへの枠線ボタンを置く。

Imagery

• 商品写真は真横から少し見下ろす角度で撮り、背景を抜いて素材（抹茶の粉・茶葉）を手前に添える。
• 素材のアップは円形にトリミングし、水滴やソースの質感を見せる。
• 桜の枝は写実寄りのイラストにし、枝はグレーの墨調で描き、花びらを散らす。
• 背景は淡い水彩を重ねたテクスチャ。若草色を主にして、ところどころ桜色やオレンジのにじみを入れる。
• グッズは白っぽい背景の切り抜き写真を小さめに置く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 960px 前後のキャンバスに、同じ水彩背景を横に広げる。
• PC のファーストビューは毛筆タイトルを左上、ドリンクを中央に置き、リード文は右寄りにする。
• PC の商品紹介は写真を左、テキストとボタンを右の 2 カラムにする。
• PC の特集パネルは横長にして、商品 3 点を横 1 列に並べる。
• PC のボタンは幅 220px 前後に小さくする。SP は幅 80% 前後にする。

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