--- version: alpha name: Soft Nordic Pastel Kids Product LP description: 生成りピンクベージュの地に、くすみ青・サンド・コーラル・からし黄を差し色にした北欧イラスト調の子ども用品 LP。有機的な波形の境界や、小鳥・小枝・ドット模様の装飾、手描き風の顔イラストを添えたお客様の声カードで、やさしく親しみやすいけれど上品な印象を作っている。 colors: background: '#FCF5EF' surface: '#FCFDFD' primary: '#376B9D' secondary: '#DED5C4' text: '#605F5C' text-body: '#515151' accent-1: '#F38B8B' accent-2: '#FBCB3B' accent-3: '#8BBA96' tint-1: '#A2CBD4' dark-section: '#755C5C' line: '#DCCCB9' typography: display: fontFamily: M PLUS Rounded 1c fontSize: 40px fontWeight: 800 lineHeight: 1.25 letterSpacing: 0.04em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 28px fontWeight: 700 lineHeight: 1.35 letterSpacing: 0.12em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 21px fontWeight: 700 lineHeight: 1.35 letterSpacing: 0.06em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.08em accent: fontFamily: Quicksand fontSize: 18px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.02em label-button: fontFamily: Quicksand fontSize: 14px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.06em rounded: sm: 6px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' point-tab-label: backgroundColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 32px voice-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 300px trust-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 80px point-list-item: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 56px phase-ribbon: backgroundColor: '{colors.accent-2}' typography: '{typography.accent}' height: 64px speech-bubble: backgroundColor: '{colors.tint-1}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 70px compare-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 400px color-name-label: textColor: '{colors.accent-1}' typography: '{typography.accent}' height: 36px --- # DESIGN.md — 生成り×くすみ青の北欧調キッズ用品 LP（Soft Nordic Pastel Kids Product LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 日用品・生活雑貨 ／ **雰囲気**: やさしい・柔らかい、ナチュラル、かわいい、親しみ・手作り感 - **キーワード**: 北欧イラスト・くすみパステル・有機的な波形・手描きの顔イラスト・生成りの地 - **地の質感**: 紙のようにマットなフラット塗り。小さなドットの集まりや葉・小鳥のシルエットを散らして、手作りの雰囲気を出す。 - **形**: 角丸カード、有機的な波形の境界、円形に切り抜いた写真、左端から伸びるタブ型ラベル。 - **温度感**: 暖かめ（生成り・サンドが基調で、青で引き締める） ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FCF5EF` | ページ全体の生成りピンクベージュ地 | 30% | 画素の実測 | | `surface` | `#FCFDFD` | カード・お客様の声・スペックの白面 | 30% | 画素の実測 | | `primary` | `#376B9D` | 見出しの強調語・ポイントのラベル・装飾の小鳥に使うくすみ青 | 4% | 画素の実測 | | `secondary` | `#DED5C4` | 波形の帯・ラベル・ローレルに使うサンドベージュ | 7% | 画素の実測 | | `text` | `#605F5C` | 見出しのグレー墨色 | 2% | 画素の実測 | | `text-body` | `#515151` | 本文のこげ茶グレー | 2% | 画素の実測 | | `accent-1` | `#F38B8B` | コーラルピンクの強調語・PHASE リボン・帯 | 2% | 画素の実測 | | `accent-2` | `#FBCB3B` | からし黄のラベル・声カードの枠 | 1% | 画素の実測 | | `accent-3` | `#8BBA96` | セージグリーンのラベル帯 | 1% | 画素の実測 | | `tint-1` | `#A2CBD4` | 水色の吹き出し・声カードの枠 | 1% | 画素の実測 | | `dark-section` | `#755C5C` | ポイントのラベル・小見出し帯に使うダークブラウングレー | 1% | 画素の主要色に補正 | | `line` | `#DCCCB9` | カードの破線・点線の枠 | 1% | 画素の主要色に補正 | - 地は生成りピンクベージュで統一し、情報ブロックは白の角丸カードに載せる。 - ポイントごとにテーマ色（青・水色・黄・サンド・茶）を変え、ラベルと声カードの枠をその色で揃える。 - 見出しは墨グレーで書き、強調したい語だけ青かコーラルにする。 - 彩度の高い原色は使わず、すべての色をくすませる。 - セクションの切り替えにはサンドやくすみ青の波形の面を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの大きなキャッチ | 丸ゴシック | M PLUS Rounded 1c | 800 | 40px | 1.25 | 0.04em | | `headline-lg` | 各ポイントの大見出し（2〜3 行） | 丸ゴシック | M PLUS Rounded 1c | 700 | 28px | 1.35 | 0.12em | | `headline-md` | 機能の小見出し（青文字＋下線） | 丸ゴシック | M PLUS Rounded 1c | 700 | 21px | 1.35 | 0.06em | | `headline-sm` | リスト項目・Q&A の見出し | ゴシック | Zen Kaku Gothic New | 700 | 15px | 1.5 | 0.05em | | `body-md` | 本文・お客様の声 | ゴシック | Zen Kaku Gothic New | 500 | 13px | 1.9 | 0.08em | | `accent` | 欧文の小見出し（お客様の声・カラー名） | 欧文サンセリフ | Quicksand | 700 | 18px | 1.3 | 0.08em | | `note` | 注釈・期間表記 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.02em | | `label-button` | ポイントのラベル・吹き出しの文字 | 欧文サンセリフ | Quicksand | 700 | 14px | 1.2 | 0.06em | - 見出しは丸ゴシックの太字にし、字間を 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-03495137`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/babygoodsfactory/mm0002/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（10/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。