DESIGN.md — 和紙質感と墨黒の高級ボトル茶 LP（Washi Paper Premium Japanese Tea LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: 上品・高級、和風、シンプル・ミニマル、ナチュラル
• キーワード: 和紙テクスチャ・縦書き明朝・墨黒セクション・深緑の自然光写真・余白多め・商品別テーマ色
• 地の質感: 薄い繊維感のある和紙調の灰色背景と、細かい織り目の入った墨黒背景
• 形: 大きな円・半円で写真を切り抜き、山並み状の波線でセクションを区切る。カードは控えめな角丸
• 温度感: やや涼しく静か。緑と墨で落ち着かせ、赤と藍で品格を添える

Colors

• 地は和紙調の薄灰色を基本に、情緒を語るシーン部分とフッターだけ墨黒に切り替える
• 写真は深緑と暗い茶で統一し、ページ全体の彩度を抑える
• 強調色は商品ごとに1色（赤・藍）を決め、番号バッジ・縦帯ラベルだけに使う
• 購入ボタンは派手な色を使わず墨色の面に白文字で品格を保つ
• 英字の透かし見出しは背景よりわずかに濃い灰色で控えめに置く
• 注意書きはテーマ赤の小さな文字で示す

Typography

• 全体を明朝体で統一し、ゴシックは使わない
• 章見出しは縦書きで画面右端に配置する
• 英字の見出しと透かしを日本語見出しに重ねて二層にする
• 本文は行間2倍以上・字間広めでゆったり組む
• ルビを使い和語の読みを添える
• ボタン内は動詞を一回り大きくしてリズムを付ける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は左右余白19px程度で全幅に近く置く
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 70px、基本単位 8px、カード内 20px（375px 幅換算）
• 本文ブロックは左右に約19pxの余白
• 写真は大小2枚をずらして重ねるオフセット配置
• 特長は番号バッジ＋2行見出しを中央寄せで置き、本文は左揃え
• 仕様表は項目ごとに点線で区切った1枚のカードにまとめる
• セクション間は大きく空けて静けさを出す

Elevation & Depth

• 影はほぼ使わずフラット
• 奥行きは写真の重なりと背景の質感で表現する
• カードは背景より少し濃い面色だけで区別する

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品写真は円形、シーン写真は片側が大きな半円の切り抜き、その他は角ばった長方形
• セクション境界: 墨絵の山並みのような柔らかい波形で区切る。黒セクションとの境は直線
• 円形切り抜きの中にボトルを上にはみ出させて立体感を出す
• 購入ボタンは角丸4px程度の長方形
• 番号バッジは正円
• 仕様カードは角丸12〜16px

Components

• 購入ボタン（button-primary）: 墨色の長方形に白い明朝文字とカートアイコン。全幅に近い幅
• 特長番号バッジ（feature-number-badge）: テーマ色の正円に小さな英字ラベルと2桁番号。右に2行の明朝見出し
• 縦帯ラベル（vertical-label）: 商品名の縦書き見出しの横に置く、テーマ色の細い縦帯に白抜き文字の訴求
• 英字透かし付き見出し（watermark-heading）: 淡い大きな英字の上に日本語見出しを重ねる
• 仕様表カード（spec-card）: 項目名を太字、内容を通常で、点線区切りで縦に並べる
• 円形商品ビジュアル（product-circle）: 茶畑ボケ写真の円にボトルを配置し、右に縦書き商品名
• 利用シーンカード（scene-card）: 黒地に写真、ルビ付きの漢字一文字見出し、白文字本文
• 商品写真スライダー（gallery-slider）: メイン写真に左右の白丸矢印、下に6枚のサムネイル列

Do's and Don'ts

Do - 明朝体と縦書きで和の静けさを出す - 写真は深緑・暗所の自然光で統一する - 商品ごとにテーマ色を1色決めて小さく使う - 背景に和紙の質感を敷く - 余白を広く取り情報を詰めない

Don't - ゴシック体や太い丸文字を使わない - 鮮やかなグラデーションや派手なCTA色を使わない - 影の強いカードやバッジを多用しない - テーマ色を広い面に塗らない - 値引き・煽り表現の装飾を入れない

Page Structure

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

1. ファーストビュー（世界観を一枚で伝える）: 深緑の森を背景に注がれる茶の全面写真、右上に白い縦書きコピー、右上に丸いメニューボタン
2. ブランド紹介（商品の背景と想いを語る）: 半円切り抜き写真と右側の縦書き章見出し、英字見出しと短い詩的な本文
3. 商品情報（商品1）（1本目の味と特長を伝える）: 波形区切りの後に円形ビジュアル＋縦書き商品名＋赤の縦帯、英字商品名、説明文
4. 特長（商品1）（原料と製法のこだわりを示す）: 茶葉の写真、赤い番号バッジ見出し、オフセット配置の写真2枚、本文
5. 仕様表（商品1）（成分・原材料などの情報提供）: 点線区切りの角丸カードと赤い注記
6. 商品情報・特長（商品2）（2本目の魅力を同じ型で伝える）: 商品1と同じ構成をテーマ色を藍に変えて繰り返す
7. 利用シーン（飲む場面を想像させる）: 墨黒地に半円写真と縦書きコピー、続いて写真＋漢字一文字見出しのシーンを3つ
8. 購入案内の扉（購入エリアへの切り替え）: 暗い森の全幅写真に英字透かしと白い見出し
9. 商品購入（セット内容と価格を示して購入させる）: 写真スライダー、ロゴ・商品名・価格、説明、墨色の購入ボタン
10. パッケージのこだわり（ギフトとしての価値を補強）: ボトルと化粧箱の写真に見出しと短文
11. 配送・支払い情報とCTA（不安を解消して再度購入を促す）: 点線区切りの情報カードの後に購入ボタンを再掲
12. フッター（企業情報とリンク）: 墨黒地にロゴ、外部リンク、規約リンク、コピーライト

Imagery

• 深い森の緑をボケにした自然光の写真で統一
• 暗い木の卓上にグラスと注がれる茶を置き、液色を主役にする
• 茶葉は黒い箱に盛り、真上やや斜めから暗めに撮る
• ギフト箱は畳の上で斜光を当て、陰影を強調
• 全体に低彩度・暗めの露出で落ち着かせる
• 装飾は墨絵の山並み状の波形と和紙質感のみ
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは本文と写真を左右2カラムで交互に配置する
• 仕様表はPCで4列横並びの縦線区切りにする
• 利用シーンはPCで3カラムのカードに並べる
• 購入エリアはPCで左にスライダー、右に商品情報とボタン
• 縦書き章見出しはPCでも右端に残す
• 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 行書くと起動時に読み込まれる。