--- version: alpha name: Warm Cream Wood Bakery Sweets LP description: 白い木目の地に生成りの紙カードを重ね、金色の筆記体見出しと茶色の文字でまとめた洋菓子通販 LP。写真を大きく見せつつ、緑の葉や小麦の飾りでナチュラルで手作り感のある温かさを出している。 colors: primary: '#EBAC05' on-primary: '#FEFFFE' background: '#F5F5F4' surface: '#F9F5EA' background-alt: '#FAFAFA' secondary: '#9B7249' text: '#2B2821' text-body: '#4A3F35' accent-1: '#CAA362' accent-2: '#EA8B2D' accent-3: '#65A0A5' text-muted: '#BDB49F' line: '#B7AD8F' primary-accessible: '#966E03' accent-2-accessible: '#B16112' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 32px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.08em accent: fontFamily: Dancing Script fontSize: 32px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.1em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 17px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.08em headline-sm: fontFamily: Zen Maru Gothic fontSize: 13px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.15em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.06em note: fontFamily: Klee One fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.04em body-lg: fontFamily: Shippori Mincho fontSize: 16px fontWeight: 600 lineHeight: 1.7 letterSpacing: 0.04em rounded: sm: 0px md: 4px lg: 12px full: 999px spacing: unit: 8px card: 24px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' top-ribbon: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' height: 44px section-heading-script: textColor: '{colors.primary}' typography: '{typography.accent}' height: 80px value-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 72px paper-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 600px numbered-feature: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 220px callout-diagram: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 300px tape-note: backgroundColor: '{colors.on-primary}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 200px framed-info: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-lg}' rounded: '{rounded.sm}' height: 420px free-badge: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' height: 80px --- # DESIGN.md — 生成り×金茶の木目スイーツ通販 LP（Warm Cream Wood Bakery Sweets LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: ナチュラル、やさしい・柔らかい、親しみ・手作り感、上品・高級 - **キーワード**: 白木目・生成りの紙・金色の筆記体・焼き色ブラウン・緑の葉の飾り・シズル写真 - **地の質感**: 白く塗った木目の背景、ざらつく生成りの和紙調カード、マスキングテープ風の紙片 - **形**: 角のない四角いカード、紙の縁がわずかに不揃い、点線の引き出し線、手描き調の枠線 - **温度感**: 暖色寄り。クリーム・金・茶でまとめ、葉の緑を差し色にする ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#EBAC05` | 金色の見出し・帯 | 6% | 画素の実測 | | `on-primary` | `#FEFFFE` | 金帯上の白文字 | 1% | 画素の主要色に補正 | | `background` | `#F5F5F4` | 白木目の地 | 35% | 画素の実測 | | `surface` | `#F9F5EA` | 生成りの紙カード | 12% | 画素の実測 | | `background-alt` | `#FAFAFA` | ベージュの面 | 8% | 画素の実測 | | `secondary` | `#9B7249` | 焼き色ブラウン・枠線 | 3% | 画素の主要色に補正 | | `text` | `#2B2821` | 見出し文字 | 3% | 画素の実測 | | `text-body` | `#4A3F35` | 本文文字 | 4% | 推定 | | `accent-1` | `#CAA362` | 数値強調のオレンジ金 | 1% | 画素の実測 | | `accent-2` | `#EA8B2D` | 無料バッジのオレンジ | 1% | 画素の実測 | | `accent-3` | `#65A0A5` | 配送強調の水色 | 0% | 画素の実測 | | `text-muted` | `#BDB49F` | 薄い筆記体英字 | 2% | 画素の実測 | | `line` | `#B7AD8F` | 点線・区切り線 | 0% | 画素の主要色に補正 | | `primary-accessible` | `#966E03` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#B16112` | AA を満たす補正値（計算） | | 計算 | - 地は白木目、内容ブロックは生成りの紙カードで載せる - セクション見出しの英字は金色の筆記体で大きく - 数値（糖質・%など）だけをオレンジ金で強調 - 本文は黒ではなく焦げ茶で柔らかく - 緑は葉の写真素材だけで使い、ベタ塗りしない - 寒色は配送の注意など機能的強調に一点だけ - `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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの商品名 | ゴシック | Zen Kaku Gothic New | 500 | 32px | 1.3 | 0.08em | | `accent` | 英字のセクション見出し | 欧文スクリプト | Dancing Script | 700 | 32px | 1.2 | 0.02em | | `headline-lg` | セクション見出し（和文） | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.5 | 0.1em | | `headline-md` | こだわり項目の小見出し | ゴシック | Zen Kaku Gothic New | 700 | 17px | 1.6 | 0.08em | | `headline-sm` | 英字見出し上の小さなリード | 丸ゴシック | Zen Maru Gothic | 500 | 13px | 1.5 | 0.15em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 14px | 1.9 | 0.06em | | `note` | 注釈・英字キャプション | 手書き・筆 | Klee One | 400 | 11px | 1.6 | 0.04em | | `body-lg` | メッセージカード紹介の明朝 | 明朝 | Shippori Mincho | 600 | 16px | 1.7 | 0.04em | - 英字筆記体見出し＋その上に小さな和文リードの二段構成 - 本文は中央揃えで短く改行する - 大きな番号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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-91bba470`（元 LP の URL から採番） - **元 LP**: https://focetta.com/products/maritozzo-locabo - **解析に使った画像**: PC（PC版） - **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。