DESIGN.md — オレンジ地×クリームカードの幼児玩具LP（Bright Orange Kids Toy Play LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、かわいい、親しみ・手作り感、情報量多め・訴求型
• キーワード: オレンジ全面地・クリームの角丸カード・白フチ付き極太文字・野菜の散らしイラスト・子どもの遊び写真・木札風ボタン
• 地の質感: フラットな面に、空色のグラデーション背景と手描き風の野菜イラストを薄く散らす
• 形: 大きめ角丸のカード、ピル型ラベル、円形の写真切り抜き、木の板風の横長ボタン
• 温度感: 暖色寄りでとても明るい。オレンジと黄色が主役で、緑と赤をアクセントに使う

Colors

• 地はページ全体をオレンジ一色にし、内容はすべてクリームのカードに載せる
• カード内の見出し帯は空色グラデや木目茶で区切る
• 見出し文字は黄〜オレンジのグラデに濃い茶か白の太フチを付ける
• ボタン面は緑、フチは茶色にして木札風に見せる
• 赤は擬音・吹き出し・最後の販売告知の強調だけに使う
• セット内容などの一覧はミント地パネルにまとめる
• label-pill は文字 #FEFAEA × 背景 #E6332A のコントラスト比が 4.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#DF241A、4.56:1）を使う。
• button-wood は文字 #3E9A3A × 背景 #E4D1A0 のコントラスト比が 2.37:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#296626、4.61:1）を使う。
• nav-anchor は文字 #3E9A3A × 背景 #E4D1A0 のコントラスト比が 2.37:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#296626、4.61:1）を使う。
• button-retailer は文字 #FEFAEA × 背景 #F39901 のコントラスト比が 2.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#A26601、4.52:1）を使う。

Typography

• 見出しは極太にして、白と茶の二重フチを付ける
• 見出しの漢字には小さなルビを振り、幼児と親の両方が読めるようにする
• 擬音は写真の近くに斜めに配置し、色を変える
• 本文は短く、長い文章ブロックは作らない
• ボタン文字はキーワードを大きく、続く語を小さくする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。写真はカード内で2列や重ね置きにしてよい
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 32px、基本単位 8px、カード内 16px（375px 幅換算）
• オレンジ地の上に、角丸カードを一定の間隔で縦に積む
• 各カードの上部に見出し、中央に写真群、下部に木札ボタンを置く
• FV直下にページ内リンクの横長3分割ナビを置く
• 商品詳細は画像と仕様表を左右に並べ、SPでは縦に積む
• 購入先ボタンは同じサイズのタイルで横に並べる

Elevation & Depth

• カードに影は付けず、オレンジ地との色差だけで浮かせる
• 木札ボタンは茶色の太フチと下側の濃い段差で立体感を出す
• 写真の切り抜きには白い太フチを付ける
• 商品画像には軽いドロップシャドウを付けてよい

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 円形や角丸四角に切り抜き、白フチを付けて重ねる
• セクション境界: 区切り線は使わず、オレンジ地の隙間でカードを分ける
• カードは角丸12〜16px
• リードのラベルはピル型
• ナビは板を3つ並べたような角丸長方形
• 写真は少し傾けたり重ねたりして遊び心を出す

Components

• セクションカード（card-section）: クリーム地の角丸カード。上部は空色のグラデ背景にする
• フチ付き極太見出し（heading-outlined）: 黄〜オレンジのグラデ文字に白と茶の二重フチ、ルビ付き
• リードのピル帯（label-pill）: 見出しの下に置く、色付きのピル型帯と白文字の一文
• 木札ボタン（button-wood）: ベージュ面に茶フチ、左にアイコン、右に矢印。ピル型
• 3分割ページ内ナビ（nav-anchor）: 茶フチの板を3区画に分け、各区画にキーワードと矢印を置く
• 吹き出し（bubble-callout）: 紺や白の丸い吹き出しに、短い訴求文を入れる
• 仕様表（spec-table）: 左に緑灰の見出しセル、右に白い値セルを並べる2列の表
• セット内容パネル（set-panel）: ミント地の角丸パネルに、付属品の切り抜き画像と名前を並べる
• 販売店ボタン（button-retailer）: 山吹色の角丸タイルに販売店のロゴを載せ、横に並べる

Do's and Don'ts

Do - 地はオレンジ1色に統一し、内容はクリームのカードの中に置く - 見出しは必ずフチ付きの極太文字にし、ルビを振る - 写真には擬音や吹き出しを添えて、動きを出す - カードの余白に野菜などの小さなイラストを散らす - 各セクションの最後には木札ボタンを置き、次の行動へ誘導する

Don't - 寒色や黒を地の色に使わない - 細い明朝体や小さな文字だけの見出しにしない - 写真を四角のまま整然と並べるだけにしない - 長い説明文を詰め込まない - カードに強い影やきつい角を付けない

Page Structure

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

1. ファーストビュー（商品の全体像と遊び方をひと目で伝える）: 空色と草原の背景の中央に商品を置き、ロゴ見出しと遊び方の円形写真、数字バッジを周りに配置する
2. ページ内ナビ（特長・動画・購入へ誘導する）: 茶フチの木札を3分割した横長ナビ
3. 特長1（体験）（遊びながら学べることを訴求する）: 空色グラデのカードに極太見出しとピル帯、大きな円形写真2枚と擬音、吹き出し、木札ボタン
4. 特長2（学び）（知育の効果を伝える）: 野菜のイラストを散らした見出しと赤いピル帯。子どもの写真4枚を傾けて重ね、ボタンを置く
5. 商品詳細（価格・対象年齢・内容物を示す）: 左にパッケージ画像、右に2列の仕様表
6. セット内容（付属品を一覧で見せる）: ミント地のパネルに、切り抜き画像とラベルをグリッドで並べる
7. 購入CTA（販売店へ誘導する）: 赤い極太の販売告知の下に、山吹色の販売店タイルを4つ並べ、最後に注釈を入れる

Imagery

• 明るい室内で幼児が玩具で遊ぶ様子を、手元のアップで撮る
• 商品は白背景で切り抜いて使う
• 野菜やハサミなどを、フラットな手描き風イラストにして散らす
• 空色のグラデと虹、草原の背景で、ファーストビューを絵本のようにする
• 写真は円形や角丸に切り抜き、白フチを付ける
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央の幅約640pxのカード列で、左右はオレンジ地
• SPではカードを幅90%にし、写真を2列か縦積みにする
• 商品詳細は、SPでは画像の下に仕様表を置く
• ナビの3分割は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 行書くと起動時に読み込まれる。