--- version: alpha name: Pastel Lavender Sweets Toy LP description: ラベンダーの地に、お菓子のイラストを薄く敷き詰めた子ども向け玩具 LP。濃いピンクとターコイズの帯見出しで区切り、クリーム色のカードに商品情報をまとめる。ソースやクリームが流れるような装飾、ぷっくりした丸文字で、甘くて楽しい雰囲気を出している。 colors: background: '#CDB5E5' primary: '#E8559A' secondary: '#82C7C8' surface: '#FFFCEA' background-alt: '#8DBCCE' tint-1: '#EBC5CD' text: '#623D16' cta: '#3CBBBD' on-cta: '#FFFFF9' accent-1: '#6B3A1E' line: '#A5C9B9' accent-2: '#D62030' dark-section: '#632A8C' primary-accessible: '#DF1E79' secondary-accessible: '#398182' cta-accessible: '#2A8283' typography: display: fontFamily: Dela Gothic One fontSize: 44px fontWeight: 400 lineHeight: 1.1 headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 28px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.08em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 20px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.02em headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 16px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.05em body-lg: fontFamily: Zen Maru Gothic fontSize: 18px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.7 note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: M PLUS Rounded 1c fontSize: 13px fontWeight: 800 lineHeight: 1.2 rounded: sm: 6px md: 16px lg: 24px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' section-ribbon-pink: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-lg}' rounded: '{rounded.md}' height: 56px section-ribbon-teal: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-lg}' rounded: '{rounded.md}' height: 90px step-circle: backgroundColor: '{colors.surface}' textColor: '{colors.secondary}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 150px polaroid-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 130px product-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 1100px badge-onsale: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' rounded: '{rounded.full}' height: 34px label-pill: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 36px speech-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 150px set-list: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 160px --- # DESIGN.md — ラベンダー×ピンクのお菓子系玩具 LP（Pastel Lavender Sweets Toy LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: かわいい、ポップ・元気、やさしい・柔らかい - **キーワード**: パステルラベンダー・スイーツ・ぷっくり丸文字・帯見出し・流れるソース装飾・子ども向け玩具 - **地の質感**: ラベンダーの地に、お菓子や調理器具の線画を同系色の濃淡で敷き詰めた柄。上に光沢のある 3D 風の商品写真とソースのうねり装飾を重ねる。 - **形**: 角丸の帯見出しの両端にハートを付ける。クリーム色の角丸カード、円形の手順バッジ、少し傾けたポラロイド枠。 - **温度感**: 暖かく甘い。ピンクとラベンダーが中心で、ターコイズを差し色に使う。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#CDB5E5` | ページ地のラベンダー | 45% | 画素の実測 | | `primary` | `#E8559A` | 見出し帯の濃ピンク | 3% | 推定 | | `secondary` | `#82C7C8` | 見出し帯のターコイズ | 3% | 画素の主要色に補正 | | `surface` | `#FFFCEA` | 商品情報カードのクリーム色 | 17% | 画素の実測 | | `background-alt` | `#8DBCCE` | 購入情報ブロックの水色地 | 6% | 画素の実測 | | `tint-1` | `#EBC5CD` | 遊び方枠の淡ピンク面 | 5% | 画素の主要色に補正 | | `text` | `#623D16` | 本文・価格の茶色文字 | 2% | 画素の実測 | | `cta` | `#3CBBBD` | 発売中バッジのターコイズ | 0% | 画素の実測 | | `on-cta` | `#FFFFF9` | バッジ上の白文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#6B3A1E` | 発売中ラベルのこげ茶 | 0% | 推定 | | `line` | `#A5C9B9` | セット内容の点線枠のミント色 | 0% | 画素の実測 | | `accent-2` | `#D62030` | 注意書きの赤帯 | 0% | 推定 | | `dark-section` | `#632A8C` | ポラロイド背景の濃紫 | 0% | 画素の実測 | | `primary-accessible` | `#DF1E79` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#398182` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#2A8283` | AA を満たす補正値（計算） | | 計算 | - 地は全体をラベンダーで統一し、同系色の線画柄を薄く重ねる。 - セクション見出しの帯は濃ピンクとターコイズを交互に使う。 - 商品情報はクリーム色のカードにまとめ、ラベンダーの地から浮かせる。 - 文字は黒ではなくこげ茶にして柔らかく見せる。 - ターコイズは発売中バッジやサブ見出しなど、目立たせたい小さな部品に使う。 - 購入情報だけは水色の帯の地にして、区切りをはっきりさせる。 - `section-ribbon-pink` は文字 `#FFFFF9` × 背景 `#E8559A` のコントラスト比が 3.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#DF1E79`、4.55:1）を使う。 - `section-ribbon-teal` は文字 `#FFFFF9` × 背景 `#82C7C8` のコントラスト比が 1.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#398182`、4.51:1）を使う。 - `step-circle` は文字 `#82C7C8` × 背景 `#FFFCEA` のコントラスト比が 1.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#398182`、4.51:1）を使う。 - `badge-onsale` は文字 `#FFFFF9` × 背景 `#3CBBBD` のコントラスト比が 2.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#2A8283`、4.53:1）を使う。 - `label-pill` は文字 `#FFFFF9` × 背景 `#82C7C8` のコントラスト比が 1.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#398182`、4.51:1）を使う。 - `speech-bubble` は文字 `#E8559A` × 背景 `#FFFCEA` のコントラスト比が 3.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#DF1E79`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 商品ロゴ風の大見出し | 装飾・ディスプレイ | Dela Gothic One | 400 | 44px | 1.1 | 0.0em | | `headline-lg` | 帯見出しの中の白文字 | 丸ゴシック | M PLUS Rounded 1c | 900 | 28px | 1.2 | 0.08em | | `headline-md` | グラデーションのサブ見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 20px | 1.3 | 0.02em | | `headline-sm` | ターコイズのピル型ラベル | 丸ゴシック | M PLUS Rounded 1c | 800 | 16px | 1.3 | 0.05em | | `body-lg` | 商品説明のリード文（太字のこげ茶） | 丸ゴシック | Zen Maru Gothic | 700 | 18px | 1.7 | 0.02em | | `body-md` | 価格や機能の説明 | ゴシック | Noto Sans JP | 500 | 14px | 1.7 | 0.0em | | `note` | 注意書き | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em | | `accent` | 手順説明の縁取り付き文字 | 丸ゴシック | M PLUS Rounded 1c | 800 | 13px | 1.2 | 0.0em | - 漢字にはルビを振り、子どもでも読めるようにする。 - 見出しは丸ゴシックの極太にし、白の縁取りや影でぷっくり見せる。 - サブ見出しはピンクからオレンジ、ターコイズへ変わる多色のグラデーションにする。 - 本文はこげ茶の太字で、短い文にする。 - 手順説明の文字は白フチ付きのターコイズかピンクにする。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。紹介カードは 3 列、手順は 2×2 のグリッド。 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - セクションの頭に、横幅いっぱいの角丸帯見出しを置く。 - カードの外側に、ソースのうねりやお菓子のパーツを飛び出させて配置する。 - 商品写真は大きめに見せ、説明は短く添える。 - 価格・発売中バッジ・注意書きは中央揃えでまとめる。 - ページ最下部に SNS シェアボタンを並べる。 ## Elevation & Depth - カードは影を付けず、白やミント色の縁取りで地から浮かせる。 - ポラロイド枠には薄いドロップシャドウを付け、少し傾ける。 - 装飾のソースやクリームは光沢のある立体表現にする。 ## Shapes - **角丸**: 小 6px ／ 中 16px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 手順写真は円形に切り抜き、黄色と虹色の輪で囲む。キャラクターはポラロイド風の白枠に入れ、少し傾ける。 - **セクション境界**: ファーストビューの上端だけ波形にする。それ以外は帯の地色の切り替えと装飾で区切る。 - 帯見出しは角丸の長方形にし、両端に白いハートを付ける。 - クリーム色のカードの角にはハートの飾りを置く。 - セット内容はミント色の点線の角丸枠で囲む。 - ラベルはピル型にする。 ## Components - **ピンクの帯見出し**（`section-ribbon-pink`）: 濃ピンクの角丸帯に白の極太丸文字を載せ、両端にハートを付けた見出し。 - **ターコイズの帯見出し**（`section-ribbon-teal`）: ターコイズの 2 行の帯見出し。ピンクの帯見出しと交互に使う。 - **円形の手順バッジ**（`step-circle`）: 番号付きの円形写真を虹色の輪で囲み、下に縁取り文字で手順を添える。 - **キャラ紹介のポラロイド**（`polaroid-card`）: 白枠の写真カード。少し傾け、上部にハートを付け、下にキャラ名を入れる。 - **商品情報カード**（`product-card`）: クリーム色の角丸カード。商品写真・サムネイル・セット内容・価格をまとめる。 - **発売中バッジ**（`badge-onsale`）: ターコイズのピル型バッジに白文字を載せ、価格の上に置く。 - **商品タイプのラベル**（`label-pill`）: ターコイズのピル型ラベルに白文字を載せ、両端に飾りの点を付ける。 - **機能の吹き出し**（`speech-bubble`）: 白い円形の吹き出しに、音符アイコンとグラデーション文字で機能を書く。 - **セット内容リスト**（`set-list`）: ミント色の点線枠の中に、ハートの箇条書きで内容物を 2 列で並べる。 ## Do's and Don'ts **Do** - ラベンダーの地にお菓子の線画柄を薄く敷く。 - 見出し帯の両端にハートを付け、ピンクとターコイズを交互に使う。 - ソースやクリームが流れる装飾で、セクション同士をつなぐ。 - 子ども向けなので、漢字にはルビを振る。 - 商品情報はクリーム色のカードに集約する。 **Don't** - 黒文字や無彩色の地にしない。 - 角ばった直線的な枠や明朝体を使わない。 - 長い説明文を詰め込まない。 - 彩度の低いくすみ色だけで構成しない。 - 装飾のない平板な白背景を広く取らない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の世界観と遊び方を一目で伝える）: 上端を波形にし、立体的なロゴ文字・大きな商品写真・円形の手順 4 つを並べる。 2. **動画**（遊んでいる様子を見せる）: ラベンダーの柄の地に、動画を横幅いっぱいに埋め込む。周りにソースの装飾を置く。 3. **購入情報の要約**（商品と価格をすぐ伝える）: 水色の帯の地にクリーム色のカードを置く。パッケージ写真・ロゴ・発売中ラベル・価格を載せる。 4. **あそびかた**（遊ぶ手順を説明する）: ピンクの帯見出しと淡ピンクの枠の中に、グラデーションのサブ見出しと円形の手順を 2×2 で並べる。 5. **キャラクター紹介**（種類の違いを見せる）: ターコイズの帯見出しの下に、傾けたポラロイドを 3 枚並べる。 6. **機能紹介**（声が出る機能を伝える）: 大きな円形写真に吹き出しを重ねる。続けて、アイコン付きの機能説明をクリーム色のカードに入れる。 7. **商品情報**（内容物・価格・注意事項を伝える）: ピンクの帯見出しとこげ茶のリード文のあと、カードに写真ギャラリー・セット内容・発売中バッジ・価格を載せる。 8. **締めのビジュアルとシェア**（印象を残して拡散を促す）: キャラクターを積み重ねた大きなビジュアルを置き、最下部に SNS ボタンを並べる。 ## Imagery - ぬいぐるみ風の商品を、光沢のある 3D 風に明るく撮る。 - いちご・ブルーベリー・ホイップ・チョコのパーツを、余白に散らす。 - ピンク・青・茶のソースが、リボンのようにうねる装飾を入れる。 - 子どもが笑顔で商品を抱える写真を、円形に切り抜く。 - 背景はお菓子や調理器具の線画を敷き詰めた柄にする。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に約 60% 幅のコンテンツを置き、周りはラベンダーの柄の地を広く見せる。 - PC のファーストビューは手順 4 つを横 1 列に並べる。 - PC の商品情報カードは、写真とテキストを左右 2 カラムにする。 - 帯見出しは PC でも中央寄せのまま、幅だけ縮める。 - キャラクターを横 1 列に並べた帯を 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-8d5f7f8f`（元 LP の URL から採番） - **元 LP**: https://www.takaratomy.co.jp/products/panbina/kuruttowow/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（7/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。