--- version: alpha name: Pastel Pearl Dreamy Color Contact LP description: くすみブルーを基調に、カラーごとにラベンダー・ピンク・ベージュ・ミントへ地色を切り替えるカラコンLP。パール、泡、ハート、細い弧線の飾りでガーリーな夢かわ感を出している。欧文の細いセリフ体と、丸く太いポップな和文を組み合わせている。 colors: primary: '#A0BAD1' background: '#F3F4F4' secondary: '#A6B3DC' accent-1: '#DCACBA' accent-2: '#D7C595' accent-3: '#ACCDD2' tint-1: '#B2BBD5' surface: '#FEFEFE' tint-2: '#DDC4D1' text: '#655C5B' text-body: '#555F73' on-dark: '#F3F8FD' marker: '#B3B4D3' dark-section: '#001E52' secondary-accessible: '#5971BE' marker-accessible: '#6A6CA9' primary-accessible: '#4B759A' tint-2-accessible: '#9F5C7F' typography: display: fontFamily: Italiana fontSize: 56px fontWeight: 400 lineHeight: 1.0 headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 36px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-md: fontFamily: Zen Maru Gothic fontSize: 28px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.05em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 700 lineHeight: 1.9 letterSpacing: 0.15em body-md: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 700 lineHeight: 1.8 letterSpacing: 0.1em accent: fontFamily: Montserrat fontSize: 10px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.2em note: fontFamily: Montserrat fontSize: 11px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.08em label-button: fontFamily: Zen Maru Gothic fontSize: 14px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.08em rounded: sm: 6px md: 14px lg: 28px full: 999px spacing: unit: 8px card: 24px section: 72px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' cloud-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.secondary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px marker-copy: backgroundColor: '{colors.marker}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 28px point-badge: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 44px color-chip: backgroundColor: '{colors.text}' textColor: '{colors.on-dark}' typography: '{typography.accent}' height: 32px price-panel: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.display}' rounded: '{rounded.lg}' height: 560px eye-compare: backgroundColor: '{colors.surface}' typography: '{typography.note}' rounded: '{rounded.md}' height: 110px spec-row: textColor: '{colors.on-dark}' typography: '{typography.note}' height: 30px arch-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 440px new-badge: backgroundColor: '{colors.tint-2}' textColor: '{colors.on-dark}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 40px --- # DESIGN.md — パステル×パールの夢かわカラコンLP（Pastel Pearl Dreamy Color Contact LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: かわいい、やさしい・柔らかい、上品・高級、情報量多め・訴求型 - **キーワード**: 夢かわ・パール・くすみパステル・カラー別の世界観・ガーリー・透明感 - **地の質感**: 水面や泡のようにうっすら光る背景。グレイン感のある淡い地に、パールや光の粒を散らす。 - **形**: 大きな円弧で写真を切り抜き、雲形の吹き出しと八角形のバッジを使う。細い曲線の装飾ラインを添える。 - **温度感**: やや寒色寄りの柔らかなパステル。カラー別のセクションでは暖色系にも切り替える。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#A0BAD1` | ブランドを代表するくすみブルーの地 | 12% | 画素の実測 | | `background` | `#F3F4F4` | ベースの白グレー地 | 20% | 画素の実測 | | `secondary` | `#A6B3DC` | ラベンダーの強調・吹き出し・数字 | 4% | 画素の実測 | | `accent-1` | `#DCACBA` | ピンク系カラーの地 | 8% | 画素の実測 | | `accent-2` | `#D7C595` | ベージュ系カラーの地 | 8% | 画素の実測 | | `accent-3` | `#ACCDD2` | ミント系カラーの地 | 6% | 画素の実測 | | `tint-1` | `#B2BBD5` | ラベンダーグレーの詳細ブロック | 5% | 画素の実測 | | `surface` | `#FEFEFE` | 白いカード・マップ面 | 6% | 画素の実測 | | `tint-2` | `#DDC4D1` | 淡いピンクのバッジ・帯 | 2% | 画素の実測 | | `text` | `#655C5B` | 見出しなどの濃いブラウン文字 | 2% | 画素の実測 | | `text-body` | `#555F73` | カード内の本文に使うネイビーグレー | 1% | 画素の実測 | | `on-dark` | `#F3F8FD` | 色の付いた地の上の白文字 | 2% | 画素の実測 | | `marker` | `#B3B4D3` | コピーの帯状マーカー | 1% | 画素の実測 | | `dark-section` | `#001E52` | モデル紹介導入の濃紺地 | 1% | 画素の実測 | | `secondary-accessible` | `#5971BE` | AA を満たす補正値（計算） | | 計算 | | `marker-accessible` | `#6A6CA9` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#4B759A` | AA を満たす補正値（計算） | | 計算 | | `tint-2-accessible` | `#9F5C7F` | AA を満たす補正値（計算） | | 計算 | - 地はくすみブルーと白グレーを基本にし、商品カラーごとにピンク・ベージュ・ミント・ラベンダーへ切り替える - 各カラーのセクションでは、見出しの色・吹き出し・縦のアクセント線をそのセクションの地色系で統一する - 価格の強調はラベンダーとピンクだけで行い、赤は使わない - 色の付いた地の上の本文は白にし、文字に細い影を付けて読みやすくする - 濃色はモデル紹介に入る直前の夜空風の背景に限って使う - 彩度は抑えめにし、全体をパステルトーンで揃える - `cloud-bubble` は文字 `#A6B3DC` × 背景 `#FEFEFE` のコントラスト比が 2.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#5971BE`、4.6:1）を使う。 - `marker-copy` は文字 `#F3F8FD` × 背景 `#B3B4D3` のコントラスト比が 1.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `marker-accessible`（`#6A6CA9`、4.54:1）を使う。 - `point-badge` は文字 `#F3F8FD` × 背景 `#A6B3DC` のコントラスト比が 1.95:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#5971BE`、4.53:1）を使う。 - `price-panel` は文字 `#F3F8FD` × 背景 `#A0BAD1` のコントラスト比が 1.88:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#4B759A`、4.56:1）を使う。 - `new-badge` は文字 `#F3F8FD` × 背景 `#DDC4D1` のコントラスト比が 1.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `tint-2-accessible`（`#9F5C7F`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 欧文の商品名ロゴ（細いエレガント体） | 欧文セリフ | Italiana | 400 | 56px | 1.0 | 0.0em | | `headline-lg` | 太いポップな和文の訴求見出し（縁取り・影付き） | 丸ゴシック | M PLUS Rounded 1c | 900 | 36px | 1.2 | 0.02em | | `headline-md` | カラー別のキャッチ見出し | 丸ゴシック | Zen Maru Gothic | 900 | 28px | 1.3 | 0.05em | | `headline-sm` | マーカー帯の上に乗せるコピー | ゴシック | Zen Kaku Gothic New | 700 | 15px | 1.9 | 0.15em | | `body-md` | 説明文やカードの本文 | ゴシック | Zen Kaku Gothic New | 700 | 13px | 1.8 | 0.1em | | `accent` | 欧文の小見出しと曲線に沿わせる英字 | 欧文サンセリフ | Montserrat | 500 | 10px | 1.4 | 0.2em | | `note` | スペックや注記 | 欧文サンセリフ | Montserrat | 600 | 11px | 1.5 | 0.08em | | `label-button` | 吹き出しやピル型ラベルの文字 | 丸ゴシック | Zen Maru Gothic | 700 | 14px | 1.2 | 0.08em | - 欧文の商品名は細くエレガントな書体で大きく組み、上に小さい欧文を添えて2段にする - 和文の訴求見出しは極太丸ゴシックにし、白い縁取りとパステルの影を付ける - 英字の小見出しは字間を広く取り、細い弧線に沿わせて配置する - コピーは1行ずつ帯状のマーカーに乗せ、右揃えで積む - ハートの記号を語尾に添えて甘さを出す - 数値の価格は極太にし、立体的な影を付けて最大のサイズにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真は左右交互にずらし、比較画像だけ 2 列にする - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 72px、基本単位 8px、カード内 24px（375px 幅換算） - カラーごとに『キャッチ見出し・吹き出し・レンズ・目元写真・商品名』の同じ型を繰り返す - 写真は画面端まで出し、斜めや円弧で切り抜く - レンズ写真と拡大した円形写真を、点線でコピーとつなぐ - 詳細ブロックは目元の大きな写真1枚と黒目/茶目の比較2枚、その下にスペック行と説明文を置く - カラー一覧は白い角丸カードの中に4象限のマップとして配置する - スペックは十字の区切り線で4マスのグリッドに分ける ## Elevation & Depth - レンズ写真の下に楕円の落ち影を付け、浮いているように見せる - 写真カードには白い細枠と淡いドロップシャドウを付ける - 見出し文字には白い縁取りと色の影で厚みを出す - 白いカードの影は、ほぼ見えない程度のぼかしにする ## Shapes - **角丸**: 小 6px ／ 中 14px ／ 大 28px。ボタンはピル型。 - **写真の切り抜き**: モデル写真は大きな円弧で切り抜き、目元写真は楕円か角丸、レンズは正円で拡大する - **セクション境界**: 緩やかな円弧で区切り、ふちに虹色の光の線を入れる - 吹き出しは雲形で、小さな丸を付けて思考の吹き出し風にする - カラーの見本は八角形のバッジで示す - NEWやお得のバッジはハート形か八角形にする - 白いカードは上部をアーチ形にする - ピル型のラベルで和文の小さな見出しを囲む - 価格ブロックは角丸の大きなパネルにまとめる ## Components - **雲形の吹き出しラベル**（`cloud-bubble`）: フチのデザインやメインカラーを示す吹き出し。上に小さな英字ラベル、間に×印を置く - **帯マーカーのコピー**（`marker-copy`）: 1行ごとに色帯を敷いた白文字コピー。右揃えで4行ほど積む - **POINT番号バッジ**（`point-badge`）: 八角形にPOINT 01/02と番号を入れ、横に2行の説明を添える - **八角形のカラーチップ**（`color-chip`）: レンズの色見本の八角形。横に欧文のカラー名とCOLOR番号を付ける - **特別価格パネル**（`price-panel`）: 上部の青い帯に通常価格、下の淡い面にまとめ買いの価格を極太数字で載せる - **黒目・茶目の比較カード**（`eye-compare`）: 角丸の写真カードを2列に並べ、左上・右上に丸いラベルを付ける - **スペック行**（`spec-row`）: 丸い点で区切ったレンズ径などの数値を1行に並べ、下に細線を引く - **アーチ形のプロフィールカード**（`arch-card`）: 上部がアーチになった白いカード。英字名・和文名・区切り線・本文の順に並べる - **NEWのハートバッジ**（`new-badge`）: ピンクのハート形に筆記体のNewを入れたバッジ ## Do's and Don'ts **Do** - カラーごとに地色を変えつつ、各カラーのレイアウトは同じ型で繰り返す - パール・泡・ハート・光の粒を余白に控えめに散らす - 欧文の細いセリフ体と和文の極太丸ゴシックの対比で見せる - レンズは正円の拡大写真と点線の吹き出しで構造を説明する - モデル写真は大きな円弧で切り抜き、縦書きのコピーを重ねる **Don't** - 原色の赤や黒ベタの強いボタンを使わない - 角張った四角い枠だけでレイアウトを組まない - 地色の彩度を上げすぎない - 装飾を大きくしてレンズ写真の存在感を食わない - 本文を細字の明朝で組まない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（世界観と新シリーズの登場を伝える）: 青い背景でモデルの全面写真を見せ、欧文の装飾ロゴ・4色のレンズ・スペックのピル帯を重ねる 2. **リニューアル告知**（何が変わったかを伝える）: 全身のモデル写真に大きな欧文と立体文字を合わせ、ポップな和文コピーを段違いに置く 3. **復活の訴求**（人気色の再登場を印象づける）: 極太文字にグリッターの縁を付け、パッケージとレンズを散らして見せる 4. **カラー別の概要**（4色の個性を比べられるようにする）: 色ごとに吹き出し・レンズ・目元写真・欧文の商品名を繰り返し、アクセント色だけを変える 5. **特別オファー**（まとめ買いを後押しする）: 欧文の大見出しの下に、価格パネル・パッケージ・極太の価格を置く 6. **カラー別の詳細**（色ごとの魅力と仕様を伝える）: 地色を切り替え、円弧で切り抜いたモデル写真・帯コピー・POINT・比較写真・スペックを並べる 7. **レンズマップ**（4色の位置づけを整理する）: 白い角丸カードを使い、縦軸と横軸で分けた4象限にレンズを配置する 8. **着用比較**（着けたときの見え方を比べさせる）: 目元写真を2列×2段に並べ、各写真にレンズを重ねる 9. **レンズスペック**（機能面で安心させる）: ブルーの地に十字の区切りで4マスを作り、線画アイコンと短い説明を入れる 10. **イメージモデル紹介**（信頼感と憧れを生む）: 濃紺のアーチ形の背景にモデル写真を置き、下にアーチ形のプロフィールカードを続ける 11. **クロージング**（世界観の余韻を残す）: パールとガラスの器を使った静物写真に、欧文のロゴを重ねる ## Imagery - モデルは正面か頬に手を当てるポーズで撮り、ティアラ・パール・リボンで飾る - 背景は青い壁、白いバラ、ガラス器、パールを散らした幻想的な静物にする - 目元はマクロで撮り、まつげと発色をはっきり見せる - レンズは白地に置いた正円の写真に影を付け、ドットパターン部分を拡大して見せる - 装飾にはパール玉・シャボン玉・ハート・きらめきを使い、細い弧線を重ねる - アイコンは細い線画で描き、パステルの面を添える - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に幅 480〜600px の SP レイアウトを置き、左右は世界観のある背景で埋める - PC ではカラー別の詳細を2カラム（写真と説明）に展開してもよい - 目元の比較写真は PC で4列に並べる - スペックのグリッドは PC で4列×1段にする - 見出しのサイズは SP の1.3倍程度にとどめる ## 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-9bcf5cdf`（元 LP の URL から採番） - **元 LP**: https://www.queen-eyes.com/c/LARME/CLIONE//sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（14/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。