DESIGN.md — 黄色地×地方色分けのご当地鍋レシピ LP（Playful Regional Hotpot Recipe Map LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: ポップ・元気、親しみ・手作り感、かわいい、情報量多め・訴求型
• キーワード: ご当地・日本地図・地方別の色分け・レシピ図鑑・旅気分・にぎやか
• 地の質感: 黄色の菱形市松の地紋と、薄いグレーで描いた鍋のシルエットを背景に敷く。全体はフラットで、影はほぼ使わない。
• 形: 角丸カード、ピル型の地方ボタン、リボン型の見出し帯、ふきだし型のラベル。
• 温度感: 暖色系（黄・橙・茶）でまとめた温かい印象。地方色だけは緑・紫などの寒色も使う。

Colors

• ページの地は白にする。黄色の市松模様は、FVと地図ナビゲーションの面だけに限定する。
• 文字は黒を使わず、焦茶で統一する。
• 地方ごとにテーマ色を1色決め、地方ボタン・カード見出し・地図の塗りを同じ色でそろえる。
• 本文の強調は赤文字の太字で、1文に1〜2語までにする。
• リボン見出しとボタンの縁取りには朱赤を使い、温かみのあるアクセントにする。
• ribbon-heading は文字 #FEFCFD × 背景 #E0503C のコントラスト比が 3.82:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#D83922、4.54:1）を使う。
• button-outline は文字 #D9433A × 背景 #FEFCFD のコントラスト比が 4.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D73B31、4.51:1）を使う。

Typography

• 見出しは太い丸ゴシックで、焦茶か白抜きにする。
• カード見出しは「都道府県名（小）＋料理名（大）」の2段で、中央寄せにする。
• 本文は左揃えで、3〜4行の短い説明にとどめる。
• リード文は中央揃えにし、強調語だけ赤の太字にする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 2 カラムのカードグリッド。PC は 4 カラム
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 56px、基本単位 8px、カード内 8px（375px 幅換算）
• 地方ごとにブロックを分け、間を点線で区切る。
• 地方見出しは、イラストアイコン＋地方名＋マスコットを中央に並べる。
• カードは「色付きの見出し帯→料理写真→説明文」の縦積みにする。
• 地図ナビゲーションの面は、角丸の大きなパネルに収める。

Elevation & Depth

• 基本はフラットで、影は使わない。
• 地図パネルのイラストにだけ、軽い白フチをつけてよい。

Shapes

• 角丸: 小 6px ／ 中 10px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: カード幅いっぱいの横長写真（4:3）。上辺だけ角丸の見出し帯につなげる。
• セクション境界: 地方の区切りは細い点線。レシピ情報の導入部は、黄色の丘のような円弧で区切る。
• 地方ボタンは白地のピル型で、左に色付きの丸矢印をつける。
• 見出しは両端が切り込まれたリボン帯にする。
• ふきだしは焦茶の地に白文字で、角丸にする。

Components

• 地方ナビボタン（region-button）: 地方色の地に、白文字と白い丸矢印アイコンを置いたピル型ボタン。地図の周りに配置する。
• リボン見出し（ribbon-heading）: 朱赤の帯に白文字を載せ、両端を切り込んだリボン形にした見出し。
• レシピカード（recipe-card）: 上が地方色の見出し帯（県名＋料理名）、中が料理写真、下が強調語入りの説明文。
• 地方見出し（region-title）: 地方の形をしたアイコン、焦茶の地方名、鍋のマスコットを横に並べ、小さなふきだしを添える。
• 外部リンクボタン（button-outline）: 白地に赤い枠線と赤文字。右端に赤い丸矢印をつけたピル型ボタン。
• ふきだしラベル（speech-label）: 焦茶のふきだしに白文字で、短い呼びかけを2行で書く。
• 地図ナビパネル（map-panel）: 黄色の市松模様を敷いた大きな角丸パネル。色分けした日本地図と料理写真を載せる。

Do's and Don'ts

Do - 地方色はボタン・カード・地図で必ずそろえる。 - 料理写真は、湯気の立つ鍋を真上〜斜め上から撮ったものにそろえる。 - マスコットや車などのイラストを、見出しの周りに散らす。 - 説明文中の産地名や食材名を、赤の太字で強調する。

Don't - 黒の文字や無彩色の硬いボタンは使わない。 - 地方色を、地方の区分と関係なく混ぜて使わない。 - カードに影やグラデーションをつけない。 - 明朝体で上品に寄せない。

Page Structure

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

1. ファーストビュー（企画の世界観を一目で伝える）: 黄色の市松模様の上に、日本地図・車のイラスト・鍋の写真を散らし、左に大きなロゴ型タイトルを置く。
2. 企画紹介（企画の趣旨を伝える）: リボン見出しの下に中央揃えのリード文を置き、背景に薄い鍋のシルエットを敷く。
3. 地方ナビ（地方別のレシピへ誘導する）: 角丸の黄色パネルに色分けした地図を描き、その周りに地方ボタンを配置する。
4. 商品一覧（使う商品を見せる）: 商品パッケージを横一列に並べ、下に外部リンクボタンを置く。
5. レシピ導入（レシピパートの始まりを示す）: 黄色の円弧の丘の上に地図と車を描き、リボン見出しとサブコピーを添える。
6. 地方別レシピ一覧（地方ごとにレシピを紹介する）: 地方見出しの下に地方色のレシピカードを並べ、地方の間を点線で区切る。これを地方の数だけ繰り返す。

Imagery

• 料理写真は土鍋や鉄鍋に具がたっぷり入った状態で、暖かい照明・斜め上の角度で撮る。
• 写真の右下に、小さな白文字のロゴ風スタンプを重ねる。
• 日本地図は地方ごとにベタ塗りで描き分け、白い英字の地名を添える。
• マスコット（鍋のキャラクター）、赤い車、雲は太い線のフラットなイラストにする。
• 背景には、鍋や雲の淡いグレーのシルエットを大きく配置する。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCはカード4列、SPは2列にする。
• 地図パネルはSPでは縦長にし、地方ボタンは地図の下に2列で並べる。
• 商品一覧はSPでは横スクロールか、3列×3段にする。
• FVのタイトルはSPでは上部の中央に置き、写真は下に回す。

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