--- version: alpha name: Sweet Pastel Donut Collab Kids Product LP description: 山吹色とピーチ・クリーム色の地を交互に切り替えるスイーツ風の子ども向け商品LP。波形スカラップ境界、ストライプやドット地、ドーナツのイラスト散らしでお菓子屋さんのような楽しさを出す。見出しは山吹色の帯に白い太丸文字で載せる。カードは白い角丸で、ボタンは山吹色のピル型。 colors: primary: '#FDC144' background: '#FFFFFF' background-alt: '#FFEFE7' tint-1: '#FDD8C5' tint-2: '#FFE38F' surface: '#FFF6DB' cta: '#FEC144' on-cta: '#3A2A22' text: '#3B140B' secondary: '#743C24' on-primary: '#FEFCF8' accent-1: '#BA4F38' accent-2: '#E8954A' line: '#E1D0BF' primary-accessible: '#9C6A02' typography: display: fontFamily: M PLUS Rounded 1c fontSize: 18px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.05em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 17px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.05em headline-sm: fontFamily: Zen Maru Gothic fontSize: 14px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.05em accent: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.3 label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.03em rounded: sm: 6px md: 12px lg: 16px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' section-heading-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.display}' height: 40px sub-copy-slash: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 24px color-swatch-card: backgroundColor: '{colors.tint-2}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 160px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 38px number-badge: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 60px product-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 360px caption-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 280px label-tag: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 26px info-box: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 220px carousel-arrow: backgroundColor: '{colors.secondary}' textColor: '{colors.primary}' rounded: '{rounded.full}' height: 34px --- # DESIGN.md — 山吹×ピーチのお菓子コラボ子ども用品LP（Sweet Pastel Donut Collab Kids Product LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ファッション・アクセサリー ／ **雰囲気**: かわいい、ポップ・元気、やさしい・柔らかい - **キーワード**: スイーツ・パステル・スカラップ・コラボ限定・子ども・お菓子屋さん - **地の質感**: 縦ストライプ・ドット・網点の淡い地柄。フラットで紙のような質感。 - **形**: 大きめの角丸カード、ピル型ボタン、波形スカラップの区切り、花形バッジ - **温度感**: 暖色寄りで甘く明るい ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FDC144` | 見出し帯・FV地の山吹色 | 9% | 画素の実測 | | `background` | `#FFFFFF` | カード・基本の白 | 23% | 画素の実測 | | `background-alt` | `#FFEFE7` | ピーチ系セクション地 | 10% | 画素の実測 | | `tint-1` | `#FDD8C5` | キャンペーン部のサーモン地 | 8% | 画素の実測 | | `tint-2` | `#FFE38F` | 淡い黄色セクション地 | 5% | 画素の実測 | | `surface` | `#FFF6DB` | クリーム色ストライプ地 | 5% | 画素の実測 | | `cta` | `#FEC144` | 購入ボタン | 2% | 画素の実測 | | `on-cta` | `#3A2A22` | ボタン文字 | 0% | 推定 | | `text` | `#3B140B` | 見出し・本文のこげ茶 | 2% | 画素の実測 | | `secondary` | `#743C24` | 番号バッジ・ラベル・矢印のチョコ茶 | 1% | 画素の実測 | | `on-primary` | `#FEFCF8` | 見出し帯の白文字 | 0% | 画素の実測 | | `accent-1` | `#BA4F38` | 変更注記の赤文字 | 0% | 画素の主要色に補正 | | `accent-2` | `#E8954A` | ドーナツ装飾のオレンジ | 2% | 推定 | | `line` | `#E1D0BF` | スカラップ境界の淡いベージュ線 | 0% | 画素の主要色に補正 | | `primary-accessible` | `#9C6A02` | AA を満たす補正値（計算） | | 計算 | - 地色はセクションごとに山吹→クリーム縞→黄→クリーム→ピーチ縞→ピーチ点→サーモンと暖色系だけで切り替える - 見出し帯と購入ボタンは山吹色にそろえ、文字はこげ茶。白文字は見出し帯だけに使う - 文字は黒を使わず、こげ茶を基本にする - 番号バッジや参加方法ラベルにはチョコ茶を使う - 商品カラーの見本カードには商品色に合わせたパステル地を使う - 赤は注記と外部バナーだけに使う - `section-heading-band` は文字 `#FEFCF8` × 背景 `#FDC144` のコントラスト比が 1.59:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#9C6A02`、4.58:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション見出し帯（白・太） | 丸ゴシック | M PLUS Rounded 1c | 900 | 18px | 1.3 | 0.05em | | `headline-md` | カード内の見出し・キャンペーン名 | ゴシック | Zen Kaku Gothic New | 700 | 17px | 1.6 | 0.05em | | `headline-sm` | 見出し下のサブコピー（左右に斜線飾りを付ける） | 丸ゴシック | Zen Maru Gothic | 500 | 14px | 1.5 | 0.05em | | `body-md` | 説明本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.05em | | `accent` | 価格表示 | 欧文サンセリフ | Noto Sans JP | 700 | 18px | 1.3 | 0.0em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.2 | 0.05em | | `note` | 注釈・(税込) | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.03em | - セクション見出しは山吹色の帯に白い極太丸文字で載せ、中央に置く - サブコピーの左右に、色の違う斜線を 3 本ずつハの字に並べる - 見出しの数字だけを大きくし、こげ茶で強調する - 本文は行間を広めにとり、こげ茶で書く - 価格は太字で右に寄せ、(税込)は小さい文字にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品やカラー一覧は 2 列グリッド - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - 各セクションは「見出し帯→サブコピー→コンテンツ」の順にする - 見出し帯は上から点線 2 本で吊り下げたように見せる - カードは左右 12px 程度の余白でほぼ全幅に置く - カルーセルは中央の 1 枚を大きく見せ、両隣を端からのぞかせる - 2 列グリッドの間隔は 8px ## Elevation & Depth - カードは白地にごく薄い影（0 2px 4px rgba(0,0,0,.1)）を付ける - ボタンの下側にやや濃い影を付けて立体感を出す - 装飾のドーナツは影なしのフラットにする ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 商品は白抜きの切り抜き。モデル写真は角丸の矩形 - **セクション境界**: 波形のスカラップ（雲形）で区切り、境界に淡いベージュの線を沿わせる - 番号バッジは花形（ギザ丸）にする - 見出し帯は角丸なしの帯にする - キャプション付きのカードは、下部を山吹色の帯にする ## Components - **見出し帯**（`section-heading-band`）: 山吹色の横長の帯に白い極太文字。上に吊り下げ用の点線を付ける - **斜線飾りサブコピー**（`sub-copy-slash`）: 短い一文の左右にカラフルな斜線を 3 本ずつ置く - **カラー見本カード**（`color-swatch-card`）: 商品色のパステル地に商品写真と小さなお菓子写真を載せ、下に色名を入れる - **購入ボタン**（`button-primary`）: 山吹色のピル型。右端に白丸付きの矢印を置く - **特典・弾数バッジ**（`number-badge`）: チョコ茶の花形に、白文字で番号を大きく入れる - **商品カード**（`product-card`）: 白い角丸枠に切り抜き商品を置き、下に商品名・価格・購入ボタンを並べる - **キャプション帯付きカード**（`caption-card`）: 白地の上半分に画像、下を山吹色の帯にして説明文を入れる - **参加方法ラベル**（`label-tag`）: チョコ茶の小さな角丸矩形に白文字 - **取扱い案内ボックス**（`info-box`）: サーモン地の角丸ボックスに、中央見出しと黒丸付きの箇条書き - **カルーセル矢印**（`carousel-arrow`）: チョコ茶の丸に、山吹色の山形矢印 ## Do's and Don'ts **Do** - セクションの境界は必ずスカラップ波形にする - 地色は暖色パステルだけで切り替え、ストライプやドットを薄く敷く - 空いた余白にお菓子のフラットイラストを散らす - 見出しは山吹色の帯と斜線飾りサブコピーで統一する - 文字色はこげ茶でそろえる - 購入ボタンはすべて同じ山吹色のピル型にする **Don't** - 寒色や黒を地色に使わない - 角張ったカードやシャープな直線の区切りを使わない - 細い明朝体や硬い書体を使わない - 濃い影や光沢グラデーションを付けない - 見出しの色を山吹色以外に変えない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コラボであることと商品の可愛さを一目で伝える）: 山吹色の地にパステルの円と網点を重ねる。ロゴ並び、モデル写真、お菓子写真、手書き風の一言を置き、下にカラー展開を横一列に並べる 2. **カラー一覧**（色のバリエーションを見せる）: クリーム色の縦ストライプ地に、商品色のパステルカードを 2 列×3 段で並べる 3. **ポイント紹介**（限定のこだわりパーツを訴求する）: 黄色地に、キャプション帯付きのカルーセルを置き、下に 3 列×2 段のサムネイルを並べる 4. **バナー誘導**（カタログ請求とSNSキャンペーンへ誘導する）: 下部に濃い色の帯ボタンが付いた横長バナーを 2 つ置く 5. **機能紹介**（既存の機能で安心感を補う）: クリーム地に白カードを縦に並べる。各カードに機能ロゴ、太字見出し、写真、本文を入れる 6. **限定特典**（購入の後押しをする）: ピーチの縞地に、番号バッジとキャプション帯付きの白カードを置く 7. **モデルカット**（背負った時のイメージを見せる）: ピーチ地にドーナツイラストを散らし、中央を大きく見せるカルーセルにする 8. **ラインナップ・購入**（価格を示して購入へつなげる）: ドット地に商品カードを 2 列で並べ、価格と購入ボタンを付ける。最後に取扱い案内ボックスを置く 9. **キャンペーン詳細**（期間限定の企画を告知する）: サーモン地に白い大カードを置く。弾数バッジ、バナー、花アイコン付きの項目リスト、ピルボタンで構成する 10. **フッター**（関連アプリへの誘導と著作権表示）: 赤い角丸バナーと、中央寄せのコピーライトを置く ## Imagery - 子どもモデルは明るい白背景か淡いブルー背景で、笑顔で撮る。ベレー帽やチェックの服で可愛らしくする - 商品は白抜きの切り抜きにし、モチーフのお菓子写真を左上に小さく重ねる - 装飾はドーナツ・花形をオレンジ・ピンク・茶のフラットイラストで描き、画面の端に半分はみ出させて散らす - 背景には網点の円やパステルの丸を重ねる - 手書き風の吹き出しや擬音を写真に添える - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央約 60% 幅のコンテナに収め、背景の地色と柄は全幅に敷く - カラー一覧は PC では 3 列×2 段にする - 機能カードと特典カードは PC では 2 列に横並びにする - ラインナップは 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-75ae830e`（元 LP の URL から採番） - **元 LP**: https://www.fit-chan.com/lp/misterdonut/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。