--- version: alpha name: Dark Washi Japanese Hotpot Mail-Order LP description: 黒い外枠に和紙調ベージュのパネルを重ねた、老舗料理店風の食品通販LP。明朝体の大見出し、えんじ色の購入ボタン、セット価格表のくり返しで「本格感」と「お得感」を両立させる。 colors: background: '#000000' dark-section: '#23282A' surface: '#E9E5DC' background-alt: '#F7F5EF' primary: '#B04248' cta: '#A42C2C' on-cta: '#F7F5EF' secondary: '#AA9A62' accent-1: '#AEB692' accent-2: '#B79270' text: '#191210' text-body: '#23282A' on-dark: '#F7F5EF' line: '#DFD0C0' primary-accessible: '#AE4147' secondary-accessible: '#EAE6D7' typography: display: fontFamily: Shippori Mincho fontSize: 36px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em headline-lg: fontFamily: Shippori Mincho fontSize: 24px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.05em headline-md: fontFamily: Noto Serif JP fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Serif JP fontSize: 15px fontWeight: 600 lineHeight: 1.5 accent: fontFamily: Noto Serif JP fontSize: 32px fontWeight: 700 lineHeight: 1.1 body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.05em rounded: sm: 2px md: 4px lg: 6px full: 999px spacing: unit: 8px card: 16px section: 24px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 40px price-card: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.accent}' rounded: '{rounded.sm}' height: 130px bonus-band: backgroundColor: '{colors.secondary}' textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 56px arrow-ribbon: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.note}' height: 44px point-heading: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 48px dark-title-band: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 56px step-item: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 90px info-list: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 40px qa-block: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 40px --- # DESIGN.md — 黒地×和紙ベージュの老舗鍋お取り寄せLP（Dark Washi Japanese Hotpot Mail-Order LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: 和風、上品・高級、情報量多め・訴求型、力強い・インパクト - **キーワード**: 老舗・和紙・黒地・明朝・シズル写真・セット価格 - **地の質感**: 和紙のような細かい繊維ノイズのあるベージュ面と、墨色のグラデーション帯 - **形**: 角の小さい四角パネルを縦に積む。価格番号は丸、セット間は下向き矢印の帯 - **温度感**: 温かい（暖色の料理写真とえんじ・金茶を落ち着いた黒が引き締める） ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#000000` | ページ外枠の黒地 | 17% | 画素の実測 | | `dark-section` | `#23282A` | 見出し帯・価格表エリアの墨色 | 12% | 画素の主要色に補正 | | `surface` | `#E9E5DC` | 和紙調ベージュのコンテンツパネル | 30% | 画素の実測 | | `background-alt` | `#F7F5EF` | 白に近い本文ボックス | 4% | 画素の主要色に補正 | | `primary` | `#B04248` | えんじ色・ブランド強調と見出し文字 | 3% | 画素の実測 | | `cta` | `#A42C2C` | 購入ボタンのえんじ | 1% | 画素の実測 | | `on-cta` | `#F7F5EF` | 購入ボタン上の白文字 | 0% | 画素の主要色に補正 | | `secondary` | `#AA9A62` | 特典帯の金茶（オリーブゴールド） | 3% | 画素の実測 | | `accent-1` | `#AEB692` | 野菜紹介セクションの抹茶グリーン | 9% | 画素の主要色に補正 | | `accent-2` | `#B79270` | 手順番号の丸・矢印の焦茶ベージュ | 3% | 画素の主要色に補正 | | `text` | `#191210` | 見出しの墨黒文字 | 2% | 画素の実測 | | `text-body` | `#23282A` | 本文のダークグレー | 3% | 画素の主要色に補正 | | `on-dark` | `#F7F5EF` | 黒帯上の白文字 | 1% | 画素の主要色に補正 | | `line` | `#DFD0C0` | リストの区切り点線 | 0% | 画素の主要色に補正 | | `primary-accessible` | `#AE4147` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#EAE6D7` | AA を満たす補正値（計算） | | 計算 | - 外周は黒、中身は和紙ベージュのパネルを浮かせる二層構成にする - 見出し帯・価格表まわりは墨色グラデーションで締める - えんじ色は価格・購入ボタン・特典文言・リスト記号に限定する - 金茶は特典帯とセット番号ラベルにだけ使う - 抹茶グリーンは素材・野菜紹介など自然を語る1セクションのみ - 本文はベージュ地に濃灰、黒地には生成り白文字 - `price-card` は文字 `#B04248` × 背景 `#E9E5DC` のコントラスト比が 4.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#AE4147`、4.58:1）を使う。 - `bonus-band` は文字 `#B04248` × 背景 `#AA9A62` のコントラスト比が 2.02:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#EAE6D7`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 商品名など最大見出し | 明朝 | Shippori Mincho | 700 | 36px | 1.2 | 0.05em | | `headline-lg` | セクション見出し・ポイント見出し | 明朝 | Shippori Mincho | 600 | 24px | 1.3 | 0.05em | | `headline-md` | お客様の声の小見出し・特典帯 | 明朝 | Noto Serif JP | 700 | 18px | 1.4 | 0.02em | | `headline-sm` | 左縦線付きの情報ブロック見出し | 明朝 | Noto Serif JP | 600 | 15px | 1.5 | 0em | | `accent` | 価格の大きな数字 | 欧文セリフ | Noto Serif JP | 700 | 32px | 1.1 | 0em | | `body-md` | 説明本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.7 | 0.02em | | `note` | 送料注記・特商法表 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0em | | `label-button` | 購入ボタン文字 | ゴシック | Noto Sans JP | 700 | 14px | 1 | 0.05em | - 見出しはすべて明朝で、商品名だけ極端に大きくする - 見出し内で小さい語と大きい語を混ぜ、主語を大きくするジャンプ率を作る - 本文と注記はゴシックで小さめに詰める - 価格は明朝の太い数字をえんじで、単位の円は少し小さく - 写真上の文字は白か赤文字に濃い影を付ける - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真と本文の 2 列は縦積みにする - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 24px、基本単位 8px、カード内 16px（375px 幅換算） - 黒地の上にパネルを縦に積み、パネル間は黒の隙間 16〜24px - パネル内は見出し帯→写真→本文の順 - 価格表は 1・2・3 セットを縦に並べ、間に下向き矢印帯 - 価格表と CTA はページ中盤と終盤の 2 回出す - 情報ブロックは左縦線見出し＋赤ひし形の箇条書き＋点線区切り ## Elevation & Depth - パネルは影なしで、黒地とのコントラストだけで浮かせる - 写真上の文字には濃いドロップシャドウ - 購入ボタンにうすいベベル風の上下グラデーション - 特典の丸い商品写真に白枠と軽い影 ## Shapes - **角丸**: 小 2px ／ 中 4px ／ 大 6px。ボタンは角丸の長方形。 - **写真の切り抜き**: 四角い写真に細い白枠。特典品は円形に切り抜き - **セクション境界**: 直線で区切り、黒い隙間を挟む。誘導は下向きの赤い矢印リボン - 角丸はほぼ使わず 2〜4px まで - 番号は丸（セット番号は黒丸、手順は焦茶丸） - 見出しの区切りは左の赤い縦線 - パネル同士は重ねない ## Components - **購入ボタン**（`button-primary`）: カートアイコン付きのえんじ色の角ボタン。価格行の右下に置く - **セット価格カード**（`price-card`）: ベージュ地に左に料理写真、黒丸のセット番号、えんじの大きな価格、小さな送料注記 - **特典帯**（`bonus-band`）: 金茶の帯に赤い明朝で追加特典を書き、右端に丸い商品写真を重ねる - **下向き矢印リボン**（`arrow-ribbon`）: 赤い下向き五角形に白文字で『さらにお得』のような誘導を書く - **POINT番号見出し**（`point-heading`）: 黒い四角に POINT と大きな数字、右に大きな明朝見出し - **墨色見出し帯**（`dark-title-band`）: 墨色グラデーションに白の明朝見出しを置くセクション頭 - **作り方ステップ**（`step-item`）: 左に写真と焦茶の丸番号、右に説明、間に薄い焦茶の下矢印 - **注意事項リスト**（`info-list`）: 赤い縦線見出し、赤ひし形の行頭、点線区切りの表 - **Q&Aバブル**（`qa-block`）: 黒丸のQとAに続けて悩みと回答、最後にえんじの結論文 ## Do's and Don'ts **Do** - 黒地にベージュの和紙パネルを積む構成を守る - 見出しは明朝で大小の差を大きくつける - 料理写真は湯気と照りが見える寄りのカットにする - 購入ボタンと価格はえんじで統一する - 価格表は中盤と終盤の 2 回出す **Don't** - 丸いピル型ボタンやパステル色を使わない - 見出しに丸ゴシックやポップ体を使わない - えんじ色を本文や広い面に使わない - 白一色の無地背景にしない（和紙の質感を残す） - パネルに大きな角丸や強い影を付けない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（シズル感と老舗の格を一目で伝える）: 鍋の全面写真に縦書きの店ロゴ、下に墨色帯で小さい前置きと巨大な明朝商品名 2. **ブランド紹介**（料理店監修の信頼を示す）: ベージュパネルに短い紹介文、厨房・店内・暖簾の写真を並べる 3. **お客様の声（導入）**（味の満足感を先に見せる）: 黒地に料理写真、金色の太字感想3つと短い補足、下に矢印で『秘密は？』へ誘導 4. **素材のこだわり**（主原料の質を説明）: 寄りの素材写真に赤い大きなキャッチ、下に白ボックスで本文と器写真 5. **特長ポイント**（2つの強みを整理）: 墨色見出し帯の下に POINT 番号見出し＋本文＋右写真を 2 つ 6. **副材料の紹介**（セット全体の品質を伝える）: 抹茶グリーン地に笹の葉装飾、白枠写真と名前・効能をリスト化 7. **締め麺の紹介**（付属品の魅力）: 全面写真に半透明の暗いボックスで感想を重ねる 8. **価格・購入（1回目）**（セット別価格と特典で購入を促す）: 家族の笑顔写真の見出し、1〜3セットの価格カードを矢印リボンでつなぐ 9. **作り方**（調理の手軽さを示す）: 同梱品リスト、箱写真、番号付き6ステップ、最後に電話窓口 10. **不安解消Q&A**（初心者の不安を消す）: 墨色見出し帯、Q/A丸アイコン、えんじの結論文、レシピ冊子写真 11. **購入実績**（社会的証明）: スクロール枠に購入者イニシャルと日付を点線区切りで並べる 12. **価格・購入（2回目）**（最後のひと押し）: 鍋写真に赤帯見出しと吹き出し風の声、再度価格カード3段 13. **お届け・支払い・特商法**（購入条件の明示）: ベージュパネルに赤縦線見出しと赤ひし形リスト、表形式の特商法 ## Imagery - 鍋料理は暗めの背景で照明を当て、湯気・照り・赤唐辛子と緑のニラの対比を強調 - 素材は黒い器や木のスプーンに寄りで盛り、浅い被写界深度 - 店舗写真は暖色照明の和風店内・暖簾・料理人 - 家族の笑顔写真を丸く柔らかく切り抜いて見出しに合成 - 装飾は和紙テクスチャ、筆文字ロゴ、笹の葉の線画 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は幅約730pxの中央固定、外側は黒で埋める - SP では横並びの写真＋本文を写真上・本文下に積む - 商品名の巨大明朝は SP で 32〜36px に縮める - 価格カードは SP で写真を上、価格とボタンを下に並べ、ボタンは全幅 - 特商法の表は SP で項目名と内容を縦積みにする ## 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-14f61792`（元 LP の URL から採番） - **元 LP**: http://kyushu-zanmai.com/lp1/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（6/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-12、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、掲載削除を希望される場合、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。