DESIGN.md — 白×コーラルピンクと水彩花の上品な限定メニュー LP（Elegant Floral Collaboration Menu LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: 上品・高級、やさしい・柔らかい、シンプル・ミニマル
• キーワード: 水彩の花・コーラルピンク・金の細線・明朝体・白い余白・限定メニュー
• 地の質感: 白地が基本。和紙風の淡いベージュ地と、金の細枠や渦巻き飾りで少し質感を足す
• 形: 角のない四角い写真枠。オフセットの細い線枠と小さなひし形の飾りを使う
• 温度感: 暖かめでやわらかい春の雰囲気

Colors

• 地は白を基本にし、強調はコーラルピンクだけに絞る
• 欧文の大見出しと和文の小見出しはピンク、料理名・価格・本文は濃いグレーにする
• 金の細線は写真枠・区切り線・渦巻き飾りに限って使う
• 告知ブロックはサーモンピンクの面に白文字を載せる
• ブランド本体の黄色とグレーはページ下部の共通エリアだけに使う
• coming-soon-block は文字 #FFEFE5 × 背景 #FCA59A のコントラスト比が 1.7:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#D81E06、4.56:1）を使う。

Typography

• コラボ部分は全て明朝体と欧文セリフでそろえる
• 欧文見出しは大きく、和文はその上に小さくピンクで添える
• 見出し・価格は中央揃え、説明文は左揃えで 2〜4 行にする
• 和文の字間は 0.1em 前後と広めにとる
• 太字はほぼ使わず、線の細さで上品さを出す
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は横幅いっぱいに近い大きさ
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• 各メニューは写真→ひし形の飾り→和文の小見出し→欧文見出し→料理名→価格→説明の順に並べる
• 単品写真は右下にずらした細線枠を重ねる
• セクションの間は金の横線 1 本で区切り、端に水彩の花を重ねる
• 余白は広くとり、1 画面に情報を詰め込まない

Elevation & Depth

• 基本はフラットにする
• 特別価格のカードだけに薄く広い影を付ける
• 下部のメニューカードには小さなソフトシャドウを付ける

Shapes

• 角丸: 小 0px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 角丸なしの長方形。セット写真は金の細枠で囲み、上辺中央に渦巻き飾りを載せる
• セクション境界: 金色の細い水平線と、端に重ねる水彩の花
• コラボ部分は角丸を付けない
• ピル型ボタンは下部の共通エリアだけで使う
• タグは細い線の四角で囲む
• アイコンはピンクの丸の中に白い線画で描く

Components

• 欧文メニュー見出し（heading-menu）: ひし形 3 連の飾りの下に、和文の小見出しとピンクの大きな欧文見出しを置く
• 金枠付きの料理写真（photo-frame-gold）: ベージュ地の料理写真を金の細枠で囲み、上辺に渦巻き飾りを重ねる
• オフセット線枠の写真（photo-offset-line）: 写真の右下にずらした灰色の細線枠を重ねる
• セット内容リスト（set-item-list）: 左にピンクの縦線を引き、ピンクのラベルと料理名を縦に並べる
• 特別価格カード（special-price-card）: 白いカードに薄い影を付け、淡いピンクの帯に対象メニューを丸印で並べ、ピンクで特別価格を出す
• 次回予告ブロック（coming-soon-block）: サーモンピンクの面に白い明朝体で日付とメニュー名を書き、細い白線で区切る。下に写真をつなげる
• 味わいタグ（tag-outline）: 小さな文字を細い黒線の四角で囲む
• 店舗検索ボタン（button-primary）: 黄色の面の上に、黒い線のピル型ボタンを置く

Do's and Don'ts

Do - 見出しは欧文セリフをピンクで大きく、和文の小見出しを添える - 水彩の花はセクションの端に半分はみ出す形で置く - 価格は税抜と税込を並べて中央揃えにする - 写真の周りに十分な白い余白をとる - 金の細線や渦巻き飾りは控えめに繰り返す

Don't - ゴシックの太字や派手なボタンをコラボ部分に使わない - ピンク以外の強い色を見出しに使わない - 写真に角丸や濃い影を付けない - テキストを詰めて余白を削らない - 花の装飾を本文や料理の上に重ねない

Page Structure

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

1. ファーストビュー（コラボと開始日を伝える）: クリーム地に 2 つのロゴを「×」でつなぎ、四隅に花を置く。下に料理の集合写真を大きく置き、ピンクのひし形に開始日を入れる
2. 導入（コラボの趣旨を説明する）: ロゴを横並びにし、その下に 2 行の明朝体の説明を中央揃えで置く
3. 看板セット（主力のセットを訴求する）: 金枠の写真、欧文の大見出し、構成、価格を並べ、縦線付きのリストで内容を示す
4. その他のセット（選択肢を示す）: 金枠の写真と欧文見出し、価格を同じ型で繰り返す
5. 単品メニュー（各料理の魅力を説明する）: オフセット線枠の写真、見出し、価格、説明、ピンクの丸アイコン付きの補足を並べる
6. おすすめドリンク（飲み物を提案する）: 白地の切り抜きボトル写真に、名前・タグ・価格を中央揃えで添える
7. 特別価格（セットで頼む特典を示す）: 影付きの白いカードにピンクの帯と 2 品の写真を並べ、ピンクで価格を出す
8. 次回予告（再来店を促す）: サーモンピンクの面に白文字で日付と料理名を書き、写真をつなげる
9. 監修者紹介（信頼感を出す）: 店の紹介文、内観写真 2 枚の重ね配置、人物写真と経歴を並べる
10. 店舗検索・共通導線（来店を促す）: 店内写真の上に黄色の面とピル型ボタンを重ねる。続けて他フェアのカードとアイコン付きのリンクを置く
11. フッター（サイト内の案内）: アプリ告知の帯と、濃いグレー地に白文字のリンク一覧を置く

Imagery

• 料理は白い深皿に盛り、斜め上から明るい自然光で撮る
• 背景はベージュの布やマーブル調で、ワイングラスをぼかして入れる
• 淡い紫・白・ピンクのバラと青緑の葉の水彩イラストを装飾に使う
• ボトルは白背景の切り抜きで、グラスと並べる
• アイコンはピンクの丸の中に白い線画で描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 60% 幅に収め、左右は白地にする
• PC のサブセットは 2 カラムのカードに並べる
• PC の単品メニューは写真とテキストを左右交互の 2 カラムにする
• PC のファーストビューはロゴを左、料理写真を右に置く
• 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 行書くと起動時に読み込まれる。