DESIGN.md — 空色と道路の街並み 子ども向けケーキLP（Playful Toy Town Kids Cake LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ポップ・元気、かわいい、情報量多め・訴求型
• キーワード: おもちゃの街・はたらく車・空色・赤×黄・イラスト背景・子ども向け
• 地の質感: フラットなイラスト背景。土の面には小さな水玉、芝生の面には市松模様を敷く
• 形: 写真は丸く切り抜き、白フチを付ける。情報ボックスは大きめの角丸、ボタンはピル型
• 温度感: 明るく暖かい。原色寄りで元気な印象

Colors

• セクションの地は、空色→土色→芝生の緑と、街のシーンに合わせて切り替える
• 赤と黄は、見出しラベル・価格帯・ボタンなどの要点にだけ使う
• 主なボタンはどれも黄色地に黒文字で統一する
• 色面の上の本文は白にし、白い地や薄い色の地の上では濃いグレーにする
• 表のハイライトセルは黄色で塗り、該当する項目を示す
• point-label は文字 #ECF6F8 × 背景 #E50113 のコントラスト比が 4.4:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#E00113、4.57:1）を使う。
• price-band は文字 #ECF6F8 × 背景 #E50113 のコントラスト比が 4.4:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#E00113、4.57:1）を使う。
• lineup-card は文字 #E50113 × 背景 #E1F3FC のコントラスト比が 4.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#E00113、4.51:1）を使う。

Typography

• 英字見出しは太い白文字にし、下に小さな日本語の補足を添える
• 本文は字間を広めにとり、短い文で改行する
• FVのタイトルは白フチ＋黒の太いアウトラインで、おもちゃのパッケージ風にする
• 車の名前などのラベルは赤い太字で中央揃えにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。特長は丸い写真と文章の左右交互配置。一覧は2列グリッド、表は4列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 特長セクションでは、丸い写真を画面の端から少しはみ出させ、文章と左右交互に並べる
• セクションの境目には曲がった道路のイラストを入れ、場面が変わったことを見せる
• 一覧カードは点線で区切った2列グリッドにする
• アレルギー表は4列の等幅セルで、角丸の枠で囲む
• CTAは2つを横並びにし、それぞれ上に小見出しを付ける

Elevation & Depth

• 影はほとんど使わず、フラットに仕上げる
• 商品画像やイラストは切り抜きで、背景の上に浮かせて置く
• 丸い写真には白い太フチを付け、背景から目立たせる

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 写真は円形に切り抜き、白フチを付ける。商品は切り抜きで置く
• セクション境界: カーブした道路のイラストで区切る。上にビル群や木を並べる
• POINTラベルは吹き出しの尾が付いた旗形にする
• 一覧カードは上辺に黄色の見出し帯を持つ大きな角丸にする
• ボタンは完全なピル型にし、右端に「>」を付ける

Components

• 黄色のピル型ボタン（button-primary）: 黄色地に黒字で、右端に矢印を付ける。詳細リンクや予約導線に使う
• アイコン付き予約ボタン（button-icon）: 左端に白い円のアイコンを置いた黄色ピル。2つを横並びにする
• POINTラベル（point-label）: 赤や黄の旗形ラベルに英字とナンバー、下に吹き出しの尾を付ける
• 価格・特典の帯（price-band）: 左は赤地に白で価格、右は黄色地に赤で特典を斜めに分けて並べる
• ラインナップカード（lineup-card）: 黄色の見出し帯の下に、2列×4段の点線グリッドで車のイラストと黄色タグを並べる
• 丸い写真（circle-photo）: 白い太フチの円形写真。上に吹き出し風のコピーを重ねる
• アレルギー表（allergy-table）: 4列の緑系セルで、該当する項目のセルだけ黄色にする
• 英字のセクション見出し（section-title-en）: 太い白の英字に、小さな日本語の補足を添える

Do's and Don'ts

Do - 背景は街・工事現場・芝生など、子どもが好きな情景のイラストで描く - 赤と黄は要所だけに使い、メリハリを付ける - 写真は丸く切り抜き、白フチを付ける - ボタンは黄色のピル型で統一する - セクションの境目は道路のイラストでつなぐ

Don't - くすんだ色や暗いトーンにしない - 細い明朝体や、上品すぎる余白にしない - 写真を四角いまま並べない - ボタンの色を変えて増やさない - グラデーションや強い影に頼らない

Page Structure

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

1. ファーストビュー（コラボ感と商品の全体像を一目で伝える）: 空色の街並みのイラストを背景にする。ロゴ風の大きなタイトル、左右に縦書きの赤いコピー、中央に商品の切り抜き写真を置く
2. 価格・特典（サイズ・価格・おまけを提示する）: 赤と黄を斜めに分けた帯に、価格を大きく白文字で載せる
3. 特長（POINT）（楽しみ方のポイントを3つ伝える）: 丸い写真と旗形のPOINTラベル、白文字の本文を左右交互に並べる
4. ラインナップ（付属する車の種類を一覧で見せる）: 黄色の見出し帯の付いた角丸カードに、2列のグリッドで並べる
5. フレーバー紹介（使っている味を説明する）: 土色の工事現場の背景に断面写真と引き出し線を入れる。丸い写真、説明、黄ボタンを並べる
6. アレルギー情報（安全情報を提示する）: 芝生の市松模様の上に、4列の表を置く
7. 予約CTA（ネット予約と店舗予約へ誘導する）: 点線で挟んだ小見出しの下に、アイコン付きの黄ピルを2つ並べる
8. フッター（締めの情景を見せる）: 道路を走る車と木のイラストで終える

Imagery

• はたらく車・ビル・信号・木・工事用コーンなど、フラットなイラストで街を構成する
• 商品はやや俯瞰で撮り、切り抜いて置く
• 食材は断面のテクスチャを接写し、円形に切り抜く
• 白い雲、土の水玉、芝生の市松模様を装飾として使う
• ミニカーの写真は、イラストの道路上に走っているように配置する
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央に最大幅600〜750pxのカラムを置き、左右に空色の街並みの背景を広げる
• POINTは写真と文章の左右交互を保ち、余白を広げる
• ラインナップはPCで3〜4列にしてもよい
• 予約ボタンの横並びはそのまま維持する

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