DESIGN.md — 黒×グレーのモノトーン美容パック LP（Monochrome Gallery Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: シンプル・ミニマル、クール・先進的、上品・高級、清潔・爽やか
• キーワード: モノトーン・黒帯ラベル・グレーの地・水・泡の質感写真・大きな番号・クリーム色マーカー
• 地の質感: マットなグレー地に、柔らかい影の商品物撮りと水面・泡のクローズアップ写真を重ねる。
• 形: 角のない黒い長方形ラベルと正円バッジが主役。カードの角丸はごく小さい。
• 温度感: やや冷たい無彩色。クリーム色のマーカーでわずかに温かみを足す。

Colors

• 地はグレー・明るいグレー・白の 3 段階を交互に使い、セクションを切り替える。
• 強調には黒の面（帯・円・ラベル）を使う。彩度の高い色は基本的に使わない。
• 本文中の強調語には、クリーム色のマーカーを文字の下半分に敷く。
• 淡いピンクと水色は、図解とアイコンの中だけに限定する。
• 比較表では自社側を黒、他社側をグレーにして明度差で優劣を示す。

Typography

• 見出しは太いゴシック体で、字間を 0.08〜0.1em と広めに取る。
• 和文見出しの下に、小さく字間の広い英字サブコピーを必ず添える。
• 本文は行間 2.0 以上でゆったり組み、左揃えにする。
• 特長番号は大きな欧文で書き、下に短い黒線を引く。
• 見出しの中の強調語は、カギ括弧かマーカーで囲う。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分タグは 2 列、無添加アイコンは 3〜4 列で並べる。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 24px（375px 幅換算）
• 見出しは左揃え、セクションの頭だけ中央揃えにする。
• 特長は「全幅の質感写真＋左下の大きな番号 → 見出し → 本文」の順で繰り返す。
• 比較表は画面幅いっぱいに置き、行の高さを揃える。
• 写真は画面の端まで裁ち落として置く。

Elevation & Depth

• 基本はフラットで、影を付けない。
• 商品の物撮りにだけ、柔らかく長い落ち影を付ける。
• 価格表カードには薄い影と細い枠を付ける。

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 10px。ボタンは角丸の長方形。
• 写真の切り抜き: 裁ち落としの長方形。人物写真は片側に寄せて置く。
• セクション境界: 直線で区切る。一部は下向きの V 字に切り込む。
• ラベルと帯は角丸なしの黒い長方形にする。
• 特長の要点は黒か白の正円にまとめる。
• FAQ の質問帯だけ小さな角丸を付ける。

Components

• 黒帯ラベル（black-band-label）: 白抜きの短い一文を載せる横長の黒帯。見出しや強調に使う。
• 円形の要点バッジ（circle-badge）: 黒い正円に 2〜4 字の要点を白文字で入れ、六角形状に並べる。
• 特長番号（feature-number）: 質感写真の左下に置く大きな 2 桁の番号。下に短い黒線を引く。
• 比較表（comparison-table）: 見出し列は黒、自社側の列は白地、他社側の列はグレー地にする。
• 成分タグ（ingredient-tag）: 黒い長方形に成分名を白文字で入れ、2 列で並べる。
• 無添加アイコン（free-from-icon）: 白い円に項目名を入れ、淡い水色の斜線を重ねる。
• STEP 番号（step-label）: 黒い正方形に STEP と数字を 2 段で入れる。
• FAQ アコーディオン（faq-accordion）: 黒い質問帯の右に細い下向き矢印を置き、回答は帯の下に地の上へ直接書く。
• マーカー強調（marker-text）: 強調語の下半分にクリーム色の帯を敷く。

Do's and Don'ts

Do - 色は無彩色を基本にし、黒の面でリズムを作る。 - 見出しには必ず英字のサブコピーを添える。 - 特長は番号付きの同じ型で繰り返す。 - 水・泡・ジェルの質感写真を区切りとして挟む。 - 強調語はクリーム色のマーカーだけで示す。

Don't - ビビッドな赤・ピンクのボタンや色付きの見出しを使わない。 - 角丸の大きいポップな形にしない。 - グラデーションの背景を多用しない。 - 本文の行間を詰めない。 - 装飾フォントや手書き文字を見出しに使わない。

Page Structure

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

1. ファーストビュー（商品の世界観と主な訴求を一目で伝える）: パッケージを斜めに並べた物撮りの上に、黒帯の白文字キャッチを 2 段で重ねる。その下に黒帯のロゴ行を置く。
2. 効果の要約（得られる効果を短く示す）: 白い円 3 つに小さな前置きの言葉と大きな 2〜3 字の効果を入れ、その下に大見出しとセット内容の写真を置く。
3. 開発者の想い（開発の背景を伝えて共感を得る）: グレー地の上に白いカードを置き、中央揃えの見出しと細線の下に長めの本文を書く。
4. 監修者の紹介（権威性を示す）: モノクロの人物写真の横に、イタリックの欧文名・和名・経歴を細線で区切って並べる。
5. 悩みの提起（肌の悩みの原因を図で説明する）: 人物写真と大見出しの下に、淡いピンクの肌断面図 2 枚と黒い吹き出しを置く。
6. 成分の訴求（核となる成分と 6 つの要点を示す）: 泡を散らしたグレー地に鉤括弧付きの大見出しを置き、中央の写真を黒い円 6 つで囲む。
7. 特長（番号付き）（特長を 5 つ順に説明する）: 全幅の質感写真に大きな番号を重ね、見出し・英字・本文・比較表・成分タグ・アイコンを続ける。
8. 価格の比較（他社より安いことを示す）: V 字で区切ったグレー地に、自社行を強調した価格比較表とコストを削った項目のアイコンを置く。
9. 使い方（手順をわかりやすく伝える）: 明るいグレー地に、黒い STEP 番号・線画のイラスト・説明文を縦に並べる。最後に枠線で囲んだ補足を置く。
10. よくある質問（購入前の不安をなくす）: 布の質感写真の地に、黒い質問帯と回答本文を交互に並べる。

Imagery

• 商品は白黒のパッケージを無地のグレー背景で撮り、強い斜光で長い影を落とす。
• 水面・泡・ジェルの寒色寄りのモノトーン写真を、全幅の区切りとして使う。
• 人物は白い服の自然光ポートレートにする。監修者はモノクロで撮る。
• 使い方の図は黒のペン線画で描き、手書きの温かみを出す。
• 図解は淡いピンクの肌断面と、丸いラベル付きの矢印で描く。
• グリーンを差し色に入れる場合は、ユーカリの葉の写真を一部に使う程度にする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に 750px 前後の SP 幅のカラムを置き、左右をグレーの余白にする。
• PC で横に広げる場合は、特長写真とテキストを左右 2 カラムにする。
• 成分タグは PC で 3 列、無添加アイコンは PC で 5 列に増やす。
• 見出しは PC で 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 行書くと起動時に読み込まれる。