DESIGN.md — パールグレー×藤色の透明感コスメLP（Iridescent Pearl Gray Cosmetic Powder LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、クール・先進的、やさしい・柔らかい、シンプル・ミニマル
• キーワード: 透明感・パール・干渉色・細いセリフ・余白・ミスト
• 地の質感: マットなグレー地に、虹色の光のにじみと細い線のモアレ模様をうっすら重ねる
• 形: 大きめ角丸の白カード、ピル型ボタン、正円の成分写真、片側だけ丸い写真
• 温度感: やや冷たいニュートラルに、ピンク藤色で少し温かみを足す

Colors

• 地はパールグレーで統一し、白カードで内容をまとめる
• 強調は藤色の文字だけにし、面ではほとんど使わない
• 悩みセクションだけ暗い紫グレーの写真帯にしてメリハリを出す
• ピンク・藤・ミントの干渉色は光のにじみとしてうっすら置くだけにする
• 購入ボタンは白いピルに濃い文字。原色は使わない
• 本文の文字色は黒ではなく紫寄りの濃いグレー
• button-review は文字 #9A6FB0 × 背景 #FEFEFE のコントラスト比が 3.95:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#9263AA、4.54:1）を使う。
• feature-circle は文字 #FFFFFF × 背景 #C4A3CB のコントラスト比が 2.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#9960A5、4.59:1）を使う。

Typography

• 欧文見出しは細くて背の高いセリフ体を使い、文字の太さに強弱をつけて大きく置く
• セクション見出しの欧文は、地とほぼ同じ色に影をつけて彫り込み風にする
• 和文の見出しは細い明朝で字間を広めにとる
• 番号は「( 01 )」のようにカッコで囲み、欧文セリフで書く
• 説明文は小さめ・字間広め・中央揃えにする
• 太字はあまり使わず、強調は文字サイズと藤色で行う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長の比較は 2 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 90px、基本単位 8px、カード内 24px（375px 幅換算）
• 見出しも本文も中央揃えが基本。コンセプトの大見出しだけ左揃えの縦積み
• 写真は端から端まで、または片側に寄せて置く
• 白カードは画面幅の 94% 前後にし、角を大きく丸める
• セクションの間は余白を広くとり、余白自体を見せる
• 使い方は写真を左・説明を右の横並びにする

Elevation & Depth

• 影はほとんど使わず、カードは白い面と地の色の差で浮かせる
• ボタンにはごく薄い影か細い線をつける
• 欧文見出しはエンボス風の淡い影をつける
• 悩み項目は半透明の暗い面に白い細線の枠をつける

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 角丸の四角が基本。成分は正円、使い方の写真は右側だけ半円
• セクション境界: シルクのような白いうねりで境目をぼかす。直線では区切らない
• 購入ボタンは白いピル型
• 番号付きの特長の囲みは、カギカッコのような細い角線で飾る
• スライダーは円形の矢印ボタン（藤色・淡い藤色）
• 比較写真の上には淡い藤色のラベル帯を置く

Components

• 購入ストアボタン（button-store）: 白いピル型。ストア名の下に濃いグレーの小さなピル型ラベルを入れる
• 口コミボタン（button-review）: 藤色の線で縁取った白いピル型。吹き出しアイコンと注釈をつける
• 彫り込み欧文見出し（heading-emboss）: 地とほぼ同じ色の巨大な細いセリフ文字。淡い影で浮き彫りに見せる
• カッコ付き番号（number-paren）: ( 01 ) 形式の欧文番号。下に 2 行の明朝見出しを置く
• 悩みチェック項目（worry-item）: 暗い写真の上に置く半透明の帯。白い細枠、チェックアイコン、白文字
• 機能の丸バッジ（feature-circle）: ピンクから藤色へのグラデーションの正円に白い明朝文字。2 つを×でつなぐ
• 白い角丸カード（card-white）: 見出し、説明、写真やスライダーをまとめる大きな白いパネル
• アウトラインタグ（pill-tag）: 細い線で囲んだ小さなラベル。限定品であることや特長の補足に使う

Do's and Don'ts

Do - 大きな余白と細い書体で、空気感を保つ - 光のにじみやモアレ線の装飾は、ごく薄く重ねる - 効果は図解と比較写真で見せる。図には「イメージ」の注釈をつける - 購入ブロック（商品写真・価格・ストアボタン）はページの上部と下部の 2 回置く - 文字色は紫寄りのグレーでそろえる

Don't - 赤や原色の目立つボタン・バッジを使わない - 太いゴシックで強く訴える見出しにしない - 濃い影やはっきりした境界線で区切らない - 背景を純白一色にしない（グレー地とのコントラストを保つ） - 装飾の色数を増やさない

Page Structure

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

1. ファーストビュー（商品の世界観と、核となる効能を伝える）: 巨大な欧文ロゴの下に明朝のキャッチを置く。容器写真の周りに、円を描く欧文の文字列と虹色の線を重ねる
2. コンセプト（相反する 2 つの効果を両立していることを示す）: 下線付きの明朝見出しを左に縦に積む。白いうねり背景に、線画アイコン 2 つを並べる
3. 商品情報・購入（仕様と価格を見せ、購入先へ送る）: 彫り込みの欧文見出しの下に商品写真を置く。限定タグ、区切り線付きの仕様、白いピル型のストアボタンを続ける
4. 悩みの提起（読み手に当てはまる悩みを確認させる）: 暗い紫の写真に角丸をつけた枠。その上に半透明の帯で悩みを 6 つ並べる
5. 特長01 仕組み（2 つの機能の働きを説明する）: グラデーションの丸 2 つを×でつなぐ。粒子の図解と、凡例・注釈を添える
6. 比較検証（使う前と後の差を見せる）: 角線で囲んだ枠に、手の甲の比較写真を縦に並べる。各写真の上に藤色のラベル帯を置き、動画再生ボタンを重ねる
7. 特長02 質感（テクスチャーと仕上がりの良さを伝える）: 白カード内に写真のスライダーを置き、粒子の図と拡大した円形写真を見せる
8. 特長03 成分（配合している成分を示す）: 中央の商品写真の周りに、成分の正円写真を 6 つ並べる
9. 特長04・05 こだわり（処方の安心感と付属品の良さを伝える）: 粉の写真に、細い引き出し線で注記をつける。粉が舞う瞬間の写真を角丸で見せる
10. 使い方（使う手順を伝える）: 大きな番号を入れ、半円形に切り抜いた写真と説明文を 3 段並べる。注意書きは警告アイコン付き
11. 応用的な使い方（別の使い道を提案する）: 白カードで「予防」と「リセット」の 2 ブロックに分け、before/after の写真と動画を入れる
12. クロージング購入（最後にもう一度購入を促す）: 横に流れる白い欧文の帯と、イメージ写真を置く。上部と同じ商品情報・ストアボタン・口コミボタンを繰り返す

Imagery

• 白とグレーの淡い背景に置いた、柔らかい光の商品写真
• ピンク・藤色の線を幾重にも重ねたモアレ風の波線装飾
• 粉の質感や、粉が舞う瞬間を捉えたマクロ写真
• 粒子をパステルカラーの球体で描いた 3D 風の図解
• 肌や髪の比較写真は自然光で、色を補正しすぎない
• 成分は透明感のある正円のイメージ写真にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では本文を中央の約 30% 幅の SP レイアウトのまま表示する
• PC の左側に、欧文ナビとストアボタンを固定表示する
• PC の左右の余白にはモアレ線と虹色のにじみ背景を敷く
• PC の最下部に、SNS フォローの白カードと黒いフッターを追加する

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