DESIGN.md — くすみラベンダー×ボルドーのカラコン LP（Dusty Lavender Girly Color Contact LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: かわいい、上品・高級、ラグジュアリー・ダーク
• キーワード: くすみラベンダー・ボルドー・小悪魔・発光文字・アーチ枠・リボン
• 地の質感: 背景にうっすら豹柄やぼかしの陰影。文字は白に紫やピンクのグロー（外側の光彩）を付ける。
• 形: アーチ型の写真枠、角丸の帯や小さいカード、ピル型のタグ、円形のスペックバッジ。
• 温度感: ややクールで甘い。くすんだ寒色の紫に、温かいワインレッドを差す。

Colors

• 商品カラーごとにテーマ色を切り替える。1 色目はラベンダー紫、2 色目はボルドー。
• 濃色地では文字はすべて白にし、紫やピンクの光彩を付ける。
• 強調する漢字だけ白からピンクへのグラデーションにする。
• スペック帯やカードは地より一段暗い紫の半透明にする。
• 後半の説明パートは明るいラベンダー地にし、文字は濃紫にする。
• 原色や純黒は使わない。黒はレンズ写真とグローブだけにする。
• page は文字 #463A43 × 背景 #AC9AB2 のコントラスト比が 4.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-accessible（#B3A3B9、4.55:1）を使う。

Typography

• カラー名は細い欧文セリフで大きく 2 行にし、日本語読みは隅付き括弧で下に添える。
• キャッチは強調する漢字を大きく、助詞を小さくしてジャンプ率を付ける。
• 濃色地の文字には白とピンクのグローを付ける。
• 英字の小見出しは大文字で、字間 0.2em 以上の細いサンセリフにする。
• リード帯の日本語は字間を広く取って中央揃えにする。
• 数値スペックは数字を大きく、単位を小さく組む。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ポイントは 3 列、ラインナップは 2 列、度数表は 6 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• セクション背景は全幅、中身は左右に約 5% の余白を取る。
• 写真パネルは左右 5% 内側の角丸の箱に収める。
• レンズの円形写真を人物写真の左端に重ね、はみ出して配置する。
• カラーごとに同じ構成（ビジュアル→キャッチ→目元→スペック→ビフォーアフター→説明）を繰り返す。
• セクションの終わりに薄い欧文の署名ラインを入れる。

Elevation & Depth

• 写真パネルの外周に紫の柔らかいぼかしを付け、背景に溶かす。
• 文字には外側の光彩を付ける。立体的な影は使わない。
• カードは半透明の暗い紫で、影は弱くする。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 人物はアーチ型（上が半円）の枠、レンズは正円、目元写真は角丸の四角
• セクション境界: 直線で切り替える。境界はぼかしで溶かすことが多い
• 英字タグや Before/After のラベルはピル型にする。
• スペックバッジは正円にする。
• 要所に十字のキラ星とリボンのイラストを散らす。

Components

• アーチ型の人物枠（arch-photo-frame）: 上部が半円の淡色アーチの中に人物を配置し、欧文の商品名を重ねる。
• レンズの円形写真（lens-circle）: フチのドットまで見えるレンズの拡大写真を正円で写真に重ねる。
• スペック帯（spec-band）: 暗い紫の帯に直径などの数値を大小の欧文で並べる。下に補足のピル帯を付ける。
• 細枠のピルタグ（pill-tag）: 白い細線の枠に、細い欧文の補足を中央揃えで入れる。
• ビフォーアフターの目元比較（before-after）: 2 列の目元写真の左上に、濃紫のピル型ラベルを付ける。
• ポイントカード（point-card）: 3 列の濃紫の角丸カード。上に小さい番号、中に太字のポイントを入れる。
• 円形スペックバッジ（spec-circle）: 濃紫の円の中に、大きな数値・見出し・小さな説明を入れる。
• 度数表（power-chart）: 白い角丸のセルを 6 列のグリッドに並べ、度数を濃紫の文字で入れる。

Do's and Don'ts

Do - カラーごとにテーマ色を変え、構成は揃える。 - 白文字には必ず淡いグローを付ける。 - 細い欧文セリフの大きな商品名を主役にする。 - キラ星・リボン・ハートを控えめに散らす。 - 写真の境界はぼかしで背景に溶かす。

Don't - 鮮やかな原色や蛍光色を使わない。 - 太いゴシックの欧文で商品名を組まない。 - 白い地を広く取らない（度数表まわりに限る）。 - 角張った四角のボタンや強いドロップシャドウを使わない。 - 装飾を詰め込みすぎて人物の顔を隠さない。

Page Structure

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

1. ファーストビュー（新商品の登場とモデルを印象づける）: 上部に字間を広げたコピー、アーチ枠の人物、大きな欧文の商品名、新発売の筆記体を置く。
2. カラー一覧とスペック（展開カラーと基本数値を示す）: レンズの円形写真を 2 つ並べ、カラー名と数値帯を添える。
3. 登場告知キャッチ（新登場を強く打ち出す）: 巨大な数字と斜体の欧文、薄い欧文の背景文字、キラ星のラインで構成する。
4. カラー紹介（2 色）（各カラーの世界観を見せる）: 角丸パネルに人物・レンズ・目元を重ね、欧文のカラー名とピルタグを置く。2 色目はボルドー地にする。
5. カラー別ビジュアル（着用イメージを情緒的に訴える）: アーチ枠の人物に明朝体の大きなキャッチを重ね、レンズ円を左に配置する。
6. 印象キャッチと目元アップ（なりたい顔を言語化する）: 大小を付けたグロー見出しと、角丸の目元写真を置く。
7. カラー別スペックと比較（数値と装着の変化を見せる）: スペック帯、ビフォーアフター 2 列、レンズ拡大＋説明 3 行のカード、欧文の署名ラインを置く。
8. レンズポイント（デザインの強みを整理する）: 明るいラベンダー地に人物写真と縦書きのコピー、ポイントカードを 3 列に並べる。
9. ラインナップと度数表（選べるカラーと度数を一覧にする）: 2 列のカード（上にラベル）と、白セルの 6 列の度数表を置く。
10. スペック詳細（機能と法定表記を示す）: 円形バッジを 3＋2 で並べ、濃紫の表で承認番号などを記載する。
11. ブランドコンセプトとモデル紹介（ブランドの由来とモデルで信頼を補う）: 楕円のぼかしの中に造語の由来を示し、猫の写真を添える。円形の人物写真の上に半透明の帯でプロフィールを載せる。

Imagery

• 人物は淡いグレーの背景で撮る。正面または斜めの上目遣いで、ピンクのチークとリップを強めにする。
• 黒サテンのグローブ、ビジューのカチューシャ、赤いベロアリボン、パールで甘く妖しくスタイリングする。
• 目元は極端にアップで撮る。ピンクのまぶたと長いまつげを見せ、レンズを主役にする。
• レンズ単体は白背景で真上から撮り、フチのドットのグラデーションを見せる。
• 装飾は十字のキラ星、細線のハート、リボン、猫の肉球を使う。地に薄い豹柄も敷く。
• 白くて長毛の猫の写真をブランドのモチーフにする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に 375〜480px 幅の SP デザインをそのまま置き、左右はラベンダー地で埋める。
• PC に広げる場合、カラー紹介は写真とテキストの 2 カラムにする。
• ポイントカードやスペックバッジは PC で横 1 列に並べる。
• 度数表は PC で 8〜12 列に広げる。

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