--- version: alpha name: Dreamy Crystal Pastel Color Contact LP description: 淡い水色とラベンダーの地に、きらきら光るエフェクトとガラス小物の写真を重ねた夢かわいいカラコン LP。欧文セリフの大きな商品名と、くすみ紺のピル型スペックバッジ、目元の比較写真グリッドを、カラーごとに同じ型で繰り返す。 colors: primary: '#5C6890' on-primary: '#ECFEFF' background: '#AECBDC' background-alt: '#E3E6ED' secondary: '#A2BACF' text: '#3B3D59' text-body: '#64667A' text-muted: '#8996A9' accent-1: '#E88FA8' accent-2: '#F3B6B6' accent-3: '#ABE4BD' tint-1: '#FFE9EB' marker: '#F2D23A' line: '#BCC3CE' background-accessible: '#DBE8EF' secondary-accessible: '#50779A' accent-2-accessible: '#DC2C2C' typography: display: fontFamily: Playfair Display fontSize: 48px fontWeight: 700 lineHeight: 1.1 headline-lg: fontFamily: Cormorant Garamond fontSize: 36px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.02em headline-md: fontFamily: Shippori Mincho fontSize: 26px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Yomogi fontSize: 22px fontWeight: 400 lineHeight: 1.4 label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 4px md: 10px lg: 24px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' spec-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 36px color-name-heading: textColor: '{colors.on-primary}' typography: '{typography.display}' height: 90px section-title-sparkle: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 60px compare-grid: textColor: '{colors.text-muted}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 320px heart-number: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' height: 60px cloud-bubble: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-primary}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 200px holo-tag: textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 150px feature-row: textColor: '{colors.text-body}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 90px spec-table: textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 40px --- # DESIGN.md — 水色×くすみ紺のきらめくカラコン LP（Dreamy Crystal Pastel Color Contact LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: かわいい、上品・高級、やさしい・柔らかい、清潔・爽やか - **キーワード**: 水光・きらめき・ガラス・妖精・パステル・ドリーミー - **地の質感**: 霧がかったグラデーション地に、光の粒・十字の星・ガラス小物のぼけを重ねる。部分的にノート罫線の紙の質感を使う。 - **形**: ピル型バッジ、角丸の写真カード、雲形の吹き出し、ハート形の番号、アーチ型の額縁。 - **温度感**: 寒色寄り。カラーごとにピンクやラベンダーへ温度を変える。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#5C6890` | ブランドのくすみ紺（バッジ・見出し） | 4% | 推定 | | `on-primary` | `#ECFEFF` | 紺バッジ上の白文字 | 1% | 画素の実測 | | `background` | `#AECBDC` | 淡い水色のベース地 | 25% | 画素の実測 | | `background-alt` | `#E3E6ED` | シルバーグレーの地（プロデューサー・特長） | 15% | 画素の実測 | | `secondary` | `#A2BACF` | スチールブルー（帯・ハート番号） | 6% | 画素の主要色に補正 | | `text` | `#3B3D59` | 見出しの紺文字 | 2% | 画素の実測 | | `text-body` | `#64667A` | 本文のグレー紺 | 2% | 画素の実測 | | `text-muted` | `#8996A9` | 注釈の薄いグレー | 1% | 画素の主要色に補正 | | `accent-1` | `#E88FA8` | ピンク（ハニー系カラーのバッジ・名前） | 2% | 推定 | | `accent-2` | `#F3B6B6` | サーモンピンク（メイク吹き出し） | 2% | 画素の実測 | | `accent-3` | `#ABE4BD` | ミントグリーンのテープ | 0% | 画素の実測 | | `tint-1` | `#FFE9EB` | ピンク系セクションの地 | 7% | 画素の実測 | | `marker` | `#F2D23A` | 黄色のマーカー線 | 0% | 推定 | | `line` | `#BCC3CE` | スペック表の罫線・区切り線 | 0% | 画素の主要色に補正 | | `background-accessible` | `#DBE8EF` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#50779A` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#DC2C2C` | AA を満たす補正値（計算） | | 計算 | - 地は淡い水色〜シルバーの寒色グラデーションを基本にする。 - カラーごとのセクションは、レンズの色に合わせて水色・ピンク・ラベンダーへ地の色を変える。 - スペックバッジと表の見出しセルはくすみ紺で統一する。 - ピンクはピンク系カラーの名前・バッジ・吹き出しに限定して使う。 - 黄色のマーカーとミントのテープは、手書き風の強調ポイントに少量だけ使う。 - 純黒は使わない。文字は紺〜グレー紺にする。 - `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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 商品名・カラー名の大見出し | 欧文セリフ | Playfair Display | 700 | 48px | 1.1 | 0.0em | | `headline-lg` | セクションの英字見出し | 欧文セリフ | Cormorant Garamond | 400 | 36px | 1.2 | 0.02em | | `headline-md` | カラーのキャッチ（和文） | 明朝 | Shippori Mincho | 600 | 26px | 1.4 | 0.02em | | `headline-sm` | 特長項目の見出し・ポイント見出し | ゴシック | Zen Kaku Gothic New | 700 | 18px | 1.5 | 0.05em | | `body-md` | 本文・説明文 | ゴシック | Noto Sans JP | 500 | 13px | 1.9 | 0.03em | | `note` | 注釈・画像の但し書き | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.0em | | `accent` | 斜めに入れる手書き風コピー・Point 表記 | 手書き・筆 | Yomogi | 400 | 22px | 1.4 | 0.0em | | `label-button` | スペックバッジ・表の見出しセル | ゴシック | Noto Sans JP | 500 | 12px | 1.2 | 0.05em | - カラー名は大きな欧文セリフで中央に置き、上にカナのルビを小さく添える。 - 英字のセクション見出しは細いセリフ体にし、十字の星の装飾を角に付ける。 - キャッチは和文明朝で、文字ごとに大小をつけて組む。 - 手書き風コピーは少し右上がりに傾けて配置する。 - 見出しや写真上の文字には白いグローや薄い影を付けて柔らかく浮かせる。 - 書体は画像からの推定で、フォント名は近い印象の 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-04ad1ba2`（元 LP の URL から採番） - **元 LP**: https://www.queen-eyes.com/c/mimicharme/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。