--- version: alpha name: Dusty Sakura Pink Glossy Cosmetics LP description: くすみローズピンクの単色地に白文字を重ね、桜の花びらとボケ光を散らした季節限定リップの LP。写真のコラージュと太いセリフ英字見出しで、甘さと大人っぽさを両立させている。 colors: primary: '#CC9B9E' background: '#E1BBC6' background-alt: '#FDE4F9' surface: '#FCFBF9' on-dark: '#FEEFEF' cta: '#EE8CB2' on-cta: '#FFF4FF' accent-1: '#FC9AD2' secondary: '#E6DCF3' accent-2: '#B5577A' dark-section: '#C59CA2' text-muted: '#B68786' cta-accessible: '#D82067' accent-2-accessible: '#B35377' accent-1-accessible: '#D3067B' background-accessible: '#B04E6A' text-muted-accessible: '#A06361' typography: display: fontFamily: Fraunces fontSize: 34px fontWeight: 800 lineHeight: 1.1 accent: fontFamily: Dancing Script fontSize: 56px fontWeight: 700 lineHeight: 1.0 headline-lg: fontFamily: Shippori Mincho fontSize: 24px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.15em headline-md: fontFamily: Shippori Mincho fontSize: 18px fontWeight: 600 lineHeight: 1.6 letterSpacing: 0.12em body-md: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.1em note: fontFamily: Montserrat fontSize: 10px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.05em label-button: fontFamily: Montserrat fontSize: 12px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.15em rounded: sm: 6px md: 16px lg: 24px full: 999px spacing: unit: 8px card: 20px section: 72px components: page: backgroundColor: '{colors.background}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 54px tag-outline: textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.full}' height: 30px point-pill: backgroundColor: '{colors.surface}' textColor: '{colors.accent-2}' typography: '{typography.note}' rounded: '{rounded.full}' height: 28px badge-limited: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.full}' height: 22px swatch-grid: backgroundColor: '{colors.background}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 90px color-map: backgroundColor: '{colors.surface}' textColor: '{colors.text-muted}' typography: '{typography.note}' rounded: '{rounded.md}' height: 460px series-card: backgroundColor: '{colors.background}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 460px sakura-icon: height: 30px --- # DESIGN.md — くすみ桜ピンクの水光ツヤコスメ LP（Dusty Sakura Pink Glossy Cosmetics LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: かわいい、上品・高級、やさしい・柔らかい - **キーワード**: くすみピンク・桜の花びら・水光ツヤ・ボケ光・写真コラージュ・白抜き文字 - **地の質感**: マットなくすみピンクの地に、ぼかしたボケ光と半透明の花びらを重ねた、しっとりした質感 - **形**: 角丸の写真、ピル型の枠線タグ、丸い成分写真、桜アイコン - **温度感**: やや暖かい。甘く柔らかい春の空気感 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#CC9B9E` | メイン地色のくすみローズ | 45% | 画素の実測 | | `background` | `#E1BBC6` | 明るいピンク地（色見本エリア） | 12% | 画素の実測 | | `background-alt` | `#FDE4F9` | フッター付近の淡いピンク | 6% | 画素の実測 | | `surface` | `#FCFBF9` | マップ・カードの白面 | 4% | 画素の実測 | | `on-dark` | `#FEEFEF` | 地色の上の白文字 | 3% | 画素の実測 | | `cta` | `#EE8CB2` | CTA ボタンのピンク（ラベンダーへのグラデ起点） | 1% | 画素の実測 | | `on-cta` | `#FFF4FF` | CTA ボタン文字 | 0% | 画素の実測 | | `accent-1` | `#FC9AD2` | 限定バッジの鮮やかなピンク | 0% | 画素の実測 | | `secondary` | `#E6DCF3` | ボタン末端の淡いラベンダー | 0% | 画素の実測 | | `accent-2` | `#B5577A` | Point ピル内の濃いローズ文字 | 0% | 推定 | | `dark-section` | `#C59CA2` | 帯見出しの少し濃いくすみ地 | 4% | 画素の実測 | | `text-muted` | `#B68786` | マップ軸ラベルなどのグレイッシュローズ | 0% | 画素の主要色に補正 | | `cta-accessible` | `#D82067` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#B35377` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#D3067B` | AA を満たす補正値（計算） | | 計算 | | `background-accessible` | `#B04E6A` | AA を満たす補正値（計算） | | 計算 | | `text-muted-accessible` | `#A06361` | AA を満たす補正値（計算） | | 計算 | - 地はくすみローズ1色を基調にし、明暗違いのピンクで面を切り替える - 文字はほぼすべて白抜きにし、黒系の文字は使わない - 強調は鮮やかなピンクの限定バッジと CTA のピンク→ラベンダーのグラデに絞る - 白面はポジショニングマップなど情報図にだけ使う - ボケ光は白〜淡いラベンダーの半透明で重ねる - `button-primary` は文字 `#FFF4FF` × 背景 `#EE8CB2` のコントラスト比が 2.17:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#D82067`、4.54:1）を使う。 - `point-pill` は文字 `#B5577A` × 背景 `#FCFBF9` のコントラスト比が 4.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#B35377`、4.59:1）を使う。 - `badge-limited` は文字 `#FEEFEF` × 背景 `#FC9AD2` のコントラスト比が 1.76:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#D3067B`、4.61:1）を使う。 - `swatch-grid` は文字 `#FEEFEF` × 背景 `#E1BBC6` のコントラスト比が 1.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `background-accessible`（`#B04E6A`、4.54:1）を使う。 - `color-map` は文字 `#B68786` × 背景 `#FCFBF9` のコントラスト比が 2.99:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-muted-accessible`（`#A06361`、4.56:1）を使う。 - `series-card` は文字 `#FEEFEF` × 背景 `#E1BBC6` のコントラスト比が 1.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `background-accessible`（`#B04E6A`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | シリーズ・色名の英字大見出し | 欧文セリフ | Fraunces | 800 | 34px | 1.1 | 0.0em | | `accent` | 限定コレクションのつや文字ロゴ風スクリプト | 欧文スクリプト | Dancing Script | 700 | 56px | 1.0 | 0.0em | | `headline-lg` | 和文キャッチ見出し | 明朝 | Shippori Mincho | 600 | 24px | 1.5 | 0.15em | | `headline-md` | Point 見出し | 明朝 | Shippori Mincho | 600 | 18px | 1.6 | 0.12em | | `body-md` | 説明文・商品情報 | ゴシック | Zen Kaku Gothic New | 500 | 13px | 1.9 | 0.1em | | `note` | 色番号・色名・小ラベル | 欧文サンセリフ | Montserrat | 600 | 10px | 1.3 | 0.05em | | `label-button` | CTA・英字ボタン | 欧文サンセリフ | Montserrat | 700 | 12px | 1.2 | 0.15em | - 英字の大見出しは太いセリフ、和文見出しは字間を広めにした明朝 - 本文は中央揃えで、短い行を 2〜4 行に改行する - 文字はすべて白にし、写真上でも可読性を保つ - 英字ラベルは大文字・広い字間で上品にする - 色番号は数字と色名を 2 行で積む - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。色見本は 3〜6 列のグリッド - **本文ブロックの幅**: 画面幅の約 82% - **余白**: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算） - テキストはすべて中央揃え - 商品写真は画面幅いっぱいに置き、その上下にずらした角丸写真を重ねてコラージュにする - Point セクションはピル→見出し→本文→丸写真の順で縦に積む - 色見本は限定色を上段に大きく、定番色を下段に小さく並べる - セクション間は余白と地色の明暗で区切る ## Elevation & Depth - 影はほぼ使わず、平面で構成する - CTA だけに淡いピンクの外側グロー - ボケ光の半透明円を重ねて奥行きを出す ## Shapes - **角丸**: 小 6px ／ 中 16px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 角丸の長方形。片側だけ角丸にして画面端に寄せたり、写真同士をずらして重ねる。成分は正円に切り抜く - **セクション境界**: 直線。地色の明暗で切り替え、境界に花びらを散らす - タグは白い細枠のピル型 - Point ラベルは白塗りのピル型 - CTA は小さめの角丸の横長ボタン - シリーズカードは大きめの角丸で、一段明るい面にする ## Components - **グラデーション CTA**（`button-primary`）: ピンクからラベンダーへの横グラデ。左にカートアイコン、右に矢印を置き、英字の大文字ラベルを入れる - **枠線ハッシュタグ**（`tag-outline`）: 白い細枠のピル。質感や特徴を短い語で示す - **Point 番号ピル**（`point-pill`）: 白塗りのピルに番号入りの英字ラベル。文字はローズ色 - **限定販路バッジ**（`badge-limited`）: 鮮やかなピンクの角丸ラベル。白文字で販路を示す - **色見本グリッド**（`swatch-grid`）: 唇や質感の小さな画像を並べ、下に番号と色名を置く - **カラーポジショニングマップ**（`color-map`）: 白い角丸カードに縦横の軸を引き、色の丸を配置した図 - **シリーズ紹介カード**（`series-card`）: 明るいピンク面の角丸カード。英字見出し、写真、色の並び、説明、下線付きのテキストリンクで構成する - **桜アイコン見出し飾り**（`sakura-icon`）: 見出しの上に小さな桜の花を置き、余白には花びらを浮かべる ## Do's and Don'ts **Do** - 地色をくすみローズに統一して、文字は白にする - 写真は角丸で切り、ずらして重ねるコラージュにする - 花びらとボケ光を余白に少しずつ散らす - 英字はセリフの大見出しにし、和文は明朝を組み合わせる - 限定性は鮮やかなピンクのバッジだけで示す **Don't** - 黒や濃紺の文字・面を使わない - 原色の赤や黄色のバッジで値引き訴求をしない - 角ばった太いゴシックの見出しを使わない - 白地の多いページにしない - 強い影や立体ボタンを使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（限定コレクションの世界観と発売情報を伝える）: モデル写真を全面に置き、商品写真を重ね、つや文字のロゴと明朝コピーを入れる。その下に価格・色名・発売日と CTA 2. **コンセプト**（テーマの説明）: 全幅の商品写真のあとに、中央揃えの 3 行テキストと花びらを置く 3. **色展開一覧**（限定色と定番色を一覧で見せる）: 明るいピンク地に、限定 3 色を大きく、定番色を小さくグリッドで並べる 4. **限定色の詳細**（1 色ずつ魅力を伝える）: 全幅の商品写真と、角丸写真のずらし配置。販路ラベル、英字の色名、和名、2 行の説明、枠線タグの順に置く 5. **キャッチ帯**（価値を 2 行にまとめる）: 少し濃い地の帯に、明朝で 2 行を「×」でつなぐ 6. **特長ポイント**（機能を 3 つで説明する）: Point ピル、明朝見出し、ビフォーアフター写真や丸い質感写真、腕に塗った色見本を縦に積む 7. **カラーラインナップ**（全色を比べる）: スライダーで 1 色ずつ見せ、白カードのポジショニングマップを添える 8. **再訴求 CTA**（購入へ誘導する）: FV と同じロゴとモデルビジュアルを繰り返し、グラデ CTA を置く 9. **レビュー色見本**（実際の発色を見せる）: 英字の大見出しの下に、腕に塗った写真と唇のアップを縦に並べる 10. **シリーズ紹介**（関連商品へ回遊させる）: 角丸カードを 2 枚縦に並べ、それぞれにテキストリンクを付ける 11. **フッター**（店舗・EC・SNS 導線）: ボケ光グラデの地に、細い英字の大きなリンクとロゴ、SNS アイコン、ナビを置く ## Imagery - 商品はピンクの背景に花びら、ガラス、雫と並べ、柔らかい逆光で撮る - 唇はアップで、グロスの反射を強く見せる - モデルは淡いピンクのニットで、ボケ光の中にいる甘い雰囲気 - 色見本は腕に塗って横に引いた写真 - 飾りは半透明の桜の花びらと白〜ラベンダーのボケ円 - 限定ロゴは透明感とつやのあるガラス風の筆記体 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では 1 カラムの中央寄せにし、最大幅 480〜600px 程度で両側に同系色の背景を敷く - PC に広げる場合、コラージュ写真は 2 カラムにずらして配置する - 色見本グリッドは PC では 1 行に並べる - CTA は SP では幅 80% ほど、PC では最大 400px - ハンバーガーメニューは右上に白い丸で置く ## 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-745062cd`（元 LP の URL から採番） - **元 LP**: https://www.opera-net.jp/special/2026mar/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（10/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。