--- version: alpha name: Monochrome Metallic Idol Color Contact LP description: 漆黒の地とヘアライン調のシルバーグレー面を交互に重ね、細い長体の欧文見出しと大きな人物アップ・瞳の拡大写真で見せる、K-POP系モデル起用のカラーコンタクトLP。装飾は細線の枠と白帯ラベル程度に絞ったクールなモノトーン構成。 colors: background: '#0F0F0F' primary: '#9B9799' background-alt: '#F3F3F5' dark-section: '#040403' on-dark: '#FFFFFF' text: '#020203' surface: '#FEFEFE' cta: '#FFFFFF' on-cta: '#181818' accent-1: '#F2E64B' text-muted: '#949494' line: '#6E6E6E' accent-2: '#C9B27A' typography: display: fontFamily: Oswald fontSize: 36px fontWeight: 600 lineHeight: 1.1 letterSpacing: 0.12em headline-lg: fontFamily: Oswald fontSize: 24px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.15em headline-md: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.05em accent: fontFamily: Oswald fontSize: 16px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.08em label-button: fontFamily: Oswald fontSize: 13px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0.2em rounded: sm: 0px md: 2px lg: 4px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 26px label-band: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 26px badge-limited: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 56px lens-feature-box: textColor: '{colors.on-dark}' typography: '{typography.accent}' height: 36px lens-circle: textColor: '{colors.text-muted}' typography: '{typography.note}' rounded: '{rounded.full}' height: 64px design-spec-list: textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 90px price-panel: backgroundColor: '{colors.dark-section}' textColor: '{colors.accent-2}' typography: '{typography.display}' height: 60px spec-table: backgroundColor: '{colors.background}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 120px --- # DESIGN.md — 黒×シルバーメタリックのアイドル系カラコンLP（Monochrome Metallic Idol Color Contact LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: クール・先進的、ラグジュアリー・ダーク、シンプル・ミニマル、力強い・インパクト - **キーワード**: モノトーン・メタリックシルバー・長体欧文・瞳のクローズアップ・アイドル起用・細線フレーム - **地の質感**: 黒のベタ面と、横方向のヘアライン（金属の擦り目）が入ったシルバーグレーのグラデ面 - **形**: 角のない四角い帯と細い1px枠。レンズの円形写真が唯一の曲線 - **温度感**: 冷たく無機質。肌と瞳の写真だけがわずかに温かい ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#0F0F0F` | メインの黒地 | 45% | 画素の実測 | | `primary` | `#9B9799` | ブランドのシルバーグレー（メタリック面） | 12% | 画素の主要色に補正 | | `background-alt` | `#F3F3F5` | コンセプト等の明るいグレー地 | 10% | 画素の実測 | | `dark-section` | `#040403` | 黒地に重ねる一段明るいパネル | 6% | 画素の実測 | | `on-dark` | `#FFFFFF` | 黒地上の見出し・本文 | 3% | 画素の実測 | | `text` | `#020203` | 明るい地の見出し文字 | 2% | 画素の実測 | | `surface` | `#FEFEFE` | コピーを載せる白帯ラベル | 2% | 画素の実測 | | `cta` | `#FFFFFF` | 購入ボタン帯（白地） | 1% | 画素の実測 | | `on-cta` | `#181818` | 購入ボタンの文字 | 0% | 画素の実測 | | `accent-1` | `#F2E64B` | 限定バッジ・強調のイエロー | 0% | 推定 | | `text-muted` | `#949494` | 注釈・カナ読みのグレー文字 | 1% | 画素の実測 | | `line` | `#6E6E6E` | 細線フレーム・区切り線 | 0% | 推定 | | `accent-2` | `#C9B27A` | 価格強調のゴールド | 0% | 推定 | - 地は黒ベタとシルバーメタリック面をシリーズ単位で交互に切り替える - 明るいグレー地はコンセプト・キャンペーンなど区切りの章だけに使う - 有彩色は写真（肌・瞳）に任せ、UIはほぼ無彩色に留める - 強調は白帯ラベル×黒文字の反転で作る - イエローは数量限定などのバッジに限定、ゴールドは価格数字のみ - 細線は白〜グレーの1pxで、塗りの代わりに枠で囲む ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 商品名・シリーズ名の大見出し | 欧文サンセリフ | Oswald | 600 | 36px | 1.1 | 0.12em | | `headline-lg` | 章見出し（英字大文字） | 欧文サンセリフ | Oswald | 500 | 24px | 1.2 | 0.15em | | `headline-md` | 和文のキャッチ見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.04em | | `headline-sm` | デザイン要素の小見出し | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.02em | | `body-md` | 商品説明の本文 | ゴシック | Noto Sans JP | 400 | 11px | 1.8 | 0.03em | | `note` | 注釈・撮影条件・カナ読み | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.05em | | `accent` | スペック数値・縦書きの英字ラベル | 欧文サンセリフ | Oswald | 500 | 16px | 1.2 | 0.08em | | `label-button` | 購入ボタン文字 | 欧文サンセリフ | Oswald | 500 | 13px | 1.0 | 0.2em | - 英字見出しは長体・大文字・広めの字間 - Oの代わりに斜線入りØを使ってブランドらしさを出す - 英字見出しの下に小さなカナ読みを添える - 和文は太ゴシックで短く、中央揃え - 本文は小さめ・行間広めで左揃え - 要素を「×」でつなぐ3語のコピーを白帯に載せる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カラー一覧やスマホ撮影写真は 2〜3 列グリッド - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - 人物写真は全幅で区切りに使う - 商品ごとに「人物→レンズ画像→キャッチ→説明＋写真→ハイライト→比較写真2枚」の型を繰り返す - 説明文は左テキスト・右写真の2列 - スペック表は細線の格子 - レンズ画像は細線のL字枠で一部を囲む ## Elevation & Depth - 基本は影なしのフラット - 商品パッケージのみ床に落ちる柔らかい影 - レンズ画像は下に淡い反射を付ける ## Shapes - **角丸**: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。 - **写真の切り抜き**: 人物は全幅の矩形、レンズは円形の切り抜き、瞳は横長矩形 - **セクション境界**: 直線で背景色を切り替える - 角丸は使わない - 枠は1pxの細線 - 円形はレンズと限定バッジのみ - 斜め・波形の区切りは使わない ## Components - **購入ボタン帯**（`button-primary`）: 白い横長帯に英字大文字と右向き矢印線 - **白帯コピーラベル**（`label-band`）: 全幅の白帯に「A×B×C」の3語コピー - **数量限定バッジ**（`badge-limited`）: イエローの円に黒の2行文字と小さな英字 - **機能ロゴ枠**（`lens-feature-box`）: 白い細線の矩形枠に英字ロゴ、下に和文補足 - **レンズ円形画像**（`lens-circle`）: 白縁付きの円形レンズ写真と下のカナ読み - **レンズ構造の解説**（`design-spec-list`）: 小さな英字ラベル＋太字の和文＋説明の3段 - **価格パネル**（`price-panel`）: 取り消し線の通常価格と大きな特価を山括弧で接続 - **度数一覧表**（`spec-table`）: 黒地に細線格子、見出しセルはメタリック ## Do's and Don'ts **Do** - 無彩色を基本にし、色は写真に任せる - 英字見出しは長体・大文字・広めの字間で統一 - 商品紹介ブロックは同じ型で繰り返す - 瞳の写真は撮影条件を小さく添える - 縦書きの英字ラベルやバーコード風の装飾で雑誌っぽさを出す **Don't** - 丸ゴシックやパステル色を使わない - ボタンを角丸やグラデーションにしない - 影を強くしない - イエローを広い面で使わない - 長い和文の段落を並べない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（モデルとブランドの世界観を示す）: 4分割の顔アップ写真、中央にロゴ、下にレンズ並びとスペック帯 2. **コンセプト**（ブランドの思想を伝える）: 明るいグレー地に英字見出し、短いコピー、全身の集合写真 3. **ラインナップ**（シリーズ全体を一覧する）: 黒地にレンズ並び、機能ロゴ、シリーズごとの瞳写真2列グリッド 4. **キャンペーン**（限定セット・特典で購入を促す）: 黒パネルに特典写真、価格パネル、白帯の購入ボタン。メタリック面の特典バナーが続く 5. **シリーズ紹介**（シリーズのコンセプトとレンズ構造を説明する）: 英字見出し＋白帯コピー、円形レンズ3つ、構造解説リスト 6. **商品詳細**（カラーごとの魅力を伝える）: 全幅の人物写真に英字の名前、円形レンズ、キャッチ、説明と瞳写真 7. **着用写真**（着けた時の印象を見せる）: 人物写真2枚を縦に重ね、端に縦書き英字 8. **カラーチャート**（色味を比較させる）: 細線の格子に色系統の列と寒暖の縦軸、レンズを配置 9. **スペック・機能**（技術的な特長を説明する）: 機能ロゴ、図解、POINT枠、細線で区切った2列の機能説明 10. **度数表・品質**（安心感を補う）: 格子状の度数表、英字見出し＋パッケージ写真と説明 11. **エンディング**（世界観で締める）: モデルの顔を並べた全幅写真、メタリック地にモデル紹介とロゴ ## Imagery - グレー背景のスタジオで撮った冷たい光の人物アップ - 黒い衣装とシルバーのアクセサリーで統一 - 瞳の超接写を横長に切り抜き、まつ毛まで見せる - レンズ単体は円形に切り抜き、下に反射 - バーコード風の線や小さな英字コピーを装飾に使う - パッケージは浮かせて床に影を落とす - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はSPの縦長構成を中央に固定幅で置く想定 - PC で広げる時は人物写真を左右2分割にする - 瞳写真グリッドは3〜4列に広げる - 英字見出しは1.5倍程度に拡大し字間は保つ ## 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-e8171db7`（元 LP の URL から採番） - **元 LP**: https://www.candymagic.jp/type/se_other1d/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。