DESIGN.md — 銀白×くすみローズの明朝コスメ LP（Silver Prism Mincho Beauty Serum LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、クール・先進的、シンプル・ミニマル、清潔・爽やか
• キーワード: 銀白プリズム・明朝体・くすみローズ・黒帯ラベル・円形バッジ・縦書き
• 地の質感: ガラスの反射や光の筋が入ったシルバー〜白のグラデーション。光沢のある質感。
• 形: 正円バッジと大きな円の写真、角丸カード、斜めに切った黒帯。
• 温度感: やや寒色寄りのニュートラル。くすみローズで少し温かみを足す。

Colors

• 地は白と銀灰の淡いグラデーションを基本にする。
• 強調語の背景はくすみローズの帯にし白文字で抜く。
• 見出しラベルは黒帯に白文字で引き締める。
• 悩み・ダメージ訴求は暗いグレー帯に切り替える。
• キーワードの一字だけ紫紺〜赤のグラデで光らせる。
• 成分紹介にのみピンクや水色の色を使う。
• vertical-rose-tag は文字 #EAEAEA × 背景 #CA9D9A のコントラスト比が 1.98:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#9B5651、4.54:1）を使う。
• ingredient-orb は文字 #EAEAEA × 背景 #E59BB4 のコントラスト比が 1.8:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#BF3262、4.54:1）を使う。

Typography

• ほぼ全文を明朝体で組み、注釈だけゴシックにする。
• 見出しは字間を広く取り、大小の文字サイズで抑揚をつける。
• 効能ワードは縦書きにしてローズ帯に入れる。
• 英字は小さな大文字ラベルか薄い筆記体の透かしで使う。
• 数字はセリフ体で大きく扱う。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、小バッジは 3 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• 見出しは中央揃え、本文は左揃え。
• 白い角丸カードを左右 5% の余白で置く。
• 円形バッジは 3 つを横一列に並べる。
• 商品写真と縦書きコピーを左右に重ねる。
• 暗いセクションは全幅帯にする。

Elevation & Depth

• 白カードに淡い灰色のぼかし影を付ける。
• 円形バッジにも柔らかい影を付けて浮かせる。
• 黒帯ラベルは影なしのフラットにする。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 成分や悩みは正円、手順写真は片側だけ角丸にする。FV は斜めの三角形で切り抜く。
• セクション境界: 直線か斜めの光の帯。ゆるい波線もある。
• 黒帯ラベルの片端を斜めにカットするか、下を矢印型にする。
• 鉤括弧型の細い枠で小見出しを囲む。
• 円形要素を多用して柔らかさを出す。

Components

• 黒帯ラベル（label-black-band）: 全幅か片側を斜めに切った黒帯に、明朝の白文字を乗せる。
• 縦書きローズ帯（vertical-rose-tag）: 効能を縦書きにしてくすみローズ帯で抜く。小さな縦書き補足を添える。
• 円形効能バッジ（badge-circle）: 白い正円に影を付け、2 行の明朝テキストを入れる。3 つ並べる。
• Secret 番号タグ（secret-number）: 黒い正方形の中に英字と 2 桁数字を入れ、カード上端に重ねる。
• 特長カード（card-feature）: 白い角丸カードに見出し、ローズの下線マーカー、円形写真、本文を入れる。
• 成分オーブ（ingredient-orb）: ピンクの半透明の球に成分名を白抜きで入れ、注釈番号を付ける。
• STEP ラベル（step-label）: 右端を斜めに切った黒帯に、STEP とイタリックの大きな数字を入れる。
• フリー処方タグ（free-tag）: 鉤括弧型の枠に成分名を入れ、斜線で打ち消す。

Do's and Don'ts

Do - 見出しは明朝体で大きく、字間を広めに取る。 - 背景は銀白の光沢グラデーションで透明感を出す。 - 効能ワードは縦書きのローズ帯で強調する。 - 黒帯ラベルでセクションの頭を締める。 - 注釈は小さなゴシックで要素の近くに置く。

Don't - 原色の赤や青のボタンは使わない。 - 丸ゴシックやポップ書体は使わない。 - 装飾を詰め込みすぎて余白をなくさない。 - 暗いセクションを続けすぎない。 - ローズを広い面に塗らない。

Page Structure

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

1. ファーストビュー（商品の世界観と使用感を一目で伝える）: 明朝の大見出しを 2 行置き、カテゴリを鉤括弧枠で添える。目元写真を斜めの三角で切り、商品ボトルと英字の商品名を中央に置く。
2. 効能サマリー（主な効果を 3 つ示す）: 中央に大見出しを置き、商品写真の周りに大きな白い円を配置する。各円に縦書きのローズ帯を入れる。
3. 悩みの提起（読者の悩みに共感する）: 人物写真の上に黒帯の問いかけと白い円パネルを重ねる。線画アイコン付きの円形バッジを 3 つ並べる。
4. 原因の説明（ダメージの原因を示す）: 暗いグレー帯に矢印型の黒ラベルと波線を置く。原因を半透明の泡状の円に入れて散らす。
5. 解決提示（商品を解決策として示す）: 下に尖った黒い五角形ラベルを置く。商品写真の左右に大きな縦書きの明朝コピーを配置し、円形バッジを 3 つ並べる。
6. 特長（秘密）（成分の根拠を伝える）: ローズ地に筆記体の透かしを敷き、数字を大きく見せる。白カードに Secret 番号、下線付きの見出し、円形写真、本文を入れる。
7. 成分紹介（保湿成分を見せる）: 水しぶきの写真の周りにピンクの成分オーブを 4 つ置く。
8. 形状のこだわり（塗りやすさを説明する）: 黒帯の小見出しの下にカードを置く。先端の拡大を円で見せ、引き出し線と枠付きの説明を添える。
9. 使用方法（手順を示す）: ローズの斜め帯の見出しを置く。左に角丸の写真、右に STEP ラベルと説明を 2 段で並べる。
10. 安心・品質（処方と製造品質で安心させる）: アーチ型の見出しの下に、打ち消し線付きの枠タグを並べる。黒帯の見出しと工場・研究写真を入れる。
11. クロージング（世界観で締めくくる）: FV と同じプリズム背景に、縦書きの大きなコピーと商品名を置く。

Imagery

• 銀と白の容器を光沢のある白背景で斜めに撮る。
• 目元を超アップで撮り、斜めの光の帯で切り抜く。
• 背景にガラスやダイヤのような反射とプリズム光を入れる。
• 成分は金色や水色の球体、しずく、植物の写真で表す。
• 悩みは細い線画の目のイラストで表す。
• 筆記体の英字を薄く透かして重ねる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版の画像はないため、ここは推奨。PC では 480〜640px 幅の中央カラムに SP デザインを置く。
• PC の左右余白にはプリズム背景を広げる。
• 円形バッジは PC でも 3 列のまま大きくする。
• 縦書きコピーは 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 行書くと起動時に読み込まれる。