DESIGN.md — 青×緑と黄色マーカーの親子向け通信ガイドLP（Fresh Blue Green Parenting Guide LP）

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

Overview

• 業種: 家電・ガジェット ／ 雰囲気: 清潔・爽やか、信頼・誠実、やさしい・柔らかい、情報量多め・訴求型
• キーワード: 親子・安心・ガイド・黄色マーカー・線画イラスト・データ
• 地の質感: フラットな単色面。淡い水色・ミントの地に白いカードを重ね、影はほぼ使わない
• 形: 角丸の小さい枠線カード、ピル型CTA、丸い＋アイコン、斜線の括弧付き小見出し
• 温度感: やや涼しめで明るい。黄色とオレンジでぬくもりを足す

Colors

• 章ごとにテーマ色を切り替える。前半は青と水色の地、後半は緑とミントの地
• カードは白い面に、テーマ色の細い枠線を付ける
• 見出しの要点だけ、下半分に黄色マーカーを引く
• 主CTAはオレンジに限定し、テーマ色とはっきり分ける
• 全幅の濃い色の帯（青・緑）は、FVと声のスライダーだけに使う
• グラフは青の濃淡とグレーだけで塗る
• button-primary は文字 #FFFFFF × 背景 #FE8A02 のコントラスト比が 2.37:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#B36101、4.54:1）を使う。

Typography

• 見出しは中央揃えにし、テーマ色で太字にする
• 強調したい語だけ、色を変えるか黄色マーカーを引く
• 小見出しは左右を斜線（＼ ／）で挟む
• 本文は中央揃えの短い2〜3行、またはカード内で左揃え
• 数値は欧文の太字で大きく見せる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。カード類は2列のグリッドから1列に落とす
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 章の頭に小さな線画イラスト→マーカー見出し→リード文の順で置く
• データは青い帯見出し付きの白い大カードに入れる
• Q&Aは2列の枠線ボタンで並べ、右端に＋アイコンを付ける
• 動画カードは見出し帯・サムネ・話数タイトル・あらすじ枠を縦に積む
• 声のカードは横スクロールのスライダーにする

Elevation & Depth

• 影はほとんど使わず、枠線と面の色の差で階層を表す
• ナビ・Q&Aカードは下辺に濃い色の線を太めに入れ、浮いて見せる
• CTAは下に濃い色の影を2px程度付ける

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸の矩形。声の人物は丸型アバター
• セクション境界: 直線で背景色を切り替える
• カードは1〜2pxのテーマ色の枠線で囲み、角丸は小さめにする
• 大カードの四隅に小さな丸の飾りを置く
• ＋アイコンはテーマ色の塗りの丸
• 声のカードには吹き出し状のしっぽを付ける

Components

• 目次ナビカード（nav-card）: イラストとマーカー付きラベルを入れた5つの小カード。下に▼を付ける
• マーカー見出し（heading-marker）: 上にイラストを置き、黄色マーカーを引いた中央揃えの大見出し
• データカード（data-card）: 青か緑の帯にQアイコンの問いを置き、下にAアイコンの答えとグラフを並べる
• Q&Aトグル（qa-toggle）: Qアイコン、質問文、＋丸アイコンを並べた枠線ボタン
• 年代タブ（tab）: 4分割のタブ。選択中のタブは青で塗る
• チェックリスト（check-list）: 淡い面に、丸いチェックアイコン付きの箇条書きを並べる
• 声カード（voice-card）: 緑の帯の上に白い吹き出しを置き、見出し・アバター・本文・属性ラベルを入れる
• 主CTA（button-primary）: オレンジのピル型ボタン。右端に＞を付ける
• 動画カード（video-card）: 緑の見出し帯、再生アイコン付きのサムネ、話数ラベル、あらすじ枠を縦に積む

Do's and Don'ts

Do - 章ごとに青系と緑系のどちらかに統一する - 見出しの要点は黄色マーカーで強調する - 線画の人物イラストで、親しみやすさを出す - データには必ず出典の注釈を添える - 白いカードには細い枠線を付けて、地から分ける

Don't - 青系と緑系を同じカード内で混ぜない - オレンジをCTA以外に多用しない - 濃い影やグラデーションの面を使わない - 暗い背景色のセクションを作らない - 本文を長く詰めすぎない

Page Structure

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

1. ファーストビュー（テーマと安心感を伝える）: 青の全幅背景に、白抜きと黄色の丸文字のタイトル、親子写真のコラージュ、キャンペーン帯を置く
2. 目次ナビ（5つの章へ誘導する）: イラスト付きの小カードを横に並べる
3. 基礎知識とデータ（始める時期の目安を示す）: マーカー見出しの下に、円グラフを入れたデータカードを置く
4. Q&A（よくある疑問に答える）: 2列のトグルボタンを並べる
5. 年代別の活用法（年代ごとのメリットを伝える）: タブで切り替え、アイコン付き帯のカードにチェックリストを入れる
6. おすすめ商品（関連サービスへ送客する）: 白い枠内に、2つのバナーカードと詳しくボタンを置く
7. 保護者の心得（注意点を伝える）: 緑の地に切り替え、イラストとチェックリストのカードを置く
8. 悩み別の機能（悩みごとに機能を紹介する）: 4つのトグルカードを2列で並べる
9. ルールの調査結果（他の家庭の傾向を示す）: 横棒グラフを入れたデータカードを置く
10. お客様の声（体験談で共感を得る）: 緑の全幅帯に、吹き出し型カードを横スライダーで並べる
11. 学習動画（アニメで理解を深めてもらう）: 動画カードを2列のグリッドで6本並べる
12. ダウンロード・検定（行動を促す）: 緑の帯見出しの白い大カードに、資料画像とオレンジのCTAを置く
13. ニュース一覧（関連記事へ回遊させる）: 写真カードのスライダーと、一覧へのCTAを置く

Imagery

• 人物は細い線画に、淡い水色を差したイラストで描く
• 写真は明るい室内の親子・学生で、自然光の雰囲気にする
• グラフはフラットで、数値を大きく見せる
• 動画のサムネはアニメ調の生活シーンにし、中央に半透明の再生ボタンを置く
• ニュース写真は机の上の物撮りか、イラストにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは幅約900pxのコンテンツを中央に置く。SPでは幅90%にする
• 目次ナビはPCの5列から、SPでは横スクロールか2〜3列にする
• Q&Aや動画カードはPCの2列から、SPでは1列にする
• グラフとその凡例はSPで縦に積む
• 声とニュースのスライダーは、SPで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 行書くと起動時に読み込まれる。