DESIGN.md — 生成り×金茶の木目スイーツ通販 LP（Warm Cream Wood Bakery Sweets LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ナチュラル、やさしい・柔らかい、親しみ・手作り感、上品・高級
• キーワード: 白木目・生成りの紙・金色の筆記体・焼き色ブラウン・緑の葉の飾り・シズル写真
• 地の質感: 白く塗った木目の背景、ざらつく生成りの和紙調カード、マスキングテープ風の紙片
• 形: 角のない四角いカード、紙の縁がわずかに不揃い、点線の引き出し線、手描き調の枠線
• 温度感: 暖色寄り。クリーム・金・茶でまとめ、葉の緑を差し色にする

Colors

• 地は白木目、内容ブロックは生成りの紙カードで載せる
• セクション見出しの英字は金色の筆記体で大きく
• 数値（糖質・%など）だけをオレンジ金で強調
• 本文は黒ではなく焦げ茶で柔らかく
• 緑は葉の写真素材だけで使い、ベタ塗りしない
• 寒色は配送の注意など機能的強調に一点だけ
• top-ribbon は文字 #FEFFFE × 背景 #EBAC05 のコントラスト比が 2.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#966E03、4.63:1）を使う。
• value-badge は文字 #FEFFFE × 背景 #EBAC05 のコントラスト比が 2.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#966E03、4.63:1）を使う。
• free-badge は文字 #FEFFFE × 背景 #EA8B2D のコントラスト比が 2.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#B16112、4.57:1）を使う。

Typography

• 英字筆記体見出し＋その上に小さな和文リードの二段構成
• 本文は中央揃えで短く改行する
• 大きな番号01/02/03は薄いグレーベージュの細い斜体で背面に置く
• 数値は一回り大きくしてオレンジ金に
• 字間はやや広め（0.06〜0.1em）
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。こだわりは写真と文章を左右交互に配置
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 24px（375px 幅換算）
• 写真は画面端まで裁ち落として大きく使う
• 紙カードは左右に余白を残して中央に置く
• こだわり項目は写真が左右交互に外へはみ出す
• セクション間は木目の地を細く見せて区切る

Elevation & Depth

• 紙カードに薄くぼんやりした影をつけ浮かせる
• マスキングテープ風の紙片で写真上に貼り付けた表現
• ボタン類の強い影は使わない

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角い裁ち落とし、商品は切り抜きで紙や木目に乗せる
• セクション境界: 直線。木目の地を挟んで区切り、紙カードの縁でリズムを作る
• 数値バッジのみ角丸大きめのカプセル
• 枠は手描き風の茶色線と唐草飾り
• 点線で区切りや引き出し線を描く

Components

• 金色の上部帯（top-ribbon）: 白文字の短い共感コピーを左右の斜線飾りで挟む
• 筆記体見出し（section-heading-script）: 小さな和文リードの下に金色の筆記体英字、横に小麦の飾り
• 数値バッジ（value-badge）: 金色の角丸面に白文字で糖質・カロリーを表示
• 生成りの紙カード（paper-card）: こだわりやシェフの言葉を載せる不揃いな縁の紙
• 番号付きこだわり（numbered-feature）: 薄い大きな斜体番号＋小見出し＋本文、写真と薄い英字キャプション
• 断面の引き出し図（callout-diagram）: 商品断面写真から点線で要素を指し示す
• テープ留めメモ（tape-note）: 写真の上にテープで貼った白い紙に短い文章
• 唐草枠の案内ボックス（framed-info）: 茶色の線枠の上辺中央に飾り付き見出し、点線で区切る
• 無料タグ（free-badge）: オレンジの縦長タグに白文字

Do's and Don'ts

Do - 見出しは金色の筆記体英字と和文の二段で作る - 商品写真は自然光で明るく、木の台の上で撮る - 葉・小麦・コーヒー豆などの素材を四隅に散らす - 本文は短い行で中央揃えにする - 数値だけを色と大きさで強調する

Don't - 真っ黒の文字や純白のベタ面を多用しない - 彩度の高い原色やネオン色を使わない - 角丸の大きいポップなボタンを並べない - 影の強いカードや立体ボタンにしない - 写真を小さく詰め込みすぎない

Page Structure

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

1. ファーストビュー（共感コピーと商品名・数値で即理解させる）: 金帯の下に木目テーブル上の商品写真、白い商品名と金バッジ、吹き出し線の補足
2. 商品の説明（商品ジャンルの由来を紹介）: 筆記体見出し、中央揃えの本文、左右に切り抜き商品とコーヒー豆
3. 3つのこだわり（素材と製法の差別化）: 生成りの紙カードに番号付きで写真と文章を交互配置
4. イメージ訴求（食べるシーンを想像させる）: 筆記体見出し＋全幅シズル写真、白文字コピーと数値バッジ
5. 秘密の解説（構造ごとの特長を示す）: 断面写真から点線で4項目を引き出す
6. 開発の想い（開発背景で共感を得る）: 背景写真にテープ留めのメモ紙
7. 製造風景（手作りの信頼感）: 厨房写真のグリッドコラージュと麦穂飾りの見出し
8. 作り手のメッセージ（品質への自信を伝える）: 商品集合写真の下に紙カードで文章と署名
9. お届けについて（梱包と配送条件を説明）: 唐草見出しの茶色線枠、パッケージ写真、点線区切り、手描きトラックのイラスト
10. 無料サービス（付加価値の提示）: オレンジの無料タグ、明朝見出し、カード見本画像を右に並べる

Imagery

• 木のテーブルで自然光・浅い被写界深度の商品シズル写真
• 粉糖やクリームの質感が分かる寄りのカット
• 白背景の切り抜き素材（葉、木べら、砂糖、豆）を端にはみ出させる
• 白衣の作り手が作業する厨房写真
• 線画の手描き風イラスト（トラックなど）
• 麦穂・放射線などの金色の小さな飾り
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元はSP幅前提の縦長1カラムで、PCでも中央に750px幅程度で置く
• PCでは左右を薄いグレーの地で埋める
• SPでは交互配置の写真を幅45%程度に縮めて維持
• 筆記体見出しはSPで28〜32px程度に

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