DESIGN.md — 霧がかった青灰×生成りのヘアケア LP（Misty Blue Gray Hair Care LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: 清潔・爽やか、シンプル・ミニマル、やさしい・柔らかい、上品・高級
• キーワード: くすみブルー・余白・細字・帯マーカー・透明感・LINE誘導
• 地の質感: 霧がかった淡い写真と、細かいノイズの入ったライトグレーの紙のような地
• 形: 角の立った長方形が基本。ポイントのバッジや写真は円・楕円・アーチで切り抜く
• 温度感: やや寒色寄り。生成りとピンクの差し色で冷たくなりすぎないよう温度を足す

Colors

• 地は白・淡い青灰・ノイズ入りグレー・生成りの 4 種類。セクションごとに切り替える
• ブランドの青灰は広い面の枠と円バッジに使い、文字には濃い青灰を使う
• LINE の緑は CTA ボタンだけに使う
• クラファン告知と CTA はいつも生成りのボックスにまとめる
• 強調はピンク・サーモン・ブルー・ベージュの帯マーカーで行い、1 見出しにつき 1 色にする
• 数字や割引の強調にはピンク文字を使う
• button-line は文字 #FFFFFF × 背景 #04BC54 のコントラスト比が 2.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#03883D、4.57:1）を使う。
• heading-marker は文字 #FFFFFF × 背景 #E4A29B のコントラスト比が 2.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#CB4C3F、4.52:1）を使う。
• feature-badge は文字 #FFFFFF × 背景 #6E8E9D のコントラスト比が 3.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#5C7A88、4.57:1）を使う。
• stat-ring は文字 #CA7F93 × 背景 #EAEFF5 のコントラスト比が 2.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#B14965、4.53:1）を使う。

Typography

• 文字は細め〜中くらいの太さにして、極太は CTA だけに使う
• 全体に字間を 0.05em 前後空けて、ゆったり見せる
• 見出しの強調語は文字色を白にし、色の帯を敷く
• 欧文の見出しは細いサンセリフで大きく置き、下に細い線を添える
• 注釈の※番号は上付きの小さい文字で付ける
• 本文は中央揃えを基本にし、コンセプト文だけ左揃えか右揃えにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。円バッジやラベルは 3 列、悩みの写真は 2 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 24px（375px 幅換算）
• 特長セクションは青灰の太い枠の中に白い面を置く
• ポイントは『丸い番号→帯マーカー見出し→本文→写真→注釈』の順で繰り返す
• クラファン告知ボックスは 2〜3 セクションごとに同じ形で繰り返す
• 吹き出し型の声は左右に少しずつずらして重ねる
• コンセプト部は写真を右に寄せて縦に積み、帯状の青灰の面と重ねる

Elevation & Depth

• 影はほとんど使わず、平面で見せる
• 奥行きは写真と色面の重なりで出す
• 吹き出しは細い線だけで描き、影は付けない

Shapes

• 角丸: 小 0px ／ 中 8px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 写真は四角が基本。悩みの写真は縦長の楕円、香りの写真はアーチ型、素材写真は円形で切り抜く
• セクション境界: 区切りは直線のみ。地の色を切り替えて区切る
• CTA ボタンは完全なピル型にする
• ポイント番号は細線の円にし、下に短い縦線を付ける
• 特長のバッジは円形で、塗りと線のものを交互に置く
• 吹き出しは角の立った不規則な多角形にする

Components

• LINE友だち追加ボタン（button-line）: 緑のピル型。左に LINE アイコンを置き、縦の区切り線のあとに白い太字の文言
• クラファン告知ボックス（campaign-box）: 生成りの面。斜線の『＼ ／』で挟んだリードと、下向きの三角が付いた白い吹き出しパネル、ボタン、説明文を入れる
• 帯マーカー見出し（heading-marker）: 強調語だけを白文字にして、サーモン・ブルー・ベージュなどの帯を敷く
• ポイント番号（point-number）: 細線の円の中に小さな英字ラベルと数字を置き、下に短い縦線を付ける
• 特長の円バッジ（feature-badge）: 直径 90px ほどの円を 3 つ並べる。濃い青灰の塗りと細線を交互にする
• お客様の声の吹き出し（voice-bubble）: 青灰の細線で描いた多角形の吹き出し。強調語に帯マーカーを敷き、属性は右揃えの括弧書きにする
• 満足度の円グラフ（stat-ring）: ピンクの太い円弧の中に、大きなピンクの数字と斜線で挟んだラベルを置く
• 香りのラベルチップ（note-label-chip）: 英字ラベルの下に淡い色の四角いチップを置く。3 色で塗り分ける

Do's and Don'ts

Do - くすんだ青灰と白を主役にして、余白を広く取る - 強調は帯マーカーかピンク文字だけで行う - CTA は生成りの告知ボックスに入れて、繰り返し配置する - 写真は淡く霧がかったトーンにそろえる - 注釈は小さく、グレー寄りの文字でまとめる

Don't - 原色や高彩度の色を広い面に使わない（LINE の緑は除く） - 濃い影やグラデーションのボタンを使わない - 太い極太ゴシックを見出しに多用しない - マーカーの色を 1 見出しの中で混ぜない - 角丸のカードを乱用しない

Page Structure

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

1. ファーストビュー（商品の世界観とカテゴリーを一目で伝える）: 淡い青灰の写真コラージュの中央にボトルを置き、右上に縦書きの大見出し、右下に白い欧文ロゴを配置する
2. 使用シーン（どんな時に使うかを示す）: 一部をマーカーにした見出しの下に、細線の円アイコン 3 つとラベルを並べる
3. CTA（告知）（LINE 登録へ誘導する）: 生成りのボックスにピル型の緑ボタン、割引の告知、吹き出しパネル、説明文を入れる
4. コンセプト（商品が生まれた背景を伝える）: 全面の淡い写真の上に、白帯付きの右揃えの文字と細字の本文を重ねる
5. 特長（3 つのポイントを説明する）: 青灰の枠に白い面を置き、欧文見出しと円バッジ 3 つのあとに、番号付きのポイントを繰り返す
6. 香り（香りの魅力を伝える）: ノイズ入りグレーの地に、アーチ型の写真と弧を描く文字を置き、香りのピラミッドの図と色チップを添える
7. お客様の声（満足度と体験談で信頼を得る）: 淡い青灰の地にピンクの円グラフの数字、多角形の吹き出し、線画の人物イラストを置く
8. おすすめの人（自分ごと化を促す）: 縦書きの見出しのあと、楕円の写真とキャプションを 2×2 で並べる
9. ブランドの想い（共感を得る）: 縦長の青灰の帯に写真を重ねて積み、左揃えの行間の広い文章のあとに大きな欧文ロゴを置く
10. 登録特典（LINE 登録の理由を示す）: 上に円形のラベルを置いた細線の枠の中に、点線で区切った特典リストを入れる
11. クロージング（最後の CTA と余韻を残す）: 告知ボックスを再掲し、締めに静かな生活シーンの写真と短いコピーを置く

Imagery

• 白いボトルを淡い青灰の背景にソフトな自然光で撮り、長い影を落とす
• 露出を高めにし、彩度を下げたくすみトーンにする
• 人物は素肌感のある女性を自然体で撮る。部屋着や髪に触れるしぐさ
• テクスチャーの接写（クリームや水滴）を円形で切り抜く
• 白い花や柑橘など香りのモチーフを添える
• 体験談には細い線画の人物イラストを使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に 375〜480px 幅のカラムを置き、左右を淡い色で埋める
• PC で広げる場合も 1 カラムを基本にし、最大幅は 960px 程度にする
• 円バッジや楕円の写真は PC で 3〜4 列に増やしてよい
• ファーストビューの写真コラージュは 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 行書くと起動時に読み込まれる。