DESIGN.md — 青灰グラデと押し花の上品ワインバー LP（Dusk Blue Botanical Wine Bar LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: 上品・高級、やさしい・柔らかい、シンプル・ミニマル
• キーワード: くすみブルー・押し花・明朝縦書き・ゴールド筆記体・大きな余白・夜の写真
• 地の質感: 青のグラデーション地に細かい粒子ノイズと半透明の円形ボケを重ねる。白地は無地。
• 形: 波形のセクション境界、角が直角の写真、角丸小さめのボタン、丸いアイコンボタン
• 温度感: 寒色の青を基調にして、写真の暖色とゴールドで温かみを足す

Colors

• ファーストビュー・中盤のワイン紹介・フッターは青のグラデ地にして、ページの始まり・中盤・終わりをそろえる
• それ以外の本文セクションは白地にし、写真の暗さで明暗のリズムをつける
• 見出しの中で 1〜2 語だけを青の accent-1 にする
• ゴールドは筆記体の英字ラベルと手描きの曲線だけに使う
• ボタンと丸アイコンは紺の単色だけにし、ほかの色のボタンは作らない
• 大見出しの背後に薄青の大きな欧文を透かして置く
• fixed-bottom-bar は文字 #FFFFFF × 背景 #647DA2 のコントラスト比が 4.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#5E789D、4.52:1）を使う。

Typography

• 全体を明朝体にし、太字はほぼ使わない
• メインコピーは縦書きにし、写真の横や写真の上に置く
• 見出しは中央揃えで 2〜3 行に分け、字間を広めにとる
• 本文は小さい文字で、行間 2.2 以上・字間広めにする
• 英字ラベルは筆記体を日本語見出しの左上に重ね、斜めにずらして置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は左右にずらしたコラージュ配置
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 110px、基本単位 8px、カード内 16px（375px 幅換算）
• セクション間の余白はかなり広くとる（100px 以上）
• 写真は幅 50〜70% で左右交互に寄せ、一部は画面端まで出す
• 本文は左右 20px の余白をとり、両端揃えにする
• 暗い写真を全幅で敷き、白の縦書きを重ねる場面を挟む
• 店舗情報は罫線で区切る 2 段のリストにする

Elevation & Depth

• 影はほぼ使わず、平面的に構成する
• 切り抜いたボトルにだけ、ごく薄い落ち影をつける
• グラデ地に半透明の円や光のボケを重ねて奥行きを出す

Shapes

• 角丸: 小 4px ／ 中 6px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸なしの長方形。ボトルと花は背景を抜いて切り抜く
• セクション境界: 青グラデのセクションは上下を波形のカーブで切り替える
• 主ボタンは角丸 6px 程度の長方形にし、右端に外部リンクのアイコンを置く
• 地図の下のボタンだけはピル型にする
• 写真の右上・右下に紺の丸いリンクアイコンを重ねる
• 見出しの下に、ゴールドの手描き曲線を写真にかかる位置で置く

Components

• 紺の角丸ボタン（button-primary）: 幅 70% で中央に置く。明朝の白文字と、右端に外部リンクアイコンを入れる
• 丸いリンクアイコン（icon-link-circle）: 直径 44px 程度の紺の円を、写真の角に重ねる
• 筆記体英字ラベル（script-label）: ゴールドの筆記体を見出しの左上に重ね、斜めにずらして置く
• 透かし欧文（watermark-title）: 見出しの背後に、薄青の大きなセリフ欧文を置く
• 手描きゴールド線（gold-stroke）: 見出しの下から写真の角に向けて、ゆるいカーブの筆の線を引く
• 縦書きコピー（vertical-copy）: 明朝の縦書き 2 行。写真の上では白、白地では濃グレーにする
• 店舗情報リスト（info-list）: 項目名と内容を 2 段で書き、下に薄い罫線を引く
• お知らせと more 丸ボタン（news-badge）: ファーストビュー下部に、サムネイル・日付・タイトルと紺の丸ボタンを並べる
• 下部固定バー（fixed-bottom-bar）: 左に地図ボタン、右に電話予約を置く。紺系の 2 分割

Do's and Don'ts

Do - 見出しと本文は明朝体で統一し、字間と行間を広くとる - ボトルと押し花の切り抜きを、青のグラデ地に浮かせて配置する - 暗く暖かい色の店内・料理の写真を、白地の中で左右にずらして並べる - 強調は青の 1 語だけにとどめる - 英字の装飾はゴールドの筆記体と、薄青の透かし欧文の 2 種類にする

Don't - 太いゴシック体や赤・黄などの派手な強調色を使わない - 写真に角丸や枠線、強い影をつけない - 余白を詰めて情報を詰め込まない - ボタンを紺以外の色にしたり、グラデーションにしたりしない - 金色をボタンや面の塗りに使わない

Page Structure

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

1. ファーストビュー（店の世界観とジャンルを一目で伝える）: 青のグラデ地にロゴ、ボトルとグラスの切り抜き、押し花を配置する。右端に縦書きの説明文を置き、下部にお知らせを入れ、波形で区切る
2. コンセプト（どんな店かを情緒的に伝える）: 縦書きのコピーと写真のコラージュ。透かし欧文と筆記体ラベルを重ね、中央揃えの見出しと本文を続ける
3. 悩みの提起（入りづらさなどの不安に共感する）: 暗い入口の写真を大きく見せ、白の縦書きで不安の言葉を並べる。ゴールド線でつなぐ
4. 解決の提示（気軽に入れる店だと答える）: 全幅の暗い写真に、白と青の縦書きでつぶやき風の文を重ねる
5. 店主・店について（人柄と空間への信頼をつくる）: 店主の写真、見出し、本文の順に並べる。経歴を縦書きの見出しと短い本文で添える
6. ワインの提案（相談して選べる体験を伝える）: 波形で区切った青グラデ地に、大きな欧文、ボトルの切り抜き、花、白い本文を置く
7. ラインナップ（扱うお酒の特長を 3 つ示す）: 見出し、ゴールド線、写真のセットを縦に 3 回繰り返す。写真には丸リンクアイコンを重ね、最後に紺ボタンを置く
8. 営業時間・利用シーン（使い方の幅を伝える）: 暗いワインセラーの写真に白の縦書きを重ね、続けて中央揃えの見出しと短い本文を 2 組置く
9. お食事メニュー（名物料理と価格を見せる）: 筆記体ラベルと見出しの下に、料理写真のスライダーとサムネイルを置く。商品名・価格・説明のあとに紺ボタン
10. 店舗情報（予約と来店に必要な情報を伝える）: ボトルの写真に筆記体ラベルを重ねる。ロゴ、電話番号、罫線区切りのリスト、Q&A ボタン、写真リンクカード 2 枚を並べる
11. アクセス地図（場所を示す）: 埋め込み地図と紺のピル型ボタン
12. フッター（共有と締めくくり）: 波形で始まる青グラデ地に、白文字のリンク、SNS ボタン、コピーライト、ページトップを置く。下部に固定の予約バー

Imagery

• 写真は暗めの店内照明で撮り、ワイングラスの液体や料理に暖色のハイライトを入れる
• 人物は横顔や手元を多くし、顔をはっきり見せすぎない
• ボトルとグラスは背景を抜いて切り抜き、青の地に浮かせる
• 押し花・ボタニカル画風の花（黄・青・薄紫・ピンク）を、ボトルのまわりに散らす
• 背景は粒子ノイズの入った青のグラデーションに、半透明の円を重ねる
• ゴールドの筆のかすれ線を装飾に使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はファーストビューを横長にし、右上に電話番号と縦並びのナビを置く
• PC のコンセプトは写真 6 枚ほどを散らし、中央に縦書きコピーを置く
• PC のラインナップは 3 カラムに並べる
• PC のメニューは写真を左に大きく、文字を右に置く 2 カラムにする
• PC の店舗情報は 2 カラムのリストにし、写真カード 2 枚を横に並べる
• PC は文字と写真を左右に分けた配置を増やし、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 行書くと起動時に読み込まれる。