---
version: alpha
name: Bright Cyan Commission Job Ad LP
description: 水色の面と白いカード、緑の立体ボタンで「費用0円」を押し出す法人向け求人広告の訴求型 LP。比較表・約束・声・流れ・FAQ を中央寄せの細い列に積み、数ブロックごとに CTA と電話番号の帯をくり返す。黄色の数字バッジ、黄色マーカー、赤い矢印で要点を拾わせる。
colors:
  primary: '#00B3EB'
  background: '#FFFFFF'
  background-alt: '#F4F4F4'
  dark-section: '#4B4B4B'
  cta: '#54B441'
  on-cta: '#FFFFFF'
  accent-1: '#FFE600'
  accent-2: '#E90102'
  secondary: '#8AB21C'
  tint-1: '#C6E4D6'
  tint-2: '#E9F6FA'
  marker: '#FFF57A'
  text: '#333333'
  line: '#C7C4B5'
  cta-accessible: '#3E8530'
  primary-accessible: '#0080A9'
typography:
  display:
    fontFamily: Montserrat
    fontSize: 72px
    fontWeight: 900
    lineHeight: 1.0
  headline-lg:
    fontFamily: Noto Sans JP
    fontSize: 26px
    fontWeight: 900
    lineHeight: 1.3
    letterSpacing: 0.02em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.4
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.5
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.7
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.5
  accent:
    fontFamily: Roboto Condensed
    fontSize: 26px
    fontWeight: 700
    lineHeight: 1.1
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 20px
    fontWeight: 900
    lineHeight: 1.2
    letterSpacing: 0.05em
rounded:
  sm: 2px
  md: 4px
  lg: 8px
  full: 999px
spacing:
  unit: 8px
  card: 14px
  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.sm}'
    height: 56px
  phone-block:
    textColor: '{colors.text}'
    typography: '{typography.accent}'
    height: 60px
  button-secondary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-cta}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 28px
  feature-circle-card:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-cta}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.full}'
    height: 200px
  comparison-table:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 260px
  promise-badge:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    height: 50px
  numbered-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    height: 180px
  step-row:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    height: 52px
  faq-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 110px
  pricing-plan:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.text}'
    typography: '{typography.headline-sm}'
    height: 200px
---

# DESIGN.md — 水色×緑ボタンの成功報酬型求人広告 LP（Bright Cyan Commission Job Ad LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。
上の YAML（トークン）が正、本文はその使い方の説明です。
**元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。**
公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

## Overview

- **業種**: 求人・採用 ／ **雰囲気**: 情報量多め・訴求型、ポップ・元気、信頼・誠実、清潔・爽やか
- **キーワード**: 0円訴求・水色ベタ面・立体の緑CTA・黄色の番号バッジ・比較表・線画イラスト
- **地の質感**: ほぼフラットな面。CTA だけに光沢グラデーションと影をつける。カードには細い灰色の枠線とうすい影をつける
- **形**: 正円のアイコン、四角いカード、斜めに切った帯、セクション下端の波線
- **温度感**: 明るく涼しい。黄色・緑・赤で温度を上げて行動を促す

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#00B3EB` | ブランド色。見出しの帯・円形アイコン・強調見出しに使う | 10% | 画素の実測 |
| `background` | `#FFFFFF` | ページとカードの地 | 40% | 画素の実測 |
| `background-alt` | `#F4F4F4` | 特長・流れのセクションの薄灰の地 | 7% | 画素の実測 |
| `dark-section` | `#4B4B4B` | ファーストビュー下の CTA 帯の濃い灰 | 6% | 画素の実測 |
| `cta` | `#54B441` | 申込ボタンの緑（光沢グラデーションの中間色） | 3% | 画素の実測 |
| `on-cta` | `#FFFFFF` | CTA ボタン上の白文字 | 0% | 画素の主要色に補正 |
| `accent-1` | `#FFE600` | 約束バッジ・番号の丸・ラベル帯の黄色 | 2% | 推定 |
| `accent-2` | `#E90102` | 矢印・注意書き・比較表の強調に使う赤橙 | 1% | 画素の実測 |
| `secondary` | `#8AB21C` | 求職者向けブロックの見出しの黄緑 | 1% | 画素の実測 |
| `tint-1` | `#C6E4D6` | 料金プランの見出しセルのミント色 | 3% | 画素の主要色に補正 |
| `tint-2` | `#E9F6FA` | FAQ セクションの薄い水色の地 | 6% | 画素の実測 |
| `marker` | `#FFF57A` | 本文中の黄色マーカー | 0% | 推定 |
| `text` | `#333333` | 見出しと本文の濃い灰の文字 | 3% | 推定 |
| `line` | `#C7C4B5` | カード・表の枠線 | 1% | 画素の主要色に補正 |
| `cta-accessible` | `#3E8530` | AA を満たす補正値（計算） |  | 計算 |
| `primary-accessible` | `#0080A9` | AA を満たす補正値（計算） |  | 計算 |

- 地は白と薄灰を交互にし、水色ベタの帯は 2〜3 セクションに 1 回だけ入れる
- 金額や「0」は水色か赤橙の太字で大きく見せる
- 主 CTA は必ず緑の光沢ボタンにし、他の要素に緑の面は使わない
- 番号・約束バッジは黄色の地に黒文字で統一する
- 本文の要点には黄色マーカーを引き、注意点は赤橙の文字にする
- 企業向けは水色、求職者向けは黄緑の見出しで色分けする
- `button-primary` は文字 `#FFFFFF` × 背景 `#54B441` のコントラスト比が 2.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#3E8530`、4.56:1）を使う。
- `button-secondary` は文字 `#FFFFFF` × 背景 `#00B3EB` のコントラスト比が 2.43:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#0080A9`、4.51:1）を使う。
- `feature-circle-card` は文字 `#FFFFFF` × 背景 `#00B3EB` のコントラスト比が 2.43:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#0080A9`、4.51:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ファーストビューの「0円」級の巨大数字 | 欧文サンセリフ | Montserrat | 900 | 72px | 1 | 0em |
| `headline-lg` | セクション見出し（帯の中の白文字や水色文字） | ゴシック | Noto Sans JP | 900 | 26px | 1.3 | 0.02em |
| `headline-md` | 約束・カード・流れの各項目見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0em |
| `headline-sm` | FAQ の質問文、表の見出し | ゴシック | Noto Sans JP | 500 | 15px | 1.5 | 0em |
| `body-md` | カード内の説明文・回答 | ゴシック | Noto Sans JP | 400 | 13px | 1.7 | 0em |
| `note` | ※注釈、受付時間、表内の補足 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0em |
| `accent` | 電話番号の大きな数字 | 欧文サンセリフ | Roboto Condensed | 700 | 26px | 1.1 | 0em |
| `label-button` | CTA ボタンの文字 | ゴシック | Noto Sans JP | 900 | 20px | 1.2 | 0.05em |

- 見出しは極太ゴシックにし、明朝や丸ゴシックは混ぜない
- 見出しのキーワードだけを水色・赤橙・黄緑に変え、ほかは濃い灰にする
- 見出しの両端に斜線「＼ ／」を添える
- 数字は本文より 1.5〜3 倍に大きくし、「円」は小さく添える
- 本文は 13px 前後で短く改行し、注釈は「※」から始める
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。PC 版は中央の約 80% の列に 3 カラムのカードを並べる
- **本文ブロックの幅**: 画面幅の約 92%
- **余白**: セクション間 48px、基本単位 8px、カード内 14px（375px 幅換算）
- 2〜3 セクションごとに CTA ボタンと電話番号のブロックを入れる
- セクションは枠のある白か灰のパネルに収め、パネル同士の間に余白をとる
- 3 つの特長・メリットは SP では縦に積む
- 流れは番号＋見出し＋説明の横長の行を 4 行並べる
- 比較表は自社の列を赤枠と薄い黄色で囲む

## Elevation & Depth

- CTA ボタンは下に濃い影をつけ、光沢グラデーションで立体に見せる
- カードとパネルは 1〜2px のうすい影と灰色の枠線をつける
- 円形アイコンや帯は影なしのフラットにする

## Shapes

- **角丸**: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
- **写真の切り抜き**: 人物写真は円形に切り抜き、イラストは背景なしの切り抜きで置く
- **セクション境界**: 直線を基本にし、水色の帯の下端だけ波線や下向きの三角矢印で区切る
- ボタンは角丸 4〜6px の横長の長方形にする
- 特長アイコンは水色の正円に白文字を入れる
- FAQ の吹き出しや質問の帯は斜めにカットした平行四辺形にする
- 番号の丸は黄色の正円にする

## Components

- **申込 CTA ボタン**（`button-primary`）: 緑の光沢グラデーションの横長ボタン。左に赤橙の矢印と白丸の小バッジを重ねる
- **電話番号ブロック**（`phone-block`）: 受話器アイコンと太い数字の電話番号、受付時間の注釈。右に問い合わせ用の青い小ボタンを置く
- **問い合わせボタン**（`button-secondary`）: 青いグラデーションの小ボタン。上に小さな説明ラベルを添える
- **円アイコン付き特長カード**（`feature-circle-card`）: 水色の円の中に短い見出しを入れ、その下に白いカードで説明を書く。横に 3 つ並べる
- **費用比較表**（`comparison-table`）: 灰色のヘッダーの表。自社の列は赤枠と薄い黄色の地で囲み、○×△の記号で比べる
- **約束の番号バッジ**（`promise-badge`）: 黄色の四角に黒い大きな数字。白いカードの左に置き、右に約束文を並べる
- **角番号付きメリットカード**（`numbered-card`）: 左上を斜めに切った水色か黄緑の三角に白い番号を入れ、見出しと本文を続ける
- **流れのステップ行**（`step-row`）: 黄色の丸い番号、太字の見出し、小さな説明を横に並べた枠つきの行
- **FAQ カード**（`faq-card`）: 薄い水色の地に白いカードを置く。「Q.」の質問を中サイズで、「A.」の回答を小さく書き、要点に黄色マーカーを引く
- **料金プラン表**（`pricing-plan`）: ミント色の見出しセルの 3 列。上位プランは黄緑で強調する

## Do's and Don'ts

**Do**
- CTA ボタンと電話番号のセットを 4〜5 回くり返す
- 金額・無料・0円は大きな数字と色で目立たせる
- 各セクションに線画の人物イラストを 1 体ずつ添える
- 比較表では自社の列を枠で囲み、優位性をひと目で伝える
- 見出しには斜線や小ラベルを添えてリズムをつくる

**Don't**
- 緑を CTA 以外の大きな面に使わない
- 細い明朝や上品な配色にしない
- 余白を広くとりすぎない（情報を詰めて組む）
- 写真を全面に大きく敷かない
- ボタンをピル型やフラットにしない
- 1 つのセクションに 4 色以上の強調色を混ぜない

## Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. **ファーストビュー**（費用0円と成功報酬型であることを一瞬で伝える）: 黄色と水色の背景に巨大な「0」とキャッチを置く。下に円形の人物写真を並べ、協力メディアのロゴを帯で並べる
2. **CTA**（すぐに申し込ませる）: 濃い灰の帯に緑の光沢ボタンと電話番号を置く
3. **特長**（サービスの強みを 3 つ示す）: 灰色のパネルに水色の円形アイコンと説明カードを 3 つ並べる
4. **費用シミュレーション**（他社より安いことを数字で証明する）: 水色の帯見出しと吹き出しを置き、比較表と赤い矢印付きの箇条書きを続ける
5. **料金プラン**（プランと金額を比べさせる）: ミント色の見出しを持つ 3 列の表にし、下向き矢印で特長カードへつなぐ
6. **3つの約束**（安心感を与える）: 水色の地に白いカードを置き、黄色の番号バッジを付けた約束を縦に 3 つ並べる。下端は波線にする
7. **お客様の声・メリット**（企業と求職者の双方のメリットを示す）: 角に番号を付けたカードを 3 つ並べる。企業向けは水色、求職者向けは黄緑にする
8. **活用方法（Q&A）**（よくある不安を会話形式で解消する）: 斜めの帯に質問をのせ、薄い黄色のパネルに太字の答えを書く。左右に人物イラストを置く
9. **掲載までの流れ**（手続きの簡単さを見せる）: 黄色の丸番号が付いたステップ行を 4 つ並べる
10. **採用・支払いまでの流れ**（費用が発生するタイミングを明示する）: 黄緑の見出しで同じ形式のステップ行を 4 つ並べる
11. **よくある質問**（残る疑問を解消する）: 薄い水色の地に白い Q&A カードを縦に並べる
12. **最終 CTA・フッター**（申込と会社情報を示す）: 緑のボタンと電話番号を置き、水色の線の下に運営会社情報とロゴを小さく書く

## Imagery

- 人物は単色の線画イラストにし、服に水色や黄色を差し色で入れる
- 喜ぶ・考える・説明するなど、身振りの大きいポーズを選ぶ
- ファーストビューの人物写真は白背景で撮り、円形に切り抜く
- メディアのロゴは白地に横並びで小さく置く
- キラキラ・虫眼鏡・びっくりマークなどの小さなアイコンで見出しを飾る
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PC は中央約 80% 幅の列で、外側は薄い灰の地にする。SP は幅いっぱいの 1 カラムにする
- PC で 3 列に並ぶ特長・メリット・プランのカードは、SP では縦に積むか、プラン表だけ横スクロールにする
- 比較表は SP で列見出しを短くし、文字を 11px 前後まで下げる
- CTA ボタンは SP で幅 90% にし、電話ボタンと問い合わせボタンは縦に積む
- ステップ行は SP で番号と見出しを上、説明を下に分ける

## 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-32d19b56`（元 LP の URL から採番）
- **元 LP**: http://mybestjob.jp/kyujinkoukoku/
- **解析に使った画像**: PC（PC版）
- **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-15、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、掲載削除を希望される場合、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。