--- version: alpha name: Pop Pastel Collectible Doll Pre-order LP description: ショッキングピンクを主役に、水色・ラベンダー・サーモンでセクションごとに地色を切り替えるポップなキャラクタードール受注LP。黒い細線の白カード、吹き出し型の見出し、丸窓の写真、手芸小物の切り抜き装飾で、にぎやかでかわいい印象を作っている。 colors: primary: '#F458A2' secondary: '#FE81C3' background: '#FDFDFD' accent-1: '#80CCFE' accent-2: '#C094EB' accent-3: '#FFB3B3' cta: '#F35CA5' on-cta: '#FEFEFE' text: '#32262B' dark-section: '#333333' marker: '#FBE453' line: '#B5CFDF' text-muted: '#D75457' cta-accessible: '#E31176' primary-accessible: '#E10F73' accent-1-accessible: '#0279C7' typography: display: fontFamily: Shippori Mincho fontSize: 36px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.05em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 28px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.08em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 22px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.4 body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Montserrat fontSize: 16px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.05em rounded: sm: 6px md: 14px lg: 24px full: 999px spacing: unit: 8px card: 16px section: 60px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px button-sub: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 36px speech-heading: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 90px nav-banner: backgroundColor: '{colors.secondary}' textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 240px date-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 90px spec-tag: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' typography: '{typography.note}' rounded: '{rounded.full}' height: 18px limited-label: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 22px info-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 300px zoom-thumb: textColor: '{colors.primary}' typography: '{typography.note}' rounded: '{rounded.full}' height: 190px --- # DESIGN.md — ピンク×パステルのポップなドール予約LP（Pop Pastel Collectible Doll Pre-order LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ポップ・元気、かわいい、情報量多め・訴求型 - **キーワード**: ショッキングピンク・パステル色の地の切り替え・吹き出し見出し・黒い細線の白カード・手芸小物の装飾・丸窓写真 - **地の質感**: 平塗りの地にドット柄や方眼をうっすら敷き、波線の境界と切り抜き写真でコラージュ風にする - **形**: 角丸カード・吹き出し・円形写真・ピル型ボタン・波形のセクション境界 - **温度感**: 暖色寄り。セクションごとに寒色パステルを差し込む ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#F458A2` | ブランドを代表するショッキングピンク（導入・最終CTAの地） | 9% | 画素の実測 | | `secondary` | `#FE81C3` | 詳細セクションの淡いピンク地 | 20% | 画素の実測 | | `background` | `#FDFDFD` | カードの中と本文の白地 | 19% | 画素の実測 | | `accent-1` | `#80CCFE` | 製品情報セクションの水色地 | 6% | 画素の実測 | | `accent-2` | `#C094EB` | 販売情報セクションのラベンダー地 | 8% | 画素の実測 | | `accent-3` | `#FFB3B3` | 展示情報セクションのサーモンピンク地 | 7% | 画素の実測 | | `cta` | `#F35CA5` | 主ボタンのピンク | 1% | 画素の主要色に補正 | | `on-cta` | `#FEFEFE` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `text` | `#32262B` | 本文・カード枠線の濃い墨色 | 4% | 画素の主要色に補正 | | `dark-section` | `#333333` | サブボタンの黒灰 | 0% | 画素の実測 | | `marker` | `#FBE453` | 期間限定ラベルの黄色 | 0% | 画素の実測 | | `line` | `#B5CFDF` | 表の区切り線の水色 | 0% | 画素の主要色に補正 | | `text-muted` | `#D75457` | 見出し上の小さい補足文字・注意の赤 | 0% | 画素の実測 | | `cta-accessible` | `#E31176` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#E10F73` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#0279C7` | AA を満たす補正値（計算） | | 計算 | - 地色はセクションごとに切り替える。導入はピンク、詳細は淡いピンク、製品情報は水色、販売情報はラベンダー、展示情報はサーモン - 本文は白いカードの上に置き、カードには濃い墨色の細い枠線を付ける - 見出しの文字色はそのセクションの地色を濃くした色にそろえる - 黄色は「期間限定」などの短いラベルだけに使う - 注意文や締切の情報は赤文字で目立たせる - 主ボタンはピンク、PDFや送料など補助のボタンは黒灰にする - `button-primary` は文字 `#FEFEFE` × 背景 `#F35CA5` のコントラスト比が 3.02:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E31176`、4.52:1）を使う。 - `speech-heading` は文字 `#F458A2` × 背景 `#FDFDFD` のコントラスト比が 3.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#E10F73`、4.57:1）を使う。 - `date-badge` は文字 `#FEFEFE` × 背景 `#F458A2` のコントラスト比が 3.08:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#E10F73`、4.51:1）を使う。 - `spec-tag` は文字 `#80CCFE` × 背景 `#FDFDFD` のコントラスト比が 1.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#0279C7`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのキャラクター名 | 明朝 | Shippori Mincho | 800 | 36px | 1.2 | 0.05em | | `headline-lg` | セクション見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 28px | 1.3 | 0.08em | | `headline-md` | 吹き出し内の見出し・カードのタイトル | 丸ゴシック | M PLUS Rounded 1c | 800 | 22px | 1.3 | 0.05em | | `headline-sm` | 販売期間などの強調行 | ゴシック | Noto Sans JP | 700 | 17px | 1.4 | 0.0em | | `body-md` | 本文・中央そろえの紹介文 | ゴシック | Noto Sans JP | 500 | 12px | 1.8 | 0.02em | | `note` | 注釈・写真のキャプション | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `accent` | 英字の白抜き大見出し・縦書きの飾り文字 | 欧文サンセリフ | Montserrat | 800 | 16px | 1.2 | 0.05em | | `label-button` | ボタンと小さいラベル | ゴシック | Noto Sans JP | 700 | 13px | 1.0 | 0.05em | - 見出しは太い丸ゴシックにし、上に小さい補足文と波線を添える - セクション見出しの左にアイコン（トルソーや値札など）を置く - 色地の上の紹介文は白文字で中央そろえにし、短く改行する - 英字の見出しは白抜きや半透明で背景になじませる - 表のラベルは角丸の枠付きタグにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。ディテール写真だけ 2 列の円形グリッド - **本文ブロックの幅**: 画面幅の約 94% - **余白**: セクション間 60px、基本単位 8px、カード内 16px（375px 幅換算） - カードは画面の端から約 10px あけたほぼ全幅で置く - 目次は大きいバナーを縦に 3 つ並べ、それぞれの下に丸い矢印を重ねる - 製品情報は左にラベルタグ、右に値を置き、水色の線で区切る - 販売情報は 2 つのタブで切り替える - 最後にサイズがばらばらの写真を詰めたコラージュを置く ## Elevation & Depth - カードは影ではなく 1.5px の墨色の枠線で立たせる - 切り抜き写真は白いフチを付けてカードの外に少しはみ出させる - ボタンにはごく弱い影を付けるか、影なしにする ## Shapes - **角丸**: 小 6px ／ 中 14px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 人物の切り抜き、円形、角丸四角を混ぜて使う - **セクション境界**: 波形のカーブや、山形のスカラップ状の境界 - 見出しは尾の付いた角丸の吹き出しにする - ディテール写真は円形にし、右下に虫眼鏡アイコンを重ねる - ボタンはピル型にし、右端に丸い矢印アイコンを付ける - 日付バッジは円形のスタンプ風にする ## Components - **主CTAボタン**（`button-primary`）: ピンクのピル型。右端に黒丸の矢印アイコンを付ける - **補助ボタン**（`button-sub`）: 黒灰のピル型。PDFや送料案内に使う - **吹き出し見出し**（`speech-heading`）: 白い角丸の吹き出しに色の太い枠線を付け、小さい補足文と大きい見出しを入れる - **目次バナー**（`nav-banner`）: 色地の角丸パネルに人物の切り抜きと吹き出しを置き、下に円形の矢印ボタンを重ねる - **日付スタンプ**（`date-badge`）: 濃いピンクの円に白文字で発売日と時刻を入れる - **仕様ラベル**（`spec-tag`）: 白地に色の枠線を付けた小さな角丸タグ。表の項目名に使う - **期間限定ラベル**（`limited-label`）: 黄色地に濃い文字の角丸ラベル - **情報カード**（`info-card`）: 白地に墨色の細い枠線を付けた角丸カード。店舗カードは上部にサーモン色の帯を付ける - **ディテール丸窓**（`zoom-thumb`）: 円形の写真に虫眼鏡アイコンを重ね、下にピンクの小さいキャプションを入れる ## Do's and Don'ts **Do** - セクションごとにパステル地を変えて、どこの情報かを色で区別する - 糸巻き・リボン・ボタン・ハサミなど手芸小物の切り抜きを散らす - 見出しには小さい補足文と波線を必ず添える - カードは白地＋墨色の細い枠線＋角丸でそろえる - 日付と「期間限定」は目立つバッジにする **Don't** - くすんだ色や暗い地をメインに使わない - 角が直角のカードや四角いボタンにしない - 本文を色地の上に長く書きすぎない（白いカードに入れる） - 強い影を付けた立体的な表現にしない - 明朝体を本文に使わない（明朝はキャラクター名だけ） ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の存在感と受注の開始日を伝える）: 全面の人物写真の上部にロゴ、下部に明朝のキャラクター名と白いラベル、右に円形の日付スタンプを置く 2. **リリース告知**（商品の概要と魅力を伝える）: スカラップ境界のあとをピンク地にし、傾けた吹き出し見出しと白文字の中央そろえの文を置く。下に角丸写真を互い違いに並べる 3. **目次**（3 つの情報ブロックへ誘導する）: 白い枠付きカードの中に、ピンク・水色・紫のバナーと矢印ボタンを縦に並べる 4. **ディテール**（衣装や各部のこだわりを見せる）: 英字の白抜き見出しと縦線をタイムライン風に置き、白カードに円形写真を 2 列×5 段で並べる 5. **ボディ解説**（特別な仕様を説明する）: 大きな角丸写真の下に白カードを置き、アイコン付きの見出し・説明文・ピンクのボタンを入れる 6. **取り扱いの注意**（注意事項と説明書への導線）: 白カードに※付きの箇条書きと黒灰のPDFボタンを置き、下を波形の境界にする 7. **製品情報**（セット内容と価格などの仕様を伝える）: 水色地に白カードを置き、タグ＋値の表を水色の線で区切る。右上に人物の切り抜きをはみ出させる 8. **販売情報**（受注期間・支払い方法・発送時期を伝える）: ラベンダー地に人物の切り抜きと期間限定ラベルを置き、2 つのタブ付きカードで受注方法を切り替える 9. **注意事項**（送料・返品などのルール）: 赤いアイコン付きの小見出しと箇条書きを並べ、黒灰の小ボタンを置く 10. **展示情報**（店舗で実物を見られることを伝える）: サーモン地にのれん風の見出しを置き、帯付きの店舗カードを 2 枚並べる。カードには写真、バージョンのバッジ、期間、店舗情報を入れる 11. **写真コラージュ**（多彩なポーズで世界観を補強する）: 角丸写真をサイズを変えてすき間なく敷き詰める 12. **最終CTA・フッター**（注文へ誘導する）: ピンク地の白カードに名前、日付スタンプ、期間限定ラベル、大きなピンクのボタンを置き、その下にSNSアイコンと権利表記を入れる ## Imagery - 明るく浅い被写界深度で、ボケた背景の前に被写体を置いて撮る - 全身ポーズの人物は白いフチ付きで切り抜き、カードからはみ出させる - 部位のアップは寄りで撮り、円形に切り抜く - リボン・糸巻き・ハートの風船・旗のガーランドなどの小物を切り抜いて散らす - 背景にドット柄や方眼のテクスチャを薄く敷く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC ではファーストビューを横長にし、名前と日付スタンプを写真の中央下に置く - PC では目次の 3 バナーを横に並べる - PC ではディテール写真を 3 列にし、右側に全身の切り抜きを大きく置く - PC では大きな英字（例: 〇〇 DETAILS）を背景に縦書きで配置する - PC では右上に固定の目次と、追従する注文ボタンを置く - PC では店舗カードを 2 列にし、販売情報は左に切り抜き写真・右に本文の 2 カラムにする ## 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-4d6338f3`（元 LP の URL から採番） - **元 LP**: https://dolk.jp/pages/kitagawamarindoll/?BnrSiteType=0 - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。