DESIGN.md — 夕焼けピンク×縦書き明朝のウイスキーLP（Dusk Pink Vertical Whisky LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: 上品・高級、和風、やさしい・柔らかい
• キーワード: 夕焼け・縦書き・くすみピンク・琥珀色・写真全面・余韻
• 地の質感: 全面写真に半透明の色帯や白い半透明パネルを重ねる。木目・煙・氷のシズル感が強い。
• 形: 角のない長方形の帯とパネル。円形バッジだけ丸い。
• 温度感: 夕焼けのピンク〜琥珀の暖色に、煙のシーンの黒で締める。

Colors

• 地の色はほぼ写真が担い、単色の面は淡いピンクグレーの地だけにする。
• 縦書きコピーの帯はくすみピンクとモーヴ紫を半透明にし、写真の上に重ねる。
• 黒い煙のシーンは1か所だけ入れ、白文字で抑揚をつける。
• 大見出しを地色の上に置くときはピンクの明朝を使う。
• 原色や彩度の高い色は使わず、ほこりっぽいくすみ色でそろえる。
• vertical-copy-band は文字 #FCFCF9 × 背景 #D7746E のコントラスト比が 3.09:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#CA4840、4.53:1）を使う。
• ratio-label は文字 #FCFCF9 × 背景 #B38071 のコントラスト比が 3.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#9F6655、4.53:1）を使う。

Typography

• 見出しも本文も縦書きを基本にし、右から左へ読ませる。
• 大コピーは明朝、帯と本文は細めのゴシックで静かにする。
• 字間は広め（0.08〜0.15em）にとって余韻を出す。
• 手書き風の文字はファーストビューと飲み方の添え書きだけに使う。
• コピーは1行を短く切り、句点で終えて間を置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真の上に縦書きの帯を重ねる
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 0px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションは隙間なくつなぎ、写真の切り替わりで区切る。
• 縦書きの帯は写真の左か右に寄せ、商品写真と重ならないようにする。
• 本文パネルは見出し帯の横に段違いで置く。
• 料理写真はすき間の細いモザイクグリッドに並べる。
• 飲み方カードは左に2枚縦積み、右にグラス写真を置く。

Elevation & Depth

• 影はほとんど使わず、半透明の重なりで奥行きを出す。
• 白パネルは不透明度80〜90%で、うしろの写真を少し透かす。
• 飲み方カードは淡い白の面だけにし、影は付けない。

Shapes

• 角丸: 小 0px ／ 中 6px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は画面幅いっぱいに裁ち落とす。料理写真は角丸なしの小さな矩形で組む。
• セクション境界: 写真の境目でまっすぐ切り替える。
• 帯とパネルは角丸のない長方形にする。
• 飲み方カードだけ小さな角丸（6px）にする。
• 特徴の要点は細い線の円形バッジで示す。
• 装飾の角括弧〈 〉で小見出しを挟む。

Components

• 縦書きコピー帯（vertical-copy-band）: 半透明のピンクかモーヴの縦長帯に、白抜きの縦書きコピーを1〜2列で入れる。
• 縦書き本文パネル（vertical-text-panel）: 白い半透明パネルに縦書きの本文を入れ、2枚を段違いに並べる。
• 円形バッジ（badge-circle）: 細いピンクの線で描いた円に、品質の要点を3行で入れる。
• 横帯セクション見出し（section-title-bar）: モーヴのグラデーション帯に白い大見出しを置き、下に白の補足を1行添える。
• 飲み方カード（recipe-card）: 白い半透明カード。上に名前、左に比率ラベル、右に飲むシーンの説明を置く。
• 比率ラベル（ratio-label）: ピンクと茶色の小さな四角を縦に積み、材料と比率を白文字で入れる。
• 内容表示バー（product-spec-bar）: 左にピンクのラベル、右に白い帯を置き、商品名と容量を字間広めで書く。

Do's and Don'ts

Do - 写真は画面幅いっぱいに使い、色帯は半透明で重ねる。 - コピーは縦書きで短く区切り、詩的な調子にする。 - ピンク・モーヴ・琥珀の3系統の色でまとめる。 - 黒い煙のシーンを1か所入れて、明るさにメリハリをつける。 - 最後は夕焼けの写真に戻り、ファーストビューと対にする。

Don't - 彩度の高い赤や派手なCTAボタンを置かない。 - ピル型ボタンや強いドロップシャドウを使わない。 - 横書きの長い本文を並べない。 - 白一色の地に文字だけを置くセクションを続けない。 - 帯に角丸を付けない。

Page Structure

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

1. ファーストビュー（商品と味の印象を一目で伝える）: 夕焼け空と木のテーブルの上にボトルとグラスを置く。右上に手書き風の一言、ピンクの縦帯に2行のコピーを入れる。
2. 香りの訴求（個性と余韻を伝える）: 黒地に煙とロックグラスの写真を置く。右に白い大きな縦書きコピー、左上に小さな縦書きの本文。
3. 製法の説明（味が生まれる理由を伝える）: ボトルのアップ写真に、モーヴとピンクの縦帯の見出しを置き、右下に白パネルの本文を入れる。
4. 料理との相性（食事に合わせる場面を想像させる）: 和洋の料理写真をすき間の細いモザイクグリッドに並べ、下に木目を見せる。
5. 品質へのこだわり（原酒の品質を示す）: 注ぐ瞬間の写真を背景にし、右にピンク明朝の縦書き大見出しと円形バッジ、中央に白パネル2枚を段違いで置く。
6. おすすめの飲み方（飲み方を2通り提案する）: 淡いピンクの地にモーヴの横帯見出しを置く。左に飲み方カード2枚、右にグラス写真と手書き風の添え書き。
7. シズル写真（質感で余韻を残す）: ラベルのアップと、氷と泡のアップを左右に並べ、画面幅いっぱいに見せる。
8. 締め・商品内容（商品の全体像と内容量を示す）: 夕焼け空に箱とボトルを置き、左にロゴ風の筆文字、右に白帯の縦書きコピーを入れる。下にラベル付きの内容表示バーを置く。

Imagery

• 夕焼けの空はピンク〜紫〜オレンジのグラデーションにし、ドラマチックな雲を入れる。
• 木のテーブルに置いたボトルとグラスを、低い位置から少し逆光で撮る。
• 黒背景に煙が立ちのぼるロックグラスで、香りを見せる。
• 注ぐ瞬間、氷、泡のマクロ写真でシズル感を出す。
• 料理写真は真上や斜め上から、明るく彩りよく撮る。
• 赤い筆文字の和風ラベルを見せ、和の雰囲気を出す。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央幅を750px前後に固定し、左右は夕焼けの写真かぼかした写真で埋める。
• 縦書きの帯は比率を保って拡大し、文字サイズは1.3倍ほどにする。
• 料理のモザイクは4〜5列に広げる。
• 飲み方カードは横に2枚並べ、写真は右に置く。

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