DESIGN.md — 生成り地にくすみカラーが映えるカラコン LP（Shimmer Editorial Color Lens LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、シンプル・ミニマル、クール・先進的、やさしい・柔らかい
• キーワード: エディトリアル・くすみカラー・ラメの光・大判ポートレート・余白・縦書き
• 地の質感: マットでフラットな色面に、柔らかい自然光の写真を重ねる。影や光沢は付けない
• 形: 四角い色面と写真が基本。ラベルは小さめの角丸、レンズは正円
• 温度感: ややあたたかい中間色。カラーごとに暖色と寒色を切り替える

Colors

• 地は生成りと白の 2 色だけ。純白は説明文と仕様カードに使う
• 商品カラーごとにテーマ色を 1 つ決め、商品名・説明文・ラベル・詳細図の面をその色で揃える
• テーマ色は彩度を落としたくすみトーンにする。原色は使わない
• 写真の上の文字は白に限る。ラベルはテーマ色の半透明の面にする
• 見出しと注意書きはグレー系で、真っ黒は避ける
• spec-label は文字 #FFFFFF × 背景 #C5B59C のコントラスト比が 2.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#897350、4.53:1）を使う。
• new-ribbon は文字 #FFFFFF × 背景 #D4B3A4 のコントラスト比が 1.95:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#A4684D、4.5:1）を使う。
• lens-diagram は文字 #FFFFFF × 背景 #D4B3A4 のコントラスト比が 1.95:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#A4684D、4.5:1）を使う。

Typography

• 欧文は細め〜中くらいの太さのジオメトリックサンセリフにして、太字は使わない
• 和文の見出しは字間を 0.15em 前後と広めにとる
• 写真の右端にハッシュタグを縦書きで置く
• 数値は大きく細い欧文で書き、単位だけを小さくする
• 感性のコピーは手書き書体か縦書きの明朝寄りにして、トーンを変える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ラインナップと仕様カードは 2 カラム
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 商品ブロックは 写真→説明→評価→比較写真→詳細図 の順に、同じ型で繰り返す
• 写真は全幅で裁ち落とす
• 説明文は左右 16px の余白をとり、白地に置く
• 評価行は上下を細線で挟む
• 比較写真は 2 枚を横に並べ、右下にラベルを付ける

Elevation & Depth

• 影は基本的に使わない
• 仕様カードは白い面を生成り地に置くだけで区別する
• レンズ画像は白いフチ付きの正円にして、わずかな影で浮かせる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は全幅の長方形で、ラインナップは横長に切る。レンズは正円で半分を黒く塗った見本にする
• セクション境界: 色面の直線で切り替える。斜めの帯はNEWリボンにだけ使う
• ラベルは小さな角丸の長方形
• ハッシュタグの引き出し枠は細線の角丸
• 寸法は点線の補助線で示す

Components

• 数値ラベル（spec-label）: テーマ色の小さな角丸ラベルの横に、大きく細い数値を並べる
• ラインナップカード（lineup-card）: 目元写真の下にカナと欧文の商品名を置き、右下にレンズの円を重ねる
• NEW 表示（new-ribbon）: 写真の左上にある斜めの帯、またはピル型の白枠バッジ
• 評価行（rating-row）: 星と雫アイコンで 2 つの指標を 5 段階で示し、上下を細線で挟む
• 比較写真（compare-photo）: 裸眼と装用の目元写真を 2 枚並べ、右下に小さなラベルを付ける
• レンズ詳細図（lens-diagram）: テーマ色の面に大きなレンズを置き、点線で寸法を示して、ハッシュタグ枠とつなぐ
• カラーチャート（color-chart）: 色系統ごとに淡い色の帯を敷き、ラメの強さの軸に沿ってレンズを配置する
• 仕様カード（feature-card）: 白いカードに円形の線画アイコン・見出し・説明を入れる。2 カラム、または横長

Do's and Don'ts

Do - 商品ごとにテーマ色を 1 つ決め、ブロック内の要素を一貫してその色で揃える - 写真は全幅で大きく見せ、文字は写真の下 1/3 に白で載せる - 欧文は細く、字間を広めにとる - 生成りの余白を広めにとり、雑誌のような間をつくる - ハッシュタグは縦書きで写真の右端に置く

Don't - ビビッドな原色や派手なグラデーションのボタンは使わない - 太いゴシックで目立たせる訴求表現は避ける - 影や立体的な装飾を多用しない - 商品ブロックの型を崩して並べ替えない - 黒ベタの面を広く使わない

Page Structure

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

1. ファーストビュー（世界観とシリーズの提示）: 全幅のモデル写真に細い欧文ロゴを重ね、下の白地にパッケージとレンズの一覧、短いキャッチ、機能バッジを置く
2. コンセプト（感性への共感）: 生成り地に写真 2 枚をずらして配置し、縦書きのコピーと手書き書体の一言を添える
3. ラインナップ（全カラーの一覧）: 2 カラムの目元写真に、テーマ色で書いた商品名とレンズの円を付ける
4. カラーチャート（色系統とラメの強さの比較）: 矢印の軸と色帯の表の上にレンズを配置し、雫アイコンで指標を示す
5. 商品詳細（繰り返し）（各カラーの魅力を伝える）: 大判のポートレート、白文字の商品名と数値、説明、評価行、比較写真、テーマ色の詳細図を 1 セットにする
6. レンズ仕様（機能面の安心感）: 欧文の見出しの下に、線画アイコン付きの白いカードを 2 カラムと全幅で並べる
7. 注意事項（医療機器としての法定表記）: 中央に見出しを置き、箇条書きと※注記を小さなグレー文字で並べる。最下部に承認番号を書く

Imagery

• 自然光や夕景のもとで撮った、フィルム調で彩度をやや抑えたポートレート
• モデルの服や背景をテーマ色に合わせる
• 目元のマクロ写真は白い肌と、ラメの光が見える質感にする
• パッケージは写真の左側に重ねて配置する
• アイコンは細い線画で、円の枠に収める
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に最大 750px 前後の SP 幅カラムを置き、左右を生成りで埋める
• ラインナップは PC で 3〜4 カラムに広げてもよい
• 商品詳細は PC で写真と説明を左右に並べ、テーマ色の面は全幅のままにする
• 文字サイズは見出しを 1.3 倍、本文は 14〜15px にする

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