DESIGN.md — 黒と色付きシルク地の高級蒸留酒 LP（Dark Silk Premium Spirits LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: ラグジュアリー・ダーク、上品・高級、クール・先進的
• キーワード: 漆黒・シルクのドレープ・商品色で背景を切り替え・細い枠線・明朝体・ボトルを主役に
• 地の質感: 光沢のあるサテン布のしわと、暗いスタジオのグラデーション。木樽の写真で温かみを足す
• 形: 角丸なしの四角。半透明の細い枠のカードと細い区切り線
• 温度感: 暗くて冷たい黒を地に、各セクションで暖色や寒色の布を使い温度を変える

Colors

• 地は黒を基本にし、商品セクションだけをその商品のイメージ色のシルク布の写真にする
• 文字は暗い地の上ではすべて白か薄いグレーにする
• 強調色はボタンのベージュ一色だけにする
• 枠線や区切り線は白の30〜50%の半透明にする
• ページ末尾のショップ欄とフッターだけを明るいグレーと白にして、ブランド面と分ける

Typography

• 和文は明朝で統一し、字間を広めにとる
• 商品名は大文字の細身の欧文で中央にそろえる
• フレーバーカードは欧文ラベルの下に小さな和文の訳を添える
• 本文は中央揃えで短く改行する
• 太字は使わず、文字の大きさの差で階層を作る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は中央にボトルを置き、左右にカードを散らす 3 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• 1 商品につき 1 セクションとし、背景を全幅で切り替える
• ボトル写真を中心軸に置き、香り・味わい・余韻の 3 枚のカードを互い違いに並べる
• おすすめの飲み方は細い横線で区切った下の段に、グラスの写真とレシピを横に並べる
• 見出しの下に 2〜3 行の中央揃えの説明文を置く

Elevation & Depth

• 影はほぼ使わず、ボトルの下に映り込み（反射）を置いて奥行きを出す
• カードは半透明の暗い面と細い枠だけで、浮かせない
• ナビゲーションのボックスは黒い面だけで表す

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: ボトルは背景を抜いた切り抜き。シーンの写真は角丸なしの四角
• セクション境界: 直線で背景の写真を切り替える
• すべて角丸なしの直角にする
• カードは正方形に近い細い枠にする
• フッターのボタンだけは角丸を許す

Components

• 商品情報ボタン（button-primary）: ベージュの横長の四角いボタン。商品のスペック表記の下に置く
• フレーバーカード（flavor-card）: 細い枠の正方形の中に、欧文ラベル・和訳・短い説明を中央揃えで入れる
• 黒いナビゲーションボックス（nav-box）: 左上に固定した黒い四角に、ロゴと縦に並べたメニュー
• セクションラベルの四角（section-label-box）: 黒い正方形に英字のセクション名を白で入れる
• おすすめの飲み方の行（recipe-row）: グラスの写真と、カクテル名・分量表・作り方を横に並べる
• 商品名の見出し（product-title）: シルク地の上に、細身の大文字の欧文を中央に置く
• 通販サイトへの導線（shop-logos）: 明るいグレーの地に、ショップのロゴを横に並べる

Do's and Don'ts

Do - 商品ごとにその色に合ったシルク布の背景を使う - ボトルは中央に大きく置き、下に映り込みを付ける - 文字は白の明朝体で、余白を広くとる - カードの枠は細い半透明の線にする - 強調色はベージュのボタンだけにする

Don't - 角丸やピル型のボタンを使わない - 鮮やかな原色のバッジや吹き出しを入れない - 太いゴシックで大きな訴求コピーを置かない - 白地のセクションをブランド面の途中に挟まない - ボトルに強いドロップシャドウを付けない

Page Structure

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

1. ファーストビュー（ブランドの世界観と商品のラインナップを一目で見せる）: 暗いスタジオの上にロゴ風の大見出しと英字コピー、その右に並べたボトルの写真
2. ブランドの紹介（商品の格と特徴を伝える）: 黒地に、左はモノクロの乾杯写真、右は明朝の見出しと本文
3. ラインナップ（全商品を一覧で見せる）: 黒いラベルの四角、短い説明、木の台に並んだボトルの写真
4. 商品の詳細（くり返し）（商品ごとの香り・味わい・余韻を伝える）: その商品の色のシルク地に、商品名、説明、中央のボトル、3 枚のフレーバーカード、スペック、ボタン
5. おすすめの飲み方（飲み方を提案して、購入後の場面を想像させる）: 区切り線の下に、グラスの写真とレシピの分量表を並べる
6. ストーリー（名前・ボトル・紋章の由来で歴史と信頼を伝える）: 木樽の写真から黒へ落ちていく背景に、イラストや写真と本文を左右交互に置く
7. オンラインショップ（購入へ誘導する）: 明るいグレーの地に、細身の英字見出しとショップのロゴを横並び
8. フッター（企業情報・SNS・注意の表記）: 白地にリンク一覧とSNSの枠、下端に紺の帯

Imagery

• ボトルは暗い背景で、側面から光を当てたスタジオ写真にし、切り抜いて反射を付ける
• 背景は大きくドレープを寄せたサテン布を、低い彩度と暗い色調で撮る
• グラスのドリンクは白抜き、または黒地のシンプルな物撮りにする
• 人物はモノクロで、乾杯の手元などを部分的に写す
• 歴史を語る写真は木樽や遺跡にして、暗く温かい色にする
• 紋章やボトルの線画は白い細線で描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP ではボトルを中央に置き、フレーバーカードはその下に 2 列か 1 列で並べる
• SP の商品名は 28px 前後にし、説明文は改行を減らす
• ナビゲーションは SP ではハンバーガーメニューにする
• PC の左右に配置した写真と本文は、SP では縦に積む
• レシピの行は 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 行書くと起動時に読み込まれる。