DESIGN.md — 水彩ブルー×金の上質カフェ周年 LP（Watercolor Blue and Gold Coffee Anniversary LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: 上品・高級、シンプル・ミニマル、ラグジュアリー・ダーク
• キーワード: 水彩アート・金のアクセント・縦書き明朝・章立て・余白・夜の体験
• 地の質感: 白と生成りのフラットな地に、にじみのある水彩イラストと暖色の実写写真を重ねる。
• 形: 基本は直角。金の細い上下罫と四角いボタン。予約ボタンと一部パネル上端だけ大きな角丸。
• 温度感: 白と青で涼しく、金・焦げ茶の写真で温かみを足す中間温度。

Colors

• 地は白が基本。説明部分は生成り、詳細情報は灰ベージュに切り替える。
• 金は罫線・ボタン・欧文見出しだけに使い、広い面には使わない。
• 黒い帯は特別イベントと締めのメッセージだけ。文字は金にする。
• 青と緑はイラストと星の装飾に限る。UI の色には使わない。
• 写真の上の文字は白にし、写真の上下を金の細罫で挟む。
• button-detail は文字 #433A36 × 背景 #CD9A4B のコントラスト比が 4.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#CF9D51、4.53:1）を使う。
• button-primary は文字 #FFFFFF × 背景 #CC9A4B のコントラスト比が 2.53:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#986E2B、4.56:1）を使う。
• close-square は文字 #FFFFFF × 背景 #CD9A4B のコントラスト比が 2.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#CF9D51、4.55:1）を使う。
• close-bar は文字 #FFFFFF × 背景 #CD9A4B のコントラスト比が 2.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#CF9D51、4.55:1）を使う。
• side-tab は文字 #FFFFFF × 背景 #2F7FC8 のコントラスト比が 4.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#2D7AC0、4.51:1）を使う。

Typography

• 見出しは細い明朝。本文は細めのゴシックで行間を広くとる。
• 章見出しは縦書き 2 列にし、間に白の細い縦線を入れる。
• 欧文はセリフ体にして、日付・番号・サブコピーに使う。
• 本文は短く改行した詩のような文にし、1 行 20 字前後にする。
• ロゴ風の欧文は字間を大きく空けて金色にする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。人物紹介だけ写真と文の 2 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 48px、基本単位 8px、カード内 24px（375px 幅換算）
• 章ブロックは画面幅いっぱいの写真。上下に金の 4px 罫を引き、ブロック間に約 40px の白地を空ける。
• 説明テキストは中央揃えにして余白を広くとる。
• 詳細パネルは左右 16px 内側に置いた灰ベージュの面にする。
• 右端に、展開部を閉じる金の四角いボタンを固定する。

Elevation & Depth

• 影はほぼ使わずフラットにする。
• 奥行きは写真の明暗と黒帯で出す。
• 右端の縦タブだけ、わずかに浮いた印象にしてよい。

Shapes

• 角丸: 小 0px ／ 中 16px ／ 大 32px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角いまま全幅に置く。最後は写真のモザイクグリッドにする
• セクション境界: 金の細い横罫。展開パネルは上端だけ大きな角丸
• 詳細ボタンは角丸なしの金の長方形。右に＋を付ける。
• 予約ボタンだけ角丸 16px の大きなボタンにする。
• 項目ラベルは灰の細枠で囲んだ長方形にする。

Components

• 章立て写真ブロック（wave-hero-block）: 全幅の写真に「欧文の章名・下線・大きな数字・日付・縦書き見出し」を白文字で重ね、上下を金の罫で挟む。
• 詳細を見るボタン（button-detail）: 金の長方形に濃い文字を置き、右端に細い＋を付ける。
• 予約 CTA（button-primary）: 角丸の金ボタン。白文字 3 行と右向き矢印。
• 特別イベント黒見出し（dark-event-header）: 上端が角丸の黒い帯に、金の大文字欧文と下線、日本語のリードを置く。
• 概要項目ラベル（info-label）: 灰ベージュの地に細い灰枠で囲んだ見出しを置き、その下に中央揃えの情報を並べる。
• 閉じる四角ボタン（close-square）: 右端に固定する金の正方形。白い細線の×を描く。
• 閉じるバー（close-bar）: 全幅の金の帯に白文字と×を置く。
• お知らせライン（news-line）: 金色の欧文ラベルと短い告知文を 1 行に並べ、下に細罫を引く。
• 縦書きサイドタブ（side-tab）: 右端に置く水彩ブルーのタブ。白の縦書き欧文で、左側だけ角丸にする。

Do's and Don'ts

Do - 見出しは細い明朝。日付や番号は欧文セリフにする。 - 写真の上の見出しは縦書きにし、白の細い縦線で区切る。 - 金は罫・ボタン・欧文の差し色に絞る。 - 余白を大きくとり、本文は短く改行する。 - 星や点の水彩装飾を余白に少し散らす。

Don't - 太いゴシックや派手な原色は使わない。 - 金を背景の広い面に使わない。 - ボタンに影やグラデーションを付けない。 - 本文を長い段落で詰めて書かない。 - 章ブロックごとにレイアウトを変えない。

Page Structure

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

1. ファーストビュー（周年の世界観を一目で伝える）: 左上に金の小さなロゴ文字。白地いっぱいに水彩の幻想的なイラストを置き、右端に縦タブを付ける。
2. お知らせ（最新の更新を知らせる）: 水色の細罫と青のインジケーターの下に、金色の欧文ラベル付きの 1 行告知を置く。
3. コンセプト（企画の趣旨を語る）: 大きな明朝 2 行の主コピー、欧文セリフのサブコピー、詩的な本文を続け、周年ロゴで締める。
4. 章立て企画（3 つ）（期間ごとのテーマを紹介する）: 全幅の写真に章番号・日付・縦書き見出しを重ね、金の詳細ボタンを置く。3 回くり返す。
5. 展開詳細（テーマの説明と予約への誘導）: 上端が角丸の生成りパネルに中央揃えの本文を置き、金の予約ボタンを配置する。
6. 特別イベント（夜限定イベントを訴求する）: 黒帯に金の欧文見出しを置き、続けて暖色の夜の写真と中央揃えの詩的な本文。
7. 開催概要（日時・場所・内容・参加方法を示す）: 黒ラベルの下の灰ベージュのパネルに、枠付きの項目ラベルと中央揃えの情報を縦に並べる。
8. 協力者紹介（コラボ相手の信頼性を示す）: 山括弧付きの小見出し、作品写真、顔写真と経歴文の 2 列。協力団体はロゴと本文で紹介する。
9. 閉じるバー（展開部を閉じる）: 全幅の金の帯に白文字を置く。
10. 写真モザイク（店舗の空気感を見せる）: 大きな外観写真の下に、店舗・コーヒー・焙煎の写真を隙間なくグリッド状に並べる。
11. 感謝メッセージ・フッター（締めの挨拶と SNS 導線）: 黒帯に金文字の 2 行。続く生成りのフッターに字間の広いロゴと周年マーク、金の SNS アイコンを置く。

Imagery

• 青から緑へにじむ水彩テクスチャを、幾何学模様入りの人物・動物シルエットに塗ったイラストにする。
• 星・ひし形・点の水彩装飾を余白に散らす。
• 写真は暖色の自然光や夜のキャンドル光。浅い被写界深度で手元やカップに寄る。
• 建物は夕暮れに照明が灯る外観。桜など季節感を添える。
• 五角形の水彩バッジ状の周年マークを使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では章ブロックを金の面と写真の左右 2 分割にし、左右を交互に入れ替える。
• PC のコンセプトはテキストを左、ロゴを右に置く 2 列にする。
• PC の開催概要は白いカードに、項目表と協力者紹介を左右 2 列で並べる。
• PC の写真モザイクは大きな外観写真と小さな写真のグリッドを横に並べる。
• PC ではコンテンツ幅を約 70% にし、中央寄せにする。

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