DESIGN.md — 黒×ライトグレーのK-POP系カラコンLP（Dark Editorial K-Pop Color Lens LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: クール・先進的、ラグジュアリー・ダーク、力強い・インパクト、シンプル・ミニマル
• キーワード: モード誌風・黒×ワインレッド・グリッチ文字・太い欧文・瞳のアップ・カラー別の繰り返し
• 地の質感: マットな黒地とフラットなライトグレー地。写真の光沢と、ノイズ・グリッチ処理の見出しで質感を出す
• 形: 角丸なしの四角い写真枠。円形のレンズ画像。黒い長方形のラベル
• 温度感: 冷たく無機質。肌色の瞳写真でほどよく体温を足す

Colors

• 冒頭とスペック・締めは黒地、商品説明はライトグレー地に分ける
• 赤は小さな帯やロゴ周りだけに使い、面積を極小にする
• 写真背景にワインレッドや青灰を使い、黒地に深みを出す
• カラー名の上に添える筆記体は、レンズの色に合わせて変える
• 文字は黒か白の2色。グレーはスペック表記だけに使う
• 瞳写真の肌色が唯一の暖色面になる

Typography

• カラー名は筆記体＋太い欧文＋小さなカナ読みの3段で組む
• 日本語本文は短い3行にまとめ、中央揃えにする
• 大見出しはノイズやグリッチで崩した極太書体にする
• スペックは1行の欧文表記で、小さくまとめる
• 背景の巨大な欧文セリフは人物の後ろに重ねる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。瞳比較だけ 2 カラム
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 40px、基本単位 8px、カード内 12px（375px 幅換算）
• 写真は左右に7%ずつ余白を取ったフル幅の縦長
• 1色ごとに「写真→レンズ→スペック→説明→比較」を同じ順で繰り返す
• 色の区切りに小さな星形の装飾を中央に置く
• 一覧カードは左が文字、右が瞳写真の横長
• まとめは黒い帯の見出しと、人物写真・瞳写真2枚のグリッド

Elevation & Depth

• 基本はフラット。影は使わない
• レンズ画像の下にだけ、柔らかい楕円の影を落とす
• 拡大した円形レンズを大きなレンズに重ね、奥行きを出す

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形。レンズは正円で切り抜く
• セクション境界: 背景色を直線で切り替える。区切り装飾は星3つ
• カード・写真・ラベルはすべて角丸なしの直角
• NEWバッジだけは黒い楕円
• 成分表は白い細線で囲んだ四角い枠

Components

• カラー名入りの人物写真（color-hero-photo）: 縦長の人物写真の下部に、筆記体と太い欧文のカラー名、カナ読みを白文字で重ねる
• レンズ拡大ビジュアル（lens-visual）: 大きな円形レンズに拡大円を重ね、右に引き出し線で色見本の小さな四角を並べる
• 比較ラベル（compare-label）: 裸眼と装着の瞳写真の下に置く、黒い長方形のピクセル風ラベル
• ラインナップカード（lineup-card）: 左は白地に筆記体・カラー名・スペック、右は瞳のアップの横長カード
• NEWバッジ（badge-new）: 黒い楕円に白い欧文の小さなバッジ
• まとめタイル（summary-tile）: 黒い帯にカラー名。下は左に人物写真、右に瞳写真を2段で並べる
• 星の区切り装飾（star-divider）: 細い線でつないだ4点星を3つ、中央に置く
• 成分表（spec-table）: 黒地に白い細線の枠。項目名と値を2列で並べる

Do's and Don'ts

Do - 1色ごとに同じ構成を繰り返し、比べやすくする - 人物写真は暗めでコントラストを強くし、視線がこちらに向くカットを選ぶ - 瞳比較は必ず裸眼と装着の左右ペアにする - 欧文の太字と筆記体を組み合わせてモード感を出す - 黒地とグレー地をはっきり切り替える

Don't - 角丸やピル型のボタンでかわいく寄せない - パステルや明るい原色を面で使わない - 日本語本文を長い段落にしない - 写真にドロップシャドウや枠飾りを付けない - 赤を大きな面に広げない

Page Structure

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

1. ファーストビュー（モデルと新色を一目で見せる）: ワインレッド地の人物写真。下に新色レンズ3つをNEWバッジ付きで並べ、仕様を1行で添える
2. キャッチコピー（視線を奪う世界観を伝える）: 黒からグレーへのグラデーション地に、グリッチ処理の極太見出しと照準線
3. 新色の瞳アップ（新色3色の印象を見せる）: 目元の横長写真を3段重ね、短いコピーとレンズ画像を配置
4. ラインナップ一覧（全色を一覧させる）: 赤い傾いた帯の見出し、背景の巨大な欧文タイトルと人物。横長カードを縦に並べる
5. カラー別詳細（各色の質感と発色を伝える）: グレー地に人物写真、レンズ拡大、スペック、3行説明、瞳比較を順に置き、星で区切って繰り返す
6. 着用まとめ（全色の装着イメージを比べる）: 黒帯にカラー名、人物と瞳写真2枚のタイルを縦に並べる
7. モデル紹介（起用モデルの魅力を伝える）: 黒地に人物写真、グリッチ書体の名前、中央揃えのプロフィール文
8. 度数一覧（選べる度数を示す）: 黒地に白い欧文見出し。数値を5列のグリッドで並べる
9. 製品情報・注意（法定表示と安全への注意）: 白い線枠の成分表、中央揃えの注意文、赤いロゴマーク

Imagery

• 暗い単色背景で撮った、男性モデルのモード誌風ポートレート。黒レザーや白シャツを着せる
• 瞳のマクロ写真は正面から均一に照らし、肌の色を自然に残す
• レンズ単体は白地に正円で置き、ドット柄の拡大円を重ねる
• 見出しにはノイズ、グリッチ、照準線を使う
• 人物の背後に巨大な欧文タイトルを重ね、立体感を出す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はSPの縦長ビジュアルを中央に固定し、左右を黒かグレーで埋める
• PC ではラインナップカードを2列にしてもよい
• 瞳比較は PC で4枚を横一列に並べる
• 度数グリッドは PC で8〜10列に広げる

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