DESIGN.md — 白銀×漆黒の男性タレントコラボ化粧品 LP（Monochrome Celebrity Collaboration Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、ラグジュアリー・ダーク、クール・先進的、シンプル・ミニマル
• キーワード: モノクロ対比・水面テクスチャ・細字欧文・明朝見出し・円形切り抜き・ダークカード
• 地の質感: 水面の揺らぎや煙のような背景写真の上に、マットな単色面を重ねる。光沢感は商品写真の中だけにとどめる。
• 形: 角丸カード、円形の写真窓、細い線の円や枠。直線的で余白が多い。
• 温度感: 寒色寄りのニュートラル。金色の文字だけがわずかな温かみを添える。

Colors

• 明るいブルーグレーの地と、黒・チャコールの地をセクションごとに交互に置く。
• 2 つの商品ラインは「白×金」と「黒×銀」で色分けする。
• 金色は明るいラインの見出しとキャンペーンのバッジ枠だけに使う。
• 購入ボタンは目立つ色にしない。暗いカードの上に、細いグレー枠のピル型ボタンを置く。
• 原色や彩度の高い色は使わない。色味は商品写真と動画のサムネイルに任せる。
• 暗い地の上では、白文字と淡いグレーの線でコントラストを確保する。

Typography

• 欧文の見出しは大文字にし、字間を 0.2em 以上広げる。
• 和文の大見出しは明朝体にし、コラボ相手の名前や効果の訴求に使う。
• 本文は小さめのゴシック体で、行間 2.0 前後をとり余白を多く見せる。
• 商品ライン名の巨大な欧文は、細字かグラデーションで背景に溶け込ませる。
• 注釈番号は上付きの※数字で表し、該当ブロックの直下に小さくまとめる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品カードと動画も縦に並べる。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 100px、基本単位 8px、カード内 24px（375px 幅換算）
• コンセプト文は左揃えにし、左右に広い余白をとる。
• キャンペーン情報は中央揃えにし、細い区切り線で分ける。
• 商品カードはセット区分の欧文ラベルの直下に置く。ラベルはカードの上に一部重ねる。
• 写真は画面幅いっぱいに置いて、テキストブロックの間をつなぐ。
• 人物の円形写真は、商品写真と巨大な欧文の間に重ねて配置する。

Elevation & Depth

• 影はほぼ使わない。商品パッケージの写真にだけ、柔らかい落ち影を付ける。
• ダークカードは、上から下へ明るくなるグラデーションで奥行きを出す。
• テクスチャ背景の上に単色の面をずらして重ね、レイヤー感を出す。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 人物写真は大きな円か、画面幅いっぱいの長方形で切り抜く。動画サムネイルは角丸 4px。
• セクション境界: 直線で色の地を切り替える。一部のパネルは右端を少し空け、ずらして重ねる。
• 商品カードは角丸 24px のダーク面にする。
• 特典の枚数は細い白線の円の中に、明朝体の大きな数字で表す。
• 日付ラベルは細い白線の四角い枠で囲む。
• 動画の見出しには、細い線の半円をあしらう。

Components

• ページ内ナビ（nav-pill）: 淡いグレーのピル型の帯。欧文の大文字と下向き矢印を 3 つ並べる。
• 商品購入カード（product-card-dark）: 角丸のダークグラデーション面に、商品写真、特典枚数の円、商品名、価格、購入ボタンを縦に並べる。
• 購入ボタン（button-primary）: 細いグレー枠の小さなピル型ボタン。文字の右に三角アイコンを付ける。
• 特典枚数の円（count-circle）: 白線の円の中に、小さなラベルと明朝体の大きな数字を入れる。
• 当選数バッジ（badge-gold-frame）: 金色の細い枠と金色の文字で、抽選の条件を囲む。
• 期間ラベル（date-label）: 白線の四角枠でキャンペーンの段階を示し、下に日付を大きめに置く。
• SNS 誘導ボタン（button-sns）: 黒地に角丸 8px。文字の右に SNS のロゴを置く。
• お知らせ枠（notice-box）: 黒地を白の細線で囲む。見出しは中央揃え、箇条書きは●で示す。
• 成分の引き出し線（ingredient-callout）: 商品写真から斜めの細線を引き、欧文と和文の成分名を添える。

Do's and Don'ts

Do - 明るい地のセクションと暗い地のセクションを交互に置き、2 つのラインの対比を見せる。 - 商品ライン名は巨大な細字欧文にして背景に敷き、写真と重ねる。 - 人物写真はモノトーン寄りの背景で撮り、円形か画面幅いっぱいで見せる。 - 余白を広く取り、テキストは短い行で改行する。 - 購入ボタンは控えめなピル型で統一する。

Don't - 赤やオレンジなど、彩度の高い CTA 色を使わない。 - 太いゴシック体を大きく並べて、セール感を出さない。 - 装飾アイコンやイラストを多用しない。 - 強いドロップシャドウや立体的なボタンを使わない。 - 明るいラインと暗いラインの配色を混ぜない。

Page Structure

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

1. ファーストビュー（コラボ相手と 2 つの商品ラインを印象づける）: 上段は明るい背景の人物と白系パッケージ、下段は暗い背景の人物と黒系パッケージで上下に対比させる。ロゴ×人名と、巨大な欧文を重ねる。
2. ページ内ナビ（主要セクションへ誘導する）: ピル型の帯に欧文の大文字のリンクを 3 つ並べる。
3. コンセプト（ブランドの想いを伝える）: ブルーグレーの地に、ロゴ×明朝体の人名を置く。左揃えの短文を数段落並べ、下に人物写真を置く。
4. ビジュアル帯（世界観に浸らせる）: 口元や目元をクローズアップしたモノクロ寄りの写真を、画面幅いっぱいに縦に連ねる。
5. 商品紹介（2 つのラインの特徴を示す）: 水面テクスチャの上に、商品写真、成分の引き出し線、巨大な欧文、円形の人物写真、明朝体の効果見出しを順に置く。
6. 購入特典（購入特典と期間を告知する）: 煙状の暗い背景に、中央揃えの見出し、区切り線、枠付きの期間ラベル、特典カードの写真を置く。
7. お知らせ（予約販売の情報を伝える）: 白い細線の枠の中に、箇条書きでまとめる。
8. 商品購入（セットと単品の購入へ誘導する）: セット区分の細字欧文ラベルを置き、ダークカードに特典枚数の円、価格、ピル型ボタンを入れる。
9. キャンペーン（SNS のプレゼント企画へ誘導する）: チャコールのグラデーション地に、金色の欧文見出し、金枠のバッジ、締切日、黒の SNS ボタンを置く。
10. 動画（スペシャル動画とメイキングを見せる）: 黒地に、水滴の写真の装飾、欧文見出し、再生アイコン付きのサムネイル、公開予定の枠を置く。
11. プロフィール（起用タレントを紹介する）: ブルーグレーの地に角丸の写真、欧文の小見出し、明朝体の名前、本文を置く。
12. フッター（ブランドへの導線とサイトリンク）: ダークグレーの面にロゴ、円形の SNS アイコン、ページトップへのリンクを置く。その下の黒地に、欧文大文字のリンク一覧とコピーライトを並べる。

Imagery

• 人物は白か黒の服で、グレーのグラデーション背景の前に立たせ、スタジオで撮影する。
• 肌の質感がわかる、口元や目元のクローズアップを入れる。
• 背景には、光が揺らぐ水面や、煙のようなモノクロのテクスチャを使う。
• 商品パッケージは斜めに置き、柔らかい影を付ける。
• 黒い液体の波紋や水滴の写真を、暗いセクションの隅に装飾として置く。
• 人物がシートマスクを手に持つカットを、円形に切り抜く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC のファーストビューは、明るい写真と暗い写真を左右に分割して並べる。
• PC のコンセプトは、左に人物写真、右にテキストの 2 カラムにする。
• PC の商品紹介は、商品写真と円形の人物写真を左右交互に配置する。
• PC の単品カードは 2 列に並べ、セットカードは横長にする。
• PC の動画は、サムネイルと見出しを左右交互に置き、コメント動画は 3 列に並べる。
• PC のコンテンツ幅は約 70% の中央寄せにし、背景は全幅にする。

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