DESIGN.md — 水色×くすみ紺のきらめくカラコン LP（Dreamy Crystal Pastel Color Contact LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: かわいい、上品・高級、やさしい・柔らかい、清潔・爽やか
• キーワード: 水光・きらめき・ガラス・妖精・パステル・ドリーミー
• 地の質感: 霧がかったグラデーション地に、光の粒・十字の星・ガラス小物のぼけを重ねる。部分的にノート罫線の紙の質感を使う。
• 形: ピル型バッジ、角丸の写真カード、雲形の吹き出し、ハート形の番号、アーチ型の額縁。
• 温度感: 寒色寄り。カラーごとにピンクやラベンダーへ温度を変える。

Colors

• 地は淡い水色〜シルバーの寒色グラデーションを基本にする。
• カラーごとのセクションは、レンズの色に合わせて水色・ピンク・ラベンダーへ地の色を変える。
• スペックバッジと表の見出しセルはくすみ紺で統一する。
• ピンクはピンク系カラーの名前・バッジ・吹き出しに限定して使う。
• 黄色のマーカーとミントのテープは、手書き風の強調ポイントに少量だけ使う。
• 純黒は使わない。文字は紺〜グレー紺にする。
• page は文字 #64667A × 背景 #AECBDC のコントラスト比が 3.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-accessible（#DBE8EF、4.51:1）を使う。
• heart-number は文字 #ECFEFF × 背景 #A2BACF のコントラスト比が 1.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#50779A、4.54:1）を使う。
• cloud-bubble は文字 #ECFEFF × 背景 #F3B6B6 のコントラスト比が 1.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#DC2C2C、4.55:1）を使う。

Typography

• カラー名は大きな欧文セリフで中央に置き、上にカナのルビを小さく添える。
• 英字のセクション見出しは細いセリフ体にし、十字の星の装飾を角に付ける。
• キャッチは和文明朝で、文字ごとに大小をつけて組む。
• 手書き風コピーは少し右上がりに傾けて配置する。
• 見出しや写真上の文字には白いグローや薄い影を付けて柔らかく浮かせる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。比較写真とカラー一覧は 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• カラーごとのセクションを、全面写真→キャッチ→レンズとバッジ→比較 2×2 グリッドの同じ順に繰り返す。
• 比較グリッドは列見出しに茶目・黒目を置き、装用前と装用後を下向きの三角でつなぐ。
• セクションの末尾にカラー名の大きな透かし文字を置く。
• 特長は左に円形アイコン、右に見出しと本文を置く横並びの行を縦に積む。
• スペック表は左に紺の見出しセル、右に白セルを置く 2 列にする。

Elevation & Depth

• レンズ画像は白い縁取りと柔らかいドロップシャドウで浮かせる。
• 比較写真カードは細い枠線と弱い影を付ける。
• 雲形の吹き出しとプロフィール写真は、少し傾けて紙を貼ったように見せる。
• 強い影は使わず、光のグローで奥行きを出す。

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 人物写真は全幅で配置し、下端は地にフェードさせる。レンズ画像は円形、目元写真は角丸の長方形、プロデューサー写真はアーチ型の金の額縁で切り抜く。
• セクション境界: グラデーションのフェードで次のセクションにつなぐ。一部は直線で地の色を切り替える。
• スペックは楕円のピル型バッジで見せる。
• 番号はハート形の中に入れ、上に手書き風の Point 表記を重ねる。
• メイクのアドバイスは雲形の吹き出しに入れる。
• レンズのこだわりは虹色ホログラムのタグ形カードで見せる。

Components

• スペックピルバッジ（spec-badge）: 直径などの数値を 2 段で入れる楕円バッジ。2 個を横に並べる。
• カラー名見出し（color-name-heading）: 大きな欧文セリフにカナのルビを添え、点線付きの手書き風サブコピーを斜めに付ける。
• 星付き英字見出し（section-title-sparkle）: 細いセリフの英字に、十字の星と細いアンダーラインを付ける。
• 装用比較グリッド（compare-grid）: 茶目・黒目の 2 列。装用前と装用後の目元写真を三角の矢印でつなぐ。
• ハート番号（heart-number）: ハート形に数字を入れ、手書き風の Point 表記を重ねる。下に 2 行の太字見出しを置く。
• 雲形メイク吹き出し（cloud-bubble）: 雲形の吹き出しに中央揃えの白文字を入れ、黄色マーカーで要点を強調する。
• ホログラムタグカード（holo-tag）: 虹色ホログラムのタグ形カード。2 つの特徴を × でつないで見せる。
• 特長アイコン行（feature-row）: 紺の円に白の線画アイコンを入れ、右に見出しと説明を置く。
• スペック表（spec-table）: 紺の見出しセルと白の値セルを 2 列に並べ、行の間に細い隙間を空ける。

Do's and Don'ts

Do - カラーごとのセクションは同じ構成を繰り返し、地の色だけをカラーに合わせて変える。 - 画面の各所に十字の星や光の粒を散らして、きらめき感を保つ。 - レンズ画像は拡大図と装用写真をセットで見せる。 - 数値スペックはピル型バッジに入れて視認性を上げる。 - ノート罫線の地と手書き風の装飾で、親しみのあるポイント解説を作る。

Don't - 原色や純黒をベタ塗りしない。 - 角ばった太いゴシックを大見出しに使わない。 - 比較写真のサイズや並びを、カラーごとに変えない。 - 装飾のない無地の白背景だけのセクションを続けない。 - 影を強くして重く見せない。

Page Structure

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

1. ファーストビュー（世界観とシリーズ名を一目で伝える）: モデルの全面写真に和文キャッチと大きな欧文ロゴを重ね、下にレンズを並べてスペック帯を置く。
2. カラーラインナップ（全カラーを一覧で見せる）: 2 カラムで目元写真とレンズを並べ、直径バッジとカラー名を付ける。
3. 新色紹介（新色を強く訴求する）: 大きな目元写真とレンズに斜めの手書き風コピーを添え、ホログラムのタグでこだわりを見せる。
4. カラー詳細（カラーの数だけ繰り返し）（色ごとの魅力と装用感を伝える）: 全面写真、明朝のキャッチ、バッジ、2×2 の装用比較を置き、末尾にカラー名の透かし文字を入れる。
5. デザインのポイント（レンズの特徴とメイク提案を伝える）: ノート罫線の地にハート番号 2 つ、矢印付きの目元アップ、雲形の吹き出し、スペック行を置く。
6. カラーマップ（色の印象を比べて選びやすくする）: 十字の座標軸の両端にピル型ラベルを置き、レンズを配置する。
7. ブランドコンセプト（世界観を情緒的に伝える）: 全面写真の上に楕円の線枠を重ね、中央揃えの白文字を入れる。
8. プロデューサー紹介（監修者で信頼と共感を得る）: 金のアーチ額縁の写真、名前、中央揃えのプロフィールを置く。
9. レンズの特長（機能面の安心を伝える）: 紺の円形アイコンと説明の行を 5 つ縦に並べる。
10. レンズスペック（仕様を正確に伝える）: 紺の見出しセルと白セルの 2 列表にする。

Imagery

• モデルは白いレースの衣装とティアラなどで、透明感と姫っぽさを出す。
• クリスタルの瓶やパール、ガラスの小物を前景に置き、ぼかして奥行きを出す。
• 背景は水色やピンクのソフトフォーカスにして、ハイキーに撮る。
• 目元のアップは正面から撮り、肌をオレンジ寄りの暖かい色に揃える。
• 十字の星、光の粒、グリッターの縁取り、手描きの矢印や星を装飾に使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に SP 幅（480px 前後）のカラムを置き、左右はぼかした背景やグラデーションで埋める。
• PC に広げる場合、カラーラインナップは 3〜4 カラムにする。
• 装用比較は PC でも 2×2 を保ち、写真を拡大する。
• 大見出しの欧文は PC で 72px 前後まで拡大する。

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