DESIGN.md — 生成り紙×くすみローズのカラコン LP（Greige Paper Romantic Color Lens LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、かわいい、やさしい・柔らかい、ナチュラル
• キーワード: 生成り紙・くすみカラー・アーチ窓・セリフ英字・ガーリー・ナチュラル
• 地の質感: 地は和紙・クラフト紙のような細かい繊維のテクスチャ。写真の面は柔らかい光で白っぽく飛ばす。
• 形: アーチ窓・大きな角丸カード・ピル型タグ・円形のレンズ画像。細い枠線で囲む。
• 温度感: 暖かめ。ベージュとブラウンにローズの差し色を入れる。

Colors

• 地は生成り紙テクスチャ、カードやタグは白で抜く
• 文字と線はくすみブラウンでそろえ、黒は使わない
• カラーごとに見出し・番号・バッジの色をその色のテーマ色にする
• 差し色はローズ・オリーブ・ゴールドのくすみトーンに限る
• 強い原色や蛍光色は使わない
• セクションの切り替えは淡いベージュの面の濃さで表す
• arch-frame-hero は文字 #69554F × 背景 #C59E92 のコントラスト比が 2.88:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら tint-1-accessible（#E0CCC6、4.52:1）を使う。
• style-card は文字 #986C7B × 背景 #E5D4CA のコントラスト比が 3.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#785460、4.51:1）を使う。
• mood-badge は文字 #E5D4CA × 背景 #A05B56 のコントラスト比が 3.54:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#874D49、4.58:1）を使う。
• hashtag-pill は文字 #986C7B × 背景 #E5D4CA のコントラスト比が 3.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#785460、4.51:1）を使う。
• oval-message は文字 #6E5E55 × 背景 #E5D4CA のコントラスト比が 4.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-body-accessible（#6A5A52、4.57:1）を使う。

Typography

• 英字はセリフ体を大きく使い、和文はゴシックか明朝を控えめな大きさにする
• カラー名は英字を大きく 2 行で置き、上にカタカナを小さく添える
• 小さな手書き風の英字で "〜♡" のような飾りの添え書きを入れる
• 強調語は傍点やフォントサイズの差で見せる
• 本文は中央揃えで 2 行程度にとどめる
• スペックは英字ラベル・数値・単位を縦に積み、縦線で区切る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。瞳の比較写真とスペックは 2〜3 分割
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• カラー紹介ブロックは細い枠線で囲み、写真を枠からはみ出させる
• 番号は枠の上辺にかぶせて配置する
• before/after の写真は 2 枚を横に並べる
• 機能説明は 2×2 のグリッドにし、細線で区切る
• 左右に 6% ほどの余白を取る

Elevation & Depth

• 影はほとんど使わず、枠線と色面で階層をつける
• レンズ画像の白い円にだけ、ごく淡いぼかし影をつける
• カードは白地にして、影なしで地から浮かせる

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: 人物写真は大きな円弧・アーチ状に切り抜く。瞳のアップは角丸の長方形、レンズは正円にする
• セクション境界: 楕円の大きな色面や、アーチ形の窓で区切る
• タグ行は白いピル型にする
• 感想を表すバッジはテーマ色の正円にする
• ファーストビューはクラシックな額縁風のアーチ窓にする
• 枠線は 1px の細線にする

Components

• 額縁アーチのメイン写真（arch-frame-hero）: 装飾的なアーチの縁取りの中にモデル写真を入れ、縦書きのコピーを重ねる
• カラーの一覧（color-swatch-row）: 円形のレンズ画像 6 個を横に並べ、下にテーマ色の英字名をつける
• スタイル別カード（style-card）: 白い角丸カードに斜体の番号と色付きの見出しを置き、瞳写真を 2 枚並べる
• 番号の見出し（number-heading）: #01 形式の巨大な斜体セリフ番号を、テーマ色で枠の上にかぶせる
• 感想バッジ（mood-badge）: テーマ色の正円に白文字で、質感を表す短い語を入れる
• ハッシュタグのピル（hashtag-pill）: 白いピル型に、ハッシュタグを 2 つテーマ色で並べる
• スペックの 3 分割（spec-row）: DIA・BC・GDIA の数値を大きなセリフ体で並べ、縦線で区切る
• 機能の 2×2 グリッド（feature-grid）: 線画アイコン・見出し・説明を十字の細線で区切って並べる
• 楕円のメッセージ（oval-message）: 白い縦長の楕円の中に、中央揃えのブランドメッセージとロゴを入れる

Do's and Don'ts

Do - カラーごとにテーマ色を決め、番号・英字名・バッジ・タグの色をそろえる - 地には紙のテクスチャを敷き、温かい質感を出す - 人物写真はアーチや円弧で柔らかく切り抜く - 英字のセリフ体を大きく使って雑誌のような雰囲気にする - before/after とスペックを同じ型で繰り返す

Don't - 純黒の文字や高彩度の色を使わない - 濃い影や立体的なボタンを使わない - 角張った写真の切り抜きを多用しない - 太いゴシックの大見出しで押し売り感を出さない - 情報を詰め込みすぎて余白をなくさない

Page Structure

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

1. ファーストビュー（ブランドの世界観と第一印象を伝える）: 花の背景にロゴを置き、額縁アーチの中にモデル写真と縦書きコピーを入れる
2. カラー一覧とスペック（全色をひと目で見せる）: 円形のレンズ 6 個と英字名を並べ、下に基本スペックを 1 行で置く
3. コンセプト訴求（自然なサイズ感を伝える）: アーチ形の枠の中に強調語の大見出し、レンズと瞳の写真、丸印付きの箇条書きを入れる
4. スタイル別の提案（雰囲気からカラーを選べるようにする）: 楕円のベージュ面の上に白カードを 3 枚。番号付きで瞳写真を 2 枚ずつ並べる
5. カラー別の詳細（繰り返し）（色ごとの印象と装用イメージを見せる）: 番号・円弧のモデル写真・英字名・バッジ・瞳のアップ・タグ・before/after・スペックの順に並べる
6. カラーチャート（色の位置づけを比べられるようにする）: 角丸枠の中に十字の軸を引き、レンズとテーマ色のラベルを散らして置く
7. レンズの機能（安心感と機能を伝える）: 2×2 のグリッドに線画アイコン・見出し・説明を置く
8. ブランドメッセージ（共感を得て余韻を残す）: 写真の上に白い楕円を重ね、中央揃えの文とロゴを入れる。下にさくらんぼと人物の写真を並べる

Imagery

• モデルは柔らかい自然光の前で撮り、白っぽく飛ばしたハイキーな写真にする
• ピンクのツイードやレースなど、ガーリーな衣装と小物を使う
• 瞳のアップは横長に切り抜き、まつ毛までくっきり見せる
• レンズ単体は白背景で、斜めから質感がわかるように撮る
• さくらんぼ・白いバラ・チュールなどを小物にする
• アイコンは細い線画で、ブラウンに淡いローズを差す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に 480px ほどの SP 幅のカラムを置き、左右に紙テクスチャを敷く
• PC に広げる場合は、カラー詳細を写真と情報の 2 カラムにする
• スタイル別カードは PC では 3 列に並べる
• 機能グリッドは 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 行書くと起動時に読み込まれる。