DESIGN.md — セージグレー×黒の泡コスメ LP（Sage Gray Monochrome Clinical Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: シンプル・ミニマル、清潔・爽やか、上品・高級、信頼・誠実
• キーワード: セージグレー・黒帯・白い泡・図解・番号見出し・余白多め
• 地の質感: マットで平坦な面。写真は柔らかな自然光と白い泡の質感
• 形: 角丸小さめのカード、正円バッジ、矢印付き吹き出しラベル
• 温度感: やや寒色寄りのニュートラル。香りの紹介だけ暖色ベージュ

Colors

• 地はライトグレーと白を交互に使い、セクションを切り替える
• 黒・深緑黒の帯は章の区切りと強調ラベルにだけ使う
• 黒帯の上の大見出しは淡黄で一点だけ強調する
• セージグリーンは FV や無添加パネルなど面で使い、彩度を上げない
• 暖色ベージュは香りの章だけに使う差し色にする
• 成分の円バッジは素材写真の色（紫・黄・緑）をくすませて使う
• step-chevron は文字 #FFFFFF × 背景 #C3CDC9 のコントラスト比が 1.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#667A72、4.57:1）を使う。

Typography

• 見出しは太いゴシックで字間を広めにとる
• 和文見出しの下に小さな英字サブ見出しを字間広めで添える
• 特長番号は大きな欧文数字にして、下に短い下線を引く
• 本文は行間 2.0 前後でゆったり組む
• 注釈は ※ 番号付きの小さい文字で見出しの直下に置く
• 助詞だけ小さくして、キーワードを大きく見せる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。図解は 2 列、バッジは 3〜4 列
• 本文ブロックの幅: 画面幅の約 85%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 左右の余白は約 30px
• 番号セクションは全幅写真→白地の見出し・本文の順に並べる
• 本文と図解は左右に並べ、図解は右に寄せる
• 黒帯セクションは上下に約 40px の余白をとる
• 区切りは細い横線か V 字の形を使う

Elevation & Depth

• 影はほぼ使わない平面の構成
• 悩みカードと無添加パネルには、ずらした細い枠線で奥行きを出す
• HOW TO 見出しの黒ボックスにはオフセットの枠線を付ける

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 全幅の矩形写真、または角丸 10px の矩形。成分は正円で切り抜く
• セクション境界: 直線と、下向き V 字の切り替え
• バッジは正円で、白地または線のみにする
• ラベルは角丸 4px 程度の矩形に、下向きの三角の吹き出しを付ける
• 見出しの枠は 1px の黒い四角い線にする
• ステップバーは右向き矢印形のシェブロンでつなぐ

Components

• 深緑黒ラベル（label-dark）: 見出しの上に置く小さな帯ラベル。POINT 番号や導入文に使う
• 吹き出しラベル（speech-label）: 下向きの三角が付いた黒い矩形。図解や写真の上に要点を載せる
• 枠線見出し（heading-boxed）: 1px の黒い線で囲んだ四角の中に中見出しを置く
• 円形バッジ（circle-badge）: 白い正円の中に訴求の言葉を太字で入れ、横に 3 つ並べる
• 悩みチェックカード（check-list-card）: 薄い面のカードに、チェックアイコン付きの悩みを罫線で区切って並べる
• 番号見出し（number-heading）: 写真の左下に大きな欧文数字を置き、短い下線を添える
• 成分円（ingredient-circle）: 素材写真を正円で切り抜き、白い太字の成分名を重ねる
• 変化ステップバー（step-chevron）: グレーグリーンの 2 段の矢印バーで、状態の変化を示す
• 使い方ステップ（step-item）: STEP と大きな数字の下に線を引き、説明文と線画イラストを左右交互に置く

Do's and Don'ts

Do - グレー・白・黒の 3 色を中心に、静かなトーンを保つ - 効き目は肌断面のような簡単な図解で見せる - 和文見出しには英字サブ見出しを必ず添える - 特長は大きな番号付きで順番に見せる - 注釈は ※ 番号で丁寧に入れる

Don't - 鮮やかな赤やオレンジのボタンを多用しない - グラデーションや強い影を使わない - 丸ゴシックや手書きの書体で甘くしない - 1 画面に色数を増やしすぎない - 本文の行間を詰めない

Page Structure

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

1. ファーストビュー（商品と主な効能を一目で伝える）: セージ地に商品のボトルと泡の写真。右に黒白の縦書きコピー、左に円形の認証バッジを置き、下に黒帯の英字名を入れる
2. 悩みの提起（読み手の肌悩みに共感する）: 斜めに配した人物写真と深緑のラベル見出し。その下にチェックリストのカードを置き、V 字で次へつなぐ
3. 使い方の提案（手軽なケアであることを示す）: 枠線見出しと、吹き出しラベルを重ねた角丸の人物写真
4. 特長の要約（3 つの強みをまとめて見せる）: 線で挟んだ小見出しと、白い円バッジを 3 つ並べる
5. 効能のアプローチ（対応できる悩みを示す）: 植物の影が入った背景の中央に商品を置き、周囲に 4 つの円を配置。下に下線付きの大見出し
6. 有効成分の解説（効き目の仕組みを説明する）: 深緑黒の見出し帯の後に POINT ラベル、吹き出しラベル、肌断面の図解、本文の順に並べる
7. こだわり（番号付き特長）（5 つのこだわりを順に訴求する）: 黒帯に淡黄の大見出しを置く。各特長は全幅写真と番号、白地の見出し・英字・本文で組む
8. 成分・無添加（配合成分と安心感を示す）: 枠で囲んだ中に成分円を並べ、無添加はセージのパネルに白線の円で示す
9. 安全性（肌への優しさを裏付ける）: 実験器具の写真を背景に、枠線見出しと本文を置く
10. 香りの紹介（使う時間の心地よさを伝える）: 暖色ベージュの地に、字間の広い欧文の見出しと素材の静物写真
11. 使い方（手順を明確にする）: オフセット枠付きの黒ボックス見出しと、STEP ごとの線画イラストを左右交互に並べる

Imagery

• 白く濃密な泡のクローズアップを、柔らかな自然光で撮る
• 商品は白背景か植物の葉影の中に置き、静物として撮る
• 人物は顔の一部か手元をトリミングし、ナチュラルメイクで見せる
• 効き目の図解は、ベージュのレンガ状の肌層と矢印のフラットなイラストにする
• 実験器具やガラス皿と葉を組み合わせ、清潔な成分のイメージを出す
• 使い方はグレーの単色線画イラストで描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 750px 前後の 1 カラムに収め、左右はライトグレーで埋める
• 番号セクションの写真は PC では横長に切り抜き、本文と 2 カラムにする
• 円バッジや成分円は PC で 1 行に並べる
• 黒帯は全幅のまま残し、見出しサイズを 1.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 行書くと起動時に読み込まれる。