--- version: alpha name: Pop Yellow Character Diagnosis Point Service LP description: 淡い黄色の地に水色と赤を差したポップな LP。マンガ調のキャラクターカードで診断に誘導し、丸文字見出しと一文字ずつ丸で囲んだ見出しで親しみやすさを出す。本の形の青いカードや雲形の白い面、吹き出しを使い、遊び心のある会員登録訴求につなげる。 colors: background: '#F7F28E' surface: '#FFFFFF' primary: '#4FBFD5' cta: '#EC493A' on-cta: '#FFF9F7' text: '#2B2220' secondary: '#221816' background-alt: '#FDFDD9' tint-1: '#FEFEFD' marker: '#F4F294' accent-1: '#E34530' accent-2: '#FFEC3F' line: '#E7F5ED' dark-section: '#3E3E3E' on-dark: '#E4E5E4' cta-accessible: '#E02716' primary-accessible: '#237F91' typography: display: fontFamily: Dela Gothic One fontSize: 56px fontWeight: 400 lineHeight: 1.15 headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 28px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.1em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 22px fontWeight: 800 lineHeight: 1.45 letterSpacing: 0.08em headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-lg: fontFamily: Zen Kaku Gothic New fontSize: 16px fontWeight: 700 lineHeight: 2.0 letterSpacing: 0.08em body-md: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.03em accent: fontFamily: Dela Gothic One fontSize: 24px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.05em label-button: fontFamily: M PLUS Rounded 1c fontSize: 17px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.05em rounded: sm: 6px md: 16px lg: 28px full: 999px spacing: unit: 8px card: 20px section: 64px 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-secondary: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 52px link-more: textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' height: 28px heading-circled: backgroundColor: '{colors.tint-1}' textColor: '{colors.primary}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 44px card-character: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 180px card-point-book: backgroundColor: '{colors.primary}' typography: '{typography.headline-md}' height: 150px panel-balloon: backgroundColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 480px faq-list: backgroundColor: '{colors.surface}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 1400px button-contact: backgroundColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 64px --- # DESIGN.md — 黄色×水色のポップなキャラ診断型ポイントサービスLP（Pop Yellow Character Diagnosis Point Service LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 金融・保険 ／ **雰囲気**: ポップ・元気、かわいい、親しみ・手作り感、情報量多め・訴求型 - **キーワード**: 淡い黄色地・水色アクセント・キャラクター図鑑カード・丸囲み一文字見出し・立体ピルボタン・雲形・円形の背景 - **地の質感**: フラットな塗りが中心。背景に薄い線路柄や大きな円をうっすら重ね、紙のようなやわらかさを出す。 - **形**: 大きな円・雲形・本の形・吹き出しなど、丸みのある有機的な形。ボタンはピル型で、下側にずらした影で立体感を出す。 - **温度感**: 暖かく明るい。黄色で陽気さを出し、水色で清潔感と信頼感を少し加える。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#F7F28E` | ページの基本地色（淡い黄色） | 30% | 画素の実測 | | `surface` | `#FFFFFF` | 雲形・FAQカードの白い面 | 36% | 画素の実測 | | `primary` | `#4FBFD5` | ブランドの水色（見出し・ポイントカード） | 10% | 画素の実測 | | `cta` | `#EC493A` | 登録ボタンの赤 | 2% | 画素の実測 | | `on-cta` | `#FFF9F7` | ボタン上の白文字 | 0% | 画素の実測 | | `text` | `#2B2220` | 本文・見出しの濃い茶黒 | 3% | 推定 | | `secondary` | `#221816` | 診断スタートボタンの濃い茶 | 1% | 画素の実測 | | `background-alt` | `#FDFDD9` | セクションを切り替える薄いクリーム | 6% | 画素の実測 | | `tint-1` | `#FEFEFD` | 丸囲み見出し文字の淡い水色の円 | 0% | 画素の実測 | | `marker` | `#F4F294` | 強調文字の下に引く黄色マーカー | 0% | 画素の実測 | | `accent-1` | `#E34530` | 見出し内の強調数字（赤） | 0% | 画素の実測 | | `accent-2` | `#FFEC3F` | 背景に置く濃い黄色の大きな円 | 2% | 画素の実測 | | `line` | `#E7F5ED` | FAQ の区切り線 | 0% | 画素の主要色に補正 | | `dark-section` | `#3E3E3E` | フッターの濃いグレー | 1% | 画素の実測 | | `on-dark` | `#E4E5E4` | フッター上の白文字 | 0% | 画素の実測 | | `cta-accessible` | `#E02716` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#237F91` | AA を満たす補正値（計算） | | 計算 | - 地は淡い黄色を基本にする。読ませるブロックは白い雲形やカードに載せる。 - 水色はブランド色。見出し文字・ポイントカード・吹き出しパネル・円の装飾に使う。 - 赤は登録の主 CTA と強調数字だけに使う。多用しない。 - 診断スタートなどのサブ導線は濃い茶黒のピルボタンにして、赤い CTA と区別する。 - 強調したい本文には黄色いマーカーを半分の高さで引く。 - フッターだけ濃いグレーにしてページを締める。 - `button-primary` は文字 `#FFF9F7` × 背景 `#EC493A` のコントラスト比が 3.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E02716`、4.51:1）を使う。 - `heading-circled` は文字 `#4FBFD5` × 背景 `#FEFEFD` のコントラスト比が 2.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#237F91`、4.61:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の大見出しロゴ（白抜き＋水色の影） | 装飾・ディスプレイ | Dela Gothic One | 400 | 56px | 1.15 | 0em | | `headline-lg` | 一文字ずつ丸で囲んだセクション見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 28px | 1.3 | 0.1em | | `headline-md` | 水色の見出し・吹き出しパネルのタイトル | 丸ゴシック | M PLUS Rounded 1c | 800 | 22px | 1.45 | 0.08em | | `headline-sm` | FAQ の質問文（水色） | 丸ゴシック | M PLUS Rounded 1c | 700 | 16px | 1.5 | 0.05em | | `body-lg` | 中央そろえのリード文 | ゴシック | Zen Kaku Gothic New | 700 | 16px | 2 | 0.08em | | `body-md` | 説明文・FAQ の回答 | ゴシック | Zen Kaku Gothic New | 500 | 14px | 1.8 | 0.05em | | `note` | ※から始まる注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.03em | | `accent` | 「＼ ／」で挟むキャッチと太い強調数字 | 装飾・ディスプレイ | Dela Gothic One | 400 | 24px | 1.3 | 0.05em | | `label-button` | ボタンの文字 | 丸ゴシック | M PLUS Rounded 1c | 800 | 17px | 1.3 | 0.05em | - 見出しは丸ゴシックの極太にし、字間を少し広げる。 - セクション見出しは一文字ずつ淡い水色の円に入れて並べる。 - 短いキャッチは左右を「＼ ／」の斜線で挟む。 - リード文は中央そろえにし、行間を 2.0 前後と広めにとる。 - 数字は極太のディスプレイ書体で赤くし、大きくする。 - 注釈は 10px 前後の小さい文字にして、ボタンや図版のすぐ下に置く。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。キャラクターカードだけ 3 枚と 2 枚の 2 段に並べる - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 要素は中央軸にそろえ、左右の余白は 20〜24px にする。 - CTA ブロック（キャッチ・ロゴアイコン・赤ボタン）は同じ形で 2 回以上くり返す。 - 説明パネルは画面幅の約 88% にし、角丸を大きくする。 - FAQ は 1 枚の白いカードにまとめ、項目を細い線で区切る。 - 背景の大きな円や雲形は端からはみ出させてよい。 ## Elevation & Depth - ボタンは影をぼかさず、同系の濃い色を 4〜6px 下にずらして立体感を出す。 - カードや白い面にはドロップシャドウを使わず、色の差だけで重なりを表す。 - キャラクターカードは少し傾けて重ね、手に取ったカードのような奥行きを出す。 ## Shapes - **角丸**: 小 6px ／ 中 16px ／ 大 28px。ボタンはピル型。 - **写真の切り抜き**: キャラクターは円の背景に入れ、角丸の小さい縦長カードに収める。人物イラストは切り抜いて配置する。 - **セクション境界**: 大きな円弧・雲形の白い面・開いた本の形の線で区切り、直線では区切らない。 - ボタンはすべてピル型にする。 - ポイント説明は上下の辺が波打つ本の形のパネルにする。 - 番号は水色のしずく型ピンの中に入れ、上に弧を描く小さな英字を添える。 - 補足パネルは左上に吹き出しのしっぽを付けた大きな角丸にする。 ## Components - **登録 CTA ボタン**（`button-primary`）: 赤いピル型で、下に濃い赤の影をずらして立体的に見せる。上に「＼ ／」で挟んだキャッチとピン型ロゴを置く。 - **診断スタートボタン**（`button-secondary`）: 濃い茶黒のピル型で、英字を白抜きにする。 - **詳細リンク**（`link-more`）: 赤い文字に下線を引き、右端に小さな四角の矢印アイコンを付ける。 - **丸囲み一文字見出し**（`heading-circled`）: 一文字ずつ淡い水色の円に入れ、水色の文字で横に並べる。 - **キャラ図鑑カード**（`card-character`）: 水色の枠に白地。円の中にキャラを入れ、名前・No.・レベル表示を添えたトレカ風のカード。 - **本の形のポイントカード**（`card-point-book`）: 水色の本の形のパネル。左上にしずく型の番号ピンを置き、中央に白い文字を入れる。 - **吹き出しおすすめパネル**（`panel-balloon`）: 水色の大きな角丸に吹き出しのしっぽを付け、中に白いカードで例を示す。 - **FAQ カード**（`faq-list`）: 白い角丸カードの中に、水色のピンアイコン付きの質問と回答を並べ、細い線で区切る。 - **問い合わせボタン**（`button-contact`）: 水色のピル型で、左に封筒アイコンを置き、白い文字を 2 行で入れる。 ## Do's and Don'ts **Do** - 地は淡い黄色、読ませる面は白、アクセントは水色の 3 層を守る。 - 主 CTA は赤いピル型で統一し、ページ内で複数回くり返す。 - 見出しは丸ゴシックの極太か、丸囲み一文字にする。 - キャラクターは線のはっきりしたマンガ調にし、円の背景に入れる。 - 区切りには円弧・雲形・本の形など、丸みのある形を使う。 **Don't** - 明朝体や細い書体を見出しに使わない。 - 赤を見出しや面の色として広く使わない。 - 写真の背景や暗いトーンを入れない（フッターは例外）。 - 直線のきっちりした区切りや、四角いボタンにしない。 - ぼかしの強いドロップシャドウを付けない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（診断コンテンツへの興味を引き、スタートさせる）: 黄色地に、白抜き＋水色の影の大きなロゴ見出しを置く。下にキャラカードを傾けて並べ、多色の診断タイトルと黒いピル型のスタートボタンを配置する。 2. **登録 CTA**（早い段階で登録へ誘導する）: 淡い黄色の大きな円の上に「＼ ／」で挟んだキャッチ、ピン型ロゴ、赤い立体ピルボタンを縦に並べる。 3. **問題提起**（損をしていることに気づかせる）: 白い雲形の面に、丸囲みの見出しと中央そろえのリード文を置く。重要な行は黄色のマーカーで強調する。 4. **キャラ図鑑一覧**（タイプ別の診断結果を一覧で見せる）: キャラカードを 3 枚と 2 枚の 2 段で並べ、下に注釈を添える。最後は開いた本の形の線で締める。 5. **サービス紹介**（サービスの概要と得られるメリットを伝える）: 丸囲みの見出しの下に、斜線で挟んだ説明と赤い数字の訴求を置く。 6. **3 つのポイント**（仕組みを短く説明する）: 番号ピン付きの本の形の水色カードを 3 つ縦に並べる。 7. **ランク制度**（使うほど得になる仕組みを見せる）: クリーム色の円弧の地に丸囲みの見出しを置き、階段状のランク図と本文・注釈を続ける。 8. **おすすめ利用者**（通勤利用者に具体的な例を示す）: 吹き出し型の水色パネルに人物イラストを添え、中の白いカードで数値例を示す。 9. **登録 CTA（再掲）**（最終的に登録させる）: 上と同じ CTA ブロックに、赤い下線付きの詳細リンクを加える。 10. **よくある質問**（不安を解消する）: 白い角丸カードに丸囲みの見出しを置き、ピンアイコン付きの質問を線で区切って並べる。 11. **問い合わせ・フッター**（連絡先と規約への導線を示す）: 白地に水色の問い合わせボタンと電話番号を置き、最後に濃いグレーのフッターを敷く。 ## Imagery - キャラクターは太い黒の主線にベタ塗りの昭和マンガ風で描き、少しとぼけた表情にする。 - キャラは赤・橙・紫・緑・金など色違いの円の背景に入れ、タイプごとに色分けする。 - 人物イラストは線の少ないフラットなイラストにし、水色・黄色の服を着せる。 - 背景には薄い線路柄や点線の弧を淡くあしらう。 - コインなどの小物はフラットな黄色で描き、図版にリズムを付ける。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に約 70% 幅のコンテンツを置き、左右の黄色地に大きな円や雲形を広げる。 - PC の FV は左にロゴ見出しとボタン、右にキャラカードを大きく重ねる 2 分割にする。 - ポイントカード 3 つは PC で横 3 列に並べる。 - キャラ図鑑一覧は PC で 5 枚を横 1 列に並べる。 - おすすめパネルは 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-2705608a`（元 LP の URL から採番） - **元 LP**: https://www.metpo.jp/lp/metpo_promo2026 - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（13/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-21、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、掲載削除を希望される場合、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。