DESIGN.md — 空色×桜色の肌にやさしい洗剤 LP（Sky Blue and Soft Pink Gentle Detergent LP）

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

Overview

• 業種: 日用品・生活雑貨 ／ 雰囲気: 清潔・爽やか、やさしい・柔らかい、信頼・誠実、ナチュラル
• キーワード: 青空・水色とピンクの2系統・明朝の見出し・白カード・POINT番号・比較表
• 地の質感: グラデーションは使わず単色の面でまとめる。写真は白い背景に置いた切り抜き商品画像と布の比較写真。
• 形: 角丸のない四角いカードとボタン。円形のメリットバッジと、細い横線の見出し下線。
• 温度感: やや涼しめ。清潔感があり、ピンクの区画で柔らかさを加える。

Colors

• 商品ラインごとに区画の地色を水色系かピンク系に分け、ボタン・見出し線・番号もその系統の色にそろえる。
• 特長は色地の上に置いた白カードの中に書く。
• 強調は文字色を青かローズにするだけにとどめ、黄色は比較表の強調セル1か所に限る。
• 本文は濃いグレー。真っ黒は環境セクションのボタンだけに使う。
• 冒頭と環境セクションは白地にして、ブランド全体の話であることを示す。
• button-secondary-line は文字 #FFFFFF × 背景 #E9526D のコントラスト比が 3.56:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E32547、4.54:1）を使う。
• test-label は文字 #0173BC × 背景 #CCE4F3 のコントラスト比が 3.82:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#0167A8、4.55:1）を使う。
• feature-box は文字 #0173BC × 背景 #E5F3FB のコントラスト比が 4.44:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#0167A8、4.56:1）を使う。

Typography

• 見出しは明朝、本文はゴシックで役割を分ける。
• POINTラベルは小さい英字、その下に大きい2桁の番号を縦に積む。
• 本文は字間を少し広げ、中央揃えで短く改行する。
• 注釈は※を付けて小さく、本文のすぐ下に置く。
• 大見出しは極太の明朝にして、写真の上に墨色で重ねる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。白カードの左右に色地を約20px見せる。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• 色地の区画の中に白カードを置く入れ子構成にする。
• POINT同士の間は40px前後あける。
• 比較写真はビフォーとアフターを左右に並べ、間に三角の矢印を置く。
• 円形のメリットバッジは上に1個、下に2個の三角形に配置する。
• CTAは同じ幅のボタンを縦に3つ積む。

Elevation & Depth

• 影は使わずフラットにする。
• 白カードと色地の明度差だけで階層を分ける。
• 環境セクションは細いグレー枠で囲む。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は背景を切り抜いた画像。比較写真は角丸なしの四角。
• セクション境界: 区画は直線で切り替え、地色を変えるだけにする。
• ボタンとカードは角丸0の四角。
• メリットバッジだけ、青のグラデーションを付けた正円にする。
• 見出しの下に、文字幅より少し長い2pxの色線を引く。

Components

• 四角い青ボタン（button-primary）: 横幅いっぱいに近い四角いボタン。文字は中央、右端に「>」を置く。
• ローズ色ボタン（button-secondary-line）: ピンク区画用のボタン。形は青ボタンと同じ。
• POINT番号見出し（point-heading）: 小さい英字ラベル、2桁の番号、色付きの明朝見出し、下線の順に縦に積む。
• 円形メリットバッジ（benefit-circle）: 青いグラデーションの正円の中に、短い利点を白い明朝で3行書く。
• テスト済みラベル（test-label）: 淡い色地に太字のラベルを置き、右に小さい補足文を添える。
• 新旧比較表（compare-table）: 星の数で新旧を比べる表。新しい方の列は青枠と青い見出しで囲み、1セルだけ黄色で強調する。
• 機能アイコンボックス（feature-box）: 淡い水色の箱に、線画の円アイコンと六角形の数値バッジを並べる。
• 商品ラインナップ（product-lineup）: 切り抜きの商品画像の下に、商品名と容量を中央揃えで書く。

Do's and Don'ts

Do - 商品ラインごとに水色系とピンク系の配色を一式で切り替える。 - 見出しは明朝にして、細い下線で上品にまとめる。 - 注釈は※を付けて必ず小さく添える。 - 比較写真は白い衣類のビフォーとアフターで清潔感を出す。 - 余白を広くとり、本文は中央揃えにする。

Don't - ボタンをピル型にしたり影を付けたりしない。 - 原色の赤や派手なグラデーションを広い面に使わない。 - 見出しを太いゴシックにしない（ファーストビューの太い明朝だけは例外）。 - 1つの区画に水色系とピンク系を混ぜない。 - 本文を詰めて長い行にしない。

Page Structure

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

1. ファーストビュー（商品を新しく位置づけ直したことを宣言する）: 青空と洗濯物の写真の上に、商品ボトルを大きく置く。上部に墨色の太い明朝のコピーを2段で重ねる。
2. リード・ブランドの経緯（これまでの評価と、リニューアルした背景を伝える）: 白地に左揃えの短い行を並べ、続けて明朝の大見出しで結論を示す。ロゴ、2商品、丸いバッジを添える。
3. 紹介動画（動画で概要を伝える）: 埋め込み動画を幅いっぱいに置く。
4. 商品Aの導入（商品Aのコンセプトを伝える）: 水色地に手書き風の英字ロゴを置き、左に商品画像、右に明朝の説明文を並べる。
5. 特長POINT01〜03（洗浄力・使いやすさ・やさしさを証明する）: 白カードの中にPOINT見出しを置き、比較写真、円バッジ、機能ボックス、線で区切った小見出しリスト、テスト済みラベルを順に並べる。
6. 性能比較表（従来品より良くなった点を示す）: 星の数で比べる表を置き、新しい方の列を青で強調する。最後に明朝で青いまとめ文を書く。
7. 商品ラインナップとCTA（購入先へ案内する）: 商品画像と容量を中央に並べ、その下に青い四角ボタンを3つ縦に積む。
8. 商品Bの導入と特長（2つめの商品を紹介する）: ピンク地に切り替え、商品Aと同じ構成をローズ色で繰り返す。
9. 商品Bのラインナップ（購入先へ案内する）: ローズ色の四角ボタンを3つ並べる。
10. 環境への取り組み（ブランドとしての社会貢献を伝える）: 白地をグレー枠で囲み、認証ロゴと説明文を並べ、黒茶の詳細ボタンを置く。
11. フッター（関連リンクとコピーライトを載せる）: 縦線で区切った小さなテキストリンク、ロゴ、コピーライトを中央揃えで並べる。

Imagery

• 青空と白い雲を背景に、洗濯物が風になびく爽やかな写真を使う。
• 商品は白背景で切り抜き、少し下から見上げる角度にする。
• 白いTシャツの汚れのビフォーとアフターを、同じ構図・同じ光で撮る。
• アイコンは青い単色の線画で、円や六角形で囲む。
• 認証ロゴなど第三者のマークは、白地に小さめに置く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に約800px幅で置き、色地の区画は画面幅いっぱいに伸ばす。
• PCではビフォーとアフターの比較写真を3種類並べた3列にし、矢印は下向きにする。
• PCでは円バッジと特長3項目を横3列に並べる。
• PCではCTAボタン3つを横一列に並べる。
• PCではファーストビューの見出しを1行にして写真の上部に重ねる。

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