---
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/）からご連絡ください。