DESIGN.md — 生成り×シャンパンゴールドのホテル風カフェ新作 LP（Champagne Gold Hotel-Style Seasonal Cafe LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: 上品・高級、シンプル・ミニマル、やさしい・柔らかい
• キーワード: シャンパンゴールド・アイボリーのグラデーション・大きな欧文セリフ見出し・切り抜き商品写真・円形モチーフ・ゆったりした余白
• 地の質感: 白から生成りへ柔らかく移るグラデーション。光が差したような淡い陰影
• 形: 正円の金色の面、ピル型ボタン、角丸の小さいカード画像
• 温度感: 暖かく落ち着いた中間色。季節商品の黄緑だけが差し色

Colors

• 地はほぼ白〜生成りのグラデーションのみ。単色の帯セクションは作らない
• 見出し・価格・本文はすべてゴールド〜ブラウン系で統一し、黒文字は使わない
• 主ボタンは金の塗り＋白文字、一覧へのサブボタンは金の細枠＋金文字
• 黄緑は季節商品と特設カードだけに限定し、差し色として使う
• 円形の金色面は商品写真の背後に置き、説明文を白で載せる
• page は文字 #91884D × 背景 #F5F3ED のコントラスト比が 3.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-body-accessible（#766F3F、4.6:1）を使う。
• button-primary は文字 #FEFEFD × 背景 #AE8E2C のコントラスト比が 3.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#8D7324、4.51:1）を使う。
• circle-caption は文字 #FEFEFD × 背景 #C3AB63 のコントラスト比が 2.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#897435、4.51:1）を使う。
• door-hanger-card は文字 #FEFEFD × 背景 #B7D543 のコントラスト比が 1.65:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#697D1C、4.57:1）を使う。

Typography

• セクション名は英字大文字のセリフ体を2〜3行に分けて中央揃え
• 和文はすべて明朝で、字間を広めにとる
• 本文は短い行で改行し、中央または左揃えの小さなブロックにする
• 価格は欧文の数字で商品名の直下に置く
• 見出しは太字を避け、ミディアム程度の細さで品よく
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC も中央寄せの細い列で商品は写真＋テキストの 2 分割、グッズは 3 列
• 本文ブロックの幅: 画面幅の約 80%
• 余白: セクション間 120px、基本単位 8px、カード内 16px（375px 幅換算）
• セクション間は非常に広く余白をとる
• 商品は写真とテキストを左右交互に配置
• 各セクション末に一覧へのサブボタンを中央配置
• テキストブロックは幅狭く、写真の横に寄り添わせる
• 枠線やカード背景は使わず、地の上に直接置く

Elevation & Depth

• 基本は影なしのフラット
• 切り抜き商品写真に自然な落ち影のみ
• 特設のドアプレート型カードに柔らかいドロップシャドウ

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 背景を抜いた切り抜き写真、または正円マスク
• セクション境界: 区切り線なし。余白とグラデーションで区切る
• ボタンはすべて完全なピル型
• 円形の金色面を写真の背後に重ねる
• カード画像は小さい角丸
• 直線的な帯や斜めの区切りは使わない

Components

• 商品情報ボタン（button-primary）: 金の塗りのピル型。白い明朝文字
• 一覧サブボタン（button-outline）: 透明地に金の細枠、金文字のピル型
• 英字セクション見出し（section-title-en）: 金色セリフ体の大文字を中央に2〜3行
• 円形説明バッジ（circle-caption）: 金色の正円に白文字で特長を中央揃え
• 商品紹介ブロック（product-row）: 切り抜き写真と説明・商品名・価格・ボタンを左右交互に並べる
• 特設ページ誘導カード（door-hanger-card）: 黄緑のドアプレート型で中央に濃色円と白文字の見出し
• 小さい属性タグ（tag-small）: 細枠の小さい四角タグで属性を示す
• 下線テキストリンク（text-link-underline）: アレルゲンなど情報への細い下線つき小リンク

Do's and Don'ts

Do - 地は白〜生成りのグラデーションにし、広い余白を保つ - 見出しと文字はゴールド系の明朝・セリフで統一する - 商品写真は背景を抜き、左右交互にゆったり配置する - ボタンはピル型で、主ボタンは塗り、サブボタンは枠線にする - 季節の色は商品写真と特設カードだけに使う

Don't - 黒文字や原色の赤いボタンを使わない - ゴシックの太字見出しで情報を詰め込まない - 色の帯や強い区切り線でセクションを分けない - 写真に四角い枠や濃い影をつけない - バッジや装飾を増やしすぎて静けさを壊さない

Page Structure

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

1. ファーストビュー（新作商品と世界観を一目で見せる）: 左に金色のロゴ風タイトル、右に光の差す室内で撮った商品写真を全幅で
2. コンセプト導入（味わいの魅力を詩的に伝える）: 中央揃えの明朝リード見出しと4行ほどの短い本文
3. 特長紹介（商品の層ごとの魅力を説明）: 円形マスクの拡大写真と金色の円バッジを左右交互に2回
4. 商品詳細とCTA（商品名・価格を示し詳細へ誘導）: 切り抜き写真の横に商品名・価格・注釈・金ボタン。下に一覧の枠ボタン
5. 特設コンテンツ誘導（関連の特設ページへ送る）: 黄緑のドアプレート型カードを中央に1枚
6. フードメニュー（合わせて買う食品を紹介）: 英字見出しの下に切り抜き写真と説明を左右交互に3品
7. 豆・物販紹介（コーヒー豆を紹介）: パッケージ写真と説明を2分割で1品、一覧ボタン
8. グッズコレクション（限定グッズを紹介）: 3列の商品カード。写真・名前・価格・説明・ボタン
9. カード紹介（ギフトカードを訴求）: 英字見出しと中央リード、カード画像と説明・ボタン
10. デジタルカード紹介（デジタル版の案内）: 同じ型でカード画像と注釈、枠ボタン

Imagery

• 商品はスタジオで背景を抜いた切り抜き写真にし、柔らかい落ち影を残す
• メインビジュアルはカーテン越しの自然光が差す明るい室内
• 果物などの素材を商品の横に添えて味を伝える
• 拡大写真は正円でトリミングして金色の円と重ねる
• イラストはパステル調で季節色を使った平面的なタッチ
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央寄せの細い列で、写真とテキストを左右交互に配置
• SP では左右交互をやめ、写真を上・テキストを下に縦積み
• グッズの3列は SP で1列または2列に
• 英字見出しは SP で 36〜40px 程度に縮めて2〜3行に改行
• ファーストビューの左右分割は SP でロゴを上、写真を下に

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