黒×シルバーメタリックのアイドル系カラコンLP

Monochrome Metallic Idol Color Contact LP

漆黒の地とヘアライン調のシルバーグレー面を交互に重ね、細い長体の欧文見出しと大きな人物アップ・瞳の拡大写真で見せる、K-POP系モデル起用のカラーコンタクトLP。装飾は細線の枠と白帯ラベル程度に絞ったクールなモノトーン構成。

化粧品・スキンケアクール・先進的ラグジュアリー・ダークシンプル・ミニマル力強い・インパクトSP

ダウンロード

Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます（ツール別の使い方）。

COLORS

配色

地は黒ベタとシルバーメタリック面をシリーズ単位で交互に切り替える
明るいグレー地はコンセプト・キャンペーンなど区切りの章だけに使う
有彩色は写真（肌・瞳）に任せ、UIはほぼ無彩色に留める
強調は白帯ラベル×黒文字の反転で作る
イエローは数量限定などのバッジに限定、ゴールドは価格数字のみ
細線は白〜グレーの1pxで、塗りの代わりに枠で囲む

TYPOGRAPHY

書体

display商品名・シリーズ名の大見出し欧文サンセリフ／ Oswald 600 ／ 36px ／行間 1.1

あなたの LP を、もっと伝わる形に。Aa 123

headline-lg章見出し（英字大文字）欧文サンセリフ／ Oswald 500 ／ 24px ／行間 1.2

あなたの LP を、もっと伝わる形に。Aa 123

headline-md和文のキャッチ見出しゴシック／ Noto Sans JP 700 ／ 17px ／行間 1.5

あなたの LP を、もっと伝わる形に。Aa 123

headline-smデザイン要素の小見出しゴシック／ Noto Sans JP 700 ／ 14px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

body-md商品説明の本文ゴシック／ Noto Sans JP 400 ／ 11px ／行間 1.8

あなたの LP を、もっと伝わる形に。Aa 123

note注釈・撮影条件・カナ読みゴシック／ Noto Sans JP 400 ／ 9px ／行間 1.6

あなたの LP を、もっと伝わる形に。Aa 123

accentスペック数値・縦書きの英字ラベル欧文サンセリフ／ Oswald 500 ／ 16px ／行間 1.2

あなたの LP を、もっと伝わる形に。Aa 123

label-button購入ボタン文字欧文サンセリフ／ Oswald 500 ／ 13px ／行間 1.0

あなたの LP を、もっと伝わる形に。Aa 123

英字見出しは長体・大文字・広めの字間
Oの代わりに斜線入りØを使ってブランドらしさを出す
英字見出しの下に小さなカナ読みを添える
和文は太ゴシックで短く、中央揃え
本文は小さめ・行間広めで左揃え
要素を「×」でつなぐ3語のコピーを白帯に載せる

PAGE STRUCTURE

セクション構成

ファーストビューモデルとブランドの世界観を示す4分割の顔アップ写真、中央にロゴ、下にレンズ並びとスペック帯
コンセプトブランドの思想を伝える明るいグレー地に英字見出し、短いコピー、全身の集合写真
ラインナップシリーズ全体を一覧する黒地にレンズ並び、機能ロゴ、シリーズごとの瞳写真2列グリッド
キャンペーン限定セット・特典で購入を促す黒パネルに特典写真、価格パネル、白帯の購入ボタン。メタリック面の特典バナーが続く
シリーズ紹介シリーズのコンセプトとレンズ構造を説明する英字見出し＋白帯コピー、円形レンズ3つ、構造解説リスト
商品詳細カラーごとの魅力を伝える全幅の人物写真に英字の名前、円形レンズ、キャッチ、説明と瞳写真
着用写真着けた時の印象を見せる人物写真2枚を縦に重ね、端に縦書き英字
カラーチャート色味を比較させる細線の格子に色系統の列と寒暖の縦軸、レンズを配置
スペック・機能技術的な特長を説明する機能ロゴ、図解、POINT枠、細線で区切った2列の機能説明
度数表・品質安心感を補う格子状の度数表、英字見出し＋パッケージ写真と説明
エンディング世界観で締めるモデルの顔を並べた全幅写真、メタリック地にモデル紹介とロゴ

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黒地に細線格子、見出しセルはメタリック

守ること

無彩色を基本にし、色は写真に任せる
英字見出しは長体・大文字・広めの字間で統一
商品紹介ブロックは同じ型で繰り返す
瞳の写真は撮影条件を小さく添える
縦書きの英字ラベルやバーコード風の装飾で雑誌っぽさを出す

DON'T

避けること

丸ゴシックやパステル色を使わない
ボタンを角丸やグラデーションにしない
影を強くしない
イエローを広い面で使わない
長い和文の段落を並べない

DESIGN.MD

design.md 全文

読みやすい形で表示する

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 独自の章。上から順に、カッコ内が各セクションの役割。

ファーストビュー（モデルとブランドの世界観を示す）: 4分割の顔アップ写真、中央にロゴ、下にレンズ並びとスペック帯
コンセプト（ブランドの思想を伝える）: 明るいグレー地に英字見出し、短いコピー、全身の集合写真
ラインナップ（シリーズ全体を一覧する）: 黒地にレンズ並び、機能ロゴ、シリーズごとの瞳写真2列グリッド
キャンペーン（限定セット・特典で購入を促す）: 黒パネルに特典写真、価格パネル、白帯の購入ボタン。メタリック面の特典バナーが続く
シリーズ紹介（シリーズのコンセプトとレンズ構造を説明する）: 英字見出し＋白帯コピー、円形レンズ3つ、構造解説リスト
商品詳細（カラーごとの魅力を伝える）: 全幅の人物写真に英字の名前、円形レンズ、キャッチ、説明と瞳写真
着用写真（着けた時の印象を見せる）: 人物写真2枚を縦に重ね、端に縦書き英字
カラーチャート（色味を比較させる）: 細線の格子に色系統の列と寒暖の縦軸、レンズを配置
スペック・機能（技術的な特長を説明する）: 機能ロゴ、図解、POINT枠、細線で区切った2列の機能説明
度数表・品質（安心感を補う）: 格子状の度数表、英字見出し＋パッケージ写真と説明
エンディング（世界観で締める）: モデルの顔を並べた全幅写真、メタリック地にモデル紹介とロゴ

Imagery

グレー背景のスタジオで撮った冷たい光の人物アップ
黒い衣装とシルバーのアクセサリーで統一
瞳の超接写を横長に切り抜き、まつ毛まで見せる
レンズ単体は円形に切り抜き、下に反射
バーコード風の線や小さな英字コピーを装飾に使う
パッケージは浮かせて床に影を落とす
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC はSPの縦長構成を中央に固定幅で置く想定
PC で広げる時は人物写真を左右2分割にする
瞳写真グリッドは3〜4列に広げる
英字見出しは1.5倍程度に拡大し字間は保つ

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

---
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/）からご連絡ください。

SOURCE

出典と注意

この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。

似た LP の design.md

化粧品・スキンケア生成り×モカと葉・真珠の上品カラコンLPPearl Ivory Botanical Beauty Lens LP 化粧品・スキンケア朱赤×肌色ベージュの化粧下地訴求 LPCoral Red Beauty Primer Appeal LP 化粧品・スキンケア赤い有機形と白地のアスリート起用スキンケアLPRed Blob Athlete Muse Skincare LP 化粧品・スキンケアパステル市松×Y2Kステッカーのカラコン LPPastel Y2K Checker Color Contact LP 化粧品・スキンケア紫×深緑と淡いグラデの植物系スキンケアLPBotanical Purple Cleansing Skincare LP 化粧品・スキンケアくすみモーヴ×キャンディ質感のリップ LPDreamy Mauve Candy Cosmetics LP