DESIGN.md — 霧の青×カカオ茶の大人向け洋酒チョコ LP（Misty Blue and Cocoa Brown Premium Liquor Chocolate LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 上品・高級、ラグジュアリー・ダーク、シンプル・ミニマル
• キーワード: 霧・琥珀色・明朝体・大人・静けさ・余白
• 地の質感: 霧の風景写真の上に白文字を重ね、しっとりとした空気感を出す。面はフラットにして、影は写真の中だけにとどめる。
• 形: ほぼ角丸なしの四角を基本にする。吹き出しだけ中程度の角丸を使い、線は細い 1px。
• 温度感: 上半分は冷たい青灰色、中盤は暖かい焦げ茶。冷と暖を交互に置くコントラスト。

Colors

• 上部と下部は霧の青灰色、中盤の商品紹介は焦げ茶・赤茶で温度差をつける
• 販売ブロックは白地にグレーの細い線だけを使い、色数を絞る
• 赤は『お得』『送料無料』とレビュー内の強調語だけに使う
• 写真の上の文字は白に統一し、半透明の茶色い帯を敷いて読みやすくする
• 淡い青灰色の地は、スライダーと関連リンクのまとまりに使う
• button-outline は文字 #7A7A7A × 背景 #FFFFFF のコントラスト比が 4.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#767676、4.54:1）を使う。

Typography

• 見出しと本文は明朝体を基本にする。ゴシックは注意書きだけに使う
• ブランド名の欧文は字間を 0.2em 以上あけて大きく置く
• 見出しは中央揃えで 2〜3 行に改行する
• 価格の数字は大きくし、『円（税込）』は小さく添える
• セクションの区切りに大きな欧文セリフの単語を置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC も中央に約 375px 幅の 1 カラムを置き、両側は背景写真
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真セクションは画面幅いっぱいに置き、文字は写真に重ねる
• 販売ブロックは左右に約 7% の余白をとり、左揃えで並べる
• 1 つの商品は『画像 → 商品名 → セット名・価格 → ボタン』の順に縦に並べる
• 商品と商品の間は 1px の区切り線で分ける
• 関連リンクのバナーは横幅いっぱいの画像の下にラベル帯を付ける

Elevation & Depth

• 影はほぼ使わずフラットにする
• 奥行きは写真の陰影と、半透明の帯の重ねで表現する
• 吹き出しは影なしで、細い線の枠だけ

Shapes

• 角丸: 小 0px ／ 中 12px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角のまま。全幅で切るか、余白付きの長方形にする
• セクション境界: 直線で背景色を切り替える。間に琥珀色の液体が流れる帯写真を挟む
• ボタンは角丸なしの長方形
• レビューの吹き出しは角丸 12px で細い線の枠
• アバターは丸いイラスト

Components

• 購入帯ボタン（button-buy）: スライダーの画像の下に付く、全幅の焦げ茶の帯。文字の後ろに＞を付ける
• 線のボタン（button-outline）: 白地にグレーの 1px 枠を付けた長方形。字間の広い欧文で状態を表示する
• 小さな白ボタン（button-viewmore）: 暗い写真の右下に置く小さな白い四角。欧文と＞を入れる
• 半透明の茶帯見出し（heading-band）: 写真の上に焦げ茶の半透明帯を敷き、白い明朝体の 2 行見出しを置く
• 欧文の交差見出し（heading-en-cross）: 2 つの大きな欧文単語を細い × 線でつなぐセクション見出し
• 価格ブロック（price-block）: 赤字のお得ラベルに赤い下線を引き、その下にセット名・大きな価格・赤字の送料無料を並べる
• レビュー吹き出し（review-bubble）: 角丸の枠線吹き出しの右にシンプルな人物イラストと年代を置く。文中の重要語は赤の太字
• 関連バナー（banner-label）: 商品写真の下に、商品色の帯と白い明朝体の商品名を付ける
• 注意書き（note-text）: ※で始まる小さなゴシック文字を、2 行目を字下げして並べる

Do's and Don'ts

Do - 見出しは明朝体で字間を広げ、静かな印象にする - 霧の風景写真と琥珀色の写真を交互に置く - 販売部分は白地と細い線で上品にまとめる - 赤はお得情報の小さな強調だけに使う - 写真は大きく見せ、文字量を絞る

Don't - ピル型ボタンやビビッドな色のボタンを使わない - ポップなゴシック体や太い丸ゴシックを使わない - 影やグラデーションの装飾を多用しない - 赤を大きな面に使わない - 写真上の文字を濃い色で置かない

Page Structure

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

1. ファーストビュー（ブランドの世界観と商品を一目で伝える）: 斜めに置いたボトルとチョコの写真を全幅で見せる。上部に字間の広い欧文ロゴと小さなサブタイトル
2. ストーリー導入（産地と、商品が生まれた物語を伝える）: 霧の湖の写真に白い明朝体の見出しを 3 行で中央揃え。その下に白文字の本文
3. 商品スライダー（種類の違いを見せ、購入へ誘導する）: 淡い青灰色の地に、ロゴと線で区切ったリードを置く。左右に矢印のある横スライダーと、茶色の購入帯
4. 原酒の紹介（使っている酒の特徴を伝える）: 赤茶の暗い写真に白い明朝体の見出しと本文。右下に小さな詳細ボタン
5. チョコレートの紹介（2 種類の食感と味を比べて見せる）: 欧文の交差見出しの下に茶色の半透明帯の問いかけ見出し。断面のアップ写真をスライダーで見せる
6. 商品購入（セット別の価格を提示し、購入を促す）: 白地に商品写真、明朝体の商品名、セット名と価格、線のボタンを繰り返す。最後に注意書き
7. 区切りビジュアル（雰囲気を切り替える）: 琥珀色の液体が流れる帯状の写真を全幅で置く
8. お客様の声（味の評判で信頼感を高める）: 中央揃えの明朝体の見出しの下に、吹き出しと人物イラストを縦に並べる。最後に『もっとみる』
9. 関連リンク（ブランドサイトや他の商品へ誘導する）: 淡い青灰色の地に、ラベル帯付きのバナーを縦に並べる
10. フッター（SNS と規約への導線）: 霧の湖の写真の上に白い欧文ロゴ、丸い SNS アイコン、白文字のリンク、コピーライトを置く

Imagery

• 霧のかかった湖と山並みを、青灰色で低い彩度に撮った風景写真
• ボトルやグラスを暗い背景で、琥珀色に光らせた逆光のブツ撮り
• チョコの断面からシロップがとろける寄りの写真
• 麻布や陶器の皿など、和の質感がある小物を使ったスタイリング
• レビュー用には、線画に淡い色を付けたシンプルな人物イラスト
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でも本文は中央の約 375px 幅の 1 カラムのまま
• PC の左右は霧の湖の写真で埋め、世界観を保つ
• 文字サイズと構成は SP と同じにする
• 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 行書くと起動時に読み込まれる。