--- version: alpha name: Magenta and Purple Senior Mobile Plan LP description: マゼンタと紫を軸に、薄いラベンダー地へ白カードを並べた料金訴求型のLP。大きな価格数字とピル型ボタンで、シニア層にもお得さと申込方法がすぐ伝わる作り。 colors: primary: '#FD018C' cta: '#FF008C' on-cta: '#FFFFFF' secondary: '#7D41C5' background: '#FFFFFF' background-alt: '#F8F0FF' tint-1: '#C9A8E6' tint-2: '#FFFFFF' marker: '#FDF201' text: '#323232' text-muted: '#777777' accent-1: '#E60012' line: '#EFE8EC' surface: '#EAF7FE' cta-accessible: '#E5007E' primary-accessible: '#CF0173' typography: display: fontFamily: Roboto Condensed fontSize: 48px fontWeight: 800 lineHeight: 1.0 letterSpacing: -0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 32px fontWeight: 900 lineHeight: 1.2 headline-md: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.04em accent: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.1 rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 16px 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: 48px button-secondary: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px section-band: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 40px price-block: textColor: '{colors.primary}' typography: '{typography.display}' height: 72px marker-bar: backgroundColor: '{colors.marker}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 28px label-badge: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 26px feature-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 140px step-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 260px tab-switch: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 40px faq-item: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 44px --- # DESIGN.md — マゼンタ×紫のシニア向け通信プランLP（Magenta and Purple Senior Mobile Plan LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: 情報量多め・訴求型、ポップ・元気、信頼・誠実、やさしい・柔らかい - **キーワード**: マゼンタ・ラベンダー地・大きな価格数字・白カード・ピル型ボタン・フラットイラスト - **地の質感**: グラデーションや質感はほぼ使わないフラットな塗り。薄紫の面と白カードを重ねる - **形**: 角丸小さめのカードと完全なピル型ボタン。円形アイコンバッジ、下向き三角の矢印 - **温度感**: 明るく温かい。原色寄りのマゼンタで元気さを出しつつ、薄紫で柔らげる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FD018C` | ブランド色・主CTA・価格強調 | 6% | 画素の実測 | | `cta` | `#FF008C` | 主CTAボタン | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `secondary` | `#7D41C5` | 見出し帯・タイトル文字の紫 | 4% | 画素の実測 | | `background` | `#FFFFFF` | 基本の地 | 43% | 画素の実測 | | `background-alt` | `#F8F0FF` | セクション地のラベンダー | 19% | 画素の実測 | | `tint-1` | `#C9A8E6` | カードを包む薄紫の面 | 4% | 推定 | | `tint-2` | `#FFFFFF` | お得情報のクリーム面 | 2% | 画素の実測 | | `marker` | `#FDF201` | お得額の黄色帯 | 0% | 画素の実測 | | `text` | `#323232` | 見出し・本文の黒 | 2% | 画素の実測 | | `text-muted` | `#777777` | 注釈の灰色 | 1% | 推定 | | `accent-1` | `#E60012` | 注意書きの赤 | 0% | 推定 | | `line` | `#EFE8EC` | カード枠・区切り線 | 1% | 画素の主要色に補正 | | `surface` | `#EAF7FE` | 手順説明の水色パネル | 2% | 画素の実測 | | `cta-accessible` | `#E5007E` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#CF0173` | AA を満たす補正値（計算） | | 計算 | - 地は白とラベンダーを交互に置いてセクションを分ける - 主CTA・価格数字・選択中タブはマゼンタにまとめる - 見出し帯・セクションタイトルは紫で、マゼンタとは役割を分ける - お得額は黄色帯の上にマゼンタか黒の太字でのせる - 注意書きは赤、補足注釈は灰色の小さな文字にする - カードは白にして薄紫の面の上に浮かせる - `button-primary` は文字 `#FFFFFF` × 背景 `#FF008C` のコントラスト比が 3.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E5007E`、4.53:1）を使う。 - `marker-bar` は文字 `#FD018C` × 背景 `#FDF201` のコントラスト比が 3.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#CF0173`、4.58:1）を使う。 - `tab-switch` は文字 `#FFFFFF` × 背景 `#FD018C` のコントラスト比が 3.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#CF0173`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 価格の大きな数字 | 欧文サンセリフ | Roboto Condensed | 800 | 48px | 1.0 | -0.02em | | `headline-lg` | プログラム名のロゴ風見出し | ゴシック | Noto Sans JP | 900 | 32px | 1.2 | 0.0em | | `headline-md` | セクション見出し（紫） | ゴシック | Noto Sans JP | 700 | 22px | 1.4 | 0.02em | | `headline-sm` | カード見出し・見出し帯の白文字 | ゴシック | Noto Sans JP | 700 | 17px | 1.4 | 0.02em | | `body-md` | 本文・説明文 | ゴシック | Noto Sans JP | 400 | 14px | 1.6 | 0.02em | | `note` | 注釈・※書き | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.2 | 0.04em | | `accent` | 『実質』『月』など価格の単位 | ゴシック | Noto Sans JP | 700 | 18px | 1.1 | 0.0em | - 価格の数字は単位の2〜3倍の大きさにする - 『実質』の小見出しは数字の左に縦に積む - 税込価格は数字の横に細めで小さく添える - 見出しは中央揃え、本文は左揃えにする - 注釈には※番号を振り、ブロックの下にまとめる - シニア向けなので本文は14px未満にしない - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カード内の比較は 2〜3 列から縦積みへ - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算） - セクションは白とラベンダーの全幅帯で区切る - 申込ブロックは同じ型でページ内に3回繰り返す - カードは白地に細い枠線、内側の余白は16px - 料金比較は横並びの段階タブ＋価格の列で見せる - 主CTAはカード幅の8割ほどの横長ピルにする - 手順は番号付きカードを下向き矢印でつなぐ ## Elevation & Depth - 影はほぼ使わず、枠線と面の色で階層をつける - カードには薄い灰色の1px枠をつける - バナーにだけごく弱い影を許可する ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。 - **写真の切り抜き**: 人物はフラットイラストを切り抜いて配置。端末写真は背景なしの切り抜き - **セクション境界**: 直線で色を切り替える。強調には下向き三角をつけた帯を使う - ボタンは常にピル型 - アイコンは円形の枠に入れる - 段階タブは右端を矢印形に切る - 見出し帯は角丸小さめの紫の長方形 ## Components - **主CTAボタン**（`button-primary`）: マゼンタ塗りに白文字の横長ピル - **サブボタン**（`button-secondary`）: 白地にマゼンタか灰色の枠線をつけたピル。詳細を見る系の導線 - **紫見出し帯**（`section-band`）: カード上辺に置く紫の帯と白い中央見出し - **価格ブロック**（`price-block`）: 『実質』と巨大な数字に『円/月〜』、税込を小さく添える - **お得額の黄色帯**（`marker-bar`）: 黄色の横帯に、通常よりいくらお得かを太字で書く - **紫ラベル**（`label-badge`）: 見出しの上に置く小さな紫ラベル。対象年齢などを書く - **特長カード**（`feature-card`）: 円アイコン＋紫見出し＋イラストと説明を左右に並べた白カード - **手順ステップ**（`step-card`）: 番号付き見出し、イラスト、CTAを持つ白カード。下向き矢印でつなぐ - **切替タブ**（`tab-switch`）: 選択中はマゼンタ塗り、未選択は灰色地の2分割タブ - **FAQ行**（`faq-item`）: マゼンタの円形シェブロンと質問文を並べ、細線で区切るアコーディオン ## Do's and Don'ts **Do** - 価格は必ず巨大な数字＋小さな単位＋税込併記で見せる - 申込ブロックを主要セクションのあとに繰り返し置く - マゼンタはCTAと価格に絞って使う - 特長は円アイコンと紫見出しで見出しをそろえる - 注釈は灰色の小さな文字でブロックの下にまとめる **Don't** - 暗い背景や黒基調にしない - ボタンを角張った四角にしない - マゼンタと紫を同じ役割で混ぜない - 写真主体の重いビジュアルにしない - 本文を極端に小さくしたり、行間を詰めすぎたりしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（対象者とプラン名、月額を一目で伝える）: 空色の地に人物イラスト、太字のロゴ風見出し、特長4つの白ラベル、マゼンタ帯に大きな価格 2. **エントリー案内**（参加手順を示し、エントリーへ誘導する）: 紫の見出し帯、3ステップのアイコンを矢印でつなぎ、主CTAを置く 3. **申込ブロック**（Web・店舗・電話の申込先を案内する）: ラベンダー地にWeb申込カード、店舗検索とオペレーターの2列カード、店舗特典バナー 4. **ページ内ナビ**（主要セクションへ飛ばす）: 紫の帯の上に白い3分割タブとアイコン 5. **プラン概要**（セット内容と実質価格を示す）: 紫ラベル、大見出し、要素を＋でつなぐ図、巨大な価格、黄色帯 6. **料金詳細**（使用量ごとの段階料金を比較する）: 矢印形の段階タブの下に3列の価格を並べ、サブボタンを置く 7. **オプション特長**（付帯サービスの価値を伝える）: 薄紫の面に白い特長カードを縦に並べ、イラストと説明をつける 8. **おすすめ端末**（端末購入を促す）: タブ切替、切り抜いた端末写真と価格、特長2枚、キャンペーン枠、2つのボタン 9. **紹介キャンペーン**（家族での申込を促す）: 2列の特典カードを下向き三角でまとめ、合計ポイントを強調 10. **利用の流れ**（申込手順を詳しく案内する）: タブ切替、番号付きステップカードを矢印でつなぎ、画面キャプチャを入れる 11. **よくある質問**（不安を解消する）: 白カード内にアコーディオン行を並べる 12. **プラン全体訴求**（基本プランへ誘導する）: マゼンタ全面の枠に白カードで料金と特典を並べ、下にボタン2つ ## Imagery - 人物は線の少ないフラットイラストで、シニアやスタッフを明るい服の色で描く - 公園や街並みの人物シルエットを横長に並べ、帯の装飾にする - アイコンはマゼンタの線画を白い円に入れる - コインやポイントは金色のフラットイラストで散らす - 端末は正面からの切り抜き写真にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - SPでは価格の数字を48px前後にし、単位を折り返さない - 特長4つのラベルはSPで2×2に並べる - 店舗とオペレーターの2列カードはSPで縦に積む - 段階料金の3列はSPで横スクロールか縦積みにする - PCは中央約900px幅の白カードに収め、左右はラベンダー地にする ## 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-67a114c9`（元 LP の URL から採番） - **元 LP**: https://network.mobile.rakuten.co.jp/fee/senior/ - **解析に使った画像**: 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/）からご連絡ください。