DESIGN.md — 藍×朱の和食コラボ食材宅配 LP（Indigo Noren Japanese Meal Kit Trial LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: 和風、情報量多め・訴求型、信頼・誠実、力強い・インパクト
• キーワード: 暖簾柄の濃紺・朱赤の割引数字・和紙テクスチャ・縦書き明朝・シズル料理写真・金の月桂冠バッジ
• 地の質感: 和紙の繊維感がある生成り地と、青海波・格子柄の濃紺地。筆の墨かすれバッジも使う
• 形: 角丸は小さめ。CTA は下に濃い影がつく立体の角丸長方形。見出し帯は四角いリボン
• 温度感: 温かい（朱・金茶・生成り）を、冷たい濃紺で締める

Colors

• オファーとクロージングは濃紺地。中の価格カードは白で抜く
• 商品紹介とこだわりは和紙調の生成り地で温かくする
• 朱赤は割引率・価格・購入ボタン・限定リボンだけに使う
• 金茶は締切ラベル、月桂冠実績バッジ、見出し下線に使う
• 縦書きコピーの強調語は焼き色オレンジか緑に色替えする
• 企業情報パートはベージュ・グレーの淡い地に切り替える
• deadline-bar は文字 #E8F0F9 × 背景 #B49353 のコントラスト比が 2.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#826939、4.53:1）を使う。
• speech-bubble は文字 #E8F0F9 × 背景 #B49353 のコントラスト比が 2.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#826939、4.53:1）を使う。

Typography

• 見出しは明朝の太字で和食店の品格を出す
• 価格・割引・締切の数字は極太ゴシックで本文の 3〜4 倍にする
• 写真横のキャッチは縦書き 1〜2 行で置く
• 注目語だけ色を変えて、少し大きくする
• ボタン文言は 2 段にする。上に小さい前置き、下に大きい行動語
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品一覧だけ 3 列グリッド
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 料理写真はほぼ全幅で置き、下に半透明の説明カードを重ねる
• オファーブロックは濃紺地の中に白カードを置き、左右 16px の余白をとる
• こだわり 3 点は写真と縦書きコピーを左右交互に配置する
• CTA は 2 段構成。上に特典付きの白ボタン、下に赤の購入ボタン
• ボタンの下に締切・安心文言・注記を必ず添える

Elevation & Depth

• CTA は下 4px に濃色の影帯をつけ、押せる立体感を出す
• 説明カードは白 90% 不透明で、写真の上に影なしで重ねる
• お客様の声カードはごく弱いドロップシャドウ
• 商品パッケージの切り抜きは軽い影で写真の上に浮かせる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 料理は全幅の長方形。人物アイコンは円形。割引・時間バッジは円形
• セクション境界: 濃紺地の上下端は暖簾風の短冊ギザ。他は直線で切り替える
• バッジは墨かすれ円形か朱の円形にする
• こだわり番号は和風の飾り枠の縦長札にする
• 見出しリボンは朱か濃紺の四角い帯にする

Components

• 購入ボタン（button-primary）: 朱赤の全幅ボタン。上に小文字の前置き、下に太字の行動語。下に濃い影
• 特典クーポンボタン（button-coupon）: 白地に朱の太枠。右端に特典の写真、角に斜めのリボン
• 価格訴求ブロック（price-block）: 通常価格の小文字から矢印で巨大な赤い特価へつなぐ。税込は小さく添える
• 締切バー（deadline-bar）: 左に金茶の締切ラベル、右に白地の太い日時。下に売り切れ文言と安心文言
• 墨かすれ限定バッジ（badge-ink-circle）: 黒の筆円に白文字で限定数と終了条件
• 見出しリボン帯（heading-ribbon）: 濃紺帯の上に朱の小リボン、下に明朝の白い商品名
• こだわり番号札（point-tag）: 生成り地に飾り枠。中に縦書きの番号を朱の明朝で
• 月桂冠実績バッジ（laurel-badge）: 金の月桂冠で数字実績を囲む。下に※注記
• Q&A 吹き出し（speech-bubble）: 金茶地に白文字の吹き出し。横に円形の人物イラスト
• FAQ アコーディオン（faq-accordion）: グレーの行に金茶の Q マーク、右に＋アイコン

Do's and Don'ts

Do - 価格・割引・締切・CTA のセットは冒頭・中盤・末尾で同じ形に繰り返す - 料理写真は湯気やツヤが見える寄りのシズル写真にする - 縦書き明朝コピーを写真の横に添えて、和の温度を出す - 購入ボタンと特典ボタンは必ず 2 段セットで置く - 注記は小さいグレー文字で、各ブロックの直下に入れる

Don't - 朱赤を装飾や背景に広く使わない - 濃紺地にくすんだ中間色の文字を載せない - 見出しを丸ゴシックやポップ書体にしない - 角丸を大きくしすぎたピルボタンにしない - 料理写真を小さなサムネイルだけで済ませない

Page Structure

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

1. ファーストビュー（コラボ・割引・限定を一瞬で伝える）: 暖簾柄の濃紺ヘッダーにロゴ並び。明朝の見出しと巨大な赤の割引率、全幅の料理写真、墨バッジ
2. オファー詳細（セット内容と価格の提示）: 濃紺枠の白カードに商品集合写真と特価。3 つの安心アイコンボックスを並べる
3. 特典と CTA（特典提示と購入誘導）: デザート写真に縦書きコピー。クーポンボタン、赤の購入ボタン、締切バー
4. 主役商品紹介（コラボ商品の魅力訴求）: 濃紺リボン見出し、全幅の料理写真、調理時間バッジ、白の説明カード
5. こだわり 3 点（品質・手軽さ・素材の根拠）: 和紙地。番号札、写真、縦書きコピーを左右交互に
6. 実績と他商品紹介（ブランド信頼とセットの充実感）: 月桂冠バッジ。商品ごとに全幅写真、縦書き商品名、パッケージ切り抜き、声カード
7. 同梱商品一覧（中身を一覧で確認させる）: 白地に 3 列のサムネイルグリッドと小キャプション
8. クロージングオファー（最終の購入後押し）: 筆文字の限定見出し、濃紺地のオファーカード、特典、CTA、締切を再掲
9. ブランド実績・メディア（社会的証明）: 食卓写真、月桂冠の数字、ベージュ地の TV 紹介リスト
10. お客様の声・SNS（利用者の実感を伝える）: グレー地のスライダーカードに円形アイコンと写真。SNS 投稿は横スクロール
11. よくある質問（縛りの不安を解消する）: 吹き出し対話と FAQ アコーディオン
12. 保証・企業姿勢（安心感の補強）: ベージュ地の保証カード。金茶ラインの見出しにイラストスライダー
13. 最終 CTA・フッター（購入と問い合わせ）: オファーを再掲し、問い合わせボタンとグレーのリンク列で締める

Imagery

• 和食器に盛った料理を斜め上から寄りで撮る。暖色光でツヤと湯気を出す
• 木のテーブル・布・箸を小物に使い、家庭の食卓感を出す
• 商品パッケージは切り抜いて写真の右下に重ねる
• 背景は和紙の繊維テクスチャ、青海波・格子の和柄
• 手書き風の吹き出し文字や筆の墨円バッジを添える
• 企業姿勢パートは淡い水彩調の山や畑のイラスト
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央にスマホ幅 375〜480px のカラムを固定し、左右は淡いグレー地にする
• PC でもタイポとカード比率は SP と同じにする
• 広げる場合は、商品紹介を写真と縦書きコピーの 2 カラムにする
• 商品一覧グリッドは PC で 4〜5 列に増やす
• CTA は最大幅 480px に制限して中央寄せ

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