--- version: alpha name: Monochrome Celebrity Collaboration Skincare LP description: 淡いブルーグレーの地と漆黒の地を交互に重ねる、モノクロ基調のコラボ化粧品 LP。2 つの商品ラインを「白×金」と「黒×銀」で対比させる。細い欧文の大文字、明朝体の見出し、円形に切り抜いた人物写真、暗いグラデーションの商品カードで上品にまとめている。 colors: primary: '#000000' background: '#D6DBDF' background-alt: '#F3F4F4' surface: '#3C3C3C' dark-section: '#444444' text: '#161615' on-dark: '#EEEEEE' accent-1: '#ABA24F' text-muted: '#8A8A8A' line: '#9A9A9A' cta: '#333333' on-cta: '#F0F2F3' tint-1: '#333333' typography: display: fontFamily: Josefin Sans fontSize: 72px fontWeight: 300 lineHeight: 1.0 letterSpacing: 0.02em headline-lg: fontFamily: Shippori Mincho fontSize: 36px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.02em headline-md: fontFamily: Montserrat fontSize: 18px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.25em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.8 letterSpacing: 0.1em body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.03em accent: fontFamily: Josefin Sans fontSize: 34px fontWeight: 300 lineHeight: 1.1 label-button: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.1em rounded: sm: 4px md: 8px lg: 24px full: 999px spacing: unit: 8px card: 24px section: 100px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' nav-pill: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 22px product-card-dark: backgroundColor: '{colors.surface}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 420px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 18px count-circle: textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 64px badge-gold-frame: textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' height: 20px date-label: textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 18px button-sns: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 32px notice-box: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 200px ingredient-callout: textColor: '{colors.text}' typography: '{typography.note}' height: 30px --- # DESIGN.md — 白銀×漆黒の男性タレントコラボ化粧品 LP（Monochrome Celebrity Collaboration Skincare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 上品・高級、ラグジュアリー・ダーク、クール・先進的、シンプル・ミニマル - **キーワード**: モノクロ対比・水面テクスチャ・細字欧文・明朝見出し・円形切り抜き・ダークカード - **地の質感**: 水面の揺らぎや煙のような背景写真の上に、マットな単色面を重ねる。光沢感は商品写真の中だけにとどめる。 - **形**: 角丸カード、円形の写真窓、細い線の円や枠。直線的で余白が多い。 - **温度感**: 寒色寄りのニュートラル。金色の文字だけがわずかな温かみを添える。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#000000` | ブランドの黒・ロゴと暗いセクションの地 | 22% | 画素の実測 | | `background` | `#D6DBDF` | 明るいセクションのブルーグレー地 | 16% | 画素の実測 | | `background-alt` | `#F3F4F4` | 水面テクスチャ部分の明るい地 | 10% | 画素の実測 | | `surface` | `#3C3C3C` | ダーク商品カードの面 | 7% | 画素の実測 | | `dark-section` | `#444444` | キャンペーン帯のチャコールグレー地 | 8% | 画素の実測 | | `text` | `#161615` | 明るい地の上の見出し・本文の文字 | 2% | 画素の主要色に補正 | | `on-dark` | `#EEEEEE` | 暗い地の上の白文字 | 2% | 画素の実測 | | `accent-1` | `#ABA24F` | 明るいライン側の金色の見出しとバッジ枠 | 1% | 画素の実測 | | `text-muted` | `#8A8A8A` | 注釈と、カミングスーン表示のグレー文字 | 1% | 推定 | | `line` | `#9A9A9A` | 細い区切り線、円枠、ボタン枠 | 1% | 推定 | | `cta` | `#333333` | 購入ボタンの面（透明に近いダーク） | 1% | 画素の実測 | | `on-cta` | `#F0F2F3` | 購入ボタン上の文字 | 0% | 画素の主要色に補正 | | `tint-1` | `#333333` | カミングスーン枠の暗いグレー面 | 1% | 画素の実測 | - 明るいブルーグレーの地と、黒・チャコールの地をセクションごとに交互に置く。 - 2 つの商品ラインは「白×金」と「黒×銀」で色分けする。 - 金色は明るいラインの見出しとキャンペーンのバッジ枠だけに使う。 - 購入ボタンは目立つ色にしない。暗いカードの上に、細いグレー枠のピル型ボタンを置く。 - 原色や彩度の高い色は使わない。色味は商品写真と動画のサムネイルに任せる。 - 暗い地の上では、白文字と淡いグレーの線でコントラストを確保する。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 背景に敷く巨大な欧文の商品ライン名（細字、半透明） | 欧文サンセリフ | Josefin Sans | 300 | 72px | 1.0 | 0.02em | | `headline-lg` | 効果を伝える明朝体の大見出し | 明朝 | Shippori Mincho | 500 | 36px | 1.3 | 0.02em | | `headline-md` | 字間を広げた欧文のセクション見出し | 欧文サンセリフ | Montserrat | 600 | 18px | 1.3 | 0.25em | | `headline-sm` | キャンペーン概要などの和文の太字見出し | ゴシック | Noto Sans JP | 700 | 15px | 1.8 | 0.1em | | `body-md` | コンセプト文、商品情報の本文 | ゴシック | Noto Sans JP | 500 | 11px | 2.0 | 0.05em | | `note` | ※付きの注釈 | ゴシック | Noto Sans JP | 400 | 8px | 1.6 | 0.03em | | `accent` | 成分名の欧文、セット区分を示す細字の欧文ラベル | 欧文サンセリフ | Josefin Sans | 300 | 34px | 1.1 | 0.0em | | `label-button` | 小さなピル型ボタンの文字 | ゴシック | Noto Sans JP | 700 | 9px | 1.0 | 0.1em | - 欧文の見出しは大文字にし、字間を 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-f3698971`（元 LP の URL から採番） - **元 LP**: https://rism-official.jp/rism_special2025/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。