--- version: alpha name: Monochrome Idol Collaboration Cosmetics LP description: モノクロのポートレート写真と黒いチャコールの面を軸にした、男性アイドルとのコラボ用ファンデーション LP。ベージュのファンデの質感と金のロゴを差し色に使う。セリフ体の大きな欧文、細い罫線、四角いボタンで、ファッション誌のような上品な雰囲気にまとめている。 colors: primary: '#222222' background: '#F3F3F3' dark-section: '#333333' surface: '#2D2D2D' on-dark: '#F7F7F7' text: '#060606' text-muted: '#868787' line: '#4E4D4E' accent-1: '#F2C99B' accent-2: '#BFA06A' background-alt: '#E6E6E7' cta: '#FFFFFF' on-cta: '#222222' typography: display: fontFamily: Playfair Display fontSize: 64px fontWeight: 400 lineHeight: 1.0 headline-lg: fontFamily: Playfair Display fontSize: 44px fontWeight: 400 lineHeight: 1.0 headline-md: fontFamily: Noto Serif JP fontSize: 20px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.05em headline-sm: fontFamily: Montserrat fontSize: 18px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.03em body-lg: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 2.6 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Playfair Display fontSize: 22px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0.02em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 16px section: 72px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-buy: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.body-md}' height: 36px movie-tag: backgroundColor: '{colors.on-dark}' textColor: '{colors.text}' height: 22px numbered-list: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 44px feature-heading: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 70px icon-circle: backgroundColor: '{colors.surface}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 165px ingredient-row: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 46px color-table: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 95px movie-card: backgroundColor: '{colors.surface}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 260px floating-buy: backgroundColor: '{colors.surface}' textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 44px --- # DESIGN.md — モノクロ×ゴールドのアイドルコラボ化粧品 LP（Monochrome Idol Collaboration Cosmetics LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 上品・高級、ラグジュアリー・ダーク、クール・先進的、シンプル・ミニマル - **キーワード**: モノクロ写真・チャコール地・ベージュの質感・セリフ欧文・細罫線・エディトリアル - **地の質感**: マットな黒とライトグレーの平面に、白黒写真や製品の光沢、ファンデのクリーム状の質感を重ねる - **形**: 角丸なしの四角が基本。機能アイコンだけ大きな円形の面にする - **温度感**: クールで無彩色。ベージュと金だけがほのかな温かみを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#222222` | ブランドの基調になるチャコール | 45% | 画素の実測 | | `background` | `#F3F3F3` | 明るいセクションの地 | 12% | 画素の実測 | | `dark-section` | `#333333` | メッセージ帯などに使う一段明るい黒 | 10% | 画素の実測 | | `surface` | `#2D2D2D` | 機能アイコンの円と動画カードの面 | 6% | 画素の実測 | | `on-dark` | `#F7F7F7` | 暗い地に乗せる白文字 | 2% | 画素の主要色に補正 | | `text` | `#060606` | 明るい地の見出しと本文 | 2% | 画素の実測 | | `text-muted` | `#868787` | 注釈と縦書きの名前 | 1% | 画素の主要色に補正 | | `line` | `#4E4D4E` | リストの区切りとボタン枠の罫線 | 0% | 画素の主要色に補正 | | `accent-1` | `#F2C99B` | ファンデのベージュ（質感写真・色見本） | 4% | 画素の実測 | | `accent-2` | `#BFA06A` | ロゴと製品の金 | 0% | 推定 | | `background-alt` | `#E6E6E7` | 撮影スタジオ風の淡いグレー地 | 8% | 画素の主要色に補正 | | `cta` | `#FFFFFF` | 購入ボタン（白地に黒い枠線） | 0% | 画素の実測 | | `on-cta` | `#222222` | 購入ボタンの文字 | 0% | 画素の主要色に補正 | - ページの約7割はチャコール #222 系の暗い地にし、メンバー紹介と製品紹介だけ明るいグレー地へ切り替える - 写真はすべてモノクロにそろえ、色はファンデのベージュと製品の金だけに絞る - 暗い地のボタンは透明にして白い細枠を付ける。明るい地のボタンは白地に黒い細枠を付ける - 原色や彩度の高い色は使わない。コラボ相手のロゴ色のような点の色は例外とする - 注釈は暗い地ではグレー #8A8A8A の小さな文字にする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ブランド名や MOVIE などの大きな欧文 | 欧文セリフ | Playfair Display | 400 | 64px | 1.0 | 0.0em | | `headline-lg` | 特長番号 01・02 の数字 | 欧文セリフ | Playfair Display | 400 | 44px | 1.0 | 0.0em | | `headline-md` | 特長見出しとキャッチの和文明朝 | 明朝 | Noto Serif JP | 500 | 20px | 1.4 | 0.05em | | `headline-sm` | 製品名の欧文サンセリフ | 欧文サンセリフ | Montserrat | 500 | 18px | 1.2 | 0.02em | | `body-md` | 本文・リスト | ゴシック | Noto Sans JP | 500 | 13px | 1.8 | 0.03em | | `body-lg` | メッセージ文（中央揃え・行間広め） | ゴシック | Noto Sans JP | 700 | 13px | 2.6 | 0.05em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.0em | | `accent` | 写真の脇に縦書きで入れる英字の名前 | 欧文セリフ | Playfair Display | 400 | 22px | 1.0 | 0.02em | - 欧文はセリフ体を大きく、和文見出しは明朝にしてエディトリアルな印象を出す - 番号の数字はセリフ体で大きくし、右側に明朝の見出しを 2〜3 行で並べる - 本文はゴシックで小さめにし、行間を広く取る - メッセージ文は中央揃えにし、短い行を積み重ねる - 人名は写真の外側に縦書きのグレーの英字セリフで入れる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真は 2 列グリッド、機能アイコンは 2 列×3 段 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算） - 写真は左右の余白なしの全幅、または左右 16px の余白で置く - メンバー写真は左右にずらして交互に配置し、縦書きの名前を添える - リストは上下の細い罫線で区切った行にし、左に項目名、右に効果を置く - セクションの間は 60〜90px と大きく空ける ## Elevation & Depth - 影は使わず、フラットな面の重なりだけで奥行きを出す - 製品の切り抜きやファンデの塗り跡を写真の上に浮かせて重ねる ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸なしの長方形。人物は肩上か胸上のポートレートで、写真を横にずらしたスライス表現も使う - **セクション境界**: 直線で背景色を切り替える - ボタンとカードは角丸なしにし、1px の細枠を付ける - 機能アイコンだけ大きな円形の面にする - 装飾には細い線のアイコンを使う ## Components - **購入ボタン**（`button-buy`）: 四角い細枠のボタン。左にテキスト、右にカートアイコンを置く - **動画ラベル**（`movie-tag`）: 写真の右下に重ねる白い帯。英字と再生の三角を入れる - **番号付き罫線リスト**（`numbered-list`）: 罫線で区切った行に、グレーのセリフ数字と白い見出しを並べる - **特長見出し**（`feature-heading`）: 大きなセリフ数字の右に明朝の 2〜3 行見出しを置く - **機能アイコン円**（`icon-circle`）: 大きな円の中に線のアイコンと 2 行のラベルを入れ、2 列で並べる - **成分表の行**（`ingredient-row`）: 左に成分名を太字、右に効果を小さく置き、行の間を罫線で区切る - **色展開ボックス**（`color-table`）: 細枠の箱にラベルと 4 色の見本を並べ、下の段に購入を置く - **動画カード**（`movie-card`）: 上に写真、下に灰黒の面を置き、セリフのタイトル・尺・説明を入れる - **追従購入バナー**（`floating-buy`）: 右下に固定する小さなパネル。製品写真・商品名・購入を入れる ## Do's and Don'ts **Do** - 写真はモノクロ・高コントラストのスタジオ撮影にそろえる - 色の差し色はファンデのベージュと金だけにする - 大きなセリフ欧文と明朝で誌面のような品を出す - 暗い地と明るい地を交互に切り替えてリズムを作る - 線は 1px の細いものだけを使う **Don't** - 角丸のボタンや塗りの派手な CTA を置かない - カラー写真や彩度の高い色を混ぜない - ドロップシャドウやグラデーションのボタンを使わない - 太いゴシックの大見出しで押し付けがましくしない - 装飾的なイラストやアイコンを多用しない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コラボ相手を印象付ける）: モノクロのポートレートを 2 列のグリッドに敷き詰め、明朝のキャッチとロゴの掛け合わせを重ねる 2. **製品帯**（商品と購入導線を示す）: 白地にロゴ・商品名・タグ文を置き、右に製品の切り抜き写真、左下に細枠の購入ボタンを置く 3. **動画とメッセージ**（コラボの想いを伝える）: 暗い地に集合写真と動画ラベルを置き、その下に明朝の見出しと中央揃えの本文を続ける 4. **製品紹介**（商品の概要を伝える）: 明るいグレー地に大きな製品写真、欧文の商品名、短い説明、購入ボタンを並べる 5. **ブランドの約束**（ブランドの価値を示す）: 暗い地にロゴと見出しを置き、番号付きの罫線リスト、製品群の写真、ラインナップへのボタンを続ける 6. **メンバー紹介**（ファンの関心を引く）: 淡いスタジオ風の地に写真を左右交互にずらして置き、縦書きの英字名と製品の切り抜きを散らす 7. **商品詳細と色展開**（色の選択と購入を促す）: 製品とファンデの塗り跡の写真に大きなロゴを重ね、下に色見本の表を置く 8. **特長 01**（機能を伝える）: 6 つの円アイコンを 2 列で並べ、下に注釈を入れる 9. **特長 02**（仕上がりを伝える）: 肌のアップ写真とファンデの質感写真の下に、それぞれ箇条書きを置く 10. **特長 03**（成分を説明する）: 暗い製品写真の後に成分の罫線表を置く 11. **動画一覧**（コンテンツへ誘導する）: 淡くしたポートレートのコラージュの地に MOVIE の見出しと動画カードを縦に並べる 12. **シェア・フッター**（SNS で拡散してもらう）: グレー地を 2 分割し、SNS アイコン付きのシェアボタンを置く ## Imagery - 人物はグレー背景のスタジオで撮り、手を顔に添えるポーズのモノクロ高コントラスト写真にする - 製品は黒と金のコンパクトを白地か黒地で斜め上から撮り、光沢を見せる - ファンデのクリームは塗り跡やうねりをマクロで撮り、切り抜いて装飾に使う - 背景には窓の光と影が落ちた淡いグレーのスタジオ風写真を使う - 写真を水平にスライスしてずらすグリッチ風の表現を加える - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は 2〜3 カラムにし、テキストと写真を左右に並べる - PC では写真ブロックを互い違いにずらして重ね、雑誌のような変則グリッドにする - 機能アイコンは PC で 3 列にする - PC ではメンバー写真を左右により大きくずらし、縦書きの名前を大きくする - 追従購入バナーは PC では右下の円形パネルにする ## 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-2a3b43f3`（元 LP の URL から採番） - **元 LP**: https://harias.jp/imp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（7/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。