--- version: alpha name: Dusty Pink Girly Color Contact Lens LP description: くすみピンクとモーブ系の地色に、白い欧文セリフ体と手書き風の和文を重ねたガーリーなカラコン LP。モデル写真、瞳のアップ、レンズ単体の写真を色ごとに繰り返し並べ、各色のテーマカラーで帯を切り替えるカタログ型の構成。 colors: primary: '#AF7B74' background: '#EEE1E1' background-alt: '#DAB5AC' surface: '#FEFEFE' text: '#64453D' text-body: '#5B433C' text-muted: '#736862' on-primary: '#FBFAFA' accent-1: '#B46386' accent-2: '#C9A65A' accent-3: '#7292BC' dark-section: '#6D6D6D' tint-1: '#E2C6C1' line: '#7E706B' accent-3-accessible: '#4F75A7' on-primary-accessible: '#675252' primary-accessible: '#A2655D' accent-1-accessible: '#AE577D' typography: display: fontFamily: Klee One fontSize: 56px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Playfair Display fontSize: 36px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0.01em headline-md: fontFamily: Cormorant Garamond fontSize: 28px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.05em headline-sm: fontFamily: Shippori Mincho fontSize: 15px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.03em accent: fontFamily: Noto Serif JP fontSize: 44px fontWeight: 700 lineHeight: 1.1 label-button: fontFamily: Zen Kaku Gothic New fontSize: 11px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 6px md: 12px lg: 24px full: 999px spacing: unit: 8px card: 16px section: 40px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' color-title-band: backgroundColor: '{colors.accent-3}' textColor: '{colors.on-primary}' typography: '{typography.headline-lg}' height: 48px heart-badge: backgroundColor: '{colors.tint-1}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' height: 44px label-pill: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 20px desc-panel: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 80px spec-row: textColor: '{colors.text-muted}' typography: '{typography.note}' height: 28px spec-circle: textColor: '{colors.on-primary}' typography: '{typography.note}' rounded: '{rounded.full}' height: 52px price-card: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.accent}' rounded: '{rounded.lg}' height: 300px notice-box: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-primary}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 110px feature-icon-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 140px --- # DESIGN.md — くすみピンク×白文字の甘めカラコン LP（Dusty Pink Girly Color Contact Lens LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: かわいい、やさしい・柔らかい、上品・高級、情報量多め・訴求型 - **キーワード**: くすみピンク・ガーリー・瞳アップ・カタログ型・ハート装飾・白抜きセリフ欧文 - **地の質感**: パール・リボン・スイーツなどの小物を使ったソフトフォーカス写真。ほのかなグラデーションと透け感のある白いパネルを重ねる。 - **形**: 角丸カード、ピル型ラベル、円形のレンズ写真、ハート型バッジ、ゆるい弧を描くセクション境界。 - **温度感**: やや暖色寄りのくすみトーン。色ごとにモーブ、グレー、ベージュ、ブルー、グリーンの差し色が入る。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#AF7B74` | ブランドのくすみローズ（価格・見出し） | | 画素の主要色に補正 | | `background` | `#EEE1E1` | ページの淡いピンクグレー地 | | 画素の実測 | | `background-alt` | `#DAB5AC` | FV・訴求セクションのくすみピンク地 | | 画素の主要色に補正 | | `surface` | `#FEFEFE` | 説明文の白いパネル | | 画素の実測 | | `text` | `#64453D` | 見出し・強調用のダークブラウン | | 画素の主要色に補正 | | `text-body` | `#5B433C` | 本文のグレーブラウン | | 画素の実測 | | `text-muted` | `#736862` | スペック表記の淡色文字 | | 画素の実測 | | `on-primary` | `#FBFAFA` | 写真や色地の上の白文字 | | 画素の主要色に補正 | | `accent-1` | `#B46386` | 注意書きボックスのモーブ | | 画素の実測 | | `accent-2` | `#C9A65A` | ゴールド系のラベルピル | | 推定 | | `accent-3` | `#7292BC` | ブルー系の色見出し帯 | | 画素の実測 | | `dark-section` | `#6D6D6D` | グレー系カラー紹介の暗いグレー地 | | 画素の実測 | | `tint-1` | `#E2C6C1` | ハートバッジの淡いローズ | | 画素の主要色に補正 | | `line` | `#7E706B` | スペック行の区切り線 | | 画素の主要色に補正 | | `accent-3-accessible` | `#4F75A7` | AA を満たす補正値（計算） | | 計算 | | `on-primary-accessible` | `#675252` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#A2655D` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#AE577D` | AA を満たす補正値（計算） | | 計算 | - 地色はくすみピンクと淡いピンクグレーを交互に使い、白は説明パネルだけに限る - 色ごとの紹介ブロックは、そのレンズの色に合う差し色を見出し帯とハートバッジに使う - 価格や大見出しにはくすみローズを使い、鮮やかな原色は使わない - 本文中の強調語だけ、その色の差し色で塗る - 注意書きは濃いモーブの面に白文字で書き、ほかの情報と分ける - 黒は使わない。最も濃い色もダークブラウンにとどめる - `color-title-band` は文字 `#FBFAFA` × 背景 `#7292BC` のコントラスト比が 3.08:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-3-accessible`（`#4F75A7`、4.54:1）を使う。 - `heart-badge` は文字 `#FBFAFA` × 背景 `#E2C6C1` のコントラスト比が 1.54:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `on-primary-accessible`（`#675252`、4.5:1）を使う。 - `price-card` は文字 `#AF7B74` × 背景 `#FEFEFE` のコントラスト比が 3.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#A2655D`、4.57:1）を使う。 - `notice-box` は文字 `#FBFAFA` × 背景 `#B46386` のコントラスト比が 3.98:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#AE577D`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV・訴求の大見出し（手書き風の和文） | 手書き・筆 | Klee One | 700 | 56px | 1.2 | 0.02em | | `headline-lg` | カラー名の欧文イタリック | 欧文セリフ | Playfair Display | 500 | 36px | 1.0 | 0.01em | | `headline-md` | セクションの欧文見出し（細い大文字） | 欧文セリフ | Cormorant Garamond | 500 | 28px | 1.2 | 0.05em | | `headline-sm` | キャッチ帯・カナ名 | 明朝 | Shippori Mincho | 600 | 15px | 1.5 | 0.05em | | `body-md` | 説明パネルの本文 | ゴシック | Zen Kaku Gothic New | 500 | 13px | 1.8 | 0.03em | | `note` | スペック数値・注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.5 | 0.03em | | `accent` | 価格の大きな数字 | 明朝 | Noto Serif JP | 700 | 44px | 1.1 | 0.0em | | `label-button` | ピル型ラベル | ゴシック | Zen Kaku Gothic New | 700 | 11px | 1.2 | 0.05em | - カラー名は欧文イタリックを大きく置き、その下に小さなカナ名を添える - 大見出しは手書き風の和文を白抜きにし、きらめきのアイコンを散らす - 本文は中央揃えにし、1 行を短くして 2〜3 行に収める - スペックは小さな数字をハートでつなぎ、1 行で横に並べる - 価格は数字だけを極端に大きくし、単位は小さくする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カラー一覧と比較画像は 2 カラム - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 40px、基本単位 8px、カード内 16px（375px 幅換算） - 色ごとに『見出し帯→モデル写真→キャッチ→着用比較 2 枚→説明パネル→スペック行』の順を繰り返す - 比較画像は左に裸眼、右に装着時を同じサイズで並べる - レンズ写真は円形にし、写真の端に重ねて配置する - 説明パネルは左右に約 6% の余白を取り中央に置く - 色の一覧は 2 列のグリッドにし、カードに瞳写真・レンズ・名前をまとめる ## Elevation & Depth - 説明パネルは半透明の白で、影はごく弱くする - 円形のレンズ写真には柔らかいドロップシャドウを付ける - 写真上の文字には淡いグローを付けて読みやすくする ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: モデル写真は全幅の長方形。レンズは正円。瞳のアップは角丸の長方形にする - **セクション境界**: ゆるやかな弧で写真と次のブロックの境界を作る。色帯で区切る場合は直線 - ラベルはすべてピル型にする - バッジはハート型にする - 価格カードは上辺を大きく丸めたアーチ型にする - 説明パネルは小さめの角丸にする ## Components - **カラー名の見出し帯**（`color-title-band`）: 差し色の横帯に白い欧文イタリックとカナ名を載せ、左端に円形のレンズ写真を重ねる - **ハートバッジ**（`heart-badge`）: ハート型の中に白文字 2 行で『装着』『新色』などを書く - **ピル型ラベル**（`label-pill`）: 比較画像の下や左上に置く、小さな状態ラベル - **説明パネル**（`desc-panel`）: 半透明の白いパネルに中央揃えで 3 行の説明を入れ、強調語は差し色にする - **スペック行**（`spec-row`）: 上下を細線で挟み、数値 3 つをハートで区切る - **スペック円**（`spec-circle`）: 白い線の円の中に数値を縦に組み、3 つ並べる - **価格訴求カード**（`price-card`）: 上辺がアーチ型の白いカードに、まとめ買いの特典と大きな価格を載せる。ハートの吹き出しを添える - **注意書きボックス**（`notice-box`）: 濃いモーブの面に白い小さな文字で注釈を並べる - **仕様アイコンカード**（`feature-icon-card`）: 淡いピンクの円アイコンに見出し 2 行と説明を添え、2 列のグリッドで並べる ## Do's and Don'ts **Do** - 色ごとに同じ構成のブロックを繰り返し、統一感を出す - 瞳の比較は裸眼と装着時を同じ明るさ・同じ角度で並べる - ハートやきらめきなどの小さな装飾で甘さを加える - 差し色は色名の印象に合うくすみトーンから選ぶ - 欧文セリフ体と和文の手書き風書体を組み合わせる **Don't** - 彩度の高い原色や純黒を使わない - 角張ったボタンや太いゴシックの見出しを使わない - 説明文を長くしない。3 行を超えない - 写真の上に不透明な濃い帯を重ねて顔を隠さない - 比較画像のサイズや並びを色ごとに変えない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（新色の発表とブランドの世界観を伝える）: くすみピンクの写真の上にロゴと大見出しを置き、新色レンズの円形写真を横に並べる 2. **新色コンセプト**（新技術の特長を打ち出す）: 手書き風の白い大見出しにきらめきを散らし、新色ごとに瞳アップとレンズ写真を交互に配置する 3. **新色の別系統紹介**（異なるフチ感を比較させる）: ピンク地に大見出しとキャッチ帯を置き、瞳とレンズの写真を 2 組並べる 4. **カラーラインナップ**（全色を一覧で見せる）: 淡色地の 2 列グリッドに、瞳写真・レンズ・欧文名のカードを並べる 5. **価格訴求**（まとめ買いを促す）: アーチ型の白いカードに大きな価格数字とハートの吹き出しを載せる 6. **技術解説**（装着位置と仕組みを説明する）: レンズの拡大図 2 枚とピル型ラベル、白いパネルの説明文、モーブの注意書きを置く 7. **新色の詳細**（各新色の魅力を詳しく伝える）: 色ごとの地色にモデル写真、縦書きのキャッチ、スペック円、デザインポイントの箇条、比較画像を置く 8. **既存色の紹介**（全色の個性を伝える）: 差し色の見出し帯、モデル写真、キャッチ、比較画像、説明パネル、スペック行を繰り返す 9. **カラーマップ**（フチの強さと発色で全色を位置づける）: 白いカードに縦軸と横軸を引き、レンズの円を散布図のように配置する 10. **レンズ仕様**（機能面の安心感を伝える）: ピンクのグラデーション地に、円アイコン付きの仕様カードを 2 列×3 段で並べる 11. **クロージング**（商品パッケージで締める）: パッケージを小物と一緒に撮った写真と、細い帯のフッターを置く ## Imagery - モデルは正面から寄りで撮り、ソフトフォーカスで肌を明るく仕上げる - 背景にはリボン、パール、スイーツ、ぬいぐるみなど甘い小物を置き、色ごとにテーマを変える - 瞳のアップは真正面から撮り、まつ毛をはっきり見せた横長の写真にする - レンズ単体は白い背景で正円に切り抜き、光沢を残す - きらめき・ハート・手書きの線を白い細線で添える - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 版の画像はない。PC では SP の 1 カラムを中央に 480〜600px 幅で固定し、左右には淡いピンクの背景を敷くとよい - カラー一覧は PC で 3〜4 列に広げてもよい - 比較画像の 2 枚並びは PC でも維持する - 見出し帯は PC でもコンテンツ幅いっぱいに広げる ## 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-0e34ade4`（元 LP の URL から採番） - **元 LP**: https://www.queen-eyes.com/c/LARME/LARMEMELTYSERIES/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（7/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。