DESIGN.md — くすみピンク×赤金の育児グッズ LP（Soft Pink Coral Parenting Goods LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: やさしい・柔らかい、信頼・誠実、情報量多め・訴求型、親しみ・手作り感
• キーワード: くすみピンク・コーラルレッド・金リボン実績・丸い吹き出し・点線下線見出し・ファミリー写真
• 地の質感: フラットな単色の地。実績ブロックだけは金の箔風グラデーションと紙吹雪で華やかにする
• 形: 丸バッジ、角丸の白カード、手書き風の吹き出し、点線の下線
• 温度感: 暖かく柔らかい。安全情報だけは淡い水色で落ち着かせる

Colors

• 特長ゾーンはくすみピンク地、安全・口コミゾーンは水色地、仕様ゾーンは白地にする。ゾーンごとに地の色を切り替える
• 強調語はコーラルレッドの文字色で、見出し 1 行につき 1 語だけにする
• 赤ピンク地＋金の組み合わせは冒頭の実績訴求だけに使う
• 本文は純黒を避け、濃グレーにする
• 丸バッジは赤地に白文字、または白地に赤枠と赤文字にする
• 注意事項カードは白地に赤い見出し帯をのせ、赤い丸の箇条書きにする
• award-block は文字 #C9A24A × 背景 #DE3C54 のコントラスト比が 1.79:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。

Typography

• 見出しは太い丸ゴシックで中央揃えにし、下に茶系の点線を引く
• 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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。