DESIGN.md — 虹色パステル×黒線枠のパーソナライズヘアケアLP（Iridescent Pastel Personalized Haircare LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: 清潔・爽やか、上品・高級、クール・先進的、情報量多め・訴求型
• キーワード: 虹色パステルグラデ・黒の細線フレーム・紺の丸バッジ・明朝×ゴシック・筆記体の欧文装飾・価格ボックス
• 地の質感: 水滴・光のプリズム・幾何学ラインが入った、透明感のあるグラデーション背景
• 形: 黒1〜2pxの角張った枠、黒帯ラベル、正円バッジ、五角形の番号バッジ、ピル型CTA
• 温度感: やや寒色寄りで清涼。成分パートだけ金色・ベージュで温かい

Colors

• 地は白を基本に、主要セクションには水色・ラベンダー・ピンクの淡い虹色グラデを敷く
• 締め色は黒。細い線の枠・帯ラベル・表の見出しセルにだけ使う
• 紺の正円バッジは掛け合わせや成分の提示専用にし、白文字を載せる
• 赤は価格と割引表示だけ、緑は購入CTAだけに使う
• 悩みパートはグレージュ地で暗めにし、その後の明るいグラデで解決感を出す
• 成分ポイント部は生成りベージュ地。オイル成分は金色でまとめる
• button-primary は文字 #FFFFFF × 背景 #13985F のコントラスト比が 3.69:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#118654、4.6:1）を使う。

Typography

• 大見出しは明朝、補足リードは太ゴシック。この2書体で上下に組む
• 強調語は虹色グラデかシアン色の明朝で大きくし、前後を大きな二重引用符で挟む
• 見出しの背後に半透明の筆記体欧文を重ねる
• ブランド名は字間の広い欧文サンセリフで書き、薄いグレーで大きく敷くこともある
• 価格の数字は太いサンセリフで大きく、赤にする
• 注釈は10px前後でまとめ、行間を詰める
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。悩みは 2×2、バッジは 3 つ並び
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 主要ブロックは黒い細線の四角枠で囲む。上辺は見出しのところで途切れさせる
• 写真は枠をはみ出して画面幅いっぱいまで広げることがある
• 表は左が黒セル、右が生成りセルの2列で、行を重ねて並べる
• 手順は3列に並べ、セルの間に「>」の矢印を置く
• 価格ボックスは同じ構成で、ページ内に3回繰り返す

Elevation & Depth

• 基本はフラットにし、影は使わない
• 丸バッジには白い外縁リングと、光が透けるような淡いグロウを付ける
• CTAには下側に薄い影を付け、ボタン面に立体感のあるグラデを入れる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 悩み写真は正円に切り抜き、成分写真は横長の矩形にする。商品は切り抜き画像を使う
• セクション境界: 直線で切り替える。逆三角形の吹き出しで次へつなぎ、斜めのグラデ帯も使う
• 枠は角丸なしの黒い細線
• 番号は黒の五角形に白抜きで入れる
• 掛け合わせは正円2つの間に細い×を置く
• ラベルは角丸なしの黒帯か、ピル型の黒帯にする

Components

• 主CTAボタン（button-primary）: 緑のグラデのピル型ボタン。左端に白丸の矢印アイコンを置き、白文字2行で入れる
• 価格ボックス（price-box）: 取り消し価格・赤の割引バッジ・赤の大きな価格・ピンクの送料無料帯・CTA・注釈を縦に積む
• 黒線フレーム（frame-section）: 見出しのところで上辺が途切れる黒い細線の四角枠。角に黒い三角を付けることもある
• 紺の丸バッジ（badge-circle-navy）: 白い外縁リング付きの紺の正円に、白文字の明朝またはゴシックを入れる。間を×でつなぐ
• 黒帯ラベル（label-black-bar）: 見出し上や成分名に付ける黒帯の白文字ラベル。ピル型にする場合もある
• 五角形ナンバー（point-number）: 黒の五角形に小さな欧文と大きな2桁数字を入れ、左右に細い横線を伸ばす
• タイプ別対応表（type-table）: 左が黒セルに欧文大文字、右が生成りセルに日本語。行ごとに少し間隔をあける
• 香りバリエーション帯（scent-band）: 写真を3分割したコラージュに、大きな欧文の名前と色付きの帯ラベルを重ねる

Do's and Don'ts

Do - 淡い虹色グラデと黒い細線を必ず組み合わせて使う - 大見出しは明朝で書き、強調語をグラデ文字か青文字にする - 成分や掛け合わせの要素は紺の丸バッジで示す - 価格ボックスとCTAは中盤と終盤でも同じ形で繰り返す - 注釈は小さな文字でも省略せずに書く

Don't - ビビッドな原色で広い面を塗らない - 黒い枠や帯に角丸を付けない - 緑をCTA以外に使わない - 影を多用して立体的なカードにしない - 丸ゴシックで可愛くしすぎない

Page Structure

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

1. ファーストビュー（実績と商品を一目で伝える）: プリズム光のある水色背景に商品を並べる。明朝コピーと丸バッジ3つ、黒いピル型ラベル、欧文のブランド名を置く
2. 価格・CTA（早い段階で購入へ誘導する）: 黒線枠の中に薄いブランド名を敷き、商品写真・赤の割引価格・緑のCTAを入れる
3. 悩みの提起（ダメージの原因と悩みに共感させる）: 原因アイコンを3つ並べ、グレージュ地に正円写真を2×2で置く。逆三角形で次へつなぐ
4. 解決の提示（一人ひとりに合わせる発想を示す）: 紺の丸2つを×でつなぎ、パステルのグラデ地に商品を置く
5. 仕組みの説明（診断して処方する流れを説明する）: 黒線枠の中に、研究室の写真と黒×生成りの2列表を置く
6. 独自診断（データに基づく信頼感を伝える）: アプリ画面のモックとレーダーチャートを並べる。紺の丸バッジと共同研究先のロゴも置く
7. 香りの選択肢（楽しさと選ぶ理由を伝える）: 手書きの円形ロゴと虹色の見出しを置き、写真コラージュの帯を5本並べる
8. 仕上がりイメージ（使った後の姿を想像させる）: ツヤのある髪の大きな写真に、手書き風の強調語と縦書きの明朝コピーを重ねる
9. 著名人・専門家の声（第三者からの信頼を示す）: 人物の切り抜き写真と黒い名前ラベル、白いコメントカードを置く。プロフィールは線枠で囲む
10. ご利用の流れ（手順の簡単さを伝える）: 青グラデ地に Step 01〜03 を3列で並べ、アプリ画面と矢印を入れる
11. 配合成分（成分の根拠を示す）: 紺の丸バッジを×でつなぎ、その下に小さな注釈を並べる
12. 3つのポイント（特長を詳しく説明する）: 生成り地に五角形の番号を置き、引用符付きの青い明朝見出しを入れる。写真カードの上に黒帯で成分名を付ける
13. まとめのCTA（最後にもう一度購入を促す）: モデル写真と丸バッジでファーストビューを繰り返し、価格ボックスとCTAを置く

Imagery

• 商品は半透明のパステルボトル。水滴や光のプリズムと一緒に明るく撮る
• モデルはツヤのある黒髪〜ブラウン髪の女性。柔らかい自然光で撮り、白い服を着せる
• 髪の質感はなびく髪の横長の写真で見せる
• 香りの素材は果物と花のマクロ写真を3分割コラージュにする
• 背景には細い線の幾何学模様・六角形・水滴・光のにじみを薄く入れる
• スマホのUIモックや線画のアイコンで、仕組みを図にして説明する
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、以下は推奨。PC では中央に幅 750px 前後の 1 カラムで配置する
• PC では左右の余白に淡いグラデ背景を広げる
• 悩み写真は PC で4列、香りの帯は2列にしてもよい
• 黒線枠の比率と、見出しのところで途切れる表現は保つ
• CTA の最大幅は 480px 程度にする

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