DESIGN.md — 抹茶緑×金箔の和スイーツ新商品 LP（Matcha Green and Gold Premium Dessert LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 和風、上品・高級、ナチュラル、親しみ・手作り感
• キーワード: 抹茶グリーン・金箔・黒額縁・点線区切り・円形切り抜き・和モダン
• 地の質感: FV とラインアップは抹茶粉のようなざらつきのある緑グラデーション。帯や見出し枠に金箔の揉み紙テクスチャ。中盤は白と淡い若草色のフラット面。
• 形: 円形の商品写真、四角い黒×金枠の見出しプレート、ピル型の金ボタン、ドット点線の区切り線。
• 温度感: やや暖かい。緑の落ち着きに金と焦げ茶で温かみを足す。

Colors

• 上部 FV と下部ラインアップは抹茶グリーン地、中盤の説明は白地で緑に挟むサンドイッチ構成。
• 金は帯・見出し枠・ボタン・マーカーなど高級感を出す要所だけに使う。
• 黒は金縁付きの見出しプレートの地としてのみ使う。
• 本文と白地の見出しは純黒でなく焦げ茶にして和の温かみを保つ。
• 補足解説ブロックは淡い若草色の全幅帯で区切る。
• 緑地上の商品名と価格は白文字で統一する。
• lineup-item は文字 #FBFEF7 × 背景 #72A43B のコントラスト比が 2.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#59802E、4.53:1）を使う。

Typography

• 本文も太字（700）で、字間を広めに取りゆったり読ませる。
• 大見出しは 2 行に分け、1 行目を金、2 行目を焦げ茶にして変化をつける。
• 見出しの「の」「と」「も」などの助詞は一回り小さくする。
• 価格の数字は特大の太字にし、単位と税込表記は小さくする。
• Point 番号は欧文太字で、数字を大きくする。
• 本文は左揃えと右揃えを Point ごとに交互にする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ラインアップも 1 商品 1 段
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• 見出しの下には深緑のドット点線を幅 75% ほどで引く。
• Point ブロックは文字を左右交互に寄せ、間に大きな円形写真を挟む。
• 解説ブロックは全幅の淡色帯で、上下に 48px ほど余白を取る。
• ラインアップは写真→商品名→点線→右寄せ価格の順で縦に積む。
• FV の下端に全幅の金帯を置き、発売日を入れる。

Elevation & Depth

• 影はほぼ使わずフラットにする。
• 金ボタンは金箔のグラデーションと細い縁取りで立体感を出す。
• 商品の切り抜き写真には自然な影だけを残す。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 主役写真は大きな正円で切り抜き、画面端からはみ出させる。ラインアップは背景を抜いた切り抜き。
• セクション境界: 直線で切り替える。見出しの下はドット点線。
• 見出しプレートは角丸なしの長方形に金の二重縁。
• FV のバッジは角丸 6px 程度の深緑の札に白縁。
• ボタンは完全なピル型で、左に丸い矢印アイコンを置く。

Components

• 黒×金枠のタイトルプレート（hero-title-plate）: 金縁の黒い長方形に金グラデの商品名を 2 行で入れる。
• 金箔の発売日帯（release-band）: FV 直下に置く全幅の金テクスチャ帯。焦げ茶の太字で発売日を入れる。
• Point 番号見出し（point-label）: 欧文太字の Point と大きな数字。下半分に金マーカーを敷く。
• 点線付き大見出し（dotted-heading）: 中央揃えの大見出しの下に深緑のドット点線を引く。
• 茶葉アイコン付き解説帯（info-band）: 若草色の帯。小見出しの左右に手描きの茶葉アイコンを置き、本文は中央揃え。
• ラインアップ商品行（lineup-item）: 切り抜き写真、白の商品名、白のドット点線、右寄せの価格を縦に並べる。
• 金ピルの店舗検索ボタン（button-primary）: 金箔グラデのピル型。左に黒丸の矢印、右に店舗アイコンを置く。
• 白ピルのサブボタン（button-secondary）: 白地のピル型に焦げ茶の文字と黒丸の矢印。成分・アレルギー情報への導線に使う。
• FV 価格表記（price-badge）: 白縁取りの黒い特大数字で、本体価格と税込価格を 2 段で表示する。

Do's and Don'ts

Do - 緑・金・黒・焦げ茶の 4 色を軸にして、和の高級感を保つ。 - 主役の商品写真は大きな正円で切り抜き、余白を広く取る。 - 金はテクスチャのあるグラデーションで表現する。 - 見出しごとにドット点線を添えてリズムを揃える。 - 価格は本体と税込を併記し、数字を大きく見せる。

Don't - 鮮やかなビビッドカラーや蛍光色を足さない。 - 金を平坦な黄色で代用しない。 - 細い文字の本文にしない。 - 白地のセクションに濃い緑の面を多用しない。 - 角丸のカードや影の強いボックスを多用しない。

Page Structure

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

1. ファーストビュー（新商品と価格、監修の権威を一目で伝える）: 抹茶の質感がある緑の背景に商品写真を大きく置く。上に黒×金のタイトル、左に縦書きの金札、右下に価格を配置する。
2. 発売日帯（発売開始日を告知する）: 全幅の金箔帯に焦げ茶の太字で入れる。
3. コンセプト見出し（味の価値を短く宣言する）: 白地に 2 行の大見出しを置き、金と焦げ茶で色を分けて点線を添える。
4. 特長 Point.1（素材のこだわりを説明する）: Point ラベルの下に左揃えの本文を置き、その下に大きな円形写真を配置する。
5. 特長 Point.2（トッピングのこだわりを説明する）: 右寄せの Point ラベルと右揃えの本文にする。
6. 用語解説（監修者の権威を補足する）: 若草色の全幅帯に、茶葉アイコン付きの小見出しと中央揃えの本文を置く。
7. 関連商品の紹介（シリーズの別商品を告知する）: 深緑の大見出しに点線を添え、淡いグラデーションの円の中に商品写真を入れる。
8. ラインアップ（全商品と価格を一覧にする）: 緑テクスチャの地に黒×金の見出しプレートを置く。各商品は切り抜き写真、白い商品名、点線、価格の順で並べる。
9. CTA（店舗検索と詳細情報へ誘導する）: 金ピルの主ボタンと白ピルのサブボタンを縦に並べる。
10. 注釈（税率や取扱いの注意を記載する）: 暗い緑地に小さな白文字で入れる。

Imagery

• 商品はやや上から捉えたアップで撮り、抹茶粉の質感やクリームの絞り模様を強調する。
• FV の背景は枯山水の砂紋のような同心円を抹茶色で描く。
• 金は揉み紙や金箔のような不均一な光沢のテクスチャにする。
• ラインアップの写真は背景を抜き、商品を斜めに並べて添えるスプーンも見せる。
• 装飾は線画の茶葉アイコン程度に留める。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では FV を横長にし、タイトルを 1 行にまとめる。
• PC の Point 1 と 2 は、左に円形写真、右に 2 つの Point を並べる 2 カラムにする。
• PC の関連商品は、左に見出し、右に円形写真を置く 2 カラムにする。
• PC のラインアップは 1 商品目を中央に置き、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 行書くと起動時に読み込まれる。