--- version: alpha name: Y2K Lavender Idol Cosmetics LP description: 濃紺〜ラベンダーのネオン調写真とアニメ調イラストを交互に置く、Y2K・アイドル風のアイシャドウ LP。欧文セリフの大見出しと細身のゴシックで上品さを出す。色展開ごとに地色をコーラル・モーブ・ベージュ・グレーに切り替え、スウォッチを 4 列グリッドで見せる。 colors: primary: '#7A68A8' dark-section: '#121C25' secondary: '#403A58' background: '#F6F7F9' background-alt: '#E6E0EC' tint-1: '#FEE9D2' tint-2: '#F4DFEE' accent-1: '#DFA08E' accent-2: '#987788' accent-3: '#8C5C78' text: '#3A3640' text-muted: '#A097B1' surface: '#FDFCFD' on-dark: '#E4E9EE' accent-1-accessible: '#BD5436' typography: display: fontFamily: Playfair Display fontSize: 44px fontWeight: 500 lineHeight: 1.0 letterSpacing: -0.02em headline-lg: fontFamily: Playfair Display fontSize: 32px fontWeight: 500 lineHeight: 1.1 letterSpacing: -0.02em headline-md: fontFamily: Noto Sans JP fontSize: 19px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: Cormorant Garamond fontSize: 10px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.02em accent: fontFamily: Cormorant Garamond fontSize: 10px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.08em rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 16px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' glass-feature-card: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 105px section-heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 150px swatch-grid: backgroundColor: '{colors.surface}' textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.md}' height: 340px look-card: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 330px color-variant-card: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 200px pill-label: textColor: '{colors.on-dark}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 20px check-list: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 80px retro-window: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' height: 200px --- # DESIGN.md — 紫ネオン×パステルのアイドル系コスメ LP（Y2K Lavender Idol Cosmetics LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: クール・先進的、上品・高級、かわいい - **キーワード**: Y2K・ネオンパープル・アニメ調イラスト・欧文セリフ・クリアケース・カラー展開 - **地の質感**: ぼかした光の粒、ブラウン管 TV、半透明のガラス風パネル、つやのある 3D の星 - **形**: 角丸 8〜12px のカードと 4 列グリッド。セクション境界は直線で、地色をはっきり切り替える - **温度感**: 上半分は冷たい紫と濃紺。色展開パートはコーラルやベージュの暖かい色 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#7A68A8` | ブランドを代表するくすみ紫（欧文見出し・強調） | 3% | 推定 | | `dark-section` | `#121C25` | ファーストビューの濃紺の地 | 10% | 画素の実測 | | `secondary` | `#403A58` | ネオン紫の写真セクションの地 | 8% | 画素の主要色に補正 | | `background` | `#F6F7F9` | 本文セクションの地（オフホワイト） | 30% | 画素の実測 | | `background-alt` | `#E6E0EC` | ラベンダーの帯セクション | 10% | 画素の実測 | | `tint-1` | `#FEE9D2` | コーラル系色展開の地 | 6% | 画素の実測 | | `tint-2` | `#F4DFEE` | モーブ系色展開の地 | 6% | 画素の実測 | | `accent-1` | `#DFA08E` | コーラル色の欧文見出し | 1% | 画素の実測 | | `accent-2` | `#987788` | モーブ色の欧文見出し・LOOK 帯 | 1% | 画素の主要色に補正 | | `accent-3` | `#8C5C78` | プラム系の欧文見出し・LOOK 帯 | 1% | 推定 | | `text` | `#3A3640` | 見出し・本文の濃いグレー | 2% | 推定 | | `text-muted` | `#A097B1` | 英文の補足・注釈 | 1% | 画素の主要色に補正 | | `surface` | `#FDFCFD` | 白いカード・ガラス風パネル | 6% | 画素の実測 | | `on-dark` | `#E4E9EE` | 暗い地に置く白文字 | 1% | 画素の実測 | | `accent-1-accessible` | `#BD5436` | AA を満たす補正値（計算） | | 計算 | - ファーストビューと機能説明は濃紺〜ネオン紫の写真地にする。文字は白にする - 本文はオフホワイトかラベンダーの地にする。欧文見出しは primary の紫にする - 色展開セクションは、その色に合わせて地色・見出し色・LOOK 帯の色を全部変える - ボタン色は使わない。色の主役は商品のスウォッチにする - 日本語見出しの強調語だけを primary 色の太字にする - 英文の補足は text-muted 色で小さく中央に置く - `look-card` は文字 `#DFA08E` × 背景 `#FDFCFD` のコントラスト比が 2.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#BD5436`、4.57:1）を使う。 - `color-variant-card` は文字 `#DFA08E` × 背景 `#FDFCFD` のコントラスト比が 2.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#BD5436`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 商品名の欧文ロゴ風見出し | 欧文セリフ | Playfair Display | 500 | 44px | 1.0 | -0.02em | | `headline-lg` | 各セクションの欧文見出し・色名 | 欧文セリフ | Playfair Display | 500 | 32px | 1.1 | -0.02em | | `headline-md` | 日本語のリード見出し（2 行） | ゴシック | Noto Sans JP | 400 | 19px | 1.5 | 0.02em | | `headline-sm` | カード見出し・メイク名 | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.02em | | `body-md` | 説明文 | ゴシック | Noto Sans JP | 400 | 13px | 1.7 | 0.02em | | `note` | 注釈・英文の補足・スウォッチ名 | 欧文セリフ | Cormorant Garamond | 400 | 10px | 1.5 | 0.02em | | `accent` | 小さな欧文の英字ラベル（大文字） | 欧文セリフ | Cormorant Garamond | 500 | 10px | 1.4 | 0.08em | - 欧文見出しはコンデンス気味のセリフ体を大きく使い、字間を詰める - 日本語は細めのゴシックを 2 行で中央に揃え、2 行目のキーワードを太字の紫にする - 見出しの順番は、欧文見出し→日本語リード→グレーの説明文にする - 英文の補足は 10px 前後で、セクションの最後に置く - スウォッチ名は欧文、役割名は日本語にして 2 段で重ねる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カードとスウォッチは 2 列または 4 列のグリッド - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算） - 写真とイラストは画面幅いっぱいに置き、余白は入れない - カードは左右に約 22px の余白を取る - 1 色ごとに同じ順で並べる：イラスト→色名→4×3 のスウォッチ→スウォッチ帯→LOOK1/2 - 商品画像は斜めに傾けてずらしながら縦に並べ、大きな欧文と重ねる - 見出しブロックはすべて中央揃えにする ## Elevation & Depth - カードには影をほぼ付けず、細い線か薄い面で区切る - 暗い地のパネルは半透明の白と細い白線で、ガラス風にする - 商品画像には柔らかい落ち影と、床への映り込みを付ける ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。 - **写真の切り抜き**: 写真は全幅の角なし。カード内の写真は角丸 8px。目元のアップは横長に切る - **セクション境界**: 直線で地色を切り替える。グラデーションのフェードも使う - 小さなラベルは線だけのピル型にする - LOOK カードは上端に色付きの帯を付けた角丸カードにする - スウォッチは角丸の長方形を 4 列に並べる ## Components - **ガラス風特長カード**（`glass-feature-card`）: 暗い写真の上に 2×2 で置く半透明カード。上に英字の小さなラベル、下に日本語 2 行を置く - **欧文＋日本語の見出しブロック**（`section-heading`）: 紫の欧文見出し、2 行の日本語リード（強調語は太字の紫）、グレーの説明文の順に重ねる - **目元写真付きスウォッチグリッド**（`swatch-grid`）: 4 列×3 段。上半分は目元の写真、下半分は色面で、役割名と色名を白文字で載せる - **LOOK カード**（`look-card`）: 2 列で並べる。色付きの帯に LOOK 番号、目元の写真、メイク名、番号付きパレット図、手順を入れる - **色展開カード**（`color-variant-card`）: 2×2 で並べる。上にイラストの目元、下にパレット画像と色名・ハッシュタグを置く - **線のピルラベル**（`pill-label`）: 色数などを表示する細線のピル型ラベル - **チェックリストカード**（`check-list`）: 白いカードにチェックアイコンと 3 行の特長を並べる。強調語は太字にする - **レトロ OS 風ウィンドウ**（`retro-window`）: イラストの横に置く小さなウィンドウ風の枠。中に目元の写真とスウォッチを入れる ## Do's and Don'ts **Do** - 暗いネオン写真と明るいパステル面を交互に置いてリズムを作る - 色展開ごとに地色と見出し色をその色に合わせる - 欧文セリフの大見出しを必ずセクションの頭に置く - 3D の星・蝶・ハートの小さな装飾を散らす - スウォッチと目元の写真で、色を具体的に見せる **Don't** - 原色の赤や黄色の CTA ボタンを置かない - 太くて丸いポップな書体を使わない - 影の強いカードや立体的なボタンを使わない - 1 つのセクションに複数の色展開の色を混ぜない - 本文を左揃えの長文にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（世界観と商品名を印象づける）: 濃紺のネオン写真を全幅で置き、クロームのような欧文ロゴを重ねる。人物写真と傾けた商品画像も置く 2. **カラー一覧**（色数とコンセプトを示す）: ラベンダーのグラデーションの地に、傾けた商品画像 4 つを大きな欧文と交互に置く 3. **ビジュアル演出**（Y2K 感を強める）: ブラウン管 TV を積み、画面に人物と目元を映す。3D の星を添える 4. **特長の要約**（4 つの核になる特長を一覧にする）: 人物写真の下に、ガラス風カードを 2×2 で置く 5. **テクスチャー訴求**（質感と密着感を説明する）: 番号付きのパレット図、配置の説明カード、スウォッチの帯、肌のアップ写真を 2 列で見せる 6. **機能訴求**（目元の各部分への使い方を示す）: TV と人物の写真の下に、ガラス風パネルを置き、目元の写真を 2×2 で並べる 7. **カラー訴求**（パーソナルカラー別の 4 色を比べる）: イラストの目元カードを 2×2 で置く。四季の 4 象限マップに商品を配置する 8. **色展開の詳細（4 回くり返す）**（各色の使い方を詳しく見せる）: 色ごとの地色にアニメ調イラストとウィンドウを置く。続けて色名、4×3 スウォッチ、スウォッチ帯、LOOK1/2 カードを並べる 9. **使いやすさ訴求**（容器の便利さを伝える）: ラベンダーの地に、目元イラストの蓋を縦に 4 つ並べる。チェックリストカードと手持ちの写真を添える 10. **クロージング**（世界観の余韻で締める）: ファーストビューと同じ人物写真とクロームの欧文ロゴをくり返す ## Imagery - 人物写真は、紫や青のボケた光の粒を背景に、冷たい色の照明で撮る - ブラウン管 TV やレトロ OS 風ウィンドウなど、Y2K のモチーフを使う - セル塗りのアニメ調少女イラストを色ごとに描き分け、目元のアップも使う - 商品はクリアケースを斜めから見せ、柔らかい影と映り込みを付ける - 目元・肌のアップは明るく均一な光で、質感が伝わるように撮る - シルバーの 3D の星、蝶、ハート、きらめきを小さく添える - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は内容を 375〜480px 幅の中央カラムに置き、両側は暗い紫のグラデーションで埋める - PC で広げる場合は、スウォッチと LOOK カードを最大 4 列にする - 欧文見出しは PC で 1.5 倍に拡大する - 全幅の写真は 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-bb0ee64d`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/espoirglobal/es-es-010/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/）からご連絡ください。