DESIGN.md — 生成り×くすみ青の北欧調キッズ用品 LP（Soft Nordic Pastel Kids Product LP）

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

Overview

• 業種: 日用品・生活雑貨 ／ 雰囲気: やさしい・柔らかい、ナチュラル、かわいい、親しみ・手作り感
• キーワード: 北欧イラスト・くすみパステル・有機的な波形・手描きの顔イラスト・生成りの地
• 地の質感: 紙のようにマットなフラット塗り。小さなドットの集まりや葉・小鳥のシルエットを散らして、手作りの雰囲気を出す。
• 形: 角丸カード、有機的な波形の境界、円形に切り抜いた写真、左端から伸びるタブ型ラベル。
• 温度感: 暖かめ（生成り・サンドが基調で、青で引き締める）

Colors

• 地は生成りピンクベージュで統一し、情報ブロックは白の角丸カードに載せる。
• ポイントごとにテーマ色（青・水色・黄・サンド・茶）を変え、ラベルと声カードの枠をその色で揃える。
• 見出しは墨グレーで書き、強調したい語だけ青かコーラルにする。
• 彩度の高い原色は使わず、すべての色をくすませる。
• セクションの切り替えにはサンドやくすみ青の波形の面を使う。

Typography

• 見出しは丸ゴシックの太字にし、字間を 0.1em 前後と広めに取る。
• 強調語は色だけを変え、サイズを少し上げる。
• 欧文の見出しは丸みのあるサンセリフにし、下にカタカナの小さな訳を添える。
• 見出しは「＼ ／」で挟む装飾を使ってよい。
• 本文は 13px 前後にし、行間は 1.9 と広めに取る。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真とテキストの左右交互配置を多用する。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• ポイントのラベルは画面の左端に付けたタブにする。
• 写真は画面幅いっぱいに配置するか、片側にはみ出させる。
• お客様の声のカードは上部をアーチ状に盛り上げ、欧文の見出しを入れる。
• 長いステップは点線枠の大きな白カードにまとめる。
• 装飾イラストはカードの角や外側に散らして配置する。

Elevation & Depth

• 影はほぼ使わず、フラットに仕上げる。
• カードは白い面と破線の枠だけで分ける。
• 写真の切り抜き画像だけに、ごく薄い接地影を付けてよい。

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 製品は白抜きの切り抜きにする。利用シーンは円形または大きく角を丸めた形に切り抜き、背後に色付きの円を少しずらして重ねる。
• セクション境界: 有機的な波形（サンドやくすみ青のブロブ形）で区切る。
• ラベル・吹き出しはピル型か円形にする。
• PHASE 番号は下端が V 字に切れたリボン型にする。
• 三角形を交互に並べたガーランドを区切り線に使う。
• 枠線は細い破線・点線、または 2px の実線にする。

Components

• ポイントのタブ型ラベル（point-tab-label）: 左端から伸びるピル型の帯。円形のアイコンと欧文の文字を入れ、ポイントごとに色を変える。
• お客様の声のアーチ型カード（voice-card）: 上部が山形に盛り上がった枠線付きの白カード。メガホンのアイコンと欧文の見出しを載せ、手描きの顔イラストと短い声を 2 件、三角形のガーランドで区切って並べる。
• 実績のカード（trust-card）: 破線で縁取った白カードに受賞・ランキング・特典を 1 件ずつ載せる。赤系のバッジとローレルを添える。
• ポイント一覧の行（point-list-item）: 円形のサンド色アイコンと一行テキストを並べた白い角丸の行。強調語は青にする。
• PHASE のリボン番号（phase-ribbon）: 黄またはコーラルの縦長リボンに、白い筆記体風の数字を入れる。横に年齢の見出しを置く。
• 円形の吹き出し（speech-bubble）: サンドや水色の円に短いコメントを入れ、写真に重ねる。
• 比較カード（compare-card）: 細い墨色の枠の角丸カードを 2 枚並べる。上部に黒いピル型の見出しを乗せ、写真の下に説明文を置く。
• カラー名のラベル（color-name-label）: 筆でなぞったような淡い色帯に欧文のカラー名を載せ、カタカナ名と括弧で囲んだ説明を添える。

Do's and Don'ts

Do - 色は必ずくすんだパステルにする。 - セクションごとにテーマ色を決め、ラベル・枠・強調語を揃える。 - 小鳥・小枝・ドットの装飾を余白に散らす。 - お客様の声は手描き風の顔イラストと組み合わせる。 - 製品写真は白抜きにして、大きく見せる。

Don't - 原色の赤や黒い太文字の煽り表現を使わない。 - 濃い影やグラデーションのボタンを使わない。 - 角が直角の硬いボックスを多用しない。 - 装飾を文字に重ねて、読みにくくしない。

Page Structure

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

1. ファーストビュー（デザイン性を印象付ける）: 生成りの地に青い大きなキャッチを置き、製品の全色を斜めに並べる。小鳥とドットの装飾を添え、下端は波形にする。
2. 選ばれる理由（実績で信頼を作る）: サンド色の波形の帯の中に、ローレルと星評価を置き、破線の白カードを 4 枚縦に並べる。
3. ポイントの一覧（特長を予告する）: 「＼ ／」で挟んだ見出しの下に、アイコン付きの白い行を 4 つ並べる。
4. 特長 1（デザイン）（見た目の良さを伝える）: タブ型ラベル、大見出し、写真のコラージュの順に置き、アーチ型の声カードで締める。
5. 特長 2（折りたたみ）（収納のしやすさを示す）: 前後比較の写真と矢印、円形に切り抜いた利用シーン、声カードで構成する。
6. 特長 3（安全）（安心感を伝える）: 認証を説明する白カードを置き、比較カードを 2 枚並べる。
7. 特長 4（成長に合わせて）（長く使えることを示す）: PHASE リボンの付いた点線枠の大カードに、機能の小見出し・写真・声を入れる。
8. ギフト対応（贈り物としての価値を伝える）: 色帯ラベルの付いた包装の選択肢を 2 つ並べ、注意書きと声カードを続ける。
9. カラーバリエーション（色を選ばせる）: 白地に欧文の見出しを置き、色ごとにラベルと大きな製品写真を縦に並べる。
10. よくある質問（誤解を防ぐ）: ベージュの角丸カードに、Q と A の丸アイコンを付けて並べる。
11. 仕様（サイズと仕様を示す）: 波形の帯の下に、寸法線入りの図と、コロンで揃えた仕様表を置く。

Imagery

• 製品は白背景のスタジオ撮影で、白抜きの切り抜きにする。
• 利用シーンは室内や車まわりを自然光で撮り、円形に切り抜く。
• 人物は線画に頬紅を入れたフラットな手描きの顔イラストにする。
• 装飾は北欧風の小鳥・小枝・花・ドットの集まりで、くすみ色の単色で描く。
• アイコンはサンド色の円に白い線画を入れる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、PC では本文を中央 640〜720px 幅の 1 カラムに収め、左右を生成りの地にすることを推奨する。
• PC では特長の写真とテキストを 2 カラムで左右交互に並べる。
• PC ではカラーバリエーションを 2〜4 列のグリッドにしてもよい。
• PC でも装飾は余白に大きめに配置する。

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