DESIGN.md — グレー地×多色パックの男性用ヘアワックス LP（Pop Color Pucks on Gray Studio Haircare LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: ポップ・元気、クール・先進的、力強い・インパクト、シンプル・ミニマル
• キーワード: スタジオグレー・多色の丸パック・浮遊感・ピンクの抽象ペイント・欧文大見出し・黒ラベル
• 地の質感: マットでフラットな地に、ブラーをかけた浮遊物と筆致の荒い抽象ペイントを重ねる
• 形: 円形の容器が主役。UI は角丸小さめの白カードと黒いラベル帯
• 温度感: ややクールなニュートラルに、ホットピンクで熱を足す

Colors

• 地はほぼライトグレー一色で通し、主役の多色容器を引き立てる
• ピンクは New バッジ・強調ラベル・動画セクション地に限定
• 黒は見出し文字・ラベル帯・CTA ボタンに使う
• 製品カラー（黄・青・ティール・オレンジ等）は容器写真のみで UI には使わない
• 白はカードとロゴ帯、Renewal の枠線に使う

Typography

• 英字の大見出しは細めの丸みあるサンセリフで大きく組む
• 日本語の訴求コピーは極太ゴシックで行を詰める
• POINT 番号は小さな斜体英字ラベルの下に大数字を置く
• 本文は小さめで行間を広く取る
• キャッチは縦書きで写真の端に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ラインナップは 3 列の千鳥配置
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 特長は左に番号、右に見出しと本文の 2 段組
• 容器写真は画面端からはみ出すように浮かせる
• ラインナップは中央列を半段ずらして千鳥にする
• FAQ はカードを 8px 間隔で縦に積む

Elevation & Depth

• 基本はフラットで影は使わない
• 容器写真はソフトな落ち影と被写界深度ブラーで奥行きを出す
• 動画タブカードは下に濃いローズのずらし影を付ける

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 容器は切り抜きで円形のまま浮遊配置。人物は角なしの全幅
• セクション境界: 抽象ペイントの筆致や、ゆるい弧でセクションをつなぐ
• CTA は黒のピル型に右向き矢印
• ラベルは角なしの黒帯
• バッジは角なしの四角（New は塗り、Renewal は白枠）

Components

• 診断ボタン（button-primary）: 黒のピル型に白文字と右矢印
• 新商品バッジ（badge-new）: ピンク塗りの四角に白い太字の英字と感嘆符
• リニューアルバッジ（badge-renewal）: 白い細枠のみの四角に白い英字
• POINT 項目（point-item）: 小さな斜体の英字ラベルと大数字、太字見出し、小さな本文
• 黒ラベル帯（label-black）: チャートの軸名やスプレー名に使う黒地白文字の帯
• ポジショニングマップ（positioning-chart）: 方眼の地に十字軸を引き、グレーのピルに容器を並べる
• 動画タブ（video-tabs）: 白とグレーの 2 タブの下に埋め込み動画を置く白いカード
• FAQ アコーディオン（faq-card）: 白カードに灰色の丸い Q アイコン、質問文、右端に＋
• 診断バナー（diagnosis-banner）: 黒い太枠と黒い見出し帯、方眼地にキャラクターイラストと CTA

Do's and Don'ts

Do - 地をグレーで揃え、製品色だけを鮮やかに見せる - 容器は複数個を大小・ブラー違いで浮かせる - 英字の大見出しで各セクションを区切る - ピンクは要所だけに使う

Don't - UI パーツを製品色で塗り分けない - カードに強い影や大きな角丸を付けない - グラデーション地を多用しない - 本文を大きくしすぎない

Page Structure

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

1. ファーストビュー（タレントで世界観を伝える）: ピンクの抽象ペイントを背景に人物を全幅で置き、縦書きの短いキャッチを左上へ
2. ロゴとカラー一覧（シリーズの多色展開を示す）: 白地に欧文ロゴと小さな色丸を横一列に並べる
3. 実績訴求（売上 No.1 の信頼を示す）: グレー地に浮遊する容器、極太黒文字の大コピーと小さな注釈
4. 特長（4 つの強みを説明）: 容器の群れのビジュアルの下に POINT 1〜4 を縦に並べる
5. 動画（CM を見せる）: ピンクのペイント地に 2 タブの動画カード
6. 選び方マップ（仕上がり別に商品を選ばせる）: 方眼地の 2 軸チャートに容器を配置し、黒ラベルで軸名
7. 関連商品（スプレーを紹介）: 2 列で黒ラベルの商品名、短い説明、縦長のボトル写真
8. 診断バナー（タイプ診断へ誘導）: 黒枠のバナーにイラストと黒ピルの CTA
9. 商品ラインナップ（全商品を一覧）: 英字大見出しの下に容器の天面を千鳥配置し、バッジと英字の製品名を付ける
10. よくある質問（不安を解消）: 英字見出しの下に白いアコーディオンカードを 8 個

Imagery

• 容器は真上やや斜めから撮り、白背景で切り抜く
• 浮遊感は大小のスケール差とピントぼけで表現
• ピンク・紫・白の荒い筆致の抽象ペイントを背景や区切りに使う
• 人物はスーツ姿でポーズを取らせ、ペイント背景と合成する
• 診断はフラットな線画のキャラクターイラスト
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はファーストビューを横長にし、ロゴと色丸を一行の帯にまとめる
• 特長は左にテキスト、右に容器ビジュアルの 2 カラム
• 選び方マップとスプレー紹介を横並びにする
• ラインナップは 5 列×2 段の整列配置
• FAQ は中央の幅狭カラムに置く

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