DESIGN.md — 紺×淡ラベンダーの薬用スキンケア LP（Navy Clinical Spot Care Cosmetic LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 清潔・爽やか、信頼・誠実、クール・先進的、シンプル・ミニマル
• キーワード: 紺・淡ラベンダー・英字見出し・白カード・成分訴求・薬用
• 地の質感: フラットな単色の地に、製品写真とやわらかい落ち影を重ねる。ファーストビューだけ放射状の青い集中線を使う。
• 形: 角は小〜中の角丸。成分は四角い紺の帯、強調は円形のバッジ、使い方は吹き出しで見せる。
• 温度感: やや寒色寄り。朝の段だけ淡いクリーム色で暖かさを足す。

Colors

• 地は淡ラベンダーを基本にし、口コミだけライトグレーに切り替える。
• 紺は成分帯、見出し帯、強調文字に絞って使う。
• 特長は白い大枠の中に淡ラベンダーのカードを入れ子にする。
• 暖色はFVのバッジ、朝の段、金色の成分バッジだけに使う。
• フッターはグレージュの面に白文字を置く。
• CTAは白地に黒い枠線を付け、色で目立たせない。
• round-badge は文字 #E5DDDC × 背景 #E34323 のコントラスト比が 3.08:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#B73217、4.51:1）を使う。

Typography

• 英字の大見出しの下に、左右の短い線ではさんだ小さな和文ラベルを付ける。
• 訴求見出しは太字で中央にそろえ、2〜3行に改行する。
• 口コミのキーワードだけ太字にする。
• 注釈記号の※は上付きにする。
• FVのコピーはやや右肩上がりに斜めに置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長の補足や成分は 2〜3 列で並べる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 70px、基本単位 8px、カード内 20px（375px 幅換算）
• 英字見出しはセクション地の上端にかけて重ねる。
• 特長は白い大枠の中に淡色カードを縦に積む。
• 使い方は朝・夜の2列で並べ、共通の手順は横断する白カードで見せる。
• 写真ギャラリーは大きな写真1枚と、小さな写真2枚を左右にずらして置く。
• 口コミは白カードを縦に並べ、右下に属性タグを置く。

Elevation & Depth

• 写真と口コミカードの右下に、ぼかしの強いグレーの落ち影を付ける。
• 特長カードは影を付けずフラットにする。
• 吹き出しは白地に薄い影を付ける。

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 製品写真は角丸なしの長方形。ディテールは円形に切り抜き、紺の枠で囲む
• セクション境界: 直線で区切り、地の色を切り替える
• 成分の帯は角丸なしの四角にする。
• 強調バッジは円形にする。
• 使い方の列は角丸16pxで、白い枠線を付ける。
• 手順の流れは白い下向き三角で示す。

Components

• 英字セクション見出し（section-title-en）: 英字の大見出しの下に、線ではさんだ小さな和文ラベルを添える
• 成分の紺帯（ingredient-block）: 紺の四角に白文字で成分名を入れ、×や＋の記号でつなぐ
• 円形の強調バッジ（round-badge）: 金色や赤オレンジの丸の中に、効果を短く入れる
• 紺の帯見出し（heading-band）: 全幅の紺の帯に白抜きの見出しを入れる
• 特長カード（feature-card）: 淡ラベンダーの角丸カード。見出し2段とイラストやアイコンを並べる
• カートボタン（button-primary）: 白地に黒い枠線のピル型の小さなボタン
• 吹き出し（speech-bubble）: 白い楕円の吹き出しに、紺の太字でひと言入れる
• 口コミカード（review-card）: 白い長方形に落ち影を付け、右下に性別の枠タグと年代のグレージュタグを置く

Do's and Don'ts

Do - 紺・白・淡ラベンダーの3色を軸にする。 - 英字見出しと和文サブをセットで使う。 - 成分は四角や丸の図形にして、図解で伝える。 - 注釈は小さい文字でセクションの末尾にまとめる。 - 写真には落ち影を付け、紙を置いたような質感にする。

Don't - CTAを派手な色で塗りつぶさない。 - 暖色をカードの地に広く使わない。 - 角丸を大きくしすぎてポップにしない。 - セリフ体や手書き体を見出しに使わない。 - グラデーションをFV以外で多用しない。

Page Structure

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

1. ファーストビュー（即効性と集中ケアの印象を伝える）: 青い放射状の集中線を背景に、斜めの大コピー、製品ボトル、赤い丸バッジ、医薬部外品の枠ラベルを置く
2. イメージギャラリー（世界観と使用シーンを見せる）: 白地に、落ち影付きの写真を大1枚・小2枚ずらして配置する
3. 製品紹介（有効成分を図解で訴求する）: 淡ラベンダーの地に紺の成分帯を×でつなぎ、＋の下に金色の丸バッジ、製品のカルーセル、商品情報とカートボタンを置く
4. 商品特長（形状・香り・無添加などの細部を伝える）: 白い大枠の中に、紺の帯見出し、丸い拡大図、淡色のカードを縦に積む
5. 注釈（成分表記の補足）: 極小の文字で左寄せにまとめる
6. 使い方（朝晩の使用手順を示す）: クリーム色とラベンダー色の2列を並べ、白い横断カード、三角の矢印、イラスト、吹き出しで流れを見せる
7. お客様の声（使用感の共感を得る）: グレー地に製品写真を置き、影付きの白い口コミカードを3つ並べる
8. フッター（ブランド情報とリンク）: グレージュの地に、白いロゴとリンクを中央にそろえて並べる

Imagery

• 製品は深い紺のチューブ。幾何学的な線のモチーフで先進感を出す。
• イメージ写真は白い布、ライム、ラベンダーなどの素材を添えた俯瞰で、柔らかい自然光で撮る。
• ディテールは円形に切り抜いた拡大写真や、ワイヤーフレームの図解で見せる。
• 使い方の説明には、細い線の淡彩イラスト（人物や化粧小物）を使う。
• テクスチャは白いクリームを伸ばした跡の写真で見せる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に寄せた幅およそ900pxのコンテナに収める。
• PC の FV は横長にし、コピーを左、製品を中央、バッジを右上に置く。
• PC では成分図解を1行に並べ、製品写真と商品情報を左右2カラムにする。
• PC の特長カードは2×2のグリッドにする。
• PC の使い方は朝・夜を横長の2段にし、手順を横に流す。
• PC の口コミは3列にし、英字見出しを大きく左に置く。

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