--- version: alpha name: Pastel Maternity Gift Campaign LP description: くすみピンクベージュの地に、サーモン・ミント・イエローのパステル色を使ったプレゼントキャンペーンLP。番号付きの商品カードを縦に並べ、太いゴシック体と波線の装飾でやさしく親しみやすい雰囲気にしている。 colors: primary: '#FE9D8C' background: '#FFFFFF' background-alt: '#DEBBA7' accent-1: '#9ECCBF' accent-2: '#F5CA7C' surface: '#F1E8E3' text: '#3F3F3F' dark-section: '#454545' on-dark: '#FEFCF9' cta: '#FEFF66' on-cta: '#514945' accent-3: '#E59A8F' marker: '#FFE27A' tint-1: '#93C3A4' accent-3-accessible: '#CF4430' tint-1-accessible: '#47805B' typography: display: fontFamily: Dela Gothic One fontSize: 60px fontWeight: 400 lineHeight: 1.1 headline-lg: fontFamily: Noto Sans JP fontSize: 32px fontWeight: 900 lineHeight: 1.25 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-sm: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.06em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.7 accent: fontFamily: Montserrat fontSize: 36px fontWeight: 600 lineHeight: 1.0 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.06em rounded: sm: 4px md: 8px 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}' typography: '{typography.headline-lg}' product-card: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.headline-lg}' rounded: '{rounded.sm}' height: 260px button-detail: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 42px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 64px copy-band: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 24px heading-wave: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 80px badge-bonus: backgroundColor: '{colors.accent-3}' textColor: '{colors.on-dark}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 64px info-banner: backgroundColor: '{colors.tint-1}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' rounded: '{rounded.md}' height: 120px schedule-table: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 60px --- # DESIGN.md — サーモン×パステルの妊婦向けプレゼントLP（Pastel Maternity Gift Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: やさしい・柔らかい、かわいい、ポップ・元気、親しみ・手作り感 - **キーワード**: パステル・サーモンピンク・番号付きカード・波線アンダーライン・円形写真・マタニティ - **地の質感**: フラットな単色の面。写真は明るい物撮りで、背景に淡い不定形のシェイプを置く - **形**: 角丸小さめのカード、円形の写真切り抜き、ゆるい曲線のセクション境界 - **温度感**: 暖かい ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FE9D8C` | キャンペーン帯・ブランド面のサーモン | 17% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 28% | 画素の実測 | | `background-alt` | `#DEBBA7` | FVのくすみピンクベージュ地 | 8% | 画素の実測 | | `accent-1` | `#9ECCBF` | 商品カードのミント面 | 6% | 画素の実測 | | `accent-2` | `#F5CA7C` | 商品カードのイエロー面 | 5% | 画素の実測 | | `surface` | `#F1E8E3` | 背景の淡いグレージュのシェイプ | 7% | 画素の実測 | | `text` | `#3F3F3F` | 見出しと本文のダークブラウングレー | 3% | 画素の実測 | | `dark-section` | `#454545` | 「詳しくみる」ボタンのチャコール | 3% | 画素の実測 | | `on-dark` | `#FEFCF9` | 暗い面・サーモン面に乗せる白文字 | 1% | 画素の実測 | | `cta` | `#FEFF66` | 固定の応募ボタンのイエロー | 1% | 画素の実測 | | `on-cta` | `#514945` | 応募ボタンの文字 | 0% | 画素の主要色に補正 | | `accent-3` | `#E59A8F` | 英字ラベル・特典バッジのコーラル | 0% | 画素の実測 | | `marker` | `#FFE27A` | 注意事項で強調する黄色の文字 | 0% | 推定 | | `tint-1` | `#93C3A4` | 特典見出しのグリーン帯 | 0% | 画素の実測 | | `accent-3-accessible` | `#CF4430` | AA を満たす補正値（計算） | | 計算 | | `tint-1-accessible` | `#47805B` | AA を満たす補正値（計算） | | 計算 | - 地は白とサーモンの2色を交互に使い、FVだけくすみピンクベージュにする - 商品カードはミント・イエロー・サーモン・ベージュを順番に回して色分けする - カード内のサブボタンは暗いチャコールにして、パステルの面の上で目立たせる - 主CTAは画面下に固定した鮮やかなイエローにする。ほかの色と役割を混ぜない - サーモンの面では文字を白にし、強調したい部分だけ淡い黄色にする - キャッチ（短いコピー）は白い帯の上に濃い文字で載せる - `badge-bonus` は文字 `#FEFCF9` × 背景 `#E59A8F` のコントラスト比が 2.19:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-3-accessible`（`#CF4430`、4.53:1）を使う。 - `info-banner` は文字 `#FEFCF9` × 背景 `#93C3A4` のコントラスト比が 1.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `tint-1-accessible`（`#47805B`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの大きなロゴ風キャッチ | 装飾・ディスプレイ | Dela Gothic One | 400 | 60px | 1.1 | 0.0em | | `headline-lg` | 商品カードの商品名 | ゴシック | Noto Sans JP | 900 | 32px | 1.25 | 0.02em | | `headline-md` | セクション見出し | ゴシック | Noto Sans JP | 700 | 24px | 1.4 | 0.08em | | `headline-sm` | 小見出し・リード文 | ゴシック | Noto Sans JP | 700 | 18px | 1.6 | 0.04em | | `body-md` | 本文・表のセル | ゴシック | Noto Sans JP | 400 | 14px | 1.9 | 0.06em | | `note` | ※の注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.7 | 0.0em | | `accent` | #01などの番号と英字ラベル | 欧文サンセリフ | Montserrat | 600 | 36px | 1.0 | 0.02em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 18px | 1.0 | 0.06em | - 見出しは太いゴシック体にし、字間をやや広めにとる - セクション見出しの下には波線を引き、その下に小さな英字ラベルを添える - 番号（#01など）は欧文サンセリフで大きく表示する - 数量や価格の数字は単位より大きくして目立たせる - キャッチ（短いコピー）は白い帯に1行ずつ分けて載せる - コンセプト文は縦書きにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品カードの中は写真（左60%）とテキスト（右40%）の2分割 - **本文ブロックの幅**: 画面幅の約 94% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - 商品カードは画面いっぱいに近い幅で、間隔10pxほどで縦に積む - カード右側のテキスト欄は少し濃い面にして、写真の上に重ねる - サブボタンはカードの右下に揃えて置く - 表は白いセルを2列に並べ、右列は縦に結合する - 注意事項は中黒付きの箇条書きにし、行間を広めにとる ## Elevation & Depth - 影はほぼ使わずフラットにする - 固定CTAだけ白い縁取りで浮かせる - 奥行きは背景に置いた淡い不定形のシェイプで出す ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: カード内は四角い写真、コンセプト部は円形に切り抜く - **セクション境界**: 白からサーモンへは下に膨らむ大きな曲線で切り替える - カードとボタンは角丸を小さく（4〜8px）する - 特典バッジは花形（ギザギザの円）にする - 装飾の小さな三角や平行線を散らす ## Components - **番号付き商品カード**（`product-card`）: パステル色の面に写真・大きな番号・商品名・キャッチ帯・ボタンを載せたカード - **詳しくみるボタン**（`button-detail`）: チャコール地に白い太字と右向きの二重矢印 - **固定応募CTA**（`button-primary`）: 画面下に固定する黄色の横長ボタン。左にイラストを置き、文字の後ろに矢印を付ける - **キャッチ帯**（`copy-band`）: 白い帯に濃い文字で載せた短いコピー。1行ずつ分けて並べる - **波線見出し**（`heading-wave`）: 太字の見出しの下に波線を引き、さらに英字ラベルを添える - **特典番号バッジ**（`badge-bonus`）: コーラルの花形バッジの中に白文字で「特典」と番号を入れる - **抽選告知バナー**（`info-banner`）: 緑のグラデーションの角丸バナー。金額を大きく出し、スマホのイラストを添える - **発送時期表**（`schedule-table`）: サーモン地の上に白いセルを並べた2列の表 ## Do's and Don'ts **Do** - 商品カードは色を順番に回して一覧性を出す - 番号・商品名・数量の順に情報を揃える - 写真は明るく柔らかい自然光で撮る - 主CTAは常に画面下に固定する **Don't** - 濃い原色や黒を広い面に使わない - 明朝体や細すぎる書体を使わない - カードの角を大きく丸めすぎない - CTAのイエローをほかの装飾に使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（全員がもらえることを一目で伝える）: くすみピンクの地に白い円を置き、大きな装飾ロゴ風のキャッチを入れる。周りに写真をコラージュする 2. **抽選告知**（追加の特典を訴求する）: 緑の角丸バナーで金額を大きく出し、下に注釈を添える 3. **商品一覧**（選べるグッズを比べてもらう）: 番号付きのパステルカードを7枚縦に並べ、各カードにボタンを付ける 4. **コンセプト**（限定感と種類の多さを伝える）: 縦書きのコピーと円形写真を交互に配置する 5. **応募特典**（応募するとさらにもらえる特典を伝える）: 波線見出しの下に花形バッジ、スマホ画像、グリーン帯の見出しを並べる 6. **キャンペーン詳細**（発送時期を案内する）: 曲線でサーモン地に切り替え、白いセルの表を置く 7. **注意事項**（応募条件を明示する）: サーモン地に白文字の箇条書きを並べ、要点だけ黄色にする 8. **固定CTA**（応募へ誘導する）: 画面下に黄色の横長ボタンを常に表示する ## Imagery - 商品は真上から撮った明るい物撮りにする - 赤ちゃんや妊婦の生活シーンの写真を添える - 手描き風のゆるいイラスト（赤ちゃんや動物）を使う - 背景に淡いグレージュの不定形シェイプと小さな三角を散らす - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは中央に最大幅480〜640pxの1カラムで表示する - PCでは商品カードを2列のグリッドにしてもよい - 固定CTAは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-13b19b8d`（元 LP の URL から採番） - **元 LP**: https://milpoche-baby.jp/bib/Totsuki - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（12/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。