DESIGN.md — 墨黒×生成りと茶金の和洋酒 LP（Earthy Craft Sake Storytelling LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: 上品・高級、ナチュラル、和風、ラグジュアリー・ダーク
• キーワード: 墨色の石肌・森と水・生成りの大理石・茶金の文字・縦書き・職人の物語
• 地の質感: 石・大理石・和紙のような淡い質感を地に敷き、水面や泡の写真を境界に重ねる
• 形: 基本は角の立った矩形。ラベルだけピル型、原料は正円で示す
• 温度感: 温かみのある中間〜やや暖色。暗部は青緑寄りの黒

Colors

• 地は生成りと石肌グレーを交互にし、白一色の面は使わない
• 物語・歴史の区切りには森や墨色の暗い写真の帯を全幅で入れる
• 見出しは茶色、暗いボックスの中は金茶。黒文字の見出しは使わない
• 濃紺黒はボックス・ラベル・原料の円にだけ使う
• 派手な原色や赤い購入色は使わない

Typography

• 大きな情緒コピーは明朝の縦書きにし、写真の端に重ねる
• リード文は中央揃えにし、行間を 2 倍以上にする
• 英字ラベルは字間を大きく取り、左右に細い線を添える
• 本文は小さめにして左揃え。読ませるより雰囲気を優先する
• 太字の強調は茶色の見出しだけにとどめる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。製法比較だけ 2 列
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は左右に約 8% の余白を残した幅で置く
• 見出し→下線→写真→本文の順で縦に積む
• FV と物語の帯は全幅にし、写真の上に文字を重ねる
• 見出しボックスは写真の上端に半分かかるように重ねる

Elevation & Depth

• 白いカードにはごく薄い影（0 2px 8px rgba(0,0,0,.08)）を付ける
• 暗いボックスは影なしで、内側に細い金茶の枠を付ける
• それ以外は平面にし、奥行きは写真の重なりで出す

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 角丸なしの矩形。商品の切り抜き写真は斜めに配置する
• セクション境界: 水面や泡の写真を横帯にして地の色を切り替える。それ以外は直線で切り替える
• カード・写真は直角を基本にする
• ラベルだけピル型にする
• 原料は濃い正円に金茶の一文字を入れる
• アイコンは白い正円の中に置く

Components

• 枠付きの暗い見出しボックス（heading-box-dark）: 濃紺黒の面に、内側の細い枠線を付ける。上段に線ではさんだ英字の小ラベル、下段に金茶の見出しを置く
• 下線付きの中央見出し（heading-underline）: 中央揃えの見出しの下に、コンテンツ幅いっぱいの細線を引く
• 縦書きの大見出し（vertical-display）: 明朝の縦書き 1〜3 文字を、写真の端に重ねて置く
• ピル型ラベル（pill-label）: 比較の列名や工程名を表す、濃色のピル
• 原料の円（ingredient-circle）: 濃色の正円に金茶の一文字を入れ、4 つ横に並べる
• 工程カード（flow-card）: 白いカードにアイコンと短い説明を入れる。カード同士は矢印付きの縦線でつなぐ
• 注釈ボックス（note-box）: 淡いベージュの面に、茶色の小見出しと本文 2 行を入れる
• 作り手の声カード（voice-card）: 細い黒枠の中で、左に人物写真と肩書、右に本文を並べる
• 円形の実績バッジ（badge-circle）: 細い白線の円の中に、大きな文字と短い説明を入れて写真に重ねる

Do's and Don'ts

Do - 暗い写真の帯と生成りの地を交互に並べ、物語に緩急をつける - 情緒コピーは縦書きの明朝で大きく見せる - 製法は 2 列の比較フローで図にする - 見出しは茶色か金茶で統一する - 余白を広く取り、静かな高級感を保つ

Don't - 赤や黄色の目立つ購入ボタンを置かない - 大きな角丸のポップなカードを使わない - 純白一色の背景を長く続けない - 太いゴシックの黒い大見出しを使わない - 割引訴求のバッジを乱用しない

Page Structure

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

1. ファーストビュー（世界観と商品を一目で見せる）: 墨色の石肌に斜めのボトル写真を置き、白文字のコピーを重ねる。下半分は森の写真にセリフ体のロゴと円形バッジを載せる
2. コンセプト（ブランドの思想を情緒的に伝える）: 生成りの地に縦書きの明朝の大見出しを置く。グラス写真の下に中央揃えのリード文と手描きのイラストを入れる
3. 作り手の紹介（歴史と信頼を示す）: 暗い森の全幅写真の帯に縦書きの見出しを置く。2 社の写真と本文を×印でつなぐ
4. 商品の定義（新しいジャンルを説明する）: 茶色の中央見出しの下に水面写真の帯を入れ、太字のリード文と暗い見出しボックスを続ける
5. 製法（造り方を具体的に示す）: 樽の写真と、ベージュの注釈ボックスを置く
6. 製法の比較（従来品との違いを図で示す）: ピル型の列名を 2 つ並べ、白い工程カードを矢印付きの縦線でつなぐ。泡の写真を背景に敷く
7. 味わいの特長（香りと味を感覚的に伝える）: 暗い見出しボックスを写真に重ねる。香り・味わいを縦書きで大きく置き、写真と短い本文を交互に並べる
8. 楽しみ方（料理との相性と飲み方を提案する）: 下線付きの見出し、料理写真、本文を並べ、最後に保管の注意を注釈ボックスで入れる
9. 開発者の声（作り手の実感で信頼を補強する）: 白地に細い黒枠のカードを置き、左に人物、右に本文を並べる

Imagery

• ボトルは石や大理石の上に斜めに置き、低い彩度・暗めの露出で撮る
• 森・渓流・木漏れ日の写真は下から見上げるか深い緑のトーンにし、物語の帯に使う
• 注ぐ瞬間やグラスの泡は、白大理石の上で柔らかな自然光で撮る
• 水面・泡の写真を横帯にしてセクションの境界にする
• 線の細い手描きの茶色イラストを 1 点だけ添えて親しみを出す
• 香りの説明には果実の写真を薄く透かして重ねる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を 960px 前後に収め、左右に石肌の地を広げる
• FV はボトル写真とコピーを左右 2 カラムにする
• 作り手の紹介は写真と本文を横並びにする
• 製法の比較は 2 列のまま幅を広げ、カードの余白を増やす
• 縦書きの大見出しは 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 行書くと起動時に読み込まれる。