--- version: alpha name: Mint Green and Salmon Pink Mobile Carrier Campaign LP description: ミント緑と淡いサーモンピンクの地に、赤い金額訴求と白いカードを重ねた通信キャリアの端末割引キャンペーン LP。斜めの帯の装飾と表組みが多く、情報をたっぷり見せる訴求型の構成。 colors: primary: '#00B395' cta: '#D42545' on-cta: '#FFFFFF' background: '#FEFEFE' background-alt: '#ECEFE4' tint-1: '#F6E4DE' tint-2: '#EDC2B4' secondary: '#1755A8' dark-section: '#4D4D4D' accent-1: '#D67757' accent-2: '#83445D' text: '#333333' line: '#CCCCCC' text-muted: '#979897' primary-accessible: '#00856F' typography: display: fontFamily: Noto Sans JP fontSize: 44px fontWeight: 900 lineHeight: 1.1 headline-lg: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.04em accent: fontFamily: Montserrat fontSize: 26px fontWeight: 800 lineHeight: 1.0 rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 16px section: 48px 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: 52px button-select: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 80px button-outline: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px card-band-heading: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 28px badge-outline: backgroundColor: '{colors.background}' textColor: '{colors.cta}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 22px table-compare: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-cta}' typography: '{typography.body-md}' height: 30px badge-plan-circle: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-cta}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 64px heading-slash: textColor: '{colors.on-cta}' typography: '{typography.headline-md}' height: 32px note-list: textColor: '{colors.text-muted}' typography: '{typography.note}' height: 40px --- # DESIGN.md — ミント緑×サーモン桃の通信キャンペーンLP（Mint Green and Salmon Pink Mobile Carrier Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: 情報量多め・訴求型、ポップ・元気、清潔・爽やか - **キーワード**: ミント緑・サーモングラデ・赤の金額訴求・白カード・比較表・斜めストライプ - **地の質感**: フラットな塗りと上下グラデーション。影はごく薄い。 - **形**: 斜めの帯・三角形を背景の四隅に置き、カードは小さい角丸、ボタンはピル型と小さい角丸の両方を使う - **温度感**: 暖色ピンクと寒色ミントの対比で、明るく親しみやすい ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#00B395` | ブランド緑・下部の地色 | 15% | 画素の実測 | | `cta` | `#D42545` | 申込ボタン・割引ボタン | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `background` | `#FEFEFE` | カード・基本の白地 | 31% | 画素の実測 | | `background-alt` | `#ECEFE4` | 導入部の淡い緑灰の帯 | 8% | 画素の実測 | | `tint-1` | `#F6E4DE` | キャンペーン部の淡いピンク地 | 6% | 画素の実測 | | `tint-2` | `#EDC2B4` | グラデ下端のサーモン | 11% | 画素の実測 | | `secondary` | `#1755A8` | 既存利用者向けの青ボタン | 1% | 画素の実測 | | `dark-section` | `#4D4D4D` | 表の見出し行 | 1% | 画素の実測 | | `accent-1` | `#D67757` | コーラル系の斜め帯装飾 | 2% | 画素の実測 | | `accent-2` | `#83445D` | プランの紫丸 | 1% | 画素の主要色に補正 | | `text` | `#333333` | 見出し・本文 | 3% | 推定 | | `line` | `#CCCCCC` | 表の罫線 | 1% | 推定 | | `text-muted` | `#979897` | 注釈 | 1% | 画素の主要色に補正 | | `primary-accessible` | `#00856F` | AA を満たす補正値（計算） | | 計算 | - 上半分はピンク〜サーモンの縦グラデーション、下半分はミント緑の地にして切り替える - 金額・割引額・期間限定の表示は cta の赤に統一する - カードと表は白で、色の付いた地の上に浮かせる - カードの見出し帯とアウトラインボタンには primary の緑を使う - 四隅の斜め帯はコーラル・緑・赤を組み合わせ、地の色と対比させる - 青は既存ユーザー向けの導線にだけ使う - `button-outline` は文字 `#00B395` × 背景 `#FEFEFE` のコントラスト比が 2.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#00856F`、4.54:1）を使う。 - `card-band-heading` は文字 `#FFFFFF` × 背景 `#00B395` のコントラスト比が 2.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#00856F`、4.58:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの最大割引額の数字 | ゴシック | Noto Sans JP | 900 | 44px | 1.1 | 0.0em | | `headline-lg` | FVのコピー・セクション見出し | ゴシック | Noto Sans JP | 900 | 24px | 1.3 | 0.02em | | `headline-md` | 対象者ごとの見出し・カードの見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.02em | | `headline-sm` | 緑の帯の見出し・表の見出し | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.03em | | `body-md` | 説明文・表のセル | ゴシック | Noto Sans JP | 400 | 14px | 1.7 | 0.02em | | `note` | ※の注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.3 | 0.04em | | `accent` | プラン容量の数字 | 欧文サンセリフ | Montserrat | 800 | 26px | 1.0 | 0.0em | - 数字は単位や(税込)より 2〜3 倍大きくし、赤の極太で見せる - セクション見出しは左右に斜線（＼ ／）を付けて中央に置く - 表の割引額は赤の太字、機種名は緑の下線付きリンクにする - 注釈は本文より 3〜4px 小さいグレーで、※から始める - 本文は中央揃えを基本にし、長い条件文だけ左揃えの箇条書きにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カード内の選択ボタンだけ 2 列 - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算） - 白カードは地色の上に置き、左右に 4% ほど余白を残す - カードの上部には全幅の緑の見出し帯を置く - 表は 2 列にし、見出し行は濃いグレーにする - 対象者ごとのセクションの頭に、端末アイコンの図解を中央に置く - 最後の CTA は緑の地に単独で中央配置する ## Elevation & Depth - カードには影なし、またはごく薄い影 0 2px 6px rgba(0,0,0,.08) - 赤い選択ボタンは下に濃い赤の厚み（box-shadow 0 4px 0）を付ける - 青ボタンも同じく下側に濃い色の厚みを付ける ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。 - **写真の切り抜き**: 端末写真は背景を切り抜いて白地に置く。アイコンはフラットに描く - **セクション境界**: 緩い弧の山形と、四隅の斜め帯・三角形 - 申込とリンクのボタンはピル型 - 選択ボタンは角丸 4px の四角形で、下向き矢印を付ける - プラン容量は正円バッジで見せる - カードの角に淡い色の三角形を飾る ## Components - **申込ボタン**（`button-primary`）: 赤のピル型で右に＞を付ける。上に「手数料0円」などの訴求を 2 行で置く - **対象者の選択ボタン**（`button-select`）: 赤の四角いボタン。中に対象者名、白枠のバッジ、▼を縦に並べ、2 列で配置する - **リンクボタン**（`button-outline`）: 白地に緑の枠と緑の文字のピル型。右に＞を付ける - **緑の帯見出しのカード**（`card-band-heading`）: 白カードの上部に緑の全幅帯を置き、白文字の見出しを入れる - **赤い枠のラベル**（`badge-outline`）: 見出しの下に置く、白地に赤枠と赤文字の小さいラベル - **割引の比較表**（`table-compare`）: 見出し行は濃いグレー。セルは白地にグレーの罫線。金額は赤の太字 - **プラン容量の丸**（`badge-plan-circle`）: 赤・緑・コーラル・紫の正円の中に、白い数字と単位を入れる - **斜線付きの見出し**（`heading-slash`）: 緑の地の上に白文字。左右に斜線を付ける - **注釈**（`note-list`）: ※から始まる小さなグレー文字を、カードの下部にまとめる ## Do's and Don'ts **Do** - 割引額は赤の極太数字で一番大きく見せる - 上半分はピンクのグラデ、下半分はミント緑と、地の色を 2 つに分ける - 情報は白カードにまとめ、カードの頭に緑の帯見出しを付ける - 条件・注釈は省かずに小さい文字で添える - 四隅の斜め帯で賑やかさを出す **Don't** - 暗い背景や高級感のある黒を使わない - 赤を本文や装飾に多用しない。金額と CTA に限る - 表を罫線なしにしない - 明朝体や手書きの書体を使わない - 大きな写真を背景いっぱいに敷かない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（最大の割引額を一目で伝える）: 白地に斜め帯の装飾。左にラベル・コピー・赤の巨大な数字、右に端末のイラスト 2. **導入・対象者の選択**（キャンペーンの概要を伝え、対象者ごとに誘導する）: 淡い緑灰の帯に短い説明文と、赤の選択ボタンを 2 つ 3. **既存ユーザー向けの導線**（乗り換えの特典へ誘導する）: 端末→端末の図解を淡い半円の上に置き、青の幅広ボタンを付ける 4. **対象者別の割引（乗り換え）**（対象機種と割引額を見せる）: ピンクのグラデ地の上の白カードに、おすすめ端末と 2 列の比較表 5. **対象者別の割引（新規・年齢限定）**（ポイント還元の対象機種を見せる）: 同じ型を繰り返し、表に赤の限定バッジを付ける 6. **適用条件**（期間と注意事項を明示する）: 赤の全幅帯見出し、赤の縦線付きの小見出し、箇条書き 7. **おすすめポイント**（料金プラン・セット割・回線品質の魅力を伝える）: 緑の地に白カードを縦に 3 枚。丸バッジ、図解、地図のイラスト 8. **プランの比較表**（料金を比較させる）: 緑の見出し行を持つ多列の表。月額の行だけピンクで強調 9. **関連リンク**（詳細ページ・他のキャンペーンへ誘導する）: 緑枠のピル型ボタンを 2 つ。間にコーラル色の斜線付きコピー 10. **最終CTA**（申込へ誘導する）: 緑の地に白と黄色の訴求コピー、赤のピル型ボタン、下にテキストリンク ## Imagery - 端末は正面向きのシンプルなフラットイラスト、または切り抜いた製品写真にする - 乗り換えは「端末アイコン→端末アイコン」を矢印でつなぐ図解で表す - 背景の装飾は、コーラル・緑・赤の斜めの帯や三角形、白地に淡いグレーの放射状ストライプ - 図解は角丸の四角に太い白文字を入れた、ポップなインフォグラフィックにする - 日本地図などは単色のシルエットで描く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央の約 68% 幅のカラムで、左右に地の色を広く見せる。SP では左右 4% の余白で全幅に近づける - FV は PC で左に文字・右に端末の 2 カラム。SP では縦積みにし、端末を小さく右上に寄せる - 選択ボタン 2 列は SP でも 2 列を保ち、高さを詰める - 多列のプラン表は SP で横スクロールにするか、文字を 11px まで縮める - 四隅の斜め帯は SP で縮小し、本文に重ねない ## 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-42b51328`（元 LP の URL から採番） - **元 LP**: https://irumo.docomo.ne.jp/special/campaigns/special_sale/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。