--- version: alpha name: Bright Blue Utility Bundle Signup LP description: 濃紺ブルーと空色の帯を交互に重ね、緑とオレンジの 2 系統 CTA を何度も置く訴求型の申込 LP。太い丸みゴシックと縁取り数字で割引額を大きく見せ、白カードと吹き出し見出しで情報を整理している。 colors: primary: '#1271B3' secondary: '#5CB4F4' background-alt: '#E6F6FB' background: '#FFFFFF' cta: '#2EB84A' accent-1: '#FF7300' on-cta: '#FFFFFF' accent-2: '#E2020F' marker: '#FCE263' accent-3: '#E0306E' text: '#414244' line: '#1A5E9E' dark-section: '#0070BC' tint-1: '#FFF59E' cta-accessible: '#228736' accent-1-accessible: '#C25700' accent-3-accessible: '#DF2969' typography: display: fontFamily: Dela Gothic One fontSize: 72px fontWeight: 900 lineHeight: 1.0 letterSpacing: -0.02em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 28px fontWeight: 900 lineHeight: 1.35 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 label-button: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 16px fontWeight: 800 lineHeight: 1.2 rounded: sm: 6px md: 12px lg: 20px 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.md}' height: 120px button-secondary: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 120px bubble-heading: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 64px benefit-card: backgroundColor: '{colors.background}' textColor: '{colors.accent-2}' typography: '{typography.headline-lg}' rounded: '{rounded.md}' height: 120px dome-tab-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-lg}' rounded: '{rounded.sm}' height: 440px number-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 28px radio-option: textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 52px button-diagnose: backgroundColor: '{colors.accent-3}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 64px pill-label: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 28px phone-block: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.display}' height: 260px --- # DESIGN.md — 青×緑×橙の生活インフラ申込 LP（Bright Blue Utility Bundle Signup LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: その他 ／ **雰囲気**: 情報量多め・訴求型、ポップ・元気、信頼・誠実、清潔・爽やか - **キーワード**: ブルー基調・2 系統 CTA・縁取り大数字・吹き出し見出し・白カード・カルーセル - **地の質感**: フラットな単色面が中心。FV と大数字だけに立体的な縁取り・ドロップシャドウがある。 - **形**: 角丸カードと濃紺の太枠。見出しは吹き出し型のピル、ドーム型タブで区切る。 - **温度感**: 爽やかな寒色ベースに、暖色の CTA と赤い数字で熱量を足す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#1271B3` | ブランド濃青・CTA帯の地 | 12% | 画素の実測 | | `secondary` | `#5CB4F4` | 空色の帯の地 | 12% | 画素の主要色に補正 | | `background-alt` | `#E6F6FB` | 淡い水色のセクション地 | 19% | 画素の実測 | | `background` | `#FFFFFF` | カードと基本の地 | 32% | 画素の実測 | | `cta` | `#2EB84A` | 主CTA（新規申込）の緑 | 2% | 推定 | | `accent-1` | `#FF7300` | 副CTA・強調帯のオレンジ | 3% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA上の文字 | 1% | 画素の主要色に補正 | | `accent-2` | `#E2020F` | 割引額の赤数字 | 1% | 画素の実測 | | `marker` | `#FCE263` | 黄色の数字・波線・ラベル | 1% | 画素の実測 | | `accent-3` | `#E0306E` | 診断ボタンのピンク | 1% | 推定 | | `text` | `#414244` | 見出し・本文の濃グレー | 3% | 画素の実測 | | `line` | `#1A5E9E` | カードの濃紺枠線 | 1% | 推定 | | `dark-section` | `#0070BC` | フッターの青 | 2% | 画素の実測 | | `tint-1` | `#FFF59E` | ポイント案内の淡黄ボタン | 1% | 画素の実測 | | `cta-accessible` | `#228736` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#C25700` | AA を満たす補正値（計算） | | 計算 | | `accent-3-accessible` | `#DF2969` | AA を満たす補正値（計算） | | 計算 | - 地は淡水色・濃青・空色の帯を交互に置き、セクションの切れ目を色で示す。 - 申込 CTA は緑（新規）とオレンジ（転居・停止込み）の 2 色を必ずペアで並べる。 - 割引額や「無料」は赤い太字。白フチと影を付けて目立たせる。 - 黄色は数字・波線・小ラベルにだけ使う。 - 濃い青地の上では文字を白、淡色地の上では文字を濃青か濃グレーにする。 - ピンクは診断の実行ボタンだけに使う。 - `button-primary` は文字 `#FFFFFF` × 背景 `#2EB84A` のコントラスト比が 2.6:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#228736`、4.58:1）を使う。 - `button-secondary` は文字 `#FFFFFF` × 背景 `#FF7300` のコントラスト比が 2.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#C25700`、4.51:1）を使う。 - `button-diagnose` は文字 `#FFFFFF` × 背景 `#E0306E` のコントラスト比が 4.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-3-accessible`（`#DF2969`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの割引額の大数字 | 装飾・ディスプレイ | Dela Gothic One | 900 | 72px | 1.0 | -0.02em | | `headline-lg` | セクション大見出し | ゴシック | Zen Kaku Gothic New | 900 | 28px | 1.35 | 0.02em | | `headline-md` | 吹き出し見出し・リード | ゴシック | Noto Sans JP | 700 | 22px | 1.4 | 0.03em | | `headline-sm` | カード内の小見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.02em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 15px | 1.7 | 0.02em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em | | `label-button` | CTAの文字 | ゴシック | Noto Sans JP | 700 | 18px | 1.3 | 0.02em | | `accent` | Step・番号の欧文 | 欧文サンセリフ | Montserrat | 800 | 16px | 1.2 | 0.0em | - 数字は単位より 2〜3 倍大きくし、単位は小さく下に揃える。 - 大見出しは極太ゴシックにして、白フチと濃青の影を付ける。 - 見出し内の強調語だけをオレンジや赤にする。 - 注釈は小さいグレーで、ブロックの直下にまとめる。 - 電話番号は等幅の太いサンセリフで大きく見せる。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。CTA と特長タブは 2〜3 列に分ける。 - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算） - カードは左右 12px 前後の余白を取って画面いっぱいに置く。 - 申込 CTA の帯をページ内に 4 回繰り返す。 - 特長と口コミは左右矢印付きのカルーセルにし、下にドットを置く。 - プラン紹介はドーム型タブを付けた枠カードを縦に並べる。 ## Elevation & Depth - CTA ボタンには下方向に濃い影を付け、押せそうな立体感を出す。 - 吹き出し見出しにはずらした黒影（オフセット 3px）を付ける。 - 白カードは影を付けず、背景色との差で浮かせる。 ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。 - **写真の切り抜き**: 人物は切り抜きで FV の右下に置く。画面キャプチャは角丸の白カードに収める。 - **セクション境界**: 直線の色切り替え。吹き出しの三角で次のブロックにつなぐ。 - CTA は角丸 12px の長方形にする。 - 見出しはピル型の吹き出しにし、下向きの三角を付ける。 - プランカードは太さ 3px の濃紺枠にし、上に半円ドーム型のタブを載せる。 - 番号は円形バッジ。 ## Components - **新規申込CTA**（`button-primary`）: 緑の角丸ボタン。白縁があり、上に白い吹き出しラベル、中にトラックのアイコンを置く。 - **転居込み申込CTA**（`button-secondary`）: オレンジのグラデーションの角丸ボタン。2 段の文言を「＋」でつなぐ。 - **吹き出し見出し**（`bubble-heading`）: 白いピルに濃紺の文字。ずらした黒影と下向きの三角を付ける。 - **割引訴求カード**（`benefit-card`）: 白地に濃紺枠のカード。上辺にラベル文字が重なり、左にアイコン、右に赤い大数字を置く。 - **ドーム型タブ付きプランカード**（`dome-tab-card`）: 半円のタブにアイコンとカテゴリ名を載せ、その下に枠付きのカードを付ける。 - **番号バッジ**（`number-badge`）: 濃青またはオレンジの円に白い 2 桁の番号を入れる。 - **診断ラジオ選択肢**（`radio-option`）: 白いバーに丸いラジオを置く。選択中は濃青の地に白文字。 - **診断実行ボタン**（`button-diagnose`）: ピンクの立体的なピル型ボタン。虫眼鏡アイコンを付ける。 - **濃青ラベル**（`pill-label`）: 小見出しに使う濃青のピル型ラベル（白文字）。 - **電話受付ブロック**（`phone-block`）: 緑のフリーダイヤルマークと大きな番号を並べ、青い受付時間ラベルを添える。 ## Do's and Don'ts **Do** - 申込 CTA は緑とオレンジの 2 つを必ず横並びのセットで置く。 - 金額・割合は縁取りを付けた極太の数字で大きく見せる。 - セクションごとに淡水色・濃青・空色の地を切り替える。 - 注釈は該当ブロックの直下に小さい文字で添える。 - 特長は番号付きの 3 タブで先に一覧させてから、詳しく説明する。 **Don't** - 暗い色や黒の大きな面を使わない。 - CTA の色を緑とオレンジ以外に変えない（ピンクは診断ボタン専用）。 - 明朝体や細いウェイトの書体を使わない。 - 写真を全面に敷いて文字を読みにくくしない。 - 赤い数字を多用しすぎない。割引額に限って使う。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（セット割引額を伝え、すぐ申し込んでもらう）: 青地に放射状の模様を敷き、サービス名のアイコンを並べる。縁取りの大数字を置き、右下にスタッフの切り抜き写真、その下に緑とオレンジの CTA を縦に並べる。 2. **割引内訳**（組み合わせごとの得額を示す）: 組み合わせのタブ 3 つと、割引訴求カード 3 枚を縦に並べる。 3. **最短利用日**（急いでいる人の不安を解消する）: 黄色の極太見出しを置き、白カードに日付を赤で大きく見せる。 4. **申込CTA帯**（申込への導線）: 濃青の帯に、所要時間を黄色の数字と波線で見せる。2 色の CTA を横並びにし、下にテキストリンクを置く。 5. **ポイント特典**（登録のメリットを訴求する）: 空色地に白い大カードを置き、「貯まる・使える・もらえる」をラベルで区切る。アイコンはグリッドで並べ、3 ステップで見せる。 6. **おすすめプラン**（カテゴリ別の料金プランを紹介する）: 淡水色地に、ドーム型タブ付きのカードを 3 種並べる。電気はカルーセルにする。 7. **プラン診断**（最適なプランに誘導する）: タブで住居を切り替える。ラジオ選択肢を縦に並べ、最後にピンクの実行ボタンを置く。 8. **選ばれる理由**（安心感と手軽さを伝える）: 番号付きの 3 タブで一覧させる。続いて吹き出し見出しと白文字のリードを置き、白カードのカルーセルで説明する。 9. **お客様の声**（利用者の実感を伝える）: 円形のイラストアバターと属性を並べ、本文は白カードのカルーセルにする。 10. **電話窓口**（電話での相談を受け付ける）: 淡い水色の地に、フリーダイヤル番号を特大で表示し、受付時間を添える。 11. **フッター**（ロゴと規約リンクを置く）: 青地にロゴを白抜きで置き、小さい白文字のリンクを並べる。 ## Imagery - 人物は作業着のスタッフが笑顔でガッツポーズをする写真にし、背景を抜いて置く。 - アイコンは濃青とオレンジの 2 色の線画にする。 - 人物イラストは線画に淡い色を塗ったフラットなタッチにする。 - キラキラの星形装飾を数字のまわりに散らす。 - アプリ画面はスマホのモックアップにはめて見せる。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に幅 約 520px のカラムを置き、左右は背景色を伸ばす。 - PC の FV は横長にし、人物を右上、CTA を横並びにする。 - PC ではポイント特典の「貯まる・使える」を 2 カラムにする。 - PC では診断の選択肢を 2〜3 列のグリッドにする。 - 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-a1577c23`（元 LP の URL から採番） - **元 LP**: https://home.osakagas.co.jp/electricity/lp/multi/index.html - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。