DESIGN.md — くすみベージュ×モーヴの上品カラコンLP（Dusty Greige Elegant Color Contact LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、やさしい・柔らかい、かわいい、ナチュラル
• キーワード: くすみカラー・欧文セリフ・明朝・ガーリー・雑誌風・カラー別テーマ
• 地の質感: ゆるいグラデーションとサテン調の光沢がある。キラッと光る小さな装飾を散らす
• 形: 丸いレンズ切り抜き、平行四辺形の帯ラベル、上部がアーチ形のフレーム、ピル型のタグ
• 温度感: 温かみのある中間色。カラーによって寒色グレーの章も混ぜる

Colors

• カラーバリエーションごとに章を分ける。章の地の色はそのカラーのイメージ色に変える
• どの色も彩度を落とす。原色は使わない
• 帯ラベルは地の色より一段濃い同系色にし、白文字を載せる
• ラインナップ・特典・スペックはクリーム地に切り替え、文字を目立たせる
• 価格・無料などの強調はモーヴのグラデーション文字だけにする
• 地の色には縦方向のやわらかいグラデーションをかける
• page は文字 #7A6058 × 背景 #D3C2B2 のコントラスト比が 3.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-accessible（#EAE2DB、4.5:1）を使う。
• color-name-band は文字 #F9F3E9 × 背景 #94737B のコントラスト比が 3.81:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#87676F、4.53:1）を使う。
• slant-label は文字 #F9F3E9 × 背景 #BFA496 のコントラスト比が 2.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら tint-1-accessible（#8B6755、4.56:1）を使う。
• spec-circle は文字 #F9F3E9 × 背景 #BFA496 のコントラスト比が 2.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら tint-1-accessible（#8B6755、4.56:1）を使う。
• offer-price は文字 #936576 × 背景 #F9F0DF のコントラスト比が 4.25:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら marker-accessible（#8D6171、4.55:1）を使う。

Typography

• カラー名は欧文セリフで大きく、右寄せで置く。上にカタカナの読みを小さく添える
• 日本語の本文と見出しは明朝体にし、字間を広めに取る
• ゴシックは特典・価格のパートだけで使う
• 数値は欧文セリフで大きく、単位は小さくする
• 欧文の小見出しは小さく、字間を大きく開けてセクション名の上に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。装用比較・ラインナップは 2 カラム、スペックは 3 つの円を横に並べる
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真は画面幅いっぱいに置き、その下にレンズの丸い画像を少し重ねる
• レンズ画像は左、キャッチは右の非対称な配置にする
• 帯ラベルは左右どちらかの端から飛び出させる
• 1 カラーを、カラー名の帯→写真→特長→装用比較→スペック→追加写真の順で 1 ブロックにまとめる
• セクション見出しは上部がアーチ形の面に中央寄せで置く

Elevation & Depth

• レンズの丸い切り抜きには白い縁と淡い影を付ける
• 装用比較の写真は角丸のカードに入れ、薄い影を付ける
• 全体は影を控えめにし、平面的な重なりで奥行きを出す

Shapes

• 角丸: 小 6px ／ 中 10px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 人物は全幅の長方形か、上部の左角だけを大きく丸めた形。レンズは正円に切り抜き、白い縁を付ける
• セクション境界: 色面を直線で切り替える。見出しの面は上部をアーチ形にする
• 帯ラベルは平行四辺形にする
• スペック値は半透明の正円に載せる
• 写真のキャプションタグはピル型にし、写真の下端に重ねる

Components

• カラー名の帯（color-name-band）: 章の色の帯に、大きな欧文と小さなカタカナを右寄せで置く。キラ光の装飾を添える
• 斜めの帯ラベル（slant-label）: 平行四辺形の帯。2 本を「×」でつないで特長を並べる
• レンズの丸い切り抜き（lens-circle）: 白い縁の正円。縁に沿って欧文のカラー名を弧状に配置する
• 装用比較カード（compare-card）: 瞳のアップ写真を2枚並べ、下にピル型のキャプションを付ける
• スペックの円（spec-circle）: 半透明の円の中に、項目名・数値・単位を縦に積む。3 つ横に並べる
• アーチ形の見出し（arch-heading）: 上部が弧になった面に、小さな欧文と大きな欧文セリフ見出しを載せる
• 特典価格のブロック（offer-price）: 太いゴシックの大見出しと、モーヴのグラデーション数字。円形のバッジとピル型タグを組み合わせる
• スペックのアイコン行（feature-icon-row）: 左にモーヴの円形アイコン、右に明朝の見出しと説明文を置く

Do's and Don'ts

Do - カラーごとに地の色を変え、各章を同じ構成で繰り返す - 欧文セリフの大きな見出しで雑誌のような表情を出す - レンズ画像は写真の端に重ねてリズムを作る - キラ光の装飾を小さく添えて、透明感を出す - 数値は円で囲み、上品にまとめる

Don't - 彩度の高い色や純黒の地を使わない - 太いゴシックを特典以外の場所で使わない - 影を強く付けたり、ボタンを立体にしたりしない - レンズを四角く切り抜かない - 文字を詰めて組まない

Page Structure

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

1. ファーストビュー（モデルとブランドの世界観を示す）: 花に囲まれた柔らかい光のポートレートの上に、白い欧文セリフのロゴを置く。下にレンズ画像を横一列に並べる
2. 新色の紹介（新色を目立たせる）: ベージュ地に新色の見出しを置き、瞳のアップとレンズの円・着色直径を配置する
3. 新色の比較（2 色の違いを伝える）: 斜めの帯ラベルを 2 本「×」でつなぐ。2 色のレンズを重ねて置く
4. カラー別の詳細（新色）（着用イメージとスペックを伝える）: カラー名の帯→写真→レンズとキャッチ→装用比較→スペックの円→ポイント文の順に並べる
5. カラー別の詳細（既存色）（全カラーを紹介する）: 同じ構成を繰り返し、地をピンク・ブルー・グレー・ベージュと切り替える。写真は上部の左角を丸める
6. ラインナップ（全色を一覧で比べる）: クリーム地とアーチ形の見出し。2 カラムで瞳の写真とレンズの円を並べ、カラー名をそれぞれのテーマ色で書く
7. 特典オファー（まとめ買いを促す）: 欧文の囲み見出しで挟む。太いゴシックの見出し、商品箱の画像、ピル型タグ、モーヴのグラデーションの価格を置く
8. レンズスペック（機能を伝えて安心してもらう）: 円形アイコンと明朝の見出し・説明文を縦に 4 行並べる
9. モデルのプロフィール（起用モデルを紹介する）: アーチ形のフレームに写真を入れる。名前を明朝で大きく、ピル型タグと中央寄せの経歴文を続ける
10. フッター（締め）: モーヴの細い帯に欧文ロゴを中央寄せで置く

Imagery

• 人物は白や淡い色の洋館風の室内で、柔らかい自然光で撮る。花・レース・リボンなどガーリーな小物を入れる
• 瞳のアップはまつ毛を強調したメイクで、正面から明るく撮る
• レンズ単体は白背景で正円に切り抜き、縁を白くする
• 章のイメージ色と衣装・背景の色を合わせる
• キラ光や光の筋の装飾を小さく入れる
• アイコンは半透明のレンズや雫を線画風に描き、円の中に入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を 480〜600px に固定して中央に置き、左右には章の色のグラデーションを広げる
• モデル写真は PC では左右 2 カラムに分け、テキストを横に並べてもよい
• ラインナップは PC では 3〜5 カラムにする
• 見出しの文字サイズは PC で 1.3 倍程度に上げる

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