DESIGN.md — くすみモカ×洋館フレームのカラコン LP（Dusty Mocha Fairytale Color Contact LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: かわいい、上品・高級、やさしい・柔らかい、レトロ
• キーワード: くすみカラー・洋館フレーム・筆記体・リボンと鍵・ドーリー・グラデーション背景
• 地の質感: マットでやわらかいグラデーション。細い白線とドットのきらめきで、紙もののように繊細な質感にする。
• 形: アーチ屋根の窓枠と柱の線画、タグ型ラベル、角丸の小さいカード、ピル型のチップ。
• 温度感: 暖かめ。ピンクがかったベージュとブラウンが中心で、カラーごとにグレーやラベンダーの寒色も入れる。

Colors

• 地の色は生成りグレー・くすみピンク・グレージュのくすんだ中間色だけを使う。純色は使わない。
• カラー紹介のブロックは、レンズの色味に合わせて背景グラデーション（モカ・キャメル・グレー・ピーチ・ラベンダー）を変える。
• 写真や濃い地の上の文字・線は白にそろえる。
• 強調色のゴールドは、スペック数値と性能の見出しだけに使う。
• コレクションカードのタグとピンは、カラーごとのくすみ色（グレー・ブルーグレー・オリーブ・ローズ）で塗り分ける。
• 文字は黒を使わず、濃いモカブラウンにする。
• house-frame は文字 #FEFDFB × 背景 #C6ADA6 のコントラスト比が 2.08:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-alt-accessible（#956B5F、4.54:1）を使う。
• window-lens-card は文字 #FEFDFB × 背景 #C6ADA6 のコントラスト比が 2.08:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-alt-accessible（#956B5F、4.54:1）を使う。
• power-chip は文字 #FEFDFB × 背景 #A18E88 のコントラスト比が 3.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#857069、4.57:1）を使う。

Typography

• カラー名は大きな白い筆記体にし、その下に小さなカタカナのルビを点で挟んで添える。
• 本文は短い 2 行の中央揃えにし、字間を広めにとる。
• スペックは「英字ラベル＋大きめの数値＋単位」をそろえ、縦線で区切る。
• セクションの見出しは英字のセリフ体を主役にし、日本語は小さく添える。
• 数値の強調には、ゴールドの文字と下に敷いたマーカーを使う。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ラインナップとレンズの拡大写真は 2 列のグリッド、アイコンは 3 列、度数表は 6 列。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 40px、基本単位 8px、カード内 16px（375px 幅換算）
• カラー紹介は全幅の写真ブロックを区切りなしで縦に積む。
• 洋館フレームは左右に 5% ほどの余白をとって中央に置く。
• コレクションカードは、左にレンズ画像と名前、右に装用写真を 2 枚縦に並べる。
• スペックのパネルは白い大きな角丸カードにし、項目を細い線で区切る。
• 各カラーブロックの最下段に、英字の小さなフッター行を左・中央・右に置く。

Elevation & Depth

• 影はほとんど使わず、平面的に見せる。
• コレクションカードだけ、色付きの板を斜め後ろに重ねてずらし、奥行きを出す。
• スペックパネルにはごく薄い内側の影を入れ、浮いて見える程度にとどめる。

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 28px。ボタンはピル型。
• 写真の切り抜き: 装用写真は窓枠の中の角丸の長方形、レンズは正円、プロフィールは装飾的な曲線の額縁で切り抜く。
• セクション境界: スペックのセクション上端は大きな凸のカーブにする。ほかは装飾ラインやフレームで区切る。
• 洋館の窓・柱・アーチ屋根を白や生成りの細い線画で描き、コンテンツを囲む。
• ラベルはピル型にし、先頭に小さな丸点を付ける。
• 度数チップは小さな角丸の四角にする。
• タグは斜めに傾けたピル型にする。

Components

• 洋館フレーム（house-frame）: アーチ屋根・塔・柱・扉を描いた線画の枠。中にラインナップやコンセプトを入れる。
• 窓枠の装用写真カード（window-lens-card）: ハート付きの窓枠の中に目元の写真を入れ、右下にレンズの円を重ねる。下に英字のセリフ体のカラー名とカタカナを添える。
• New ハートバッジ（new-heart-badge）: 白い線のハートの中に、筆記体で新色であることを示す。
• スペック行と新色ラベル（spec-row）: 直径などの数値を縦線で区切って並べる。その下の横線の中央に、ピル型の新色ラベルを置く。
• 装用の比較帯（compare-strip）: 角を切り欠いた枠に、裸眼と装用の目元を左右に並べ、下にピル型ラベルを付ける。
• コレクションカード（collection-card）: 白いカードの後ろに色付きの板を重ね、ピンで留めた見せ方にする。中は筆記体の名前、スペックのチップ、説明、写真 2 枚、斜めのタグ。
• 性能パネル（spec-panel）: 白い大きな角丸カード。円形アイコンとゴールドの見出し、説明文を横に並べる。
• 度数チップ（power-chip）: モカの地に、薄ピンクベージュのチップを 6 列で並べた度数表。
• 装飾の区切り線（ornament-divider）: 中央にリボンや唐草を置いた細い横線。

Do's and Don'ts

Do - カラーごとに背景色のグラデーションを変え、レンズの色味を伝える。 - 白い筆記体とレンズの円を、写真の下部に重ねて配置する。 - リボン・鍵・ハート・ドット状のきらめきを、写真の余白に小さく散らす。 - スペックの表記は、すべてのカラーで同じ書式にそろえる。 - 線画のフレームで囲み、絵本のような世界観を保つ。

Don't - 彩度の高いピンクや赤、純粋な黒を使わない。 - 太いゴシックの大きな訴求文字や、価格の煽りを入れない。 - 影の強い立体的なボタンを使わない。 - 角丸を大きくしすぎてポップな印象にしない。 - 写真をカード状に小さく切り刻まない。モデル写真は全幅で見せる。

Page Structure

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

1. ファーストビュー（新色であることと世界観を一目で伝える）: 全幅のモデルのアップ写真。左上に白い筆記体の新色ロゴ、下部に短いコピーとロゴを重ね、レンズの円を 5 個×2 段で並べる。
2. ラインナップ一覧（全カラーを比較できるようにする）: 洋館フレームの中に、窓枠の装用写真を 2 列で並べる。スペック行で前半と後半に区切る。
3. カラー個別紹介（繰り返し）（各カラーの印象と装用イメージを伝える）: 全幅のモデル写真、筆記体の名前とレンズ、スペック行、説明 2 行、比較帯、英字フッターの順に並べる。背景はカラーごとのグラデーションにする。
4. コレクション（残りのカラーをまとめて見せる）: 生成りの地に、ピンで留めたカードを縦に積む。
5. レンズの性能（薄さ・含水率・機能で安心感を与える）: 上端をカーブにしたベージュの地に白いパネルを置く。ゴールドの数値、図解、3 列のアイコンを並べる。
6. 度数表（対応する度数を示す）: 装飾ラインで挟んだモカのパネルに、チップを 6 列で並べる。
7. コンセプト（ブランドの価値観を伝える）: アイボリーの洋館フレームに、アーチ型の写真と扉の写真を並べ、中央揃えの短い文を置く。
8. イメージモデル紹介（起用モデルで信頼感と親近感を出す）: 曲線の額縁に入れた写真、名前、ピル型の見出し、中央揃えの経歴文。
9. 動画・締め（動画で世界観を補足する）: ロゴの丸マークと英字を左右に置いた帯の下に、動画を埋め込む。

Imagery

• モデル写真は顔のアップを中心に、柔らかい自然光で撮る。肌はマットで血色感のあるピンクメイクにし、背景はぼかす。
• 目元の写真は左右対称の横長クロップで、まつ毛とレンズがはっきり見えるようにする。
• レンズ単体は正面から撮った正円で、ドット状のフチが見えるようにする。
• 白い線画の小物（リボン・鍵・ハート・ピクセル風のきらめき）を散らす。
• コンセプトの写真は、ポラロイドやドアなどの生活雑貨を淡いトーンで撮る。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に 480〜600px 幅で SP のデザインをそのまま置き、左右は生成りの地で埋める。
• PC に広げる場合、ラインナップは 4 列、コレクションは 2 列にする。
• カラー個別紹介は、写真を左、情報を右に置く 2 カラムにしてもよい。
• 度数表は 8〜10 列に広げる。

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