DESIGN.md — ラベンダー×ピンク×ミントの夢かわカラコン LP（Dreamy Pastel Idol Color Contact LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: かわいい、ポップ・元気、やさしい・柔らかい、情報量多め・訴求型
• キーワード: 夢かわ・パステル・パール装飾・ハート・方眼グリッド・アイドル
• 地の質感: 白地に淡いグレーの方眼グリッドを敷く。キラキラのグリッターボケ、パール粒の点線、ぷっくりしたハートのオブジェを重ねる
• 形: 角丸カード、ハート型バッジ、雲のような波形セクション、写真をぐるりと囲む白フチの切り抜き
• 温度感: やや涼しいパステル。ラベンダーとミントの寒色寄りに、ピンクで甘さを足す

Colors

• ブランドの軸はラベンダー。帯、商品パッケージ、締めのセクションに使う
• 系統ごとにテーマ色を決める。甘め系はピンク、ナチュラル系はミントで、見出しの帯・ハートバッジ・枠を統一する
• 商品ごとのセクション地は、テーマ色の淡い色（ピンク・ラベンダー・ミント・水色）を順に切り替える
• 価格・特典は水色のグリッター文字に白フチを付けて目立たせる
• 本文は黒ではなく濃いグレーにして、柔らかさを保つ
• セクションの区切りに、ローズやミントのパール粒の点線を入れる
• color-name-heading は文字 #FDFCFE × 背景 #A894D6 のコントラスト比が 2.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#8164C4、4.51:1）を使う。
• series-card は文字 #F4B5DB × 背景 #FEFEFE のコントラスト比が 1.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#D92090、4.57:1）を使う。
• tag-label は文字 #FDFCFE × 背景 #F4B5DB のコントラスト比が 1.65:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#D92090、4.5:1）を使う。

Typography

• 見出しは極太の丸ゴシックにし、白フチ＋色フチの二重縁取りで浮かせる
• 英字見出しは細いジオメトリック書体で、字間を 0.2em ほど広げる
• コピーは強調したい語だけを大きく、または太くし、残りは小さくする
• コピーの下には点線の罫線を敷く
• 数値（DIA・BC など）はハート型バッジの中に 2 行で入れる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ラインナップは 2〜3 列のグリッド、目元写真は 2 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 14px（375px 幅換算）
• 商品セクションは「名前見出し→大きなモデル写真→コピー→目元写真 2 枚」の順で、毎回同じ型を繰り返す
• モデル写真の左上にレンズの円形画像、左下にハートバッジを縦に 3 つ重ねる
• 系統の切り替わりには、方眼地に「系統名＋色数＋レンズのチップ」を並べたカードを挟む
• スペック類は角丸の枠ボックスか表にまとめる
• 左右の余白は約 5% にして、写真はほぼ全幅で見せる

Elevation & Depth

• 影はほとんど使わず、白フチと色フチの縁取りで立体感を出す
• ハートのオブジェだけ、つやのある 3D 風のハイライトを付ける
• ポラロイド風の写真には薄いドロップシャドウを付ける

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: モデル写真は角丸の四角に入れ、周りをパール粒で縁取る。人物は輪郭に沿って切り抜き、白フチを付ける。レンズは白フチ付きの正円
• セクション境界: 雲や波のような有機的カーブで色地を切り替え、パール粒の点線で区切る
• 目元写真は角丸の四角にし、テーマ色の太い L 字フチを片側に付ける
• スペックはハート型のバッジで表示する
• カラー名の見出しはタブ状の角丸の色帯にのせる

Components

• ハート型スペックバッジ（heart-spec-badge）: 白いハートにテーマ色のフチを付け、スペック名と数値を 2 行で入れる
• カラー名の見出し（color-name-heading）: 白抜きの極太丸ゴシック。テーマ色の帯の上に置く
• 白いピル型の誘導ボタン（button-sub）: ラベンダーの帯の中に置く白いピル型ボタン。右端に三角の矢印を付ける
• 系統紹介カード（series-card）: 方眼地の上下にパールの点線を引き、系統名と色数ピル、レンズチップを並べる
• ラインナップのタイル（lineup-tile）: 目元写真の左下にレンズ円を重ね、横にカラー名を添える。完売品は写真をミント色で覆って文字で示す
• 目元写真 2 枚の比較（eye-photo-pair）: 撮影環境の違う目元写真を 2 列で並べ、右下に白い小さなキャプションを入れる
• 度数表・スペック枠（spec-table）: ラベンダーの細い罫線の表。見出しのセルは淡いラベンダーで塗る
• パール粒の点線（pearl-divider）: 小さな丸い粒を等間隔に並べた区切り線。テーマ色に合わせて色を変える
• 系統のラベル帯（tag-label）: ピンクやミントの角丸の帯に、白文字でスペックを書く

Do's and Don'ts

Do - 色ごとのテーマ色を見出し・バッジ・フチ・セクション地で一貫させる - パールやハート、グリッターの装飾は写真の周りに散らすだけにする - 見出しにはいつも白フチを付け、写真の上でも読めるようにする - 商品セクションは同じ型で繰り返し、比べやすくする - 方眼グリッドの白地を情報セクションの共通の地にする

Don't - 黒地や強い原色を使わない - 角張ったゴシックや明朝を見出しに使わない - テーマ色を 1 つのセクションの中で混ぜない - 写真を角ばった全面配置にせず、必ず角丸か切り抜きにする - 本文に純黒を使わない

Page Structure

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

1. ファーストビュー（モデルと商品の世界観を一目で伝える）: グリッター背景にパールで縁取ったモデル写真を置き、ロゴ帯、レンズを横一列、スペック行を並べる
2. まとめ買い誘導の帯（割引を伝えて購入ページへ誘導する）: ラベンダーの帯に割引額を大きく書き、白いピル型ボタンを置く
3. コンセプト宣言（ブランドのムードを訴える）: 虹色グラデーションの極太文字と、ハート型に切り抜いた写真のコラージュ
4. ラインナップ（全色を系統別に一覧で見せる）: 方眼地に英字見出しを置き、系統ごとに 2〜3 列のタイルを並べる。ハートバッジでスペックを示す
5. 特典・価格（公式限定の割引を伝える）: 水色の地にバラを散らし、モデル写真と、白フチ付きの巨大なグリッター数字を置く
6. 系統紹介カード（系統の切り替わりを示す）: パールの点線で挟んだ方眼カードに、系統名と色数ピルを入れる
7. カラー別の詳細（繰り返し）（各色の発色と雰囲気を見せる）: テーマ色の淡い地に、名前見出し、モデル写真、ハートバッジ、点線下線付きのコピー、目元写真 2 枚を並べる
8. カラーマップ（色味と自然さで比べられるようにする）: 色系統ごとの列を持つ表にレンズを配置し、縦にグラデーションの矢印を付ける
9. レンズのこだわり（機能面の安心を伝える）: ラベンダーの枠の中に、線画アイコンと説明を 3 列で並べる
10. スペック・度数表（詳細な仕様を示す）: パッケージ画像と、角丸の枠ボックス、表を組み合わせる
11. イメージモデル紹介（モデルの人気を訴える）: ポップな文字組みと、傾けたポラロイド写真 4 枚のコラージュ
12. お知らせ（パッケージ変更を告知する）: ラベンダーの波形の地に、ビフォーアフターのイラストと注釈を置く

Imagery

• アイドル風のモデルが頬杖やハートポーズをとる正面寄りのアップ。フェイスジュエルやリボンを付ける
• 背景はパステルのグリッターボケ。透け感のあるチュールや蝶モチーフを添える
• レンズは単体の真上カットを正円に切り抜き、白フチを付ける
• 目元はスタジオ光と自然光の 2 種類を並べる
• 装飾はつやのある 3D ハート、パール、ラインストーン、小さなクマのマスコット
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に 480px 前後の SP 幅のカラムを置き、左右をグリッター地や方眼地で埋める
• ラインナップやこだわりのブロックは、PC で 4 列まで広げてよい
• 大見出しと写真は、カラム幅に合わせて拡大する

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