DESIGN.md — 黒×金×朱の和風レシピ提案食品 LP（Japanese Washi Dark Gold Food Recipe LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: 和風、上品・高級、ラグジュアリー・ダーク
• キーワード: 墨色・金箔・朱赤・和紙・明朝・料理写真
• 地の質感: 暗部は麻の葉など和柄の地紋。明部は和紙の繊維感。金の砂子を散らす
• 形: 角のない四角い写真、菱形の看板、金の細罫、白い帯の見出し
• 温度感: 温かみのある暗色。生成りと焼き色の茶系で食欲を出す

Colors

• 地の色は墨色と生成りの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

• 見出しも本文も明朝体を基本にする
• 大見出しは強調語だけ金色かひと回り大きくする
• 字間はやや広め（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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。