DESIGN.md — パステル×パールの夢かわカラコンLP（Pastel Pearl Dreamy Color Contact LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: かわいい、やさしい・柔らかい、上品・高級、情報量多め・訴求型
• キーワード: 夢かわ・パール・くすみパステル・カラー別の世界観・ガーリー・透明感
• 地の質感: 水面や泡のようにうっすら光る背景。グレイン感のある淡い地に、パールや光の粒を散らす。
• 形: 大きな円弧で写真を切り抜き、雲形の吹き出しと八角形のバッジを使う。細い曲線の装飾ラインを添える。
• 温度感: やや寒色寄りの柔らかなパステル。カラー別のセクションでは暖色系にも切り替える。

Colors

• 地はくすみブルーと白グレーを基本にし、商品カラーごとにピンク・ベージュ・ミント・ラベンダーへ切り替える
• 各カラーのセクションでは、見出しの色・吹き出し・縦のアクセント線をそのセクションの地色系で統一する
• 価格の強調はラベンダーとピンクだけで行い、赤は使わない
• 色の付いた地の上の本文は白にし、文字に細い影を付けて読みやすくする
• 濃色はモデル紹介に入る直前の夜空風の背景に限って使う
• 彩度は抑えめにし、全体をパステルトーンで揃える
• cloud-bubble は文字 #A6B3DC × 背景 #FEFEFE のコントラスト比が 2.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#5971BE、4.6:1）を使う。
• marker-copy は文字 #F3F8FD × 背景 #B3B4D3 のコントラスト比が 1.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら marker-accessible（#6A6CA9、4.54:1）を使う。
• point-badge は文字 #F3F8FD × 背景 #A6B3DC のコントラスト比が 1.95:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#5971BE、4.53:1）を使う。
• price-panel は文字 #F3F8FD × 背景 #A0BAD1 のコントラスト比が 1.88:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#4B759A、4.56:1）を使う。
• new-badge は文字 #F3F8FD × 背景 #DDC4D1 のコントラスト比が 1.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら tint-2-accessible（#9F5C7F、4.56:1）を使う。

Typography

• 欧文の商品名は細くエレガントな書体で大きく組み、上に小さい欧文を添えて2段にする
• 和文の訴求見出しは極太丸ゴシックにし、白い縁取りとパステルの影を付ける
• 英字の小見出しは字間を広く取り、細い弧線に沿わせて配置する
• コピーは1行ずつ帯状のマーカーに乗せ、右揃えで積む
• ハートの記号を語尾に添えて甘さを出す
• 数値の価格は極太にし、立体的な影を付けて最大のサイズにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は左右交互にずらし、比較画像だけ 2 列にする
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 24px（375px 幅換算）
• カラーごとに『キャッチ見出し・吹き出し・レンズ・目元写真・商品名』の同じ型を繰り返す
• 写真は画面端まで出し、斜めや円弧で切り抜く
• レンズ写真と拡大した円形写真を、点線でコピーとつなぐ
• 詳細ブロックは目元の大きな写真1枚と黒目/茶目の比較2枚、その下にスペック行と説明文を置く
• カラー一覧は白い角丸カードの中に4象限のマップとして配置する
• スペックは十字の区切り線で4マスのグリッドに分ける

Elevation & Depth

• レンズ写真の下に楕円の落ち影を付け、浮いているように見せる
• 写真カードには白い細枠と淡いドロップシャドウを付ける
• 見出し文字には白い縁取りと色の影で厚みを出す
• 白いカードの影は、ほぼ見えない程度のぼかしにする

Shapes

• 角丸: 小 6px ／ 中 14px ／ 大 28px。ボタンはピル型。
• 写真の切り抜き: モデル写真は大きな円弧で切り抜き、目元写真は楕円か角丸、レンズは正円で拡大する
• セクション境界: 緩やかな円弧で区切り、ふちに虹色の光の線を入れる
• 吹き出しは雲形で、小さな丸を付けて思考の吹き出し風にする
• カラーの見本は八角形のバッジで示す
• NEWやお得のバッジはハート形か八角形にする
• 白いカードは上部をアーチ形にする
• ピル型のラベルで和文の小さな見出しを囲む
• 価格ブロックは角丸の大きなパネルにまとめる

Components

• 雲形の吹き出しラベル（cloud-bubble）: フチのデザインやメインカラーを示す吹き出し。上に小さな英字ラベル、間に×印を置く
• 帯マーカーのコピー（marker-copy）: 1行ごとに色帯を敷いた白文字コピー。右揃えで4行ほど積む
• POINT番号バッジ（point-badge）: 八角形にPOINT 01/02と番号を入れ、横に2行の説明を添える
• 八角形のカラーチップ（color-chip）: レンズの色見本の八角形。横に欧文のカラー名とCOLOR番号を付ける
• 特別価格パネル（price-panel）: 上部の青い帯に通常価格、下の淡い面にまとめ買いの価格を極太数字で載せる
• 黒目・茶目の比較カード（eye-compare）: 角丸の写真カードを2列に並べ、左上・右上に丸いラベルを付ける
• スペック行（spec-row）: 丸い点で区切ったレンズ径などの数値を1行に並べ、下に細線を引く
• アーチ形のプロフィールカード（arch-card）: 上部がアーチになった白いカード。英字名・和文名・区切り線・本文の順に並べる
• NEWのハートバッジ（new-badge）: ピンクのハート形に筆記体のNewを入れたバッジ

Do's and Don'ts

Do - カラーごとに地色を変えつつ、各カラーのレイアウトは同じ型で繰り返す - パール・泡・ハート・光の粒を余白に控えめに散らす - 欧文の細いセリフ体と和文の極太丸ゴシックの対比で見せる - レンズは正円の拡大写真と点線の吹き出しで構造を説明する - モデル写真は大きな円弧で切り抜き、縦書きのコピーを重ねる

Don't - 原色の赤や黒ベタの強いボタンを使わない - 角張った四角い枠だけでレイアウトを組まない - 地色の彩度を上げすぎない - 装飾を大きくしてレンズ写真の存在感を食わない - 本文を細字の明朝で組まない

Page Structure

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

1. ファーストビュー（世界観と新シリーズの登場を伝える）: 青い背景でモデルの全面写真を見せ、欧文の装飾ロゴ・4色のレンズ・スペックのピル帯を重ねる
2. リニューアル告知（何が変わったかを伝える）: 全身のモデル写真に大きな欧文と立体文字を合わせ、ポップな和文コピーを段違いに置く
3. 復活の訴求（人気色の再登場を印象づける）: 極太文字にグリッターの縁を付け、パッケージとレンズを散らして見せる
4. カラー別の概要（4色の個性を比べられるようにする）: 色ごとに吹き出し・レンズ・目元写真・欧文の商品名を繰り返し、アクセント色だけを変える
5. 特別オファー（まとめ買いを後押しする）: 欧文の大見出しの下に、価格パネル・パッケージ・極太の価格を置く
6. カラー別の詳細（色ごとの魅力と仕様を伝える）: 地色を切り替え、円弧で切り抜いたモデル写真・帯コピー・POINT・比較写真・スペックを並べる
7. レンズマップ（4色の位置づけを整理する）: 白い角丸カードを使い、縦軸と横軸で分けた4象限にレンズを配置する
8. 着用比較（着けたときの見え方を比べさせる）: 目元写真を2列×2段に並べ、各写真にレンズを重ねる
9. レンズスペック（機能面で安心させる）: ブルーの地に十字の区切りで4マスを作り、線画アイコンと短い説明を入れる
10. イメージモデル紹介（信頼感と憧れを生む）: 濃紺のアーチ形の背景にモデル写真を置き、下にアーチ形のプロフィールカードを続ける
11. クロージング（世界観の余韻を残す）: パールとガラスの器を使った静物写真に、欧文のロゴを重ねる

Imagery

• モデルは正面か頬に手を当てるポーズで撮り、ティアラ・パール・リボンで飾る
• 背景は青い壁、白いバラ、ガラス器、パールを散らした幻想的な静物にする
• 目元はマクロで撮り、まつげと発色をはっきり見せる
• レンズは白地に置いた正円の写真に影を付け、ドットパターン部分を拡大して見せる
• 装飾にはパール玉・シャボン玉・ハート・きらめきを使い、細い弧線を重ねる
• アイコンは細い線画で描き、パステルの面を添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に幅 480〜600px の SP レイアウトを置き、左右は世界観のある背景で埋める
• PC ではカラー別の詳細を2カラム（写真と説明）に展開してもよい
• 目元の比較写真は PC で4列に並べる
• スペックのグリッドは PC で4列×1段にする
• 見出しのサイズは SP の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 行書くと起動時に読み込まれる。