--- version: alpha name: Japanese Washi Dark Gold Food Recipe LP description: 墨色の麻の葉柄の地に金のライン、朱赤のアクセントを重ねた和風の食品 LP。和紙調の生成りセクションと墨色セクションを交互に並べて、盛り付け提案とレシピを写真中心で見せる。見出しは明朝体で上品にまとめている。 colors: primary: '#A41C1C' dark-section: '#222222' background: '#F4F1EA' secondary: '#B8955E' accent-1: '#C9A65B' accent-2: '#946745' tint-1: '#E8CDA7' on-dark: '#F2EFE8' text: '#35342B' surface: '#FDFEFE' accent-3: '#B0322A' cta: '#FEFEFE' on-cta: '#090909' accent-1-accessible: '#85692C' typography: display: fontFamily: Shippori Mincho fontSize: 32px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em headline-lg: fontFamily: Shippori Mincho fontSize: 26px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: Noto Serif JP fontSize: 20px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.05em headline-sm: fontFamily: Noto Serif JP fontSize: 16px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.08em body-md: fontFamily: Noto Serif JP fontSize: 13px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.03em accent: fontFamily: Shippori Mincho fontSize: 14px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.1em label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 0px md: 2px lg: 4px full: 999px spacing: unit: 8px card: 16px section: 72px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' hero-diamond-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.display}' height: 220px nav-gold-bar: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 40px heading-white-band: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 36px heading-gold-frame: textColor: '{colors.secondary}' typography: '{typography.accent}' height: 28px tip-card: textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 160px ingredient-list: textColor: '{colors.text}' typography: '{typography.body-md}' height: 24px point-box: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 120px button-outline: textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 36px button-store: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 56px --- # DESIGN.md — 黒×金×朱の和風レシピ提案食品 LP（Japanese Washi Dark Gold Food Recipe LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: 和風、上品・高級、ラグジュアリー・ダーク - **キーワード**: 墨色・金箔・朱赤・和紙・明朝・料理写真 - **地の質感**: 暗部は麻の葉など和柄の地紋。明部は和紙の繊維感。金の砂子を散らす - **形**: 角のない四角い写真、菱形の看板、金の細罫、白い帯の見出し - **温度感**: 温かみのある暗色。生成りと焼き色の茶系で食欲を出す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#A41C1C` | 朱赤のブランド色・購入帯 | 6% | 画素の実測 | | `dark-section` | `#222222` | 墨色の地紋セクション | 24% | 画素の実測 | | `background` | `#F4F1EA` | 和紙調の生成り地 | 25% | 画素の実測 | | `secondary` | `#B8955E` | 金・見出しの罫と文字 | 2% | 推定 | | `accent-1` | `#C9A65B` | 金帯ナビ | 2% | 推定 | | `accent-2` | `#946745` | 焼き色の茶・装飾雲 | 3% | 画素の主要色に補正 | | `tint-1` | `#E8CDA7` | 雲形装飾のベージュ | 2% | 画素の主要色に補正 | | `on-dark` | `#F2EFE8` | 暗地上の本文 | 2% | 画素の主要色に補正 | | `text` | `#35342B` | 明地上の見出し・本文 | 3% | 画素の主要色に補正 | | `surface` | `#FDFEFE` | ポイント枠・購入ボタン面 | 2% | 画素の実測 | | `accent-3` | `#B0322A` | 強調文字・リスト記号の朱 | 1% | 推定 | | `cta` | `#FEFEFE` | 購入リンクボタン | 1% | 画素の実測 | | `on-cta` | `#090909` | ボタン上のロゴ文字 | 0% | 画素の実測 | | `accent-1-accessible` | `#85692C` | AA を満たす補正値（計算） | | 計算 | - 地の色は墨色と生成りの2つを交互に使う - 朱赤はFVの菱形看板と購入帯だけに面で使う - 金は罫線・見出しの枠・ナビ帯・砂子だけに使う - 暗い地では文字を生成り色、見出しの強調語を金にする - 明るい地では茶墨色の文字、強調は朱の下線 - 購入ボタンは白地の箱にロゴだけを置く - `nav-gold-bar` は文字 `#F2EFE8` × 背景 `#C9A65B` のコントラスト比が 2.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#85692C`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのメインコピー | 明朝 | Shippori Mincho | 700 | 32px | 1.3 | 0.05em | | `headline-lg` | セクションの大見出し | 明朝 | Shippori Mincho | 700 | 26px | 1.4 | 0.05em | | `headline-md` | 白帯に載せる提案見出し | 明朝 | Noto Serif JP | 600 | 20px | 1.5 | 0.05em | | `headline-sm` | 金文字の小見出し・料理名 | 明朝 | Noto Serif JP | 600 | 16px | 1.5 | 0.08em | | `body-md` | 本文・材料・手順 | 明朝 | Noto Serif JP | 400 | 13px | 1.9 | 0.05em | | `note` | 写真のキャプション補足 | ゴシック | Noto Sans JP | 400 | 11px | 1.7 | 0.03em | | `accent` | 金枠で囲む前置きの小見出し | 明朝 | Shippori Mincho | 500 | 14px | 1.4 | 0.1em | | `label-button` | 細枠のサブボタン | ゴシック | Noto Sans JP | 500 | 13px | 1.2 | 0.05em | - 見出しも本文も明朝体を基本にする - 大見出しは強調語だけ金色かひと回り大きくする - 字間はやや広め（0.05〜0.1em） - 本文は中央寄せの短い行を積む - 手順は番号＋句点の短い文で書く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真カードは 2 列も可 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算） - 提案ブロックは大きい写真＋白帯見出し＋説明を重ねる - おすすめメニューと盛り付けのコツを並べる - コツは写真＋小見出し＋2行説明の3枚組 - レシピは写真の横に材料表（点線区切り） - 手順は3列グリッドに番号付きキャプション ## Elevation & Depth - 影はほぼ使わない - パッケージ画像だけに軽い落ち影 - 奥行きは地紋と写真の重なりで出す ## Shapes - **角丸**: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角のない長方形。料理を真上か斜め上から撮る - **セクション境界**: 直線で切り替える。FV下は斜めの朱色と茶色の三角面 - FVは中央に朱の菱形看板を置き、金の二重線で縁取る - 見出しの両脇に雲形（霞）の装飾を置く - ポイント枠は白地に朱の細線 - 角丸は付けない ## Components - **菱形看板**（`hero-diamond-badge`）: 朱赤の菱形に金縁。上部に金のラベル、中に明朝のコピーと商品を置く - **金帯ナビ**（`nav-gold-bar`）: FV直下の金色の帯。4つのアンカーを縦線で区切る - **白帯見出し**（`heading-white-band`）: 写真の上に白い帯を2段重ねて、黒い明朝で入れる - **金枠の前置き見出し**（`heading-gold-frame`）: 金の細枠で囲んだ短い前置きの下に大見出しを置く - **コツカード**（`tip-card`）: 正方形に近い写真、小見出し、2行の説明 - **材料表**（`ingredient-list`）: 朱の丸記号と点線区切り。分量を右寄せにする - **ポイント枠**（`point-box`）: 白地に朱の細枠。上部にラベルを置く - **細枠サブボタン**（`button-outline`）: 暗地の上で生成りの細枠に文字と右矢印 - **購入ボタン**（`button-store`）: 朱の地紋帯の上に白い箱。中にショップのロゴを置く ## Do's and Don'ts **Do** - 墨色と生成りのセクションを交互に置く - 金は細い線と小さい文字だけに使う - 料理写真は大きく、和食器と箸を入れる - 見出しまわりに霞や雲の装飾を置く - 商品パッケージは各提案の近くに小さく添える **Don't** - ピル型ボタンや大きな角丸を使わない - 原色の青や緑を面に使わない - 丸ゴシックやポップな書体を使わない - 朱赤を本文の地に広く敷かない - 強い影やグラデーションのボタンを使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（豪華な食卓の印象とテーマを伝える）: 料理写真を左右に置き、中央に朱の菱形看板。下に金帯ナビ 2. **導入**（商品と使い方の提案を紹介する）: 墨の地紋に斜めの朱と茶の面。商品を両脇に置き、中央に文章と細枠ボタン 3. **基本のポイント**（盛り付けの基本を3つ示す）: 和紙の地。写真3枚の左上に縦書きの番号ラベル 4. **提案（洋風ワンプレート）**（盛り付け例を見せる）: 墨の地。大きい写真に白帯の見出しを重ね、メニュー一覧とコツ2枚を並べる 5. **提案（ざる盛り）**（別の盛り付け例）: 写真と見出しの左右を反転し、コツ3枚を並べる 6. **提案（豆皿盛り）**（別の盛り付け例）: 同じ型を繰り返し、金の砂子を散らす 7. **レシピ**（アレンジレシピを紹介する）: 和紙の地に霞の装飾。写真の横に材料表、下にバリエーション3枚 8. **作り方**（手順を示す）: 3列の写真グリッドに番号付きキャプション。最後の枠をポイント枠にする 9. **トッピング提案**（アレンジを広げる）: 白い器の写真3枚と説明。その他のトッピングは金枠の白い箱 10. **購入 CTA**（通販サイトへ送る）: 朱の和柄地紋の帯に見出しと白い購入ボタン2つ ## Imagery - 和食器・竹ざる・木の盆・箸で料理を撮る - 明るい自然光で、料理は真上か斜め上から撮る - 背景は木目・すだれ・紫や黄色の布で彩りを出す - 暗い地には麻の葉などの和柄を薄く敷く - 金の砂子、霞の雲形、扇の形を装飾に使う - 商品パッケージは切り抜いて小さく置く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは本文幅を約80%で中央に置く。SPは90%の1カラム - PCの写真と文の左右配置は、SPでは写真→見出し→文の縦積みにする - コツと手順の3列は、SPでは2列か1列にする - FVの菱形看板は、SPでは写真の上に縮小して中央に置く - 金帯ナビは、SPでは2×2か横スクロールにする ## 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-c9250caa`（元 LP の URL から採番） - **元 LP**: https://cp.glico.com/gozen-recipe/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（6/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。