--- version: alpha name: Color-Blocked Editorial Beauty Lens LP description: カラー別に背景色を切り替えるファッション誌風のカラコン LP。紫の枠で囲んだ人物写真のコラージュから始まり、カラーごとに単色の地へ大きな縦書き欧文セリフ、レンズ画像、短い説明文を重ねていく。波線の区切り、細い線のフレーム、星のきらめき、白い手書き風ロゴで、ストリートダンスのような熱量を出す。 colors: primary: '#8764B5' background: '#EEEEEE' accent-1: '#F48D7E' accent-2: '#2C6087' accent-3: '#AAB616' secondary: '#A0A9A4' on-dark: '#FDEDE3' text: '#0D070A' text-body: '#4C4C4D' marker: '#FEFCFB' tint-1: '#8CC63F' line: '#8764B5' accent-1-accessible: '#D12A12' primary-accessible: '#805BB1' typography: display: fontFamily: Playfair Display fontSize: 70px fontWeight: 900 lineHeight: 1.0 headline-lg: fontFamily: Playfair Display fontSize: 30px fontWeight: 900 lineHeight: 1.2 headline-md: fontFamily: Zen Kaku Gothic New fontSize: 18px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.05em note: fontFamily: Montserrat fontSize: 9px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Playfair Display fontSize: 14px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.1em rounded: sm: 4px md: 8px lg: 24px full: 999px spacing: unit: 8px card: 12px section: 0px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' lineup-card: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' rounded: '{rounded.sm}' height: 140px vertical-color-name: textColor: '{colors.on-dark}' typography: '{typography.display}' height: 260px lens-showcase: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 560px eye-oval: rounded: '{rounded.full}' height: 130px marker-catch: backgroundColor: '{colors.marker}' textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' height: 18px outline-deco: textColor: '{colors.on-dark}' typography: '{typography.accent}' height: 60px player-control: textColor: '{colors.primary}' height: 60px spec-table: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 220px --- # DESIGN.md — 紫・珊瑚・紺・黄緑の色面切替カラコン LP（Color-Blocked Editorial Beauty Lens LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: クール・先進的、力強い・インパクト、ポップ・元気 - **キーワード**: カラーブロック・エディトリアル・ストリート・コラージュ・縦書き欧文・ダンス - **地の質感**: マットな単色面と高彩度の人物写真。方眼紙のような淡いグリッド地を部分的に使う - **形**: 角が少し丸い写真のずらし配置、楕円の瞳アップ、正円のレンズ画像、波線の区切り - **温度感**: カラーごとに暖色と寒色が入れ替わる。全体はやや暖かめ ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#8764B5` | ブランド紫（FV の枠・締めの地） | 14% | 画素の主要色に補正 | | `background` | `#EEEEEE` | グリッド地の明るいグレー | 10% | 画素の実測 | | `accent-1` | `#F48D7E` | カラー1の珊瑚色セクション地 | 15% | 画素の実測 | | `accent-2` | `#2C6087` | カラー2の紺青セクション地 | 16% | 画素の実測 | | `accent-3` | `#AAB616` | カラー3の黄緑セクション地 | 15% | 画素の実測 | | `secondary` | `#A0A9A4` | カラー4のグレージュ緑セクション地 | 12% | 画素の実測 | | `on-dark` | `#FDEDE3` | 色面の上の白文字・白い線 | 3% | 画素の実測 | | `text` | `#0D070A` | 明るい地の上の黒い見出し | 1% | 画素の主要色に補正 | | `text-body` | `#4C4C4D` | グリッド地の上の本文 | 1% | 画素の実測 | | `marker` | `#FEFCFB` | キャッチの白い帯 | 1% | 画素の実測 | | `tint-1` | `#8CC63F` | 講師見出しの黄緑の筆記体 | 0% | 推定 | | `line` | `#8764B5` | カードの枠・紫の区切り線 | 0% | 画素の主要色に補正 | | `accent-1-accessible` | `#D12A12` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#805BB1` | AA を満たす補正値（計算） | | 計算 | - カラーのセクションは、地の色をそのレンズの象徴色で塗りつぶす - 最初と最後は紫で揃え、ページ全体を紫で挟む - 色面の上の文字と線はすべて白にする - ラインナップと講師紹介は明るいグレーのグリッド地にして、色面のあいだで一息つかせる - ラインナップのカードは、上の写真部分を淡くし、名前の帯だけを各カラーの色で塗る - 白い帯を敷いたキャッチだけは、文字を地の色で抜く - `lineup-card` は文字 `#FDEDE3` × 背景 `#F48D7E` のコントラスト比が 2.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#D12A12`、4.54:1）を使う。 - `marker-catch` は文字 `#F48D7E` × 背景 `#FEFCFB` のコントラスト比が 2.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#D12A12`、4.54:1）を使う。 - `spec-table` は文字 `#FDEDE3` × 背景 `#8764B5` のコントラスト比が 4.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#805BB1`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 写真の右端に縦書きで置く大きなカラー名 | 欧文セリフ | Playfair Display | 900 | 70px | 1.0 | 0.0em | | `headline-lg` | レンズ画像の下のカラー名 | 欧文セリフ | Playfair Display | 900 | 30px | 1.2 | 0.0em | | `headline-md` | カラー名の横のカナ読み、講師名 | ゴシック | Zen Kaku Gothic New | 700 | 18px | 1.3 | 0.05em | | `headline-sm` | 白い帯を敷いた一行キャッチ | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.05em | | `body-md` | 説明文。中央揃えで 2 行程度 | ゴシック | Noto Sans JP | 700 | 11px | 1.7 | 0.05em | | `note` | スペック行・商品情報の表・注意書き | 欧文サンセリフ | Montserrat | 500 | 9px | 1.6 | 0.02em | | `accent` | 円弧に沿わせた欧文、線だけのアウトライン欧文、イタリックの小見出し | 欧文セリフ | Playfair Display | 700 | 14px | 1.2 | 0.1em | - 欧文の太いセリフ体をメインのビジュアル要素として扱う - カラー名は、写真の右端に 90 度回して縦に置く - 和文は太いゴシックだけにし、中央揃えで短くまとめる - スペックの数字の単位（mm）は小さくする - 線だけのアウトライン欧文を、写真やセクションの角に斜めに散らす - ロゴは白い手書き風の太い文字として、写真をまたいで重ねる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真は 2×2 グリッドかずらしのコラージュ - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 0px、基本単位 8px、カード内 12px（375px 幅換算） - カラーのセクションは、メイン写真、レンズ説明、写真コラージュの 3 段を 1 色の地で通す - レンズ説明は左右の縦の白線で挟み、左の線上に小さな縦書き欧文を置く - メイン写真の右下に楕円の瞳アップを重ねる - コラージュの写真は互い違いに重ね、端を画面からはみ出させる - セクションの境は余白を取らず、色を直接切り替える ## Elevation & Depth - 基本はフラットで影を付けない - 正円のレンズ画像だけ、ふわっとした柔らかい影で浮かせる - 立体感は影ではなく、写真の重なりと細い白枠で出す ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 24px。ボタンは角丸の長方形。 - **写真の切り抜き**: 人物写真は四角か角丸の四角で、ずらしてコラージュする。瞳のアップは楕円、レンズは正円 - **セクション境界**: 小さな波線（スカラップ）で次の色に切り替える。講師紹介は大きな半円で仕切る - FV は紫の地に、四辺が波打つフレームで写真を収める - ラインナップのカードは角を少し丸め、カラー色の細い枠を付ける - 商品情報の表は角丸のない細い白線の枠で囲む ## Components - **ラインナップカード**（`lineup-card`）: 上は瞳の写真、下はカラー色の帯。帯にカラー名とスペックを白で載せ、端にレンズの円とパッケージ画像を重ねる。2×2 で並べる - **縦書きのカラー名**（`vertical-color-name`）: 写真の右端に置く、白い極太セリフの縦書き。下に小さくカナを添える - **レンズの紹介ブロック**（`lens-showcase`）: 正円のレンズ画像を中央に置き、右上に小さな線とハート 3 つの色見本を付ける。下にカラー名、白い帯のキャッチ、説明文、スペック、地球儀風のアイコンを中央揃えで並べる - **瞳アップの楕円**（`eye-oval`）: メイン写真の右下に重ねる楕円の瞳写真。地の色の太い縁取りで囲む - **白帯のキャッチ**（`marker-catch`）: 白い帯の上に、地の色の太いゴシックで一行を載せる - **アウトラインの欧文装飾**（`outline-deco`）: 細い線だけで描いた欧文を斜めに配置する。円弧に沿わせた欧文や、星のきらめきも散らす - **音楽プレイヤー風の飾り**（`player-control`）: 紫の線にシークバーの丸を付け、その下に巻き戻し・再生・早送りの三角を並べる - **商品情報の表**（`spec-table`）: 紫の地を白い細線の枠で囲み、項目名と値の 2 列を小さな白文字で並べる ## Do's and Don'ts **Do** - カラーごとに地の色を変え、その色でセクション全体をまとめる - 人物写真は大きく使い、角度や位置をずらして重ねる - 極太のセリフ欧文を縦に置いて、雑誌の表紙のような強さを出す - 星のきらめき、アウトライン欧文、波線で、動きと遊び心を足す - 文字は白を基本にして、短く中央揃えで置く **Don't** - 淡いパステルだけで、くすんだ優しい印象にまとめない - 長い本文や箇条書きを詰め込まない - 色面の上に、黒い本文を載せない - 角丸を大きくしたカードを均等に並べるだけの単調な配置にしない - グラデーションや光沢の強いボタンを使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（世界観と、ブランドの強さを一瞬で伝える）: 紫の波枠に人物写真を 2×2 で収める。中央に白い手書きロゴ、上に欧文コピー、下に 1 行のスペックを置く 2. **ラインナップ一覧**（全カラーを見比べてもらう）: グリッド地に小さなロゴを置き、色帯付きのカードを 2×2 で並べる 3. **カラー紹介1**（暖色のカラーの魅力を伝える）: 珊瑚色の地にメイン写真と縦書きの名前を置き、楕円の瞳を重ねる。続けてレンズ紹介と人物コラージュを並べる 4. **カラー紹介2**（寒色のカラーの魅力を伝える）: 紺青の地で、カラー紹介1と同じ構成を繰り返す。境目は波線で切り替える 5. **カラー紹介3**（個性的なカラーの魅力を伝える）: 黄緑の地で同じ構成。音の波形やレコードの線画を添える 6. **カラー紹介4**（クールなカラーの魅力を伝える）: グレージュ緑の地で同じ構成。最後に人物 3 枚のコラージュを置く 7. **プロデューサー紹介**（監修者の信頼感と世界観を伝える）: 半円の紫にロゴを置き、人物写真にサインを重ねる。グリッド地に筆記体と極太セリフの名前、プレイヤー風の飾り、中央揃えの経歴を並べる 8. **ブランドストーリー**（ブランド名に込めた想いを伝える）: 紫の地に、大きく透けたロゴを敷き、白い太字の文章を中央揃えで置く 9. **商品情報・注意書き**（法定表示と使用上の注意を伝える）: 白い線の枠で囲んだ表を置き、その下に注意書き、最後に白いロゴを置く ## Imagery - 多国籍なモデルを、ストロボを当てた高彩度で撮る。顔のアップと強い目線を中心にする - ラメ、ネイル、ピアス、デニムなど、ストリート系のスタイリングにする - 果物などカラー名を連想させる小物を、顔の近くで持たせる - レンズ単体は真上から撮り、正円に切り抜いて柔らかい影を付ける - 装飾は白い線画で入れる（星、地球儀とハートのマーク、音の波形、レコード） - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 版の画像はないため、以下は推奨。PC では中央に 480px 前後の SP 幅のカラムを置き、左右の余白をそのセクションの地の色で埋める - ラインナップは PC では 4 列にしてもよい - 縦書きのカラー名とコラージュの重なりは、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-9908bd8c`（元 LP の URL から採番） - **元 LP**: https://www.queen-eyes.com/c/oh/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（8/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。