DESIGN.md — 桜色と泡モチーフの女性向けシェーバー LP（Soft Pink Bubbly Skincare Shaver LP）

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

Overview

• 業種: 日用品・生活雑貨 ／ 雰囲気: かわいい、やさしい・柔らかい、清潔・爽やか、ポップ・元気
• キーワード: 淡ピンク・泡とハート・雲形吹き出し・大きな角丸パネル・タイプ別カラー・丸い手書き風見出し
• 地の質感: フラットな単色面。泡やシャボン玉の半透明素材を重ねて、みずみずしさを出す
• 形: 角丸 24〜40px の大きなパネル、ピル型ボタン、円形の成分写真、雲形・波形の境界
• 温度感: 暖色寄りの柔らかいパステル。差し色にミントの寒色を使う

Colors

• 地色は淡ピンク #FEF5F6 を基本にする。訴求パネルは濃いピンクやサーモンで塗り分ける
• 濃いピンク地の上は白文字にし、キーワードだけ白帯の上にピンク文字で載せる
• 淡い地や白カード上の見出し・本文は紺 #1C2C5B にする
• 英字見出し・番号・吹き出し枠線は強調ピンクで統一する
• 製品タイプごとに地色・見出し・枠線を同系色（ミント/ピンク/オレンジ/紫）でそろえる
• CTA だけ黄色にして、ピンク系の中で目立たせる
• point-label は文字 #E35E8E × 背景 #FFFFFF のコントラスト比が 3.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#DB306E、4.51:1）を使う。
• highlight-band は文字 #E35E8E × 背景 #FFFFFF のコントラスト比が 3.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#DB306E、4.51:1）を使う。
• cloud-bubble は文字 #E35E8E × 背景 #FFFFFF のコントラスト比が 3.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#DB306E、4.51:1）を使う。
• circle-callout は文字 #E35E8E × 背景 #FFFFFF のコントラスト比が 3.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#DB306E、4.51:1）を使う。
• ingredient-card は文字 #E35E8E × 背景 #FFFFFF のコントラスト比が 3.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#DB306E、4.51:1）を使う。

Typography

• 全体に丸ゴシックを使い、字間は 0.06〜0.1em と広めにとる
• 本文は中央揃えを基本にする。カード内の説明文は左揃えにする
• 英字の大見出しのすぐ下に、小さな和文の読みを添える
• 番号は輪郭線だけの中抜き数字にし、上に小さな英字ラベルを付ける
• 小見出しには紺の細い下線を引く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分写真は 3 列、タイプタブは 2×2
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 32px（375px 幅換算）
• パネルは左右 16〜20px の余白をとり、角丸で浮かせて重ねる
• STEP カードは番号、見出し、本文、線画イラストの順に縦に積む
• 吹き出しや円形の注釈は、製品写真の上に引き出し線で重ねる
• 満足度はカードを 1 枚ずつ見せるスライダーにし、左右に矢印を置く

Elevation & Depth

• 影はほぼ使わず、色面の差で階層を出す
• CTA ボタンだけ、下方向に淡い影を付ける
• 成分カードは細い枠線と淡い色の地で区切る

Shapes

• 角丸: 小 12px ／ 中 24px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 成分写真は円形に切り抜く。製品写真は背景を抜いた切り抜き
• セクション境界: 大きな角丸パネルの下端で区切る。悩みセクションは雲・波形のカーブで区切る
• 見出しラベルは白のピル型にする
• 悩みは白い雲形の吹き出しで見せる
• タイプ別カードは、上端に円形写真を半分はみ出させて載せる

Components

• 購入 CTA（button-primary）: 黄色のピル型ボタン。ほぼ全幅で、販売サイトのロゴと購入の文字を載せる
• POINT 見出し（point-label）: 中抜きのピンク数字と、白ピルの見出しを横に並べる
• キーワード白帯（highlight-band）: ピンク地の本文中で、キーワードに白の帯を敷いてピンク文字にする
• 雲形吹き出し（cloud-bubble）: 悩みを 2 行の短い言葉で載せる白い雲形。小さな泡を添える
• 円形注釈（circle-callout）: ピンクの細い線の円の中に特徴を書き、引き出し線で製品写真を指す
• 満足度カード（stat-card）: 白カードに番号・設問・ドーナツグラフ・大きな % を並べる
• 使い方 STEP カード（step-card）: 白カードに中抜きの番号を重ね、見出し・本文・線画を載せる
• タイプ切替タブ（type-tab）: 各タイプ色のピル型ボタン。右端に丸いシェブロンを付けて 2×2 に並べる
• 成分カード（ingredient-card）: タイプ色の枠線カード。上部に円形写真を重ね、成分名と箇条書きを中央揃えで載せる

Do's and Don'ts

Do - 淡いピンク地に大きな角丸パネルを重ね、セクションを柔らかく区切る - 泡・シャボン玉・ハートの素材を、余白にさりげなく散らす - タイプ別の情報は、色ごとに地・見出し・枠線をそろえる - 数字は中抜きの丸い欧文で、かわいく見せる - CTA は黄色のピル型ボタンに統一する

Don't - 黒や濃いグレーの重い地色を使わない - 角張った四角いボックスや鋭い区切り線を使わない - 明朝体や細く硬い書体を使わない - ピンク地の本文に紺を使わない（白にする） - ドロップシャドウを多用しない

Page Structure

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

1. ファーストビュー（使用シーンと商品の魅力を一目で伝える）: ピンクのタイル浴室の写真に、手書き風の大きなキャッチを重ねる。ハート形の新発売バッジ、No.1 の丸バッジ、4 タイプの製品並びを添える
2. 商品紹介（リニューアルと独自構造を説明する）: 濃いピンクの角丸パネル。白文字の中央揃え本文に白帯の強調を入れ、4 製品の写真と CTA を置く
3. 悩みの提起（悩みを短い言葉で 3 つ示す）: 波形で区切った淡い地に、雲形の吹き出しを散らして配置する
4. 解決提示（商品を答えとして示す）: 紺の短い文に、ハートのバッジと大きなピンクの英字ロゴ風見出しを添える
5. 特長 POINT（3 つの特長を説明する）: POINT 番号と白ピルの見出しを置く。円形の成分写真、引き出し線、円形注釈を使う
6. 満足度（調査データで裏付ける）: サーモン地に、ドーナツグラフの白カードをスライダーで並べ、下に注釈を置く
7. 使い方（手順を 4 ステップで示す）: 英字見出しの下に、STEP 番号付きの白カードと線画イラストを縦に並べる
8. ラインナップ（タイプ別に製品と成分を紹介する）: 2×2 の色付きタブを置き、タイプ色の角丸パネルを順に重ねる。各パネルに製品と成分カードを載せる
9. CTA（購入へ誘導する）: 最後のタイプパネルの下に、黄色のピル型ボタンを置く
10. 注釈・フッター（注釈と SNS 導線を載せる）: ピンク地に番号付きの注釈を並べる。続く空色のフッターに白文字・SNS アイコン・メール導線を置く

Imagery

• 製品は背景を抜いて大きく配置し、泡をまとわせる
• 成分は自然光の植物やオイルのクローズアップを円形に切り抜く
• 使い方はミント色を差し色にした、細い線画のイラストにする
• ハートやシャボン玉は、虹色に光る半透明の 3D 素材にする
• 人物写真は脚や腕など体の一部だけを、明るいパステルの空間で撮る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では、商品紹介を写真とテキストの左右 2 カラムにする
• 満足度カードは、PC では 3 枚を横に並べる
• STEP カードは、PC ではテキストを左・イラストを右に置く横長にする
• タイプ別パネルは、PC では製品写真を左・成分情報を右に置く
• タイプタブは、PC では 4 つを横一列に並べる
• フッターは、PC ではロゴ・SNS・メールを横に並べる

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