DESIGN.md — 生成り×木目ベージュと若草緑の木製玩具 LP（Natural Wood Kids Toy LP）

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

Overview

• 業種: 日用品・生活雑貨 ／ 雰囲気: ナチュラル、やさしい・柔らかい、かわいい、親しみ・手作り感
• キーワード: 生成り・木目・若草グリーン・波形境界・手書き吹き出し・親子写真
• 地の質感: フラットな単色面。紙のようなクリーム地に、淡い色の食材モチーフを散らす
• 形: 大きめの角丸写真、正円バッジ、ピル型ラベル、ゆるい波形のセクション境界
• 温度感: 暖色寄り。明るく柔らかい自然光の印象

Colors

• 地は生成りと白を交互に置き、境界は波形で切り替える
• 特長の円バッジや見出し帯はミルクティー色に白文字
• 若草グリーンはラベル・円バッジ・送客ボタンなどの差し色に限定
• 見出しは純黒ではなく温かみのある濃グレー
• 朱色は注意事項の見出し帯だけに使う
• 写真は白い家具と木目が映える明るいトーンでそろえる
• feature-circle は文字 #FFFFFF × 背景 #BFA27F のコントラスト比が 2.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#906F48、4.61:1）を使う。
• pill-label-green は文字 #FFFFFF × 背景 #8DC32C のコントラスト比が 2.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#5D801D、4.59:1）を使う。
• age-badge は文字 #FFFFFF × 背景 #8DC32C のコントラスト比が 2.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#5D801D、4.59:1）を使う。
• section-bar は文字 #FFFFFF × 背景 #BFA27F のコントラスト比が 2.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#906F48、4.61:1）を使う。
• button-primary は文字 #FFFFFF × 背景 #8CC32D のコントラスト比が 2.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#5C811E、4.55:1）を使う。

Typography

• 見出しは2行構成。1行目を小さく、2行目を大きく
• 見出しと本文は中央揃え
• 字間はやや広めにとってゆったり見せる
• 擬音や吹き出しには手書き書体を使い、本文には使わない
• 強調する擬音は緑の太字で一部の文字を大きくする
• 語尾に♪や◎を添えて親しみを出す
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。小物やアイコンは 2〜3 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真は左右5%の余白をとった角丸で置く。一部は片側の画面端まで裁ち落とす
• 特長アイコンは3列×2段の正円で並べる
• 見出しの左右に食材シルエットを散らす
• 寸法図は製品の切り抜き写真に細い線と数値を重ねる
• セクションの間は余白を広くとる

Elevation & Depth

• 基本はフラットで影なし
• 送客カードとボタンだけに柔らかいドロップシャドウ
• 写真カードは影を付けず、角丸だけで浮かせる

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 大きめの角丸の長方形。片側だけ角丸にして画面端へ裁ち落とすものや、円形に切り抜いた拡大写真もある
• セクション境界: ゆるい波形カーブで生成りと白を切り替える
• ラベルとボタンはすべてピル型
• 特徴バッジは正円
• 吹き出しは手書き線の雲形や角丸の枠
• 注意事項は木目色の太枠の箱で囲む

Components

• 特長円バッジ（feature-circle）: 白い線画アイコンと2行のラベルを入れたミルクティー色の正円。3列で並べる
• 緑ピルラベル（pill-label-green）: 小見出しや小物名に付ける若草色のピル
• 円形強調バッジ（age-badge）: 写真の上に重ねる緑の正円。対象年齢や素材など短い訴求を入れる
• 写真上の白タグ（photo-tag）: 写真の角に重ねる、白い片側ピル型の利用シーン名
• 手書き吹き出し（handwritten-bubble）: 細い茶色線の雲形吹き出しに、子どもの台詞や擬音を入れる
• 帯見出し（section-bar）: 画面幅いっぱいのミルクティー色ピル帯。両端にカトラリーアイコンを置く
• 送客ボタン（button-primary）: 緑のピル型ボタンに白い太字と影を付ける。シリーズ用は茶色版にする
• 購入前の注意ボックス（caution-box）: 木目色の枠線と朱色の見出し帯。個体差の写真に赤丸を付けて3列グリッドで並べる
• 関連商品カード（promo-card）: 白い角丸カードに商品写真、欧文名、送客ボタンをまとめる

Do's and Don'ts

Do - 生成りと白を波形の境界で交互に重ねる - 見出しの周りに淡い食材シルエットを散らす - 写真は角丸にし、子どもが遊ぶ様子を中心に使う - 寸法は細い線と数値で図解する - 緑は差し色として小さく効かせる

Don't - 濃色の背景や純黒の文字を使わない - 直角の写真や四角いボタンを使わない - 原色の赤や青を多用しない - 影を強くしない - 文字を詰め込みすぎない

Page Structure

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

1. ファーストビュー（商品の全体像と対象年齢を示す）: 明るい部屋の製品写真に欧文タイトルと和文サブを重ね、緑の年齢バッジとサイズ表記を添える
2. 動画（使う様子を短く見せる）: 白地の中央に16:9の動画を置く
3. コンセプト（暮らしに合う世界観を伝える）: 淡いグレージュ地に2行のキャッチを置き、子どもの写真と手書き吹き出しを添える
4. 特長一覧（魅力を6つに整理する）: 波形の生成り地にミルクティー色の円バッジを3×2で並べる
5. デザイン・設置シーン（部屋になじむことを示す）: 角丸写真を左右にずらして並べ、白タグで設置場所を示す
6. 機能紹介（仕掛けを具体的に見せる）: 部位名の白ピルを付けた図解、拡大写真、円形の切り抜き、手書き擬音
7. 収納（片付けやすさを伝える）: 切り抜き写真に矢印と手書き風の注記を付ける
8. 知育効果（発達への価値を示す）: 緑ピルを&でつないだ見出しと、2列の写真カード
9. 付属品（セット内容を見せる）: 緑ピルの名前と切り抜き写真、天然木の円バッジ
10. 安心設計（安全性を伝える）: 緑ピルの見出し、試験書類の画像、2列の詳細写真
11. ギフト訴求（贈り物用途を提案する）: パッケージ写真と寸法、ケーキとツリーのアイコン円にラベルを付ける
12. サイズ詳細（寸法を正確に伝える）: 帯見出しの下に、製品や小物の寸法線図を並べる
13. 購入前の注意（個体差を事前に知らせる）: 木目色の枠の箱に、赤丸付きの写真を3列で並べ、白カードに説明文を入れる
14. 関連商品・シリーズ（他商品へ送客する）: 白い角丸カードに緑のボタン、シリーズ帯と茶色のボタン、最後に写真コラージュ

Imagery

• 白い壁と明るいフローリングの部屋で、自然光の柔らかい写真にする
• 生成りやベージュの服の幼児が笑顔で遊ぶ姿を写す
• 木製の小物は白背景に切り抜き、真上やななめから撮る
• 淡いベージュ・緑・ピンクの食材シルエットを装飾として散らす
• アイコンは白またはミルクティー色の単色線画
• 寸法図は細い黒線と小さな数値で描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に 480〜600px 幅のカラムを置き、左右は生成り地で埋める
• 特長の円バッジは PC で6個を横1列にしてもよい
• 写真の片側裁ち落としは、PC ではカラム内の角丸に収める
• 文字サイズは PC で1.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 行書くと起動時に読み込まれる。