DESIGN.md — ピンク×パールの姫系カラコンLP（Princess Pink Pearl Color Contact LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: かわいい、やさしい・柔らかい、上品・高級、ポップ・元気
• キーワード: 姫系・パール・ハート・リボン・ぷっくり立体文字・カラー別テーマ色
• 地の質感: パール・ガラス・サテンの光沢感。半透明のハート型ガラスやきらめきを重ねる
• 形: ハート型カード、波打つアーチ型の区切り、ピル型ラベル
• 温度感: 暖かく甘いピンク基調。カラーごとにラベンダー・ミントの寒色で変化をつける

Colors

• 地は淡ピンクと白を交互に使い、強い色は帯セクションのみ
• 商品カラーごとにテーマ色を切替（ピンク/ラベンダー/ミント）
• テーマ色の帯上は白文字、パターン柄を薄く敷く
• キャッチの強調語はテーマ色の立体文字＋白フチ
• 黒や原色は使わず、文字はくすみローズで柔らかく
• size-badge は文字 #FCFAFD × 背景 #C097A8 のコントラスト比が 2.46:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#9F617B、4.53:1）を使う。
• spec-row は文字 #7C5C64 × 背景 #8D9AB2 のコントラスト比が 2.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#DFE3EA、4.57:1）を使う。
• speech-bubble は文字 #C097A8 × 背景 #FDFCFE のコントラスト比が 2.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#9F617B、4.59:1）を使う。
• theme-band は文字 #FCFAFD × 背景 #FDA2CE のコントラスト比が 1.8:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E0056F、4.58:1）を使う。

Typography

• 大見出しはスクリプト欧文と立体丸ゴシックを組み合わせる
• 強調語は二重引用符で挟み大きく
• 英字小見出しは字間を広く取る
• 本文は中央揃えで短く改行
• 文末にハートの記号を添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、比較写真は 2 カラム
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• 中央揃えが基本
• 装飾をセクション境界にはみ出させて重ねる
• カラーごとに同じ構成を繰り返す
• スペックはハート3つ横並び

Elevation & Depth

• ハートカードに柔らかい白い光彩と淡い影
• 比較写真は白フチ＋薄い影
• ガラス風の半透明ハートを重ねて奥行きを出す

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: 人物は切り抜き・角丸、目元はハート型や角丸四角でトリミング
• セクション境界: 波打つアーチ・スカラップ型の曲線、パールの点線
• 直角の箱は避ける
• カードはハート型を優先
• ラベルはピル型の白枠

Components

• ピル型名前ラベル（pill-label）: 白枠ピルにカラー名やタグを入れる
• ハートのスペック表示（heart-spec）: 白いハート3つにDIA等の数値を明朝風で
• ハート型ポイントカード（heart-point-card）: リボン付きガラス調ハートにPoint番号と説明
• 八角形サイズバッジ（size-badge）: くすみローズの多角形に直径を白抜き
• 装用比較写真（compare-photo）: 白フチ角丸の目元写真を2枚並べ下に英字キャプション
• スペック行（spec-row）: 小ピルのサイズ区分＋縦線区切りの数値
• 円形吹き出し（speech-bubble）: 白丸に色枠、短い説明を2行で
• テーマ色帯（theme-band）: 柄入りの色帯に白文字のまとめコピーとリボン

Do's and Don'ts

Do - パール・ハート・リボン・宝石を各セクションに散らす - カラー別にテーマ色を変えつつ構成は揃える - 強調語は立体的なぷっくり文字にする - 目元のアップ写真で着用感を見せる - 英字スクリプトで高級感を足す

Don't - 黒や原色の太い文字を使わない - 直角のシンプルな箱で区切らない - 装飾のない平坦な白背景を長く続けない - ゴシック太字だけで見出しを作らない - 硬い表や罫線を多用しない

Page Structure

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

1. ファーストビュー（モデルとブランドの世界観を提示）: アーチ枠にモデル写真、きらめく立体キャッチ、レンズ4色を円で並べる
2. スペック帯（基本仕様を一行で）: ピンク帯に白い小さな英数字を区切り記号で並べる
3. カラーバリエーション（全色を一覧）: 2カラムで目元写真とスクリプトのカラー名、スペック行
4. サイズ訴求（大口径を強調）: 巨大な立体数字、レンズ大写し、装用前後比較
5. 機能説明（独自構造を図解）: レンズ図に円形吹き出しと矢印、下に写真＋説明カード
6. カラー別紹介（各色の魅力を伝える）: 全面モデル写真＋スクリプト色名、ハートスペック、ハート型目元写真
7. デザインポイント（レンズ設計の特徴）: レンズ大写しとハート型ポイントカード2枚、切り抜き全身写真
8. 装用比較帯（裸眼との違い）: テーマ色帯に比較写真2枚と白文字まとめ
9. レンズ仕様（機能4点）: 色違いの大きなハートをジグザグに配置、アイコン＋説明
10. モデル紹介（起用モデルのプロフィール）: 写真と名前、中央揃えの短い経歴
11. ブランドコンセプト（世界観で締める）: スカラップ枠の見出し、サテンとティアラの写真、ロゴと注意書き

Imagery

• モデルはピンクのチークとティアラ・パールを着けた正面寄りの写真
• 目元アップは明るくまつげまで鮮明に
• パール・ハート型宝石・リボン・ガラスのハートを3Dレンダー風に配置
• ピンクのサテン布や柔らかいボケを背景に
• 肉球や猫などの小さなかわいいモチーフを添える
• きらめき・十字の光を散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に SP 幅のカラムを置き、両側は淡ピンクの地とする
• PC の両側にパールやハートの装飾を散らしてもよい
• PC でも縦の積み方は変えずに、画像中心の構成を保つ

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