DESIGN.md — ピンク×ラベンダー×ミントのキラキラカラコンLP（Pastel Kawaii Glitter Color Contact LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: かわいい、ポップ・元気、やさしい・柔らかい
• キーワード: 量産型・パステル・ラメ・グリッター・ハート・ビジュー・カラー別紹介
• 地の質感: グリッターやホログラムのにじみ、方眼紙パターン、ビーズの点線を重ねたキラキラ質感
• 形: ハート型バッジ、ぷっくりした白フチ文字、雲形の波打つ背景、角丸の写真フレーム
• 温度感: 甘くて明るい。暖色ピンクと寒色ミント・水色を系統で使い分ける

Colors

• 地は白か方眼紙の極淡グレー。セクションごとに薄ピンク・薄ラベンダー・薄ミント・薄ブルーを敷く
• レンズ系統ごとにテーマ色を固定する。盛れ系はピンク・ラベンダー、ナチュラル系はミント・水色
• 見出し文字はテーマ色で塗り、白フチと淡い影で浮かせる
• 本文は黒ではなく濃いグレーにして甘さを保つ
• 強調したい語だけ大きくし、同じ色のまま文字サイズで差をつける
• 原色や彩度の高い赤は使わない。差し色はビジューの赤やピンクを点で使う程度
• heart-spec-badge は文字 #7C7C7E × 背景 #FFFEFE のコントラスト比が 4.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#767678、4.5:1）を使う。
• color-name-heading は文字 #FFFEFE × 背景 #F3A7CF のコントラスト比が 1.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#DE1E83、4.52:1）を使う。
• series-pill は文字 #FFFEFE × 背景 #F3A7CF のコントラスト比が 1.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#DE1E83、4.52:1）を使う。
• price-badge は文字 #8AACDB × 背景 #DAE6F4 のコントラスト比が 1.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#3567AC、4.5:1）を使う。
• feature-card は文字 #BD9AC2 × 背景 #FFFEFE のコントラスト比が 2.44:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#9962A0、4.53:1）を使う。

Typography

• 和文見出しは極太の丸ゴシックで、白フチと淡い影の2重縁取りにする
• 英字見出しは細身のアールデコ風書体を大きく、字間を広く取る
• キャッチは強調語だけ1.3倍に拡大し、助詞は小さくする
• 2行キャッチの下に点線を引く
• 数値は欧文の丸いサンセリフで中央揃えにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ラインナップと瞳比較は 2 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• カラー紹介は『モデル写真→カラー名→キャッチ→ハートバッジ3つ→瞳2枚比較』の型を繰り返す
• レンズ単体の丸写真を写真の左上に重ねる
• スペックのハートバッジは写真の左端に縦に3つ並べる
• セクションの区切りにビーズの点線を入れる
• 瞳比較はスタジオと自然光の2枚を横に並べる

Elevation & Depth

• 見出し文字に白フチと、テーマ色を淡くした影
• レンズ丸写真には白フチと薄い影
• 写真フレームはテーマ色のグリッター帯でずらして重ねる
• カード類は影をつけず枠線で区切る

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: モデルは人物を切り抜いて雲形の白フチをつける。瞳アップは角丸の長方形、レンズ単体は正円
• セクション境界: 雲や波のような曲線の背景とビーズの点線
• スペックはハート型の白いバッジに入れ、テーマ色で縁取る
• 系統ラベルはピル型の帯の中にレンズ4つを並べる
• 写真の片側の角だけ色帯をずらして重ねる
• ハートやビジュー、宝石のパーツを余白に散らす

Components

• ハート型スペックバッジ（heart-spec-badge）: 白いハートにテーマ色の縁。DIA・BCなどのラベルと数値を2行で入れる
• カラー名大見出し（color-name-heading）: テーマ色の極太丸ゴシックに白フチをつけ、同系色の座布団帯を敷く
• 系統ラベル帯（series-pill）: ピル型の帯に『4color』の英字とレンズ丸写真4つを並べる
• レンズ単体丸写真（lens-circle）: 白フチの正円に入れ、モデル写真の左上に重ねる
• 瞳比較2枚（eye-compare）: 角丸の瞳アップを2枚横に並べ、右下に撮影環境の小さなラベルを入れる
• 価格・単価バッジ（price-badge）: グリッター調のハートに1日あたりの単価、大きな価格数字にピル型の内容量ラベルを添える
• カラーマップ表（color-map）: 色系統の5列を色付きにし、縦軸を自然〜アクセントのグラデ矢印にしてレンズを配置する
• スペック一覧グリッド（spec-grid）: ラベンダー枠の白セルを2列に並べ、仕様を短い語で入れる
• 特長3列カード（feature-card）: ラベンダーの枠で3列に区切り、太字の見出し、線画イラスト、説明3行を入れる

Do's and Don'ts

Do - カラーごとに同じ型を繰り返し、テーマ色だけ変える - 余白にハート・ビジュー・ラメを散らして密度を出す - 見出しは必ず白フチ付きの丸ゴシックにする - スペックは数値をハートバッジで見せる - 瞳写真は撮影条件違いの2枚を並べる

Don't - 黒や濃紺のベタ面は使わない - 細い明朝の和文見出しは使わない - 角ばったボタンや四角いバッジにしない - ビビッドな原色を広い面に塗らない - 写真を装飾なしの四角いまま並べない

Page Structure

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

1. ファーストビュー（モデルとシリーズの世界観を見せる）: ピンク背景のモデル写真をハートの点線で縁取る。白フチの大ロゴ、レンズ8色の丸写真、スペックを縦線区切りで1行に並べる
2. コンセプトキャッチ（かわいさを宣言して人気色を推す）: 虹色グラデの極太キャッチを3行。ハート型や雲形の写真コラージュと人気色のラベルを重ねる
3. ラインナップ（全色と2系統を一覧で見せる）: 方眼紙の地に瞳写真を2列で並べる。系統ごとにピンクとミントの縁をつけ、ハートバッジでスペックを示す
4. 価格・コスパ訴求（手頃さを伝える）: 薄ブルーの波形の地に、バラのイラストと円形のモデル写真。単価のハートと大きな価格数字を置く
5. 系統見出し（系統の切り替えを示す）: ビーズ点線に挟まれた方眼紙の地に、白フチのキャッチとピル型の4色ラベル
6. カラー別紹介（繰り返し）（色ごとの印象と着用感を見せる）: モデル写真、カラー名の大見出し、レンズ丸写真、2行キャッチ、ハートバッジ3つ、瞳2枚比較の順。地はテーマ色で切り替える
7. カラーマップ（色同士の違いを比較する）: 英字の大見出し、系統ピル2つ、色付き5列の表にレンズを配置する
8. レンズ仕様の特長（安全性と機能を説明する）: 英字見出しとラベンダーのサブ見出し。線画イラスト付きの3列カード
9. 商品スペック（仕様を一覧にする）: パッケージ画像の横に、レンズ一覧とラベンダー枠の2列スペック表
10. イメージモデル紹介（モデルの魅力で後押しする）: グリッター地に切り抜きのモデル、ピンクの極太見出し、斜めの帯ラベル。ポラロイド風の写真4枚を傾けて並べる

Imagery

• モデルはリボンやパールを身につけた量産型メイク。ピンクやラベンダーの淡い背景で正面から撮る
• 瞳アップは目元を横長に切り取る。スタジオ光と自然光の2条件で撮る
• レンズ単体は白背景の真上から撮り、正円に切り抜く
• 装飾はぷっくりしたハートの宝石、ビジュー、パール、ラメ、ホログラム片
• 地には方眼紙パターンとグリッターのにじみを重ねる
• バラやテディベアなどの小さなファンシーモチーフを添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に SP 幅（約 480〜750px）のまま置き、左右に淡いグリッター地を広げる
• ラインナップは PC で 4 列に広げてもよい
• 見出しの文字サイズは PC で 1.3 倍程度までにする
• カラーマップ表は横スクロールを避けて幅いっぱいに広げる

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