DESIGN.md — チャコール×木目×深緑のボタニカル菓子 LP（Dark Botanical Aroma Chocolate LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 上品・高級、ナチュラル、ラグジュアリー・ダーク
• キーワード: チャコール地・木目テクスチャ・ボタニカル・広い字間の明朝・全幅写真・くすみカラー
• 地の質感: マットなチャコールの地。木目板の写真背景や植物パウダーの粒子、うっすら透ける工場写真を重ねて質感を出す。
• 形: 角丸なしの四角が基本。白カードの見出しは黒い帯で角からはみ出させる。素材写真は正円に切り抜く。
• 温度感: やや暖かく落ち着いた温度。暗い地に白文字を置き、静かな高級感を出す。

Colors

• ページ前半から中盤はチャコールの地が基本。セクションの切り替えに深緑・焦げ茶・木目をはさむ。
• 暗い地の文字はすべてオフホワイトにする。純色の強調色は使わない。
• 番号ラベルには、くすんだ緑・からし色・グレージュをセクションごとに変えて使う。
• 商品そのものの青とピンクは写真と商品イラストだけに出す。UI の色には使わない。
• 注意事項エリアは白と生成りを交互に敷き、明るく実務的に見せる。
• 注意事項の大見出しにだけ金茶を使い、ページ後半の目印にする。

Typography

• 見出しは明朝体で字間を 0.15〜0.2em に広げる。中央揃えにし、2 行に分ける。
• 本文は小さめのゴシック体で、行間を約 1.9 に広くとる。
• フレーバー名は欧文大文字の見出しを置き、その下にカナ読みを添える。
• 写真の上の文字は白い明朝体にし、薄い影で読ませる。
• 太字は小見出しとラベルだけに使う。本文では使わない。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。説明は写真とテキストを左右 2 列に並べ、左右を交互に入れ替える。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 全幅写真とテキストの帯を交互に重ねる。
• 白カードは左右 6% の余白をとり、木目の背景の上に浮かせる。
• 写真は端まで裁ち落とし、テキスト側にだけ余白を残す。
• 注意事項は、中央の小見出し → 生成りの帯（左にアイコン、右に本文）の繰り返しで組む。

Elevation & Depth

• 影はほぼ使わない。色の面の差で階層を出す。
• 白カードは木目の上に平置きし、影はごく薄くつけるか、つけない。
• 品質管理のボックスは、半透明の白を写真の上に重ねる。

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真の多くは四角の裁ち落とし。素材写真は正円で 2 つ並べる。
• セクション境界: 直線で切り替える。斜めや波形は使わない。
• カードとラベルは角丸なしにする。
• 品質管理のポイントは、細い線の正円で 3 つ並べる。
• 見出しの黒帯はカードの左上か右上の角にずらして重ねる。

Components

• 特長カード（card-feature）: 木目の上の白カード。角に黒帯の見出しをはみ出させ、番号ラベル・本文・写真を 2 列に並べる。
• 黒帯見出し（heading-band）: チャコールの帯に白い明朝体を 2 行で置く。カードの角に重ねる。
• 番号ラベル（label-number）: くすんだ色の細い帯に「01. 名前」の形で書く。セクションごとに色を変える。
• 用語解説ボックス（box-glossary）: ベージュの面に、太字の中央見出し・小さな本文・右側の小さな写真を置く。
• フレーバー説明ボックス（flavor-spec）: 暗い面の左に、項目名・下線・名称・説明を中央揃えで書く。右には正円写真を 2 つ重ねる。
• 品質ポイントの円（badge-circle）: 細い線の正円の中に 2 行の短い言葉を入れ、3 つ並べる。
• 認証表示の枠（cert-box）: 暗い地に細い白線の枠。認証名とマークを横に 2 つ並べる。
• 注意事項の行（notice-row）: 生成りの帯の左に、白い四角に入れた線画アイコンを置き、右に本文を書く。下にグレーの補足帯を付ける。
• 罫線つきの大見出し（heading-notice）: 金茶の明朝体を中央に置き、左右に細い横線を添える。

Do's and Don'ts

Do - 見出しは明朝体で字間を広くとり、静かに見せる。 - 暗い地・木目・深緑・焦げ茶をセクションごとに切り替え、変化をつける。 - 商品の色は写真で見せ、UI はくすんだ色でまとめる。 - 素材や原料は正円の写真で見せる。 - 注意事項は線画アイコンで統一する。

Don't - 彩度の高い赤や黄色のボタンを置かない。 - 丸ゴシックやポップな書体を使わない。 - ボタンや大きな角丸のカードを多用しない。 - 強いドロップシャドウやグラデーションの装飾を使わない。 - 本文を大きくしすぎない。行間を詰めない。

Page Structure

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

1. ファーストビュー（商品の世界観と内容量を示す）: 木のテーブルに商品と菓子を置いた写真。上部にコラボのロゴを並べ、下部に欧文セリフの大きなタイトルと線枠の内容量表記を置く。
2. コンセプト（商品の価値を短く伝える）: チャコールの地に、2 行の明朝見出しと中央揃えの 3 行リード文を置く。
3. 利用シーン（日常で楽しむ姿を想起させる）: 人物と食卓の全幅写真に、白い明朝体のリード文を重ねる。
4. 特長（こだわりを 3 つ示す）: 木目の背景に白カードを 3 枚置く。黒帯の見出し、番号ラベル、写真で構成する。
5. 商品バリエーション（2 種類の味の違いを説明する）: 全幅の食材写真の後、暗い地に欧文見出し・商品画像・説明・フレーバー説明ボックス 2 つを置く。これを 2 種類分繰り返す。
6. ブランド紹介（原料ブランドの信頼性を示す）: 深緑の地に、写真とテキストの 2 列と中央の大見出しを置く。
7. 作り手紹介（職人の想いを伝える）: 焦げ茶の帯に、モノクロの人物写真・ロゴ・肩書き・本文を置く。
8. 品質管理（安心感を与える）: 工場写真の上に半透明の白ボックスを重ね、中に正円のポイントを 3 つ並べる。
9. 原料の説明（天然色素の根拠を示す）: 暗い地で、植物写真と説明を左右交互に並べる。最後に認証表示の枠を置く。
10. 締めのビジュアル（購買意欲を高める）: 植物に囲まれた商品写真に、白い明朝体の 2 行コピーを重ねる。
11. 商品仕様（内容・サイズ・付属品を伝える）: 木目の上に商品の真上写真。下に白地の仕様テキストと紙袋写真を 2 列で並べる。
12. 配送・商品の注意事項（購入前の確認を促す）: チャコールの帯の見出しの後、罫線つきの大見出しとアイコン付きの生成りの行を繰り返す。

Imagery

• 木のテーブルに自然光を当て、陶器の皿と菓子を置いたライフスタイル写真。
• 柑橘・花・ハーブなどの素材を、暗い背景で俯瞰して撮る。
• 植物のパウダーを散らして、粒子の質感を見せる。
• 人物は柔らかい逆光の中で笑顔を写す。作り手はモノクロにする。
• パッケージは植物と鳥を描いた手描きのボタニカルイラスト。
• 注意事項のアイコンは黒の細い線画で描く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に幅 860〜1000px の画像列を置き、左右の余白は暗い色で埋める。
• PC では 2 列の写真とテキストの比率を保ったまま余白を広げる。
• PC では見出しを 36px 前後まで大きくし、字間は同じに保つ。
• 特長カードは PC で横幅 80% に収める。

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 行書くと起動時に読み込まれる。