--- version: alpha name: Pastel Swirl Cashback Campaign LP description: ピンク・黄・水色・緑が混ざるパステル渦の背景に、白い角丸カードを重ねたキャンペーンLP。金額はピンクの太字に黄マーカーを敷いて目立たせる。手順は黒い帯の見出しと番号で区切って案内する。主CTAは黒とピンクのピル型ボタン。 colors: primary: '#EE84B5' background: '#FEFEFE' background-alt: '#F5F5F5' tint-1: '#FEFEF2' tint-2: '#FBE579' cta: '#010101' on-cta: '#FDFEFD' secondary: '#53BD54' marker: '#FCE878' accent-1: '#05AEBB' accent-2: '#A38D45' accent-3: '#C5171A' text: '#040404' dark-section: '#010101' line: '#DFE7E3' primary-accessible: '#DE1F77' secondary-accessible: '#338634' typography: display: fontFamily: Noto Sans JP fontSize: 40px fontWeight: 900 lineHeight: 1.15 headline-lg: fontFamily: Montserrat fontSize: 44px fontWeight: 900 lineHeight: 1.1 headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 400 lineHeight: 1.75 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Noto Serif JP fontSize: 34px fontWeight: 900 lineHeight: 1.2 label-button: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em rounded: sm: 8px md: 16px lg: 28px full: 999px spacing: unit: 8px card: 20px section: 56px 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: 56px button-apply: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 60px ribbon-heading: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' height: 40px price-marker: backgroundColor: '{colors.marker}' textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 50px step-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 240px step-band: backgroundColor: '{colors.tint-2}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 64px alert-box: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 200px faq-item: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 56px category-bar: backgroundColor: '{colors.dark-section}' typography: '{typography.headline-sm}' height: 40px --- # DESIGN.md — パステル渦×黒ボタンの家電キャッシュバックLP（Pastel Swirl Cashback Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、情報量多め・訴求型、信頼・誠実 - **キーワード**: パステル渦グラデーション・白い角丸カード・黄マーカー強調・黒ピルボタン・ステップ型手順・緑リボン見出し - **地の質感**: FVと申込エリアだけ水彩風の渦グラデーション。ほかは白・薄グレー・生成りのフラットな面。 - **形**: 大きめの角丸カード、ピル型ボタン、リボン型の見出し帯、五角形の矢印ステップ。 - **温度感**: 明るく暖かい春らしい印象。黒文字で引き締めて信頼感も出す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#EE84B5` | 金額強調・申込ボタン・Qバッジのピンク | 3% | 画素の実測 | | `background` | `#FEFEFE` | 基本の白地 | 44% | 画素の実測 | | `background-alt` | `#F5F5F5` | FAQ・手順エリアの薄グレー地 | 9% | 画素の実測 | | `tint-1` | `#FEFEF2` | 対象商品エリアの生成り地 | 4% | 画素の実測 | | `tint-2` | `#FBE579` | 申込手順エリアの黄色地 | 7% | 画素の実測 | | `cta` | `#010101` | 主ボタンの黒 | 3% | 画素の実測 | | `on-cta` | `#FDFEFD` | ボタン上の白文字 | 0% | 画素の実測 | | `secondary` | `#53BD54` | セクション見出しリボンの緑 | 2% | 画素の実測 | | `marker` | `#FCE878` | 金額・重要文の黄マーカー | 1% | 推定 | | `accent-1` | `#05AEBB` | 注意ボックスのティール | 2% | 画素の実測 | | `accent-2` | `#A38D45` | 同時開催枠のゴールド・ベージュ | 1% | 画素の実測 | | `accent-3` | `#C5171A` | 警告文の赤 | 1% | 画素の実測 | | `text` | `#040404` | 見出し・本文の黒 | 5% | 画素の実測 | | `dark-section` | `#010101` | 手順番号帯・FAQカテゴリ帯の黒 | 2% | 画素の実測 | | `line` | `#DFE7E3` | カード枠・区切り線のグレー | 0% | 画素の主要色に補正 | | `primary-accessible` | `#DE1F77` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#338634` | AA を満たす補正値（計算） | | 計算 | - 白とパステル系の地をセクションごとに切り替え、その上に白カードを置く。 - 金額はピンク太字に黒い縁取りを付け、下に黄マーカーを敷く。 - 主CTAは黒。最終の申込ボタンだけピンクにする。 - 大見出しは緑のリボン帯、手順の番号は黒帯に黄色の帯を組み合わせる。 - 注意や確認の囲みはティール。警告文は赤文字にする。 - 併催サービスの枠だけ生成りとゴールドにして区別する。 - `button-apply` は文字 `#FDFEFD` × 背景 `#EE84B5` のコントラスト比が 2.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#DE1F77`、4.55:1）を使う。 - `ribbon-heading` は文字 `#FDFEFD` × 背景 `#53BD54` のコントラスト比が 2.37:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#338634`、4.52:1）を使う。 - `price-marker` は文字 `#EE84B5` × 背景 `#FCE878` のコントラスト比が 1.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#DE1F77`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのキャンペーン名 | ゴシック | Noto Sans JP | 900 | 40px | 1.15 | 0.0em | | `headline-lg` | 金額の強調数字 | 欧文サンセリフ | Montserrat | 900 | 44px | 1.1 | 0.0em | | `headline-md` | リボン見出し・ステップ見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.4 | 0.02em | | `headline-sm` | カード内の小見出し・FAQ質問 | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.0em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 15px | 1.75 | 0.02em | | `note` | ※の注釈 | ゴシック | Noto Sans JP | 400 | 12px | 1.6 | 0.0em | | `accent` | 併催サービスの金額表記 | 明朝 | Noto Serif JP | 900 | 34px | 1.2 | 0.0em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 17px | 1.4 | 0.02em | - 全体は太めのゴシックで統一する。 - 数字は本文の2〜3倍の大きさにして、単位は小さく添える。 - 重要な文は太字にして黄マーカーを敷く。 - 注釈は※から始め、12px前後のグレー寄りの黒にする。 - 明朝体は併催サービスの枠だけで使う。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。対象商品だけ横スライダーにする。 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算） - カードは左右に約18pxの余白を取って中央に置く。 - セクションの先頭には中央に緑のリボン見出しを置く。 - 手順は縦に並べ、間に下向きの三角矢印を入れる。 - FAQは黒いカテゴリ帯の下に、グレーの角丸の行を並べる。 ## Elevation & Depth - 影はほぼ使わず、薄いグレーの線と面の色の差で階層を表す。 - 併催サービスの枠だけ、右下にずらしたベージュの面で厚みを出す。 ## Shapes - **角丸**: 小 8px ／ 中 16px ／ 大 28px。ボタンはピル型。 - **写真の切り抜き**: 製品は切り抜きで置き、画面キャプチャは四角のまま入れる。 - **セクション境界**: 背景色の直線切り替えと、緑のリボン帯で区切る。 - カードは16〜28pxの大きめの角丸にする。 - ステップ枠は下端を五角形の矢印形にする。 - バッジ・ボタンは正円またはピル型にする。 ## Components - **黒ピルボタン**（`button-primary`）: 黒地に白文字、右端に丸矢印アイコンを付ける。 - **ピンク申込ボタン**（`button-apply`）: 最終申込用のピンクのピル型ボタン。 - **緑リボン見出し**（`ribbon-heading`）: 両端が切れ込んだ緑の帯に白文字を載せる。 - **金額強調**（`price-marker`）: ピンク縁取りの大きな数字の下に黄マーカーを敷く。 - **事前準備ステップ**（`step-card`）: 上に黒帯の番号見出し、中に線画アイコンと説明。下端は矢印形にする。 - **手順番号帯**（`step-band`）: 左の黒地に丸数字、右の黄色帯に手順名を置く横長の帯。 - **注意ボックス**（`alert-box`）: ティールの枠と見出し帯に警告アイコンを付け、白い本文を入れる。 - **FAQアコーディオン**（`faq-item`）: グレーの角丸の行に、ピンクの丸Qと右端の＋/−を置く。 - **FAQカテゴリ帯**（`category-bar`）: 黒地に白文字、右に開閉の矢印を付ける。 ## Do's and Don'ts **Do** - 金額は必ずピンク数字＋黄マーカーで最も大きく見せる。 - 手順は番号と線画アイコンで、一目でわかるようにする。 - 白カードは大きめの角丸で統一する。 - 注意事項はティールの囲みか赤文字ではっきり分ける。 **Don't** - パステル渦の背景を本文エリア全体に敷かない。 - 主CTAの色を黒とピンク以外にしない。 - 影を強くかけた立体的なカードにしない。 - 細い明朝体を本文に使わない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（期間と総額を一目で伝える）: パステル渦の背景に、太字のタイトル、合計金額、内訳の白ピル2つを置く。左上にピンク丸の期間バッジ。 2. **動画と申込概要**（申込の条件を要約する）: 白カードに動画サムネイルを置き、黄マーカー付きの要点と手順へのリンクを入れる。 3. **対象商品**（対象の製品を紹介する）: 生成り地に、製品写真・説明・黒ボタンのカードを横スライダーで並べる。下にドットを付ける。 4. **特典金額の内訳**（条件ごとの金額を示す）: 白カードを2枚並べ、金額強調・パッケージ画像・条件の箇条書きを入れる。 5. **対象店舗**（購入できる場所を示す）: ロゴを3列のグリッドで並べ、最後に警告アイコン付きの注意を置く。 6. **同時開催キャンペーン**（関連する特典を紹介する）: 生成り地にゴールドの見出し帯、明朝体の金額、白い枠のボックス。 7. **応募の流れ**（事前準備を3ステップで示す）: 黒帯の番号見出しを付けた矢印形の枠を縦に並べ、最後は金色の枠で応募へつなぐ。 8. **手順の詳細**（登録の方法を画面画像で説明する）: 黒×黄の番号帯、丸数字の小見出し、画面キャプチャ、ティールの注意ボックス。 9. **申込手順**（フォームへ誘導する）: 黄色地に緑の見出しのカード、ピンクの申込ボタン、赤字の注意、確認チェックリストを入れる。 10. **期間の表示**（購入期間と申込期限を再提示する）: 大きな角丸の白カードに黄マーカーのラベルと太字の日付、ピンクのボタン。 11. **よくある質問**（疑問を解消する）: 黒いカテゴリ帯の下に、Q/Aバッジ付きのアコーディオンを並べる。 12. **注意事項・お問い合わせ**（規約と連絡先を示す）: グレー地に緑リボン見出し。規約はスクロール枠、連絡先は電話アイコン付きの大きな番号。 ## Imagery - 背景はピンク・黄・水色・緑・紫が流れるように混ざる水彩風の渦にする。 - 製品は白背景で斜めから撮った切り抜き写真にする。 - 手順のアイコンは黒の太い線画で、四角い画面風のモチーフにする。 - 説明には実際の画面キャプチャを四角のまま使い、赤枠で操作箇所を示す。 - コインの束やキラキラなど、お得感を出す小さなイラストを添える。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央に幅約900pxのカードを置き、背景の渦を左右いっぱいに広げる。 - PCでは事前準備の3ステップを横一列の矢印形に並べる。 - PCの手順詳細は、左にテキスト、右に画面画像の2カラムにする。 - PCでは対象商品のカードを3枚ほど同時に見せるスライダーにする。 - FAQはPCでも1カラムのまま幅を広げる。 ## 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-49095da2`（元 LP の URL から採番） - **元 LP**: https://www.fmworld.net/campaign/26spring/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（13/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。