--- version: alpha name: Playful Regional Hotpot Recipe Map LP description: 明るい黄色の市松模様と日本地図のイラストで、全国のご当地鍋レシピを地方別に紹介する食品ブランドのLP。地方ごとにカード見出しの色を変えて、たくさんのレシピを図鑑のように見せる。茶色の丸ゴシックと手描き風の装飾で、親しみやすいポップな雰囲気にまとめている。 colors: primary: '#FCE584' background: '#FFFFFF' text: '#5D4637' secondary: '#E0503C' cta: '#D9433A' on-cta: '#FEFCFD' accent-1: '#F28B3D' accent-2: '#2BA58A' accent-3: '#B35B9E' tint-1: '#EC768E' tint-2: '#C34E4C' marker: '#E0302A' line: '#E0C29F' background-alt: '#F4F4F4' surface: '#FFFFFF' secondary-accessible: '#D83922' cta-accessible: '#D73B31' typography: display: fontFamily: Dela Gothic One fontSize: 40px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 24px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.05em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 17px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.03em headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 11px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.02em label-button: fontFamily: M PLUS Rounded 1c fontSize: 14px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.03em accent: fontFamily: Yomogi fontSize: 12px fontWeight: 700 lineHeight: 1.3 rounded: sm: 6px md: 10px lg: 24px full: 999px spacing: unit: 8px card: 8px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' region-button: backgroundColor: '{colors.accent-2}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 32px ribbon-heading: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-lg}' height: 44px recipe-card: backgroundColor: '{colors.accent-1}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 300px region-title: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 56px button-outline: backgroundColor: '{colors.on-cta}' textColor: '{colors.cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px speech-label: backgroundColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.lg}' height: 48px map-panel: backgroundColor: '{colors.primary}' textColor: '{colors.text}' rounded: '{rounded.lg}' height: 520px --- # DESIGN.md — 黄色地×地方色分けのご当地鍋レシピ LP（Playful Regional Hotpot Recipe Map LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: ポップ・元気、親しみ・手作り感、かわいい、情報量多め・訴求型 - **キーワード**: ご当地・日本地図・地方別の色分け・レシピ図鑑・旅気分・にぎやか - **地の質感**: 黄色の菱形市松の地紋と、薄いグレーで描いた鍋のシルエットを背景に敷く。全体はフラットで、影はほぼ使わない。 - **形**: 角丸カード、ピル型の地方ボタン、リボン型の見出し帯、ふきだし型のラベル。 - **温度感**: 暖色系（黄・橙・茶）でまとめた温かい印象。地方色だけは緑・紫などの寒色も使う。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FCE584` | FV・地図エリアの黄色地 | 6% | 画素の実測 | | `background` | `#FFFFFF` | ページ地 | 48% | 画素の実測 | | `text` | `#5D4637` | 見出し・本文の焦茶 | 3% | 画素の主要色に補正 | | `secondary` | `#E0503C` | リボン見出し・ボタン枠の朱赤 | 2% | 推定 | | `cta` | `#D9433A` | ブランドページへのボタンの赤 | 0% | 推定 | | `on-cta` | `#FEFCFD` | ボタン地（白） | 0% | 画素の実測 | | `accent-1` | `#F28B3D` | 北海道・東北／中国四国の見出しのオレンジ | 4% | 画素の実測 | | `accent-2` | `#2BA58A` | 中部・四国の見出しの緑 | 3% | 画素の実測 | | `accent-3` | `#B35B9E` | 九州の見出しの紫 | 2% | 画素の実測 | | `tint-1` | `#EC768E` | 近畿の見出しのピンク | 2% | 画素の実測 | | `tint-2` | `#C34E4C` | 関東の見出しの赤 | 2% | 画素の実測 | | `marker` | `#E0302A` | 本文中の強調語の赤 | 0% | 推定 | | `line` | `#E0C29F` | 地方ごとの区切りの点線 | 0% | 画素の主要色に補正 | | `background-alt` | `#F4F4F4` | 背景の鍋シルエット・雲の薄グレー | 4% | 画素の実測 | | `surface` | `#FFFFFF` | 地方ボタンの地の白 | 1% | 画素の主要色に補正 | | `secondary-accessible` | `#D83922` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#D73B31` | AA を満たす補正値（計算） | | 計算 | - ページの地は白にする。黄色の市松模様は、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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのロゴ型タイトル | 装飾・ディスプレイ | Dela Gothic One | 900 | 40px | 1.2 | 0.02em | | `headline-lg` | リボン見出し・地方名の見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 24px | 1.3 | 0.05em | | `headline-md` | カード見出しの料理名 | 丸ゴシック | M PLUS Rounded 1c | 800 | 17px | 1.3 | 0.03em | | `headline-sm` | カード見出しの都道府県名 | 丸ゴシック | M PLUS Rounded 1c | 700 | 11px | 1.3 | 0.05em | | `body-md` | リード文・カードの説明文 | ゴシック | Noto Sans JP | 500 | 13px | 1.8 | 0.02em | | `label-button` | 地方ボタン・リンクボタン | 丸ゴシック | M PLUS Rounded 1c | 700 | 14px | 1.2 | 0.03em | | `accent` | ふきだしラベル・手描き風の添え文字 | 手書き・筆 | Yomogi | 700 | 12px | 1.3 | 0.0em | - 見出しは太い丸ゴシックで、焦茶か白抜きにする。 - カード見出しは「都道府県名（小）＋料理名（大）」の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 ```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-772ca727`（元 LP の URL から採番） - **元 LP**: https://www.ebarafoods.com/recipe/cla_theme/46/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（9/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。