DESIGN.md — ピンク×水色のアイドル系カラコン LP（Pastel Pink & Baby Blue Idol Color Contact LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: かわいい、やさしい・柔らかい、ポップ・元気
• キーワード: パステル・アイドル・Y2K・方眼ノート・透明感・くまマスコット
• 地の質感: 方眼紙柄のピンク地やギンガムチェック柄の水色地、きらめくラインストーンの装飾。全体に柔らかい光の写真。
• 形: 楕円枠の見出し、ピル型のタグ、角丸の吹き出し、丸く切り抜いたレンズ図。
• 温度感: 甘くて明るい。ピンクと水色を交互に置き、寒暖を中和する。

Colors

• 地は生成りを基本にする。ラインナップはピンクの方眼地、カラー紹介やモデル紹介は水色地に切り替える。
• 対になる 2 系統はピンクと水色で塗り分ける（例: 太フチとピンク、細フチと水色）。
• 文字は真っ黒にせず、濃いグレーで柔らかくする。
• ピンクはタグ・数値バッジ・表の見出しなど小さい面に使い、広い面はパステルの淡い色にする。
• 白いカードには淡いグレーの落ち影を付けて、地の色から浮かせる。
• hashtag-pill は文字 #EE82B0 × 背景 #FFFFFE のコントラスト比が 2.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E11F72、4.52:1）を使う。
• badge-diameter は文字 #FFF9FF × 背景 #EE82B0 のコントラスト比が 2.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E11F72、4.51:1）を使う。
• type-band は文字 #FFF9FF × 背景 #EE82B0 のコントラスト比が 2.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E11F72、4.51:1）を使う。
• speech-bubble は文字 #FFF9FF × 背景 #89B0C5 のコントラスト比が 2.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#487993、4.57:1）を使う。
• subscribe-banner は文字 #EE82B0 × 背景 #FFFFFE のコントラスト比が 2.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E11F72、4.52:1）を使う。

Typography

• 日本語の見出しは字間を広め（0.1em 以上）にして中央に揃える。
• 欧文見出しは太いサンセリフを使い、白文字か白い楕円の枠線で囲む。
• ロゴやカラー名は筆記体の白文字にし、写真の上に重ねる。
• 価格の数字は特大の太字にし、単位（円・税込）は小さく添える。
• 本文は 2〜3 行の短文にして中央に揃える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ラインナップとカラーチャートだけ 2〜3 列の表組みにする
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• モデル写真は画面幅いっぱいの全幅で、縦長に連続させる。
• カラー紹介は『全幅写真 → 生成り地のコピー → 全幅写真 → レンズ図とタグを重ねた写真』の順で繰り返す。
• コピーのブロックは上下に約 80px の余白を取り、余白で間を持たせる。
• スペック・価格・技術説明は、幅 90% の白カードにまとめる。
• 写真の端には、名前などの縦書き欧文ラベルを置いてよい。

Elevation & Depth

• 白カードの下に、ぼかしの強い淡いグレーの影を付ける。
• レンズの丸い図版には、白い縁と小さな影を付ける。
• くまのマスコットは白いフチ取りをしたステッカー風にする。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: モデル写真は角丸なしの全幅で使う。レンズは正円に、目元の接写は白い枠付きの四角にする。
• セクション境界: 直線で色を切り替える。
• ハッシュタグ風のタグは、白地にピンク文字のピル型にする。
• セクション見出しは横長の楕円を枠線だけで描く。
• 数値バッジはピンクの正円にする。
• 吹き出しは角丸の水色で、しっぽを付ける。

Components

• 楕円枠の欧文見出し（heading-oval）: 白またはピンクの楕円の枠線の中に、太い欧文を入れる。上にリボンやストーンの装飾を置いてよい。
• ハッシュタグのピル（hashtag-pill）: 写真の上に白いピルを 2 段重ね、ピンク文字で特徴を書く。
• 直径の丸バッジ（badge-diameter）: ピンクの正円に、小さなラベルと大きな数値を白文字で入れる。
• タイプ別の帯（type-band）: ピンクと水色のピル帯を左右の列に置き、タイプ名を白文字で書く。
• ラインナップ比較カード（lineup-card）: 白いカードを点線で 2 列に分け、レンズ図・目元写真・カラー名を縦に並べる。
• 水色の吹き出し（speech-bubble）: 見出しの横に置き、補足を白い太字で添える。
• 価格表示（price-block）: ピンク帯の内容量の横に、特大の価格数字を濃いグレーで置く。区切りは点線。
• 度数表（spec-table）: ピンクの見出し行と、ピンクの細い罫線で区切った白いセルの表。
• 定期便の訴求バナー（subscribe-banner）: 白い横長バナーに、割引率の円バッジと右端の水色の申込タブを付ける。

Do's and Don'ts

Do - カラーごとに同じ構成を繰り返し、リズムをそろえる。 - ピンクと水色を必ず対で使う。 - くまやストーンなどの小物は、写真の角に小さく添える。 - コピーの前後には生成り地の大きな余白を取る。 - 文字は濃いグレーにし、柔らかく見せる。

Don't - 原色や彩度の高い赤・青は使わない。 - 黒ベタの背景や、重く濃い影は使わない。 - 写真に角丸を付けたり、小さく並べたりしない。 - 本文を長文にしない。 - 角ばったボタンにしない。

Page Structure

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

1. ファーストビュー（モデルとブランドの世界観を一目で伝える）: モデル集合写真に筆記体ロゴを白で重ねる。下に全カラーのレンズを丸く並べ、続けてスローガンとスペックを 1 行で置く。
2. コンセプト（商品の想いを伝える）: パステルな小物写真の上に楕円見出しを置き、白い帯の上に 3 行のコピーを載せる。
3. ラインナップ（2 タイプのカラーを比較させる）: ピンク方眼地に吹き出しを添え、白カードを 2 列にしてピンク系と水色系で対比させる。
4. カラー別紹介（繰り返し）（各カラーの印象を見せる）: 全幅のモデル写真、生成り地のキャッチと 2 行説明、レンズ図・直径バッジ・タグを重ねた写真の順で並べる。
5. カラーチャート（色味と盛り具合の位置を示す）: 水色地に 3 列の表を置き、縦軸に盛り具合を取ってレンズを配置する。
6. スペック・価格（仕様と価格を伝える）: 欧文見出しと点線で区切り、特大の価格とレンズの一覧を見せる。
7. 定期便 CTA（定期購入へ誘導する）: 割引バッジ付きの白い横長バナーを置き、右端に水色の申込タブを付ける。
8. 技術訴求（機能の独自性を伝える）: 明朝の装飾見出し、写真、図解を置き、ギンガム柄のメモ枠でピンクと水色の比較を見せる。
9. 機能一覧・度数表（機能と度数を伝える）: 3 列のアイコン説明と、ピンク罫線の度数表を並べる。
10. モデル紹介（起用モデルで信頼と憧れを伝える）: 水色地に筆記体見出しを置き、集合写真と白い紹介カードを続ける。最後にロゴとくまで締める。

Imagery

• パステルピンクの服を着たモデルを、水色のロッカー前の教室風セットで撮る。
• 顔のアップは正面寄りで、肌を柔らかく白飛び気味に仕上げる。
• 目元は接写し、まつ毛が際立つ明るい写真にする。
• レンズは正面から撮り、白背景で丸く切り抜く。
• ふわふわのくまのぬいぐるみ、ハート、ストーン、リボンを小物に使う。
• 写真の上にはシルバーの立体文字で名前を重ねる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像がないため推奨として書く。PC では本文を中央 480〜600px の 1 カラムに固定し、左右は生成りかパステル地で埋める。
• PC ではラインナップを 2 列のまま幅を広げる。
• 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 行書くと起動時に読み込まれる。