DESIGN.md — 墨黒×金波の和モダン高級菓子 LP（Japanese Ink & Gold Premium Snack LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 和風、上品・高級、ラグジュアリー・ダーク、ナチュラル
• キーワード: 墨色・金箔の波・縦書き明朝・和紙の質感・産地ストーリー・季節限定
• 地の質感: 黒は墨を刷いたような粗い和紙調、明るい地は生成りの和紙調。金は箔のような光沢グラデーション。
• 形: 角丸なしの直線的な四角形が中心。ボタン・カードとも角は立てる。
• 温度感: 黒と金で落ち着いた暖かさ。空の青い章だけ明るく爽やかになる。

Colors

• 地は墨黒と生成りを章ごとに交互に置く。
• 金は波模様の装飾にだけ使い、文字には使わない。
• 強調語句には黄色の太いアンダーラインを引く。
• 赤は価格と割引バッジだけに使う。
• ボタンは濃いグレー一色で、派手な色にしない。
• 産地の章だけ空色のグラデーションで明るくする。

Typography

• 全体を明朝体でそろえ、ゴシックは使わない。
• 章見出しは縦書きにし、横に細い縦線を添える。
• 文字間隔は広めにとる（0.08em 以上）。
• 本文は行間 2.0 前後で、ゆったり見せる。
• 引用語句はかぎ括弧やダブルクォートで囲む。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品カードは SP で縦に積む
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• 章ごとに写真と縦書き見出しを左右に振り分ける。
• 本文は中央揃えの短い行にする。
• 各章の最後に購入ボタンを中央に置く。
• 購入エリアは白カードを生成り地の上に並べる。

Elevation & Depth

• ボタンには右下に薄い影を落とす（2〜3px）。
• カードは影なしの白い面で、地との色の差で見せる。
• 切り抜いた商品写真には柔らかい落ち影を付ける。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 料理・素材は背景を抜いて地になじませる。職人の写真は四角か、全面に敷いて端をぼかす。
• セクション境界: 直線で色を切り替える。章の端は写真をぼかして次の章につなぐ。
• 角丸は使わない。
• 金の波模様を画面の端から流し込む。
• 割引バッジだけ円形にする。

Components

• 購入ボタン（button-primary）: 濃いグレーの角型の横長ボタン。白い明朝体を字間広めで置き、右下に影を付ける。
• 縦書き章見出し（vertical-heading）: 大きな明朝の縦書き 2 行に、細い縦罫と小さな縦書きのリードを添える。
• アンダーライン見出し（marker-heading）: かぎ括弧で囲んだ商品名の下に、黄色の太い線を引く。
• 白ラベル小見出し（label-tag）: 写真の上に置く白い帯の小見出し。黒い明朝で書く。
• 商品カード（product-card）: 白いカード。中央の見出しの下に罫線を引き、商品写真・内容量・価格・ボタンを縦に積む。
• 割引バッジ（discount-badge）: 赤い円の中に白い大きな％数字を入れ、価格の横に置く。
• 金波の装飾（gold-wave）: 金箔調の流水模様。黒い章の左右の端からはみ出させて置く。
• 地図の引き出し注記（map-callout）: 暗い地のシルエット地図から細い線を引き出し、小さな白文字で地名を書く。

Do's and Don'ts

Do - 黒の章と生成りの章を交互に置き、物語のリズムを作る。 - 章見出しは縦書きの明朝で大きく見せる。 - 湯気・断面など、素材のシズル感が伝わる写真を使う。 - 金の波模様は 1 章につき 1〜2 か所にしぼる。 - どの章の最後にも、同じ形の購入ボタンを置く。

Don't - 丸ゴシックやポップな書体を使わない。 - ボタンを角丸やビビッドな色にしない。 - 赤を価格以外に広げない。 - フラットな単色ベタ地にしない（必ず和紙の質感を残す）。 - バッジや装飾を詰め込みすぎない。

Page Structure

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

1. ファーストビュー（限定品の格と商品を一目で伝える）: 墨地に金波を流す。右に筆文字の縦書きロゴ見出し、下にパッケージと盛り皿の切り抜きを置く。
2. 商品紹介リード（商品名と季節限定を伝え、購入へ誘う）: 生成り地で中央揃え。黄色ラインの商品名見出しの下に購入ボタンを置く。
3. 素材の特長（原料の味わいと産地のブランド性を伝える）: 墨地。左に湯気の立つ素材写真、右に縦書き見出し、中段にシルエット地図と注記、下に本文を置く。
4. 中間 CTA（素材の価値をまとめて購入へ誘う）: 生成り地に中央揃えの 2 行の本文と購入ボタン。
5. 産地の気候と土壌（日照や土作りから品質の理由を伝える）: 青空のグラデーション地に縦書き見出しと放射線の装飾。白ラベルの小見出しと畑の写真を交互に置く。
6. 職人の技（製法へのこだわりを語る）: 包丁で切る手元の写真を墨地に溶け込ませ、縦書き見出しを重ねる。中央揃えの本文と商品写真、散らしたチップスと金波。
7. 味の紹介（味の種類ごとの特徴を伝える）: 生成り地に、パッケージ写真と短い説明を 2 列で並べる。下に注釈。
8. 購入（セット）（割安なセット購入をすすめる）: 白カードに見出しと罫線。パッケージを並べ、赤い価格と割引バッジ、購入ボタンを置く。
9. 購入（単品）（単品の選択肢を示す）: 白カード 2 枚を並べる（SP では縦に積む）。それぞれ写真・価格・ボタンを置く。

Imagery

• 素材は暗い背景で、湯気やほくほくの断面を写して温かみを出す。
• 商品は背景を抜き、紺や深緑の陶器皿に盛る。
• 職人の手元は暗めの暖色光で、映画のような陰影にする。
• 産地は青空と緑の葉、赤土の畑で明るく撮る。
• 金箔の流水模様や、墨の和紙テクスチャで装飾する。
• チップスの単体を切り抜き、画面の端に散らす。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像は幅を狭く組んだ縦長の構成なので、SP でもほぼそのまま 1 カラムで組める。
• SP では縦書き見出しを 28〜32px に縮め、写真の横に置く。
• 単品カード 2 枚は SP では縦に積む。
• PC では本文の幅を 600px 前後に抑え、中央に置く。
• 金波の装飾は 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 行書くと起動時に読み込まれる。