--- version: alpha name: Spring Pink Pop Campaign Utility LP description: 淡い桜ピンクの地に濃ピンクの帯と紺の文字を合わせた、春らしく明るいキャンペーンLPです。手描き線の若者イラストで親しみを出しています。ブルーとグリーンのグラデーションボタンで、エリア別の申込先を分けて見せます。白いカードに特長・手順・料金表・プランを積み重ねる、情報量の多い訴求型の構成です。 colors: background: '#FFE3EF' surface: '#FFFFFF' primary: '#FE79AC' secondary: '#44BAED' cta: '#5CC98A' on-cta: '#1F2A6B' text: '#1F2A6B' accent-1: '#F05A9B' accent-2: '#7A86D2' accent-3: '#3CB3C6' tint-1: '#FEFFFE' tint-2: '#DFF1E3' dark-section: '#1C2B74' marker: '#FFF27A' primary-accessible: '#E9025A' secondary-accessible: '#117EAE' accent-1-accessible: '#CC1363' typography: display: fontFamily: M PLUS Rounded 1c fontSize: 40px fontWeight: 900 lineHeight: 1.15 letterSpacing: 0.02em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 26px fontWeight: 800 lineHeight: 1.35 letterSpacing: 0.03em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em accent: fontFamily: Yomogi fontSize: 16px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.75 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.04em headline-sm: fontFamily: Montserrat fontSize: 32px fontWeight: 800 lineHeight: 1.1 rounded: sm: 4px md: 10px lg: 16px 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-area-primary: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 52px button-pink: backgroundColor: '{colors.accent-1}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px point-badge: backgroundColor: '{colors.primary}' textColor: '{colors.surface}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 64px feature-tab: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 110px campaign-ribbon: backgroundColor: '{colors.dark-section}' textColor: '{colors.surface}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 48px price-table: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 40px step-bar: backgroundColor: '{colors.secondary}' textColor: '{colors.surface}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 28px faq-item: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 44px check-tag: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 32px --- # DESIGN.md — 桜ピンク×紺の春の電力キャンペーンLP（Spring Pink Pop Campaign Utility LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: その他 ／ **雰囲気**: ポップ・元気、かわいい、情報量多め・訴求型、親しみ・手作り感 - **キーワード**: 桜ピンク・春の新生活・手描きイラスト・エリア別CTA・白カード積み・料金比較表 - **地の質感**: フラットな塗りが基本。帯の背景だけ、細かいドットや斜線の淡い柄と、角に桜の花びらを置く - **形**: 角丸カード、ピル型ボタン、リボン型の見出しラベル、下向きの山形が付いたタブ - **温度感**: 暖色寄りの明るい春。紺の文字で引き締め、信頼感を残す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FFE3EF` | ページ全体の淡ピンク地 | 35% | 画素の実測 | | `surface` | `#FFFFFF` | コンテンツカードの白 | 22% | 画素の実測 | | `primary` | `#FE79AC` | CTA帯・ポイント番号・表ヘッダーの濃ピンク | 12% | 画素の実測 | | `secondary` | `#44BAED` | 東北エリアCTAとステップ帯のシアン | 3% | 画素の実測 | | `cta` | `#5CC98A` | 北海道エリアCTAの緑 | 2% | 推定 | | `on-cta` | `#1F2A6B` | CTAボタン上の紺文字 | 0% | 推定 | | `text` | `#1F2A6B` | 見出しと本文の紺 | 3% | 推定 | | `accent-1` | `#F05A9B` | 金額強調・ピンクボタンの濃ピンク | 2% | 推定 | | `accent-2` | `#7A86D2` | プランヘッダーの紫 | 2% | 画素の実測 | | `accent-3` | `#3CB3C6` | プランヘッダーのティール | 2% | 画素の実測 | | `tint-1` | `#FEFFFE` | 申込手順の淡黄地 | 4% | 画素の実測 | | `tint-2` | `#DFF1E3` | 手順枠の淡ミント地 | 3% | 画素の主要色に補正 | | `dark-section` | `#1C2B74` | 強調ラベル・タブの濃紺 | 1% | 画素の実測 | | `marker` | `#FFF27A` | 下線マーカーの黄色 | 0% | 推定 | | `primary-accessible` | `#E9025A` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#117EAE` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#CC1363` | AA を満たす補正値（計算） | | 計算 | - 地は淡ピンクで統一する。CTA帯だけ濃ピンクに切り替えて、区切りの目印にする - コンテンツは白カードに載せる。文字は紺を基本にする - エリア別のCTAは、シアンと緑のグラデーションで色を分ける - 金額と特典の数字は濃ピンクにする。重要な語には黄色マーカーを引く - プランごとに紫・ティール・緑のヘッダー色を割り当て、色で識別できるようにする - 手順ブロックは淡黄と淡ミントの入れ子枠で示す - `point-badge` は文字 `#FFFFFF` × 背景 `#FE79AC` のコントラスト比が 2.46:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#E9025A`、4.54:1）を使う。 - `step-bar` は文字 `#FFFFFF` × 背景 `#44BAED` のコントラスト比が 2.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#117EAE`、4.55:1）を使う。 - `check-tag` は文字 `#F05A9B` × 背景 `#FFE3EF` のコントラスト比が 2.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#CC1363`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのキャンペーン名 | 丸ゴシック | M PLUS Rounded 1c | 900 | 40px | 1.15 | 0.02em | | `headline-lg` | セクション見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 26px | 1.35 | 0.03em | | `headline-md` | カード内の見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.02em | | `accent` | 見出し上の手書き風リード | 手書き・筆 | Yomogi | 400 | 16px | 1.4 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 14px | 1.75 | 0.02em | | `note` | 注釈・条件 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em | | `label-button` | CTAボタン | ゴシック | Noto Sans JP | 700 | 16px | 1.3 | 0.04em | | `headline-sm` | 数字の強調（無料月数・金額） | 欧文サンセリフ | Montserrat | 800 | 32px | 1.1 | 0.0em | - 見出しは太い丸ゴシックで、白フチや影を付けて立体感を出す - セクション見出しの上に、手書き風のリードを斜めに添える - 数字はひと回り大きく、欧文の太字にする - 注釈は小さいグレー寄りの紺にし、※で始める - 重要な語は濃ピンクの文字か、黄色マーカーで示す - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SPは1カラム。特長タブは2×2、CTAは縦積み - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算） - 白カードを中央にそろえて縦に積む - CTA帯はページ内に3回ほど繰り返す - ポイント番号のバッジはカード上端にまたがせる - 料金表は2列で、行ごとに矢印を入れて金額を示す - FAQはアコーディオンで、＋アイコンを付ける ## Elevation & Depth - 白カードには、ごく薄い影か影なしにする - CTAボタンは下方向に濃い色の段差影を付け、立体的に見せる - ポイント番号のバッジには、ピンクの浮き影を付ける ## Shapes - **角丸**: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 人物イラストは切り抜きでカード外にはみ出させる。画面キャプチャはスマホの枠に入れる - **セクション境界**: 直線で背景色を切り替える。CTA帯の角には桜の装飾を置く - CTAはピル型にし、左にアイコン、右に＞を付ける - 見出しラベルはリボン型か角丸の小さな帯にする - プランタブの下端には、山形の▼マークを付ける ## Components - **エリア別申込ボタン**（`button-area-primary`）: シアンまたは緑のグラデーションのピル型ボタン。上に紺枠の小さなラベルを乗せ、左端にスマホのアイコンを置く - **詳細リンクボタン**（`button-pink`）: 濃ピンクのピル型ボタン。白文字で右に＞を付ける - **ポイント番号バッジ**（`point-badge`）: ピンクの角丸四角に、筆記体のpointと大きな数字を入れる - **特長タブ**（`feature-tab`）: 白カードにピンクの番号とイラストを載せ、下端にピンクの帯と▼を付ける - **キャンペーン訴求帯**（`campaign-ribbon`）: ピンクの斜めリボンと紺の帯に、大きな無料月数を重ねる - **料金比較表**（`price-table`）: ピンクのヘッダーを付けた2列の表。各行に、黄からピンクのグラデーション矢印と濃ピンクの金額を並べる - **手順ステップ見出し**（`step-bar`）: シアンの帯に黄色のSTEPラベルを付ける。ステップの間は下向きの矢印でつなぐ - **FAQ項目**（`faq-item`）: 紺枠の白い角丸ボックス。左にQのバッジ、右に＋を置く - **おすすめ対象タグ**（`check-tag`）: 淡ピンクの角丸タグに、ピンクのチェックアイコンを付ける ## Do's and Don'ts **Do** - 淡ピンクの地に白カード、紺の文字という基本の組み合わせを守る - CTA帯は濃ピンクで、ページ内に複数回入れる - エリアや対象者ごとに、ボタンの色を変える - 手描き線の若者イラストを、カードの端にはみ出させて配置する - 数字は大きく濃ピンクにし、単位は小さく添える **Don't** - 暗い背景や黒ベタを使わない - 写真の人物を使わない。イラストで統一する - 明朝体を使わない - ボタンを角張った四角にしない - 注釈を本文と同じ大きさで並べない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（キャンペーン名・期間・特典を伝える）: 淡ピンクの地に桜の装飾。太い丸ゴシックのタイトル、実績メダル、歩く男女のイラストを置き、紺の帯で特典を見せる 2. **CTA帯**（エリア別に申込先へ誘導する）: 濃ピンクの帯に、シアンと緑のピル型ボタンを2つ並べ、注釈を添える 3. **対象者の提示**（どんな人向けかを示す）: 白カードにチェック付きのタグを2つ置き、紺のボタンで詳細へ導く。左右に人物イラストを配置する 4. **特長の目次**（ポイントを一覧で見せる）: 手書き風リードと大見出しの下に、番号付きタブを4つ並べる 5. **特長の詳細と申込手順**（手軽さを伝える）: 番号バッジ付きの白カード。淡黄と淡ミントの枠の中に、STEP帯と画面キャプチャを並べる 6. **特長の詳細（決済・安心・特典）**（不安を解消し、特典を伝える）: 白カードの左にテキスト、右にイラストを置き、チェックリストとメダルで補強する 7. **注意喚起**（手続き上の注意を示す）: 紺の細枠の白ボックスに、ピンクの！アイコンと強調文字を入れる 8. **お得額の表**（メリットを数字で示す）: ピンクのヘッダーの比較表に、行ごとの矢印と大きな金額を並べる 9. **対象プラン**（プランごとの案内をする）: 3色のタブで切り替え、色付きヘッダーの白カードに、図解とピンクのボタンを載せる 10. **シミュレーションと適用条件**（試算へ誘導し、条件を明示する）: 濃ピンクの帯に黄色のピル型ボタン。その下に、開閉式の条件ボックスを置く 11. **よくある質問**（疑問を解消する）: Qバッジ付きのアコーディオンを縦に並べる 12. **クロージングCTAとフッター**（最後のひと押しをする）: FVと同じ訴求帯とボタン2つを置き、白地のフッターに青い帯を付ける ## Imagery - 紺の主線にパステルの塗りを合わせた、手描きタッチの若者イラスト - 人物は全身や半身で、指差し・ガッツポーズ・スマホ操作など動きのあるポーズにする - 背景の角に、淡い桜の花びらと枝を置く - 金色の月桂樹メダルで実績を見せる - 画面キャプチャはスマホの枠に入れ、手順に沿って並べる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央寄せで、カード幅は約600px。左右は淡ピンクの余白にする - PCのCTAは2つを横並び、SPは縦積みにする - 特長タブはPCで4列、SPで2×2にする - PCでは人物イラストをカードの左右に大きく置き、SPでは縮小して上下に配置する - SPでは表の文字を小さくし、2列を維持する ## 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-4dbe4079`（元 LP の URL から採番） - **元 LP**: https://www.tohoku-frontier.co.jp/lp/spring_cp2025/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。