DESIGN.md — くすみ水色×ピンクのコラージュ風カラコンLP（Dreamy Pastel Scrapbook Color Lens LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: かわいい、やさしい・柔らかい、上品・高級、レトロ
• キーワード: くすみパステル・レースとコラージュ・欧文スクリプト・キラキラ装飾・ドリーミー・スクラップブック
• 地の質感: 霧がかったソフトフォーカス。網点やシャボン玉、光の粒を重ね、紙・レース・布の質感を見せる
• 形: 角丸カード、アーチ窓、楕円フレーム、破った紙の縁、レース縁、スカラップ形の境界
• 温度感: やや寒色寄りのくすみブルーを基調に、ピンクとベージュで温かさを足す

Colors

• 基調はくすみブルー。章の区切りや見出しの地に使う
• カラーごとに地色をベージュ・アイボリー・ピンクに替え、レンズ色との相性を見せる
• 白カードを乗せて情報をまとめる。純白は使わず、少し温かい白にする
• 文字は黒を使わず、モカブラウンかグレイッシュブラウンにする
• 強調はクリームイエローとピンクのスクリプト文字で行い、原色は使わない
• スペックのラベルにだけ濃いグレージュを使い、全体を締める
• page は文字 #A18B7E × 背景 #F5F4F5 のコントラスト比が 2.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-body-accessible（#816B5E、4.56:1）を使う。
• feature-label は文字 #A18B7E × 背景 #CBD9E3 のコントラスト比が 2.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-body-accessible（#816B5E、4.54:1）を使う。
• lineup-card は文字 #95857C × 背景 #F5F4F5 のコントラスト比が 3.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#7C6D64、4.53:1）を使う。
• color-profile は文字 #A18B7E × 背景 #E4D2BC のコントラスト比が 2.19:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-body-accessible（#816B5E、4.5:1）を使う。
• size-badge は文字 #95857C × 背景 #F2EEEA のコントラスト比が 3.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#7C6D64、4.56:1）を使う。
• spec-card は文字 #A18B7E × 背景 #F5F4F5 のコントラスト比が 2.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-body-accessible（#816B5E、4.56:1）を使う。
• new-badge は文字 #FDFFFF × 背景 #EACAC7 のコントラスト比が 1.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら on-dark-accessible（#006464、4.58:1）を使う。

Typography

• 欧文スクリプトと和文を重ねて、一つの見出しにまとめる
• 欧文セリフの大文字の上か下に、小さなカナ読みを添える
• 和文は字間を広めに取り、中央揃えにする
• ドット調書体は区切りのアクセントとして、1 セクションにつき 1 回までにする
• 数値は欧文セリフで大きく、単位は斜体で小さくする
• 太字のディスプレイ書体は短い強調語だけに使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ラインナップと比較写真は 2 カラム
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• コンテンツはすべて中央揃えにする
• カラー紹介は楕円フレームの人物写真を左に置き、右に瞳写真を縦 2 枚並べる
• スペックは 3 つのピル枠を横一列に並べる
• 特徴紹介は 3 列にし、小物写真と短い文を組み合わせる
• 見出しの前後には広い余白を取り、キラキラ装飾を散らす

Elevation & Depth

• 白カードには淡くぼかした影を付ける（不透明度 10% 程度）
• ポラロイドや紙素材は少し傾け、ドロップシャドウで浮かせる
• レンズ画像には柔らかい外側の光彩を付ける

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 人物は縦長の楕円かアーチ型、瞳は角丸の長方形、レンズは円形で切り抜く
• セクション境界: 破った紙の縁、レース縁、緩やかなアーチやスカラップ形で区切る
• 直線的で硬い区切りは避ける
• カードの角に小さな切り欠き装飾を入れて、カードのように見せる
• スペック枠は両端を丸めたピル型にする
• ラベル帯は角の小さい長方形にし、下向きの三角を付ける

Components

• スクリプト重ね見出し（script-heading）: 大型の欧文スクリプトに、小さな和文カナとサブ欧文を重ねる
• スペックピル列（spec-pill-row）: 直径・着色外径・BC を 3 つの細線ピル枠に横並びで入れる
• 特徴ラベル帯（feature-label）: フチの特徴と色味を 2 段の小さな帯で示し、写真を指す
• ラインナップカード（lineup-card）: 白カードの中に 2 列で、色名・レンズ・瞳写真・数値を並べる
• カラー紹介ブロック（color-profile）: 楕円フレームの人物写真、瞳写真 2 枚、色見本の丸 2 つ、サイズバッジで構成する
• サイズ感バッジ（size-badge）: クリーム地のタグに太字の強調語を入れて傾ける
• レース額縁（lace-frame）: 瞳写真とレンズを並べ、レース縁の額で囲む
• 機能カード（spec-card）: 白の角丸カードに線画アイコン、2 行見出し、説明、グレージュのタグを入れる
• 新色バッジ（new-badge）: ピンクのハート形かタグに、スクリプトで新色を示す

Do's and Don'ts

Do - 写真に網点・光の粒・シャボン玉を重ね、夢のような空気感を出す - カラーごとに地色を変え、レンズ色と調和させる - 数値は欧文セリフで上品に組む - レース・切手・封筒・手帳などの紙小物でコラージュを作る - 文字色はブラウンかグレージュ系にそろえる

Don't - 黒文字や原色のボタンを使わない - 直線的なベタの区切りや、硬い四角い写真を多用しない - 太いゴシックの見出しを並べない - 影を強くしない。くっきりした輪郭にもしない - 情報を詰め込みすぎて、余白をなくさない

Page Structure

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

1. ファーストビュー（世界観と新色・全色を一目で見せる）: ソフトフォーカスの人物写真に大型セリフのロゴを重ね、下部に円形レンズを 2 個（大）と 6 個（小）並べる
2. コンセプトコピー（情緒的に導入する）: くすみブルー地に白い和文コピーを置き、縦書きの短句と星を散らす
3. 新色紹介（新色 2 色の特徴を比べる）: 縦長のブルー短冊 2 枚を段違いに並べ、瞳写真・レンズ・着色外径・キャッチを入れる
4. 3 つのこだわり（デザインの秘密を説明する）: スクリプト見出しの下に、手帳風の紙で 3 つのポイントを小物写真付きで示す
5. ラインナップ（全色を一覧にする）: 白い切り欠きカードに 2 列で、色名・レンズ・瞳写真・数値を入れる
6. 新色の詳細（1 色ずつ深く訴求する）: 風景コラージュにスクリプトの色名、ポラロイド、レース額の瞳写真、スペックピル、裸眼との比較を配置する
7. 定番色の紹介（定番色を紹介する）: フォルダのタブ風の見出しで始め、地色を変えた紹介ブロックを連続させる
8. カラーチャート（似合う色を選ぶ助けにする）: 白カードの十字軸（ブルベ/イエベ、休日/日常）にレンズを配置する
9. スペック・機能（安全性と快適性を伝える）: 小花柄の地に、線画アイコン付きの白カードを 2×2 で並べる
10. ブランドストーリー（ブランドの思いを伝える）: 空の写真にドット書体の見出しと、英文・和文の中央揃え本文を重ねる
11. イメージモデル紹介（親近感を作る）: アーチ枠の人物写真に、プロフィールを中央揃えで添える
12. フッター（パッケージを見せ、法定表記を載せる）: ピンクの紙の上にパッケージ写真を置き、小さな注釈を入れる

Imagery

• モデルは白いレースや淡いブラウスを着せ、ハイキーでピンク寄りに柔らかく撮る
• 瞳のアップは水平にトリミングし、まつ毛を強調して明るく撮る
• レンズ単体は真上から撮り、白背景で円形に切り抜く
• ケーキ・ティーカップ・フォーク・ドールハウスなど、少女趣味の小物を使う
• ポラロイド、切手、封筒、レース、マスキングテープでコラージュする
• キラキラ星、シャボン玉、網点のオーバーレイを散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版がないため、中央の 375〜480px 幅の縦長カラムを維持する
• PC では左右に基調のくすみブルーか小花柄を敷く
• ラインナップと機能カードは PC で 3〜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 行書くと起動時に読み込まれる。