--- version: alpha name: Pop Manga Hero Corporate Campaign LP description: ショッキングピンクの極太見出しと集中線、方眼紙の地、黒い線のアメコミ風イラストで、地味に見られがちなBtoBのテーマを戦隊ヒーローのようにポップに見せる特設サイト型LP。黒枠の白カードに数字やインタビューを載せ、斜めの帯テキストでセクションを区切る。 colors: primary: '#F35195' on-primary: '#FFFFFF' cta: '#F35195' on-cta: '#FFFFFF' background: '#FFFFFF' background-alt: '#EEF2FA' tint-1: '#FFEDED' tint-2: '#EDE2C5' text: '#1E1E1E' line: '#222222' accent-1: '#2F8FD0' accent-2: '#3DAA5C' accent-3: '#F2551E' text-muted: '#777777' cta-accessible: '#E51069' primary-accessible: '#E51069' accent-1-accessible: '#297CB5' typography: display: fontFamily: Dela Gothic One fontSize: 64px fontWeight: 400 lineHeight: 1.1 letterSpacing: -0.02em headline-lg: fontFamily: Dela Gothic One fontSize: 22px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.02em headline-md: fontFamily: Dela Gothic One fontSize: 24px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.04em accent: fontFamily: Montserrat fontSize: 34px fontWeight: 900 lineHeight: 1.1 headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 2.0 letterSpacing: 0.04em label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.02em rounded: sm: 2px md: 4px lg: 999px full: 999px spacing: unit: 8px card: 14px 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.sm}' height: 34px heading-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' height: 36px marker-highlight: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-primary}' typography: '{typography.body-md}' height: 18px stat-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.accent}' height: 420px ticker-band: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' height: 22px capsule-panel: backgroundColor: '{colors.background}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 620px badge-category: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.note}' rounded: '{rounded.full}' height: 18px news-list: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 64px --- # DESIGN.md — ピンク×方眼紙のマンガ調BtoB特設 LP（Pop Manga Hero Corporate Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: ポップ・元気、力強い・インパクト、親しみ・手作り感、情報量多め・訴求型 - **キーワード**: マンガ調・集中線・方眼紙・戦隊ヒーロー・ショッキングピンク・黒い線画 - **地の質感**: 方眼紙の細いグリッド、集中線、網点（ドット）入りの極太文字。フラット塗りに黒い主線のイラスト - **形**: 黒い1〜2px枠の角なし白カード、斜めに傾いた帯、縦長のカプセル型の白い面、角のほぼない四角いボタン - **温度感**: 明るく賑やか。ピンクを軸に、淡い水色・ベージュの地で温度を調整 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#F35195` | ブランドのピンク（見出し帯・数字・ボタン） | 6% | 画素の実測 | | `on-primary` | `#FFFFFF` | ピンク面の上の白文字 | 0% | 画素の主要色に補正 | | `cta` | `#F35195` | 「詳しく見る」系のボタン | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン文字 | 0% | 画素の主要色に補正 | | `background` | `#FFFFFF` | カード・本文エリアの白 | 30% | 画素の実測 | | `background-alt` | `#EEF2FA` | 方眼紙柄の淡い水色の地 | 22% | 画素の実測 | | `tint-1` | `#FFEDED` | ファーストビューの淡いピンク地 | 7% | 画素の実測 | | `tint-2` | `#EDE2C5` | 人物紹介セクションのベージュ方眼地 | 6% | 画素の実測 | | `text` | `#1E1E1E` | 極太見出し・本文の黒 | 3% | 推定 | | `line` | `#222222` | カード枠・イラスト主線の黒 | 1% | 推定 | | `accent-1` | `#2F8FD0` | 本文中の青マーカー（反転文字） | 0% | 推定 | | `accent-2` | `#3DAA5C` | 本文中の緑マーカー（反転文字） | 0% | 推定 | | `accent-3` | `#F2551E` | キャラクター用のオレンジ | 2% | 推定 | | `text-muted` | `#777777` | 日付・コピーライトのグレー | 0% | 推定 | | `cta-accessible` | `#E51069` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#E51069` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#297CB5` | AA を満たす補正値（計算） | | 計算 | - 地は白・方眼水色・ベージュ方眼・淡ピンクをセクションごとに切り替える - ピンクは見出し帯・大きな数字・ボタン・カテゴリバッジに集中させる - 本文の強調は青・緑の反転マーカーで1文ずつ。色はキャラクターの色から取る - 線と見出し文字は黒で統一し、マンガの主線感を出す - キャラクターはピンク・緑・黄・オレンジ・青の5色で塗り分ける - グラデーションや影色は使わずフラット塗りにする - `button-primary` は文字 `#FFFFFF` × 背景 `#F35195` のコントラスト比が 3.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E51069`、4.56:1）を使う。 - `heading-band` は文字 `#FFFFFF` × 背景 `#F35195` のコントラスト比が 3.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#E51069`、4.56:1）を使う。 - `marker-highlight` は文字 `#FFFFFF` × 背景 `#2F8FD0` のコントラスト比が 3.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#297CB5`、4.52:1）を使う。 - `badge-category` は文字 `#FFFFFF` × 背景 `#F35195` のコントラスト比が 3.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#E51069`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの極太ロゴ見出し（網点入り・斜体） | 装飾・ディスプレイ | Dela Gothic One | 400 | 64px | 1.1 | -0.02em | | `headline-lg` | セクション見出し | 装飾・ディスプレイ | Dela Gothic One | 400 | 22px | 1.3 | 0.02em | | `headline-md` | ピンク帯の白抜き見出し | 装飾・ディスプレイ | Dela Gothic One | 400 | 24px | 1.3 | 0.04em | | `accent` | カードの大きな数字（ピンク） | 欧文サンセリフ | Montserrat | 900 | 34px | 1.1 | 0em | | `headline-sm` | カード見出し・ニュースタイトル | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.02em | | `body-md` | 中央揃えの本文 | ゴシック | Noto Sans JP | 700 | 12px | 2 | 0.04em | | `label-button` | ボタン・バッジ文字 | ゴシック | Noto Sans JP | 700 | 12px | 1.4 | 0.05em | | `note` | 日付・コピーライト | 欧文サンセリフ | Noto Sans JP | 400 | 10px | 1.5 | 0.02em | - 見出しは極太の装飾ゴシックで黒、背景色の帯で反転させる型も併用 - メイン見出しは網点テクスチャ＋黒い縁取り＋立体影でマンガのタイトル風にする - 本文は太めのゴシックを中央揃え、行間を2.0と広く取る - 数字は欧文の極太体でピンク、単位の％は小さく添える - 見出しの語尾に問いかけ形を繰り返し、シリーズ感を出す - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC は左固定ナビ＋右メインで、数字カードは 2 列 - **本文ブロックの幅**: 画面幅の約 84% - **余白**: セクション間 64px、基本単位 8px、カード内 14px（375px 幅換算） - カードは画面幅の約8割で中央に置く - キャラクターをカードの角にはみ出させて重ねる - セクション境界は斜めの線や帯で区切る - 本文ブロックは中央揃えで短い行に改行する - ファーストビューは見出しとキャラ集合イラストで画面を埋める ## Elevation & Depth - 影はほぼ使わず、黒い細枠で面を浮かせる - カードは白地に黒1〜2px枠、外側に少しずらした二重枠を付ける - メイン見出しのみ黒いずらし影で立体感を出す ## Shapes - **角丸**: 小 2px ／ 中 4px ／ 大 999px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は黒枠の四角で切り抜く。会社紹介は縦長カプセル型の白い面を写真に重ねる - **セクション境界**: 斜めの直線、または繰り返しテキストが流れる傾いた白帯 - ボタンは角丸ほぼなしの横長長方形 - カテゴリバッジだけピル型 - 集中線の背景を見出しエリアに敷く - 方眼紙グリッドは細く淡い線にする ## Components - **ピンクの角ボタン**（`button-primary`）: カード下部の横幅いっぱいの詳細ボタン - **ピンク帯の反転見出し**（`heading-band`）: 小見出しの下にピンク地＋白文字の太見出しを置く - **反転マーカー**（`marker-highlight`）: 本文中の1フレーズを青か緑の地に白文字で強調 - **数字カード**（`stat-card`）: 黒枠の白カードに、上にイラスト、下にピンクの大きな数字・説明・ボタン - **斜めの帯テキスト**（`ticker-band`）: 問いかけフレーズを繰り返す細い白帯を傾けて置き、セクションを区切る - **カプセル型の紹介パネル**（`capsule-panel`）: 写真の上に縦長の楕円型白面を重ね、集中線と中央揃えの本文を載せる - **カテゴリバッジ**（`badge-category`）: ニュース一覧の分類を示すピンクのピル型ラベル - **ニュースリスト**（`news-list`）: 黒枠ボックス内に日付・バッジ・1行タイトルを点線区切りで並べる ## Do's and Don'ts **Do** - キャラクターをカードや見出しに重ねて動きを出す - 見出しは極太書体で問いかけ形に揃える - ピンクは要所だけに使い、地は淡い色にする - セクションごとに地の色と柄（方眼・集中線）を変える - 枠線は黒で統一してマンガのコマ感を出す **Don't** - 細い明朝や上品な書体を使わない - グラデーションやぼかし影を使わない - ボタンを丸いピル型にしない - 写真を枠なしで全面に並べない - ピンク以外の色をボタンに使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（サイトロゴとメニュー）: 白地に小さなピンクのロゴ、右にハンバーガー。下に黒線 2. **ファーストビュー**（テーマを問いかけで印象付ける）: 淡ピンクのビル街背景に網点入り極太見出しを2行、その下にキャラ5人が決めポーズ 3. **導入**（テーマの意外な広さを伝える）: 集中線の地に小見出し＋ピンク帯見出し、中央揃え本文に色マーカー、働くキャラのイラスト 4. **数字で見る**（調査データで関心を引く）: 方眼水色の地に黒枠カードを縦に並べ、イラスト・ピンクの数字・説明・ボタン 5. **働く人の紹介**（インタビューで実在感を出す）: 斜め帯で区切ったベージュ方眼地、黒枠の中に3人の写真と記事タイトル 6. **運営会社紹介**（企画の主体と理念を伝える）: オフィス集合写真にカプセル型白パネルを重ね、ピンク混じりの見出し・本文・ボタン 7. **最新情報**（関連ニュースへ誘導）: 方眼地に黒枠のリスト、日付・ピンクバッジ・タイトル、角にキャラ 8. **フッター**（著作権とポリシー）: 白地にグレーの小さな文字を中央揃え ## Imagery - 黒い主線・フラット塗りのアメコミ調イラスト - キャラは顔を色付きゴーグルで隠した会社員の戦隊風5人組 - 背景に集中線・網点・ビル街のシルエットを使う - 人物写真は明るいオフィスで笑顔、手書きボードを持たせる - 写真の背景を色分けしたイラスト柄にして統一感を出す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は左に縦のアイコン付き固定ナビを置く - PC は数字カードを 2 列に並べる - PC はメイン見出しを1行にまとめる - PC のニュースは日付・バッジ・タイトルを1行に並べる - SP は全セクション1カラムで縦に積む ## 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-8cf5452c`（元 LP の URL から採番） - **元 LP**: https://what-backoffice.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（6/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-15、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、掲載削除を希望される場合、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。