DESIGN.md — グレー×淡ブルーの静かなヘアケアタオル LP（Soft Gray Minimal Hair Care Towel LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: シンプル・ミニマル、やさしい・柔らかい、上品・高級、清潔・爽やか
• キーワード: グレー基調・余白多め・明朝×ゴシック・縦書きコピー・淡ブルーのアーチ・線画イラスト
• 地の質感: 自然光の白っぽい写真と、パイル地の柔らかな質感。方眼紙風の淡いグリッド背景を解説部に使う。
• 形: 円形の写真切り抜き、下向きアーチのセクション境界、細い線の枠と括弧装飾。
• 温度感: やや寒色寄りのニュートラル。ベージュとブルーの淡いグラデーションでわずかに温かみを足す。

Colors

• 地は白とライトグレーを交互に使い、彩度の高い面は作らない。
• 濃いチャコールは悩み提起の帯と重要比較ボックスだけに使う。
• セクション見出し帯は淡ブルーグレー→淡ベージュの横グラデーションにし、下端を淡ブルーのアーチ線で区切る。
• 強調語は文字色を変えず、下半分にグレーのマーカー帯を敷く。
• 図解のみオレンジ・グリーン・ブルーの淡色を使い、写真部と分ける。
• CTA ボタン的な強い色は置かず、トーンを崩さない。

Typography

• 情緒的なコピーは明朝、機能説明はゴシックと使い分ける。
• 強調したい語だけ一回り大きくし、助詞は小さくする緩急をつける。
• 字間は広め（0.08〜0.15em）で静かな印象を保つ。
• 写真上のエモーショナルなコピーは縦書きの明朝で 2 行に組む。
• 太字は本文中の要点だけに使い、見出しはミディアム程度に抑える。
• 筆記体の欧文は装飾として見出しの上に添える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。比較写真・図解だけ 2 分割。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は全幅、テキストブロックは左右 24px 前後の余白を取る。
• 見出し→本文→写真の順で中央揃えを基本にする。
• セクション間は広い余白とアーチ境界で区切る。
• 比較は中央に縦線を引いた左右 2 分割。
• お客様の声は左に縦の英字見出しを置いた非対称配置。

Elevation & Depth

• 影はほぼ使わずフラットに作る。
• 奥行きは写真と淡グレー面の重なりで出す。
• カードは影ではなく細い線枠で区切る。

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 全幅の矩形写真と正円の切り抜きを交互に使う。サイズ紹介は大きな楕円フレームの中に置く。
• セクション境界: 下向きに緩くたわむアーチ線（淡ブルー）。図解ゾーンの上端は細い波線。
• 比較ボックスは角丸 10px 程度の横長ボックス。
• 円形の「つなぎ」バッジは細い線の正円。
• 括弧「\ /」や「《 》」形の細線で小見出しを挟む。
• 四隅の L 字線でコピーを囲む。

Components

• 数値訴求の円バッジ（badge-circle-dark）: チャコールの正円に白文字で効果の数値を 3 行で入れる。FV 左上に置く。
• 悩みチェックリスト（check-list-dark）: 暗いモノトーン写真上に、チェックボックス付きの悩みを 4 行並べる。キーワードだけ大きくする。
• アーチ見出し帯（arch-heading）: 淡ブルー→ベージュのグラデ帯に見出しを入れ、下端を淡ブルーの下向きアーチで区切る。下に円形の小さな「つなぎ」バッジを置く。
• Q&A 解説（qa-block）: 筆記体の Q を見出し上に置き、円形写真、筆記体 A と吹き出し、マーカー付きの答えを続ける。左端に縦書きの英字ラベルと点線。
• 比較ボックス（compare-box）: 左に用語、縦線を挟んで右に説明を置く横長ボックス。一般は淡グレー、主役はチャコール。
• マーカー強調（marker-text）: 強調文の下半分にグレーの帯を敷く。図解ではオレンジ・グリーンの帯も使う。
• 括弧付き小見出し（bracket-label）: 斜めの細線で短い見出しを左右から挟む。
• お客様の声カード（voice-card）: パイル地写真の上に、筆記体の番号、年代、線画の似顔絵円、点線矢印、白マーカー付きの感想を載せる。
• 線枠カード（frame-card）: 細いグレー線・角丸の枠に、斜線装飾付きの見出し・本文・写真をまとめる。
• 仕様表（spec-table）: 上下と左右に細い二重線を引き、【】ラベルで素材・サイズを並べる。

Do's and Don'ts

Do - 白・グレー・チャコールの無彩色を主にし、色は淡いブルーとベージュに限る。 - コピーは明朝とゴシックを混ぜ、要の語だけサイズを上げる。 - 写真は自然光でハイキーにし、全幅と正円を交互に使う。 - メカニズムは方眼地の上に淡色の線画図解で見せる。 - セクションの切り替えはアーチ線と「つなぎ」の円バッジで流れを作る。

Don't - 赤や原色の強い CTA ボタン・セール帯を入れない。 - 太い影やグラデーションの立体ボタンを使わない。 - 見出しを極太ゴシックで詰めて組まない。 - 写真を高彩度・暖色寄りに加工しない。 - 文字を詰め込みすぎて余白をなくさない。

Page Structure

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

1. ファーストビュー（商品カテゴリと効果を一目で伝える）: タオルを頭にかけた人物写真を全幅で使う。左上に円バッジ、手書き風の短い添え文、下部にサブコピーと大きなカテゴリ名を置き、淡いグラデ下線を引く。
2. 商品紹介（商品の見た目と特長を見せる）: グレーのパイル地を背景に、巻いた商品の写真、白文字の 2 行コピー、ロゴを中央に重ねる。
3. 悩みの提起（読者の悩みに共感する）: 暗いモノトーン写真上にチェックリストを 4 行並べる。最後にアーチ見出しと円バッジで解決へつなぐ。
4. ベネフィット（使った後の理想の状態を描く）: 髪がなびく横顔の写真に、縦書きの明朝コピーを 2 行置く。
5. Q&A（仕組みへの疑問に答える）: 筆記体の Q・A、円形写真、吹き出し、マーカー付きの答えで構成する。
6. 原因の解説（悩みの原因を科学的に説明する）: アーチ見出し、比較ボックス 2 段、矢印、明朝の結論文を置く。続けて方眼地に淡色の図解と 2 列の比較説明を並べる。
7. 解決策の提示（対策と商品の技術を結びつける）: 括弧付きの小見出し、明朝の 2 行コピー、人物写真を置く。アーチ見出しの後にマーカー付きの技術説明と 2 分割の比較実験写真を続ける。
8. 追加ベネフィット（ダメージ軽減も訴求する）: 円形写真、淡いグラデ地、線画イラストを置く。縦線で挟んだ解説と L 字線で囲んだコピーを続ける。
9. 使用イメージと効果比較（使い方と仕上がりを見せる）: 全幅写真とマーカー付きの見出し、本文を置き、左右比較の写真にキャプションを添える。
10. 製造背景（信頼感を補強する）: 線枠カードに、斜線装飾付きの見出し、本文、工場写真をまとめる。
11. サイズ紹介（サイズと使い方を伝える）: 淡ブルーグレー地に大きな白い楕円を置き、筆記体の Size、寸法を点線で入れた写真、円形の使用写真を収める。
12. お客様の声（実感の声で後押しする）: 左に縦の英字アウトライン見出しを置き、パイル地写真の上に番号付きの声を 3 件並べる。
13. 締めのビジュアルと商品仕様（余韻を残し、仕様を伝える）: 縦書きコピーの人物写真の後、ロゴ・商品写真・二重線の仕様表を置く。
14. 取り扱い注意（使い方の注意を伝える）: 淡い生活感のある写真を背景に、明朝の見出し、丸記号の箇条書き、洗濯表示アイコンを並べる。

Imagery

• 白壁と自然光の明るいスタジオで、白 T シャツの黒髪モデルを撮る。
• グレーのパイル地のふわっとした質感を大きく見せる。
• 人物写真は彩度を抑え、わずかに寒色寄りに仕上げる。
• 似顔絵・動作は細い黒線の線画イラストで描く。
• 図解は淡いオレンジ・グリーン・ブルーのフラットな模式図にする。
• 比較写真は同じ構図で左右に並べ、中央に縦線を引く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため SP を基準にし、PC では中央 600〜750px 幅のカラムに収める。
• 全幅写真は PC では左右に余白を残して最大幅を制限する。
• アーチ境界は横に伸ばし、カーブを浅くする。
• 縦書きコピーは 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 行書くと起動時に読み込まれる。