DESIGN.md — チョコ茶×ミント×水色の夏向けリキュール通販LP（Chocolate Brown Summer Liqueur Shop LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: 上品・高級、清潔・爽やか、情報量多め・訴求型
• キーワード: チョコレートブラウン・ゴールドベージュ・ミント・水色・とろける曲線・縦書き帯
• 地の質感: マットな単色面。写真は自然光の質感、パッケージには手描きイラストも使う
• 形: 大きな弧のセクション境界、角丸の小さいカード、ピル型ボタン
• 温度感: 暖色の焦げ茶地と寒色のミント・水色の対比で、暖かさと涼しさを交互に出す

Colors

• 基本の地はチョコブラウン。文字はゴールドベージュか生成りの白を使う
• 商品の系統が変わる区切りでミントや水色の地に切り替え、季節感を出す
• 茶地にはベージュのボタン、明るい地には濃茶のボタンを置き、色を反転させる
• 赤は割引帯とFAQのQマークだけに使う
• レビュー枠は塗らず、地の色と同系の細い線で囲む
• faq-item は文字 #D8B57F × 背景 #FFFFFE のコントラスト比が 1.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#976E2E、4.58:1）を使う。

Typography

• 字間を広めにとり、ゆったりした大人の印象を出す
• 写真の上のコピーは縦書きにし、色帯に1行ずつ載せる
• 英字見出しはゴールドで太く、少し斜体にする
• 価格は数字を大きく、（税込）は小さく添える
• 見出し・本文は中央揃え、レビュー本文は左揃えにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。ページ内ナビだけ2×2のグリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 18px（375px 幅換算）
• 商品は画像→商品名→価格→ボタンの順で縦に積む
• 商品ごとの間隔は約80px
• 画像は左右に約20pxの余白を残した正方形
• レビュー枠は線で囲み、中に星5つと本文を入れる
• セクションの冒頭に2行のリードとタイトルを置く

Elevation & Depth

• 影はほぼ使わない
• ピル型ボタンだけ下に濃い色のずれ影（約3px）を付けて立体感を出す
• FAQカードはごく薄い影か影なし

Shapes

• 角丸: 小 2px ／ 中 12px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 正方形か横長の長方形で角丸なし。FVと特長は大きな弧で切り抜く
• セクション境界: 大きな弧の境界、チョコが垂れるような曲線、弧に沿った英字
• セクション境界は直線にせず、弧かとろける曲線にする
• 送料無料バッジは下が切れ込んだリボン形
• 割引率は円形バッジにする
• ナビボタンは角丸なしのベージュの四角

Components

• 詳細ボタン（茶地用）（button-primary）: ベージュのピル型。右端に小さな三角、下にずれ影
• 詳細ボタン（明るい地用）（button-dark）: 濃茶のピル型でベージュ文字。ミント・水色の地で使う
• ページ内ナビ（anchor-nav）: 2×2のベージュの四角。中央に文字と下向きのV矢印
• 縦書きコピー帯（vertical-copy-band）: 写真の上に縦書き2行を、段違いの色帯に載せる
• レビュー枠（review-box）: 細い線で囲んだ枠に星5つと本文
• 送料無料リボン（ribbon-badge）: 商品画像の左上にはみ出す、縦長でベージュのリボン形バッジ
• 割引率の丸バッジ（discount-circle）: ベージュの円に濃茶の太字で割引率
• FAQ項目（faq-item）: 白い角丸カード。左に赤いQ、右にプラスアイコン

Do's and Don'ts

Do - 茶地と寒色の地をセクションごとに交互に使う - セクション境界は弧や垂れる曲線にする - 商品カードは同じ形式で繰り返す - 字間を広めにとり、上品さを保つ - ボタンの色は地の明るさに合わせて反転させる

Don't - 純黒や純白の地を広く使わない - ビビッドな赤を割引表示以外で使わない - 角張った直線の区切りを多用しない - ボタンに強いグラデーションや光沢を付けない - 文字を詰め込みすぎない

Page Structure

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

1. ファーストビュー（季節感と商品の世界観を一目で伝える）: 水色背景の商品写真の上部にチョコが垂れる装飾。縦書きコピーと水色の斜体ロゴを置く
2. リード（商品の楽しみ方を短く伝える）: 茶地に白文字の3行コピーを中央揃えで、字間を広く
3. ページ内ナビ（商品群への導線をつくる）: ベージュの四角ボタンを2×2で並べる
4. 特長（質感の魅力を伝える）: 弧に切り抜いた写真に縦書き帯。注ぐ写真に見出しと本文を重ね、弧に沿って英字を流す
5. お客様の声（味の評価で信頼を得る）: 線で囲んだ枠に星5つとレビュー本文
6. 商品一覧（各商品を購入へ導く）: 英字見出しの下に、リボン付きの商品画像・商品名・価格・ピル型ボタン
7. 別ライン商品の紹介（爽やか系の商品を訴求する）: ミント地に切り替え、写真・縦書きコピー・レビュー・商品カードを並べる
8. 限定セット（まとめ買いで客単価を上げる）: 弧の境界で茶地に戻す。カギ括弧の悩みとタイトルを置き、各セットにリードと割引の丸バッジ
9. 限定プラン（選べるセットとくじ型の商品を訴求する）: 水色地にバナー画像と商品カード。濃茶のボタンを使う
10. よくある質問（購入前の不安を解消する）: 生成り地に白い角丸のアコーディオン。下端にキャラクターのシルエットを並べる

Imagery

• 商品写真は単色の背景に白い大理石や木のテーブル。グラスとボトルを並べ、注ぐ瞬間を捉える
• とろりと流れる液体のクローズアップで質感を見せる
• パッケージ風のイラストは、手描きの温かいタッチで夜の室内を描く
• チョコが垂れる形の装飾をセクション上端に置く
• フッターには単色ベージュのゆるい猫キャラクターのシルエットを並べる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC画像は提供されていない。PCでは中央に最大幅約600pxで1カラムを維持し、両側を地の色で埋めるのを推奨する
• PCで商品カードを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 行書くと起動時に読み込まれる。