DESIGN.md — 金箔×柚子色の和モダン季節スイーツLP（Gold Washi Japanese Seasonal Dessert LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 和風、上品・高級、ナチュラル、やさしい・柔らかい
• キーワード: 金箔グラデーション・和紙テクスチャ・柚子の黄・桃色水彩・縦書きコピー・素材の切り抜き
• 地の質感: 金属光沢のある金のグラデーション、白い和紙の繊維テクスチャ、桃〜黄の水彩にじみ
• 形: 雲形・洲浜形の細い金線枠、斜めカットのセクション境界、ピル型ボタン、線画の吹き出し
• 温度感: 暖色寄り。金と柚子の黄で季節感と温かみを出す

Colors

• 導入部は金グラデーション、商品詳細は桃〜黄の水彩、後半は白い和紙と地を3段で切り替える
• 深紅は商品名帯など一点だけに使う
• 見出しは深緑、本文は焦げ茶で、黒は使わない
• 柚子の黄は筆で塗ったマーカー帯で訴求一文を強調する時だけ使う
• CTAはブロンズの金属調グラデーションにして金地と揃える
• frame-cloud は文字 #F6F5F4 × 背景 #D39E54 のコントラスト比が 2.19:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#956726、4.54:1）を使う。

Typography

• キャッチと商品名は明朝で和の品格を出す
• FVの補助コピーは縦書きの明朝で写真の右に置く
• 本文は中央揃え、素材説明だけ左揃えにする
• 欧文は字間を広げた大文字の幾何学サンセリフにする
• 本文は太めで行間を1.9前後と広くとる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 素材説明は左にテキスト、右か左に切り抜き写真を交互に置く
• 断面写真から細い線を引いて素材名を指す
• セクション境界は斜めカットや写真の重なりでつなぐ
• 見出し上下の線は幅70%程度で中央に置く

Elevation & Depth

• 切り抜き写真には柔らかい落ち影をつけて浮かせる
• CTAボタンの下にぼかした影をつける
• カードの影は使わず、線と地の色で区切る

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 素材と商品は背景を抜いて切り抜く。FVは角丸の矩形写真にする
• セクション境界: 斜めカットと水彩のにじみ、写真の重なり
• 導入文は雲形・洲浜形の細い金線枠で囲む
• 吹き出しは右と下だけ線で描き、右下に尻尾をつける
• 記章は円形の金バッジで「第N弾」を示す

Components

• ブロンズのピル型CTA（button-primary）: 金属調のグラデーション、細い金の縁、右端に矢印
• 円形の金バッジ（badge-round）: 金の円に小さい欧文と大きな明朝の数字を組む
• 商品名の深紅帯（product-band）: 左に白い明朝の商品名、右にパッケージ写真を置く横帯
• 上下線の見出し（heading-lines）: 見出しの上下に細い二重線を引いて挟む
• 雲形の金線枠（frame-cloud）: 金地に細い白金線で洲浜形を描き、ロゴと導入文を中に置く
• 素材の引き出し線（callout-line）: 断面写真の点から細い縦線を伸ばして素材見出しにつなぐ
• 筆塗りマーカー帯（marker-band）: 黄色の筆跡の帯に訴求の一文を乗せる
• 線画の吹き出し口コミ（voice-bubble）: 白地に右と下だけ線を引き、右下に尻尾をつける

Do's and Don'ts

Do - 金・桃水彩・和紙の3種の地をページの流れに沿って切り替える - 素材の果実や断片の切り抜き写真を画面の端にはみ出させて散らす - 見出しは明朝か上下線つきで余白を広くとる - 文字色は深緑と焦げ茶を中心にする

Don't - 純黒の文字やビビッドな原色ボタンを使わない - 四角いカードや強い影で情報を詰め込まない - 金地の上に細い本文を長く載せない - ポップな丸ゴシックや手書きの装飾を混ぜない

Page Structure

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

1. ファーストビュー（季節限定の商品を印象づける）: 金地に横書きの明朝キャッチ、断面写真、縦書きコピー、円形バッジを置く
2. 商品名帯（商品名とパッケージを示す）: 深紅の帯の左に商品名、右にパッケージ写真
3. シリーズ紹介（シリーズのコンセプトを伝える）: 金のグラデーション地に雲形枠、ロゴ、欧文見出し、中央揃えの白文字
4. 商品紹介（商品の味の方向性を伝える）: 斜めカットで桃水彩の地に切り替え、明朝の商品名と中央揃えのリード文
5. 素材の解説（層ごとのこだわりを説明する）: 断面の切り抜きから引き出し線を伸ばし、素材ごとに見出しと本文
6. 訴求の一文（原料の産地を強調する）: 黄色の筆塗りマーカー帯に一文を載せる
7. 開発者のこだわり（開発の背景で信頼を得る）: 木漏れ日の写真から和紙地へつなぎ、上下線の見出しと中央揃えの本文
8. パッケージ紹介（売場で探せるようにする）: ぼけた緑の背景にパッケージを立てて見せる
9. お客様の声（味の評価を伝える）: 線画の吹き出しを3つ縦に並べ、最後に注釈
10. CTA・シェア（他の商品への誘導とSNSでの拡散）: ブロンズのピル型ボタンとSNSの円形アイコン3つ

Imagery

• 果実・チョコ片・商品は背景を抜いて落ち影をつけ、端に散らす
• 断面のシズル写真を斜めに大きく見せる
• 木漏れ日のぼけた緑の写真を区切りに使う
• 地には和紙テクスチャや桃〜黄の水彩にじみを敷く
• 金地には七宝柄の円形装飾を薄く重ねてもよい
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCはSPのカラムを幅約38%で中央に固定する
• PCの左右余白は金のグラデーション地に七宝柄の円をぼかして散らす
• PCの左余白にシリーズロゴと「第N弾」を縦に置く
• PCでも中の要素の配置は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 行書くと起動時に読み込まれる。