--- version: alpha name: Soft Pink Coral Parenting Goods LP description: くすみピンクの地にコーラルレッドを効かせた、子育て世代向けの物販 LP です。冒頭は赤地に金リボンと月桂樹の実績訴求で権威を見せます。その後は生活シーンの写真、POINT 番号付きの特長、イラストの手順、注意事項、安全認証、口コミ、仕様の順に、丁寧に信頼を積み上げます。 colors: primary: '#DE3C54' background: '#FEFEFE' background-alt: '#F4E2DE' tint-1: '#C6E3E9' secondary: '#DE3C54' accent-1: '#C9A24A' text: '#25272A' text-body: '#515958' accent-2: '#4A6FB5' surface: '#FEFDFD' line: '#B26A5A' background-alt-2: '#F4F2F0' typography: display: fontFamily: Dela Gothic One fontSize: 72px fontWeight: 900 lineHeight: 1.0 headline-lg: fontFamily: Zen Maru Gothic fontSize: 24px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 700 lineHeight: 1.4 accent: fontFamily: Playfair Display fontSize: 12px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.1em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 700 lineHeight: 1.4 body-md: fontFamily: Zen Maru Gothic fontSize: 13px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 14px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' award-block: backgroundColor: '{colors.secondary}' textColor: '{colors.accent-1}' typography: '{typography.display}' height: 360px point-heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 90px speech-heading: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 64px scene-badge: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 80px info-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 80px caution-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 520px review-label: backgroundColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 30px spec-tag: backgroundColor: '{colors.primary}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 20px --- # DESIGN.md — くすみピンク×赤金の育児グッズ LP（Soft Pink Coral Parenting Goods LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ファッション・アクセサリー ／ **雰囲気**: やさしい・柔らかい、信頼・誠実、情報量多め・訴求型、親しみ・手作り感 - **キーワード**: くすみピンク・コーラルレッド・金リボン実績・丸い吹き出し・点線下線見出し・ファミリー写真 - **地の質感**: フラットな単色の地。実績ブロックだけは金の箔風グラデーションと紙吹雪で華やかにする - **形**: 丸バッジ、角丸の白カード、手書き風の吹き出し、点線の下線 - **温度感**: 暖かく柔らかい。安全情報だけは淡い水色で落ち着かせる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#DE3C54` | 強調色・見出しの強調語・バッジ | 7% | 画素の主要色に補正 | | `background` | `#FEFEFE` | 基本の白地 | 23% | 画素の実測 | | `background-alt` | `#F4E2DE` | 特長セクションのくすみピンク地 | 13% | 画素の実測 | | `tint-1` | `#C6E3E9` | 安全・口コミセクションの水色地 | 9% | 画素の主要色に補正 | | `secondary` | `#DE3C54` | 実績ブロックの赤ピンク地 | 6% | 画素の主要色に補正 | | `accent-1` | `#C9A24A` | 金リボン・月桂樹 | 3% | 推定 | | `text` | `#25272A` | 見出しの黒文字 | 6% | 画素の主要色に補正 | | `text-body` | `#515958` | 本文の濃グレー | 4% | 画素の主要色に補正 | | `accent-2` | `#4A6FB5` | 口コミのサブ見出しの青帯 | 1% | 推定 | | `surface` | `#FEFDFD` | 説明文の白カード | 5% | 画素の実測 | | `line` | `#B26A5A` | 点線下線・カード枠 | 0% | 画素の主要色に補正 | | `background-alt-2` | `#F4F2F0` | 注意喚起の帯の淡いピンク | 4% | 画素の主要色に補正 | - 特長ゾーンはくすみピンク地、安全・口コミゾーンは水色地、仕様ゾーンは白地にする。ゾーンごとに地の色を切り替える - 強調語はコーラルレッドの文字色で、見出し 1 行につき 1 語だけにする - 赤ピンク地＋金の組み合わせは冒頭の実績訴求だけに使う - 本文は純黒を避け、濃グレーにする - 丸バッジは赤地に白文字、または白地に赤枠と赤文字にする - 注意事項カードは白地に赤い見出し帯をのせ、赤い丸の箇条書きにする - `award-block` は文字 `#C9A24A` × 背景 `#DE3C54` のコントラスト比が 1.79:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 実績の大きな数字 | 装飾・ディスプレイ | Dela Gothic One | 900 | 72px | 1.0 | 0.0em | | `headline-lg` | POINT 見出し | 丸ゴシック | Zen Maru Gothic | 900 | 24px | 1.3 | 0.02em | | `headline-md` | 吹き出し見出し・セクション見出し | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.4 | 0.0em | | `accent` | POINT・SPECIFICATION の小さな欧文 | 欧文セリフ | Playfair Display | 700 | 12px | 1.0 | 0.1em | | `headline-sm` | 番号見出し・手順名 | ゴシック | Zen Kaku Gothic New | 700 | 15px | 1.4 | 0.0em | | `body-md` | 本文・カード説明 | 丸ゴシック | Zen Maru Gothic | 500 | 13px | 1.7 | 0.02em | | `note` | 注釈・仕様の補足 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | - 見出しは太い丸ゴシックで中央揃えにし、下に茶系の点線を引く - POINT 見出しは小さな欧文セリフを弧状に置き、その下に大きな数字、さらに下に見出しの順で重ねる - 強調語だけを赤くし、少し大きくする - 見出しの前置きは＼ ／ で挟んだ小さな見出しにする - 本文は 13px 前後で、行間を広めにとる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真は 2 列、手順は 3 列 - **本文ブロックの幅**: 画面幅の約 94% - **余白**: セクション間 48px、基本単位 8px、カード内 14px（375px 幅換算） - 写真は左右 2〜3% の余白でほぼ全幅に置く - 説明は写真の直下に白カードとして重ねる - 特長は POINT 番号見出し、写真、白カードの順で繰り返す - 手順は 3 列で、縦の区切り線と丸数字をつける - 仕様は寸法線つきの製品画像と、2 列の項目表で示す ## Elevation & Depth - 影はほぼ使わず、フラットにする - 白カードはごく薄い影か、影なしにする - 金リボンと箔文字だけに立体のグラデーションをつける ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 角丸なしの四角形。拡大した部分は赤枠の円で切り抜く - **セクション境界**: 背景色を直線で切り替える - 吹き出しは白地に黒い太枠で、しっぽ付きの角丸長方形にする - シーンのラベルは白い円に赤い細枠と黒文字で入れる - 仕様のラベルは赤地に白文字の小さな角丸タグにする - 注意事項カードは上だけ大きく角丸にした赤帯をつける ## Components - **実績の金リボンブロック**（`award-block`）: 赤ピンク地に紙吹雪を散らし、金リボンの見出し、月桂樹、大きな箔文字の数字を置く - **POINT 番号見出し**（`point-heading`）: 弧状の欧文、大きな数字、強調語入りの見出しを重ね、下に点線を引く - **吹き出し見出し**（`speech-heading`）: 白地に黒枠、しっぽ付きの角丸で、左に赤い丸バッジを添えることがある - **シーンの丸ラベル**（`scene-badge`）: 写真の角に白い円を重ね、赤い細枠の中に短い言葉を入れる - **説明の白カード**（`info-card`）: 写真の下に置く白カード。本文の一部に点線下線をつける - **注意事項カード**（`caution-card`）: 赤い見出し帯に警告アイコンを置き、白地に赤い丸の箇条書きを並べる - **口コミの見出し帯**（`review-label`）: 赤または青の角丸帯に白文字。下に白い吹き出しで口コミを並べる - **仕様タグ**（`spec-tag`）: 赤地に白文字の項目名と値を 2 列で並べる ## Do's and Don'ts **Do** - 地の色はくすみピンク、水色、白の 3 つで区切る - 強調語は赤の文字色で 1 語だけにする - 写真の部分拡大は赤枠の円で見せる - 安全・注意の情報は箇条書きで丁寧に見せる - 使い方は線画イラストで 3 ステップにする **Don't** - 赤地＋金を冒頭以外で多用しない - 本文に純黒や細すぎる明朝を使わない - 強い影や暗い背景を使わない - 見出し 1 行に強調色を何色も混ぜない - 写真を暗く加工しない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品と使う場面を一目で伝える）: 屋外の親子写真の上に、黒い太字の商品カテゴリー名、受賞バッジ、保証の赤い帯を重ねる 2. **実績訴求**（ランキングや販売数で権威を示す）: 赤地に金リボン、月桂樹、巨大な数字の箔文字、紙吹雪を置く 3. **満足度と保証**（購入の不安を下げる）: 金の円に大きな % を入れ、下に銀のプレートで保証を示す 4. **カラーバリエーション**（色の選択肢を示す）: ピンク地に製品の切り抜きを並べ、英字と日本語で色名を添え、赤帯でお知らせを入れる 5. **利用シーン**（使う場面を想像させる）: 2 列の写真グリッドに、白帯の文字と丸いシーンラベルを重ねる 6. **2WAY の説明**（2 つの使い方を対比する）: 左右 2 枚の写真に赤い丸の番号をつけ、下に白帯で赤い強調語を入れる 7. **特長（POINT 1〜5）**（機能を順に説明する）: ピンク地に番号見出し、写真、白い説明カードの順で繰り返す 8. **使い方 3 ステップ**（使い方の簡単さを示す）: 吹き出し見出しの下に、線画イラストを 3 列で並べる 9. **使用上の注意**（安全への配慮を示す）: 赤い見出し帯の白カードに、箇条書きを並べる 10. **安全認証**（第三者の裏付けを示す）: 水色地に吹き出し見出しを置き、証明書の画像と説明を左右に並べ、団体ロゴを添える 11. **専門家の推薦**（専門家の声で信頼を高める）: 左に人物写真、右に点線区切りの見出しと本文を置く 12. **お客様の声**（実際の使用感を伝える）: 写真のモザイクの横に、色帯の見出しと白い吹き出しの口コミを置く 13. **商品仕様・各部説明**（詳細な情報を示す）: 寸法線つきの製品画像、赤いタグの表、赤い引き出し線つきの線画を載せる ## Imagery - 自然光の屋外で撮った、明るく爽やかな親子の写真 - 父・母の両方が使う場面を見せる - 製品は白背景の切り抜きで、持ち物を並べた俯瞰写真も使う - 使い方と各部の説明は、白黒の線画イラストに赤い注記を入れる - 実績ブロックは金リボンと紙吹雪の装飾にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 画像はないため、PC では中央 750px 前後のカラムで SP の構成を保つ - 背景の色帯は全幅に伸ばす - 写真グリッドは PC でも 2 列のまま拡大する - 手順と口コミは 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-ac894e7f`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/realize-store2020/bornboon/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（3/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。