DESIGN.md — くすみピンク×白文字の甘めカラコン LP（Dusty Pink Girly Color Contact Lens LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: かわいい、やさしい・柔らかい、上品・高級、情報量多め・訴求型
• キーワード: くすみピンク・ガーリー・瞳アップ・カタログ型・ハート装飾・白抜きセリフ欧文
• 地の質感: パール・リボン・スイーツなどの小物を使ったソフトフォーカス写真。ほのかなグラデーションと透け感のある白いパネルを重ねる。
• 形: 角丸カード、ピル型ラベル、円形のレンズ写真、ハート型バッジ、ゆるい弧を描くセクション境界。
• 温度感: やや暖色寄りのくすみトーン。色ごとにモーブ、グレー、ベージュ、ブルー、グリーンの差し色が入る。

Colors

• 地色はくすみピンクと淡いピンクグレーを交互に使い、白は説明パネルだけに限る
• 色ごとの紹介ブロックは、そのレンズの色に合う差し色を見出し帯とハートバッジに使う
• 価格や大見出しにはくすみローズを使い、鮮やかな原色は使わない
• 本文中の強調語だけ、その色の差し色で塗る
• 注意書きは濃いモーブの面に白文字で書き、ほかの情報と分ける
• 黒は使わない。最も濃い色もダークブラウンにとどめる
• color-title-band は文字 #FBFAFA × 背景 #7292BC のコントラスト比が 3.08:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#4F75A7、4.54:1）を使う。
• heart-badge は文字 #FBFAFA × 背景 #E2C6C1 のコントラスト比が 1.54:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら on-primary-accessible（#675252、4.5:1）を使う。
• price-card は文字 #AF7B74 × 背景 #FEFEFE のコントラスト比が 3.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#A2655D、4.57:1）を使う。
• notice-box は文字 #FBFAFA × 背景 #B46386 のコントラスト比が 3.98:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#AE577D、4.52:1）を使う。

Typography

• カラー名は欧文イタリックを大きく置き、その下に小さなカナ名を添える
• 大見出しは手書き風の和文を白抜きにし、きらめきのアイコンを散らす
• 本文は中央揃えにし、1 行を短くして 2〜3 行に収める
• スペックは小さな数字をハートでつなぎ、1 行で横に並べる
• 価格は数字だけを極端に大きくし、単位は小さくする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カラー一覧と比較画像は 2 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 40px、基本単位 8px、カード内 16px（375px 幅換算）
• 色ごとに『見出し帯→モデル写真→キャッチ→着用比較 2 枚→説明パネル→スペック行』の順を繰り返す
• 比較画像は左に裸眼、右に装着時を同じサイズで並べる
• レンズ写真は円形にし、写真の端に重ねて配置する
• 説明パネルは左右に約 6% の余白を取り中央に置く
• 色の一覧は 2 列のグリッドにし、カードに瞳写真・レンズ・名前をまとめる

Elevation & Depth

• 説明パネルは半透明の白で、影はごく弱くする
• 円形のレンズ写真には柔らかいドロップシャドウを付ける
• 写真上の文字には淡いグローを付けて読みやすくする

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: モデル写真は全幅の長方形。レンズは正円。瞳のアップは角丸の長方形にする
• セクション境界: ゆるやかな弧で写真と次のブロックの境界を作る。色帯で区切る場合は直線
• ラベルはすべてピル型にする
• バッジはハート型にする
• 価格カードは上辺を大きく丸めたアーチ型にする
• 説明パネルは小さめの角丸にする

Components

• カラー名の見出し帯（color-title-band）: 差し色の横帯に白い欧文イタリックとカナ名を載せ、左端に円形のレンズ写真を重ねる
• ハートバッジ（heart-badge）: ハート型の中に白文字 2 行で『装着』『新色』などを書く
• ピル型ラベル（label-pill）: 比較画像の下や左上に置く、小さな状態ラベル
• 説明パネル（desc-panel）: 半透明の白いパネルに中央揃えで 3 行の説明を入れ、強調語は差し色にする
• スペック行（spec-row）: 上下を細線で挟み、数値 3 つをハートで区切る
• スペック円（spec-circle）: 白い線の円の中に数値を縦に組み、3 つ並べる
• 価格訴求カード（price-card）: 上辺がアーチ型の白いカードに、まとめ買いの特典と大きな価格を載せる。ハートの吹き出しを添える
• 注意書きボックス（notice-box）: 濃いモーブの面に白い小さな文字で注釈を並べる
• 仕様アイコンカード（feature-icon-card）: 淡いピンクの円アイコンに見出し 2 行と説明を添え、2 列のグリッドで並べる

Do's and Don'ts

Do - 色ごとに同じ構成のブロックを繰り返し、統一感を出す - 瞳の比較は裸眼と装着時を同じ明るさ・同じ角度で並べる - ハートやきらめきなどの小さな装飾で甘さを加える - 差し色は色名の印象に合うくすみトーンから選ぶ - 欧文セリフ体と和文の手書き風書体を組み合わせる

Don't - 彩度の高い原色や純黒を使わない - 角張ったボタンや太いゴシックの見出しを使わない - 説明文を長くしない。3 行を超えない - 写真の上に不透明な濃い帯を重ねて顔を隠さない - 比較画像のサイズや並びを色ごとに変えない

Page Structure

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

1. ファーストビュー（新色の発表とブランドの世界観を伝える）: くすみピンクの写真の上にロゴと大見出しを置き、新色レンズの円形写真を横に並べる
2. 新色コンセプト（新技術の特長を打ち出す）: 手書き風の白い大見出しにきらめきを散らし、新色ごとに瞳アップとレンズ写真を交互に配置する
3. 新色の別系統紹介（異なるフチ感を比較させる）: ピンク地に大見出しとキャッチ帯を置き、瞳とレンズの写真を 2 組並べる
4. カラーラインナップ（全色を一覧で見せる）: 淡色地の 2 列グリッドに、瞳写真・レンズ・欧文名のカードを並べる
5. 価格訴求（まとめ買いを促す）: アーチ型の白いカードに大きな価格数字とハートの吹き出しを載せる
6. 技術解説（装着位置と仕組みを説明する）: レンズの拡大図 2 枚とピル型ラベル、白いパネルの説明文、モーブの注意書きを置く
7. 新色の詳細（各新色の魅力を詳しく伝える）: 色ごとの地色にモデル写真、縦書きのキャッチ、スペック円、デザインポイントの箇条、比較画像を置く
8. 既存色の紹介（全色の個性を伝える）: 差し色の見出し帯、モデル写真、キャッチ、比較画像、説明パネル、スペック行を繰り返す
9. カラーマップ（フチの強さと発色で全色を位置づける）: 白いカードに縦軸と横軸を引き、レンズの円を散布図のように配置する
10. レンズ仕様（機能面の安心感を伝える）: ピンクのグラデーション地に、円アイコン付きの仕様カードを 2 列×3 段で並べる
11. クロージング（商品パッケージで締める）: パッケージを小物と一緒に撮った写真と、細い帯のフッターを置く

Imagery

• モデルは正面から寄りで撮り、ソフトフォーカスで肌を明るく仕上げる
• 背景にはリボン、パール、スイーツ、ぬいぐるみなど甘い小物を置き、色ごとにテーマを変える
• 瞳のアップは真正面から撮り、まつ毛をはっきり見せた横長の写真にする
• レンズ単体は白い背景で正円に切り抜き、光沢を残す
• きらめき・ハート・手書きの線を白い細線で添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版の画像はない。PC では SP の 1 カラムを中央に 480〜600px 幅で固定し、左右には淡いピンクの背景を敷くとよい
• カラー一覧は PC で 3〜4 列に広げてもよい
• 比較画像の 2 枚並びは 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 行書くと起動時に読み込まれる。