---
version: alpha
name: Bold Blue Black Corporate Recruiting LP
description: 青い粒子テクスチャのFVから、黒〜濃紺グラデのメッセージへつなげる企業採用LP。白とライトグレーの情報面には太い欧文見出しと鮮やかな青のボタンを置く。挑戦的で先進的な印象と、整理された導線を両立させている。
colors:
  primary: '#2D9ED8'
  cta: '#0097E0'
  on-cta: '#FFFFFF'
  secondary: '#52C1ED'
  background: '#FFFFFF'
  background-alt: '#F3F3F3'
  dark-section: '#000000'
  accent-1: '#031E4D'
  on-dark: '#EAEAEB'
  text: '#000000'
  text-muted: '#787878'
  line: '#D9E1E6'
  tint-1: '#C6C6C6'
  surface: '#222222'
  cta-accessible: '#007DBA'
  primary-accessible: '#207DAD'
  secondary-accessible: '#127EA9'
typography:
  display:
    fontFamily: Dela Gothic One
    fontSize: 56px
    fontWeight: 900
    lineHeight: 1.15
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Archivo
    fontSize: 36px
    fontWeight: 800
    lineHeight: 1.1
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.6
    letterSpacing: 0.03em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.02em
  body-lg:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 700
    lineHeight: 2.6
    letterSpacing: 0.05em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.9
    letterSpacing: 0.03em
  note:
    fontFamily: Montserrat
    fontSize: 9px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.08em
  label-button:
    fontFamily: Archivo
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.04em
rounded:
  sm: 4px
  md: 6px
  lg: 8px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  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.md}'
    height: 42px
  button-outline:
    backgroundColor: '{colors.background}'
    textColor: '{colors.primary}'
    typography: '{typography.label-button}'
    rounded: '{rounded.md}'
    height: 40px
  button-sub:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-cta}'
    typography: '{typography.label-button}'
    rounded: '{rounded.md}'
    height: 40px
  hero-guide-panel:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.md}'
    height: 76px
  section-heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    height: 70px
  topic-card:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.sm}'
    height: 340px
  news-item:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 100px
  event-card:
    backgroundColor: '{colors.background-alt}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 320px
  coming-soon:
    backgroundColor: '{colors.tint-1}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.sm}'
    height: 250px
---

# DESIGN.md — 黒×鮮青の力強いメーカー新卒採用LP（Bold Blue Black Corporate Recruiting LP）

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

## Overview

- **業種**: 求人・採用 ／ **雰囲気**: 力強い・インパクト、クール・先進的、信頼・誠実、シンプル・ミニマル
- **キーワード**: 黒地・鮮やかな青・太い欧文見出し・粒子テクスチャ・上昇する矢印・モノトーン写真
- **地の質感**: FVは青のグリッターノイズと斜めの矢印モチーフ。それ以外はフラットな単色面だけで構成する。
- **形**: 小さめの角丸（4〜8px）の矩形が基本。ピル型は使わない。斜めの矢印でスピード感を出す。
- **温度感**: クールで硬質な寒色。青と黒の熱量で挑戦心を表す。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#2D9ED8` | ブランドの青。ラベル・日付・アイコン | 3% | 画素の主要色に補正 |
| `cta` | `#0097E0` | 主ボタンの塗り | 2% | 画素の実測 |
| `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 |
| `secondary` | `#52C1ED` | サブボタン（マイページ等）の水色 | 0% | 画素の実測 |
| `background` | `#FFFFFF` | 基本の白地 | 28% | 画素の実測 |
| `background-alt` | `#F3F3F3` | イベント欄やニュースカードのライトグレー | 13% | 画素の実測 |
| `dark-section` | `#000000` | メッセージ・社員紹介の黒地 | 15% | 画素の実測 |
| `accent-1` | `#031E4D` | 黒から濃紺へ変わるグラデーションの下端 | 6% | 画素の実測 |
| `on-dark` | `#EAEAEB` | 暗い面の上の白文字 | 2% | 画素の実測 |
| `text` | `#000000` | 見出し・本文の黒 | 2% | 画素の実測 |
| `text-muted` | `#787878` | 和文サブ見出しのグレー | 0% | 画素の実測 |
| `line` | `#D9E1E6` | 採用区分の区切り線 | 0% | 画素の主要色に補正 |
| `tint-1` | `#C6C6C6` | 準備中（公開前）コンテンツの淡いグレー文字 | 1% | 画素の実測 |
| `surface` | `#222222` | フッターのチャコール | 4% | 画素の実測 |
| `cta-accessible` | `#007DBA` | AA を満たす補正値（計算） |  | 計算 |
| `primary-accessible` | `#207DAD` | AA を満たす補正値（計算） |  | 計算 |
| `secondary-accessible` | `#127EA9` | AA を満たす補正値（計算） |  | 計算 |

- 地の色は黒→白→黒→グレーと交互に切り替え、リズムを作る
- メッセージ部は黒から濃紺へ縦方向にグラデーションさせる
- 行動を促すボタンはすべて同じ青ベタ＋白文字で統一する
- 副次ボタンは白地に青枠、または水色ベタにして段階をつける
- 大見出しの頭文字だけを青のグラデーションにして強調する
- 公開前のコンテンツは全体を淡いグレーにトーンダウンする
- `button-primary` は文字 `#FFFFFF` × 背景 `#0097E0` のコントラスト比が 3.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#007DBA`、4.52:1）を使う。
- `button-outline` は文字 `#2D9ED8` × 背景 `#FFFFFF` のコントラスト比が 3.0:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#207DAD`、4.57:1）を使う。
- `button-sub` は文字 `#FFFFFF` × 背景 `#52C1ED` のコントラスト比が 2.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#127EA9`、4.58:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FVの手書き風コピー（太字イタリック調） | 装飾・ディスプレイ | Dela Gothic One | 900 | 56px | 1.15 | -0.02em |
| `headline-lg` | セクションの欧文大見出し | 欧文サンセリフ | Archivo | 800 | 36px | 1.1 | 0em |
| `headline-md` | トピックカードの和文タイトル | ゴシック | Noto Sans JP | 700 | 18px | 1.6 | 0.03em |
| `headline-sm` | 採用区分名・和文サブ見出し | ゴシック | Noto Sans JP | 700 | 13px | 1.5 | 0.02em |
| `body-lg` | 黒地のメッセージ本文（太字・広い行間） | ゴシック | Noto Sans JP | 700 | 12px | 2.6 | 0.05em |
| `body-md` | 説明文・ニュース本文 | ゴシック | Noto Sans JP | 500 | 12px | 1.9 | 0.03em |
| `note` | 英字の小ラベル（セクション名やカテゴリ） | 欧文サンセリフ | Montserrat | 500 | 9px | 1.4 | 0.08em |
| `label-button` | ボタンの英字・和文ラベル | 欧文サンセリフ | Archivo | 700 | 13px | 1.2 | 0.04em |

- 見出しは太い欧文を大きく置き、下に小さなグレーの和文を添える2段構成にする
- セクションの最上部に英字の小ラベルを置く
- メッセージ本文は短く改行し、広い行間で詩のように並べる
- 日付とカテゴリラベルは青の欧文で入れる
- 本文は左揃え、強調見出しだけを中央揃えにする
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SPは1カラム。イベントカードだけ2カラムのグリッドにする
- **本文ブロックの幅**: 画面幅の約 90%
- **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
- 左右の余白は約19pxで統一する
- 社員写真は画面端からはみ出す横スクロール列にする
- 採用区分は区切り線で分け、ボタンを2列で並べる
- セクションの切り替えは背景色の全幅ベタで行う
- 主CTAは本文幅いっぱい、または約65%幅で中央に置く

## Elevation & Depth

- 影は使わずフラットに作る
- FVのボタンは半透明の黒パネルにして背景から浮かせる
- 階層は背景色の切り替えと枠線で表す

## Shapes

- **角丸**: 小 4px ／ 中 6px ／ 大 8px。ボタンは角丸の長方形。
- **写真の切り抜き**: 角丸4〜6pxの横長矩形。人物写真は縦長に切り抜いて並べる
- **セクション境界**: 直線で背景色を切り替える。FVから黒地へはグラデーションでなじませる
- ボタンは角丸6pxの矩形にし、右端に矢印入りの小さな四角アイコンを置く
- 展開ボタンは青い正方形の＋アイコンにする
- 斜めの矢印モチーフで上昇感を表す

## Components

- **主CTAボタン**（`button-primary`）: 青ベタに白の太字ラベル。右端に矢印アイコンを置く
- **枠線ボタン**（`button-outline`）: 白地に青の細い枠と青文字。右に矢印アイコンを置く
- **水色サブボタン**（`button-sub`）: マイページなど補助的な導線に使う水色ベタのボタン
- **FV誘導パネル**（`hero-guide-panel`）: 半透明の黒パネル。英字見出し＋和文説明と、青い正方形の下矢印ボタンを組み合わせる
- **欧文＋和文見出し**（`section-heading`）: 太い欧文の大見出しと、その下の小さなグレー和文で作る見出し
- **番号付きトピックカード**（`topic-card`）: 写真の左上に括弧付きの番号を置き、下に青い英字ラベル・太字タイトル・＋ボタンを並べる
- **お知らせ項目**（`news-item`）: グレーのカードに青い日付と本文を入れ、右端に矢印を置く
- **イベントカード**（`event-card`）: 2列のカード。写真の下に青い対象ラベル、説明、太字の英字イベント名、矢印を順に置く
- **公開予定プレート**（`coming-soon`）: 淡いグレーにした写真の中央に、グレーの帯で公開予定の文言を載せる

## Do's and Don'ts

**Do**
- 黒地と白地を交互に置き、メリハリを出す
- 見出しは太い欧文と小さな和文のセットにする
- CTAの青は1色に絞り、すべての主ボタンで共通にする
- 写真はリアルな職場や人物を明るく清潔に写す
- メッセージ文は短く改行し、行間を広く取る

**Don't**
- 暖色やパステルを差し色に使わない
- ピル型ボタンや大きな角丸を使わない
- ドロップシャドウやベベルの立体表現を使わない
- 明朝体や丸ゴシックを混ぜない
- 黒地の本文を細いウェイトにしない

## Page Structure

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

1. **ファーストビュー**（挑戦的なスローガンで印象づける）: 青の粒子テクスチャに斜めの矢印を重ね、白い極太の手書き風コピーを中央に置く。下に半透明の黒い誘導パネルを置き、黒地へグラデーションでつなげる
2. **トップメッセージ**（企業の使命と求める姿勢を語る）: 黒から濃紺へのグラデーション地。英字の小ラベル、写真、白い太字の短文を広い行間で長く続ける
3. **トピックス**（企業の魅力を記事形式で紹介する）: 白地に、頭文字が青グラデの巨大な欧文見出しを置く。番号付きの写真カードを縦に並べ、最後にOPENボタンを置く
4. **お知らせ**（更新情報を伝える）: 欧文見出しの下に、グレーのカードで日付と本文を並べる
5. **企業紹介**（会社概要ページへ誘導する）: 社屋と緑の全幅写真に白文字を重ね、青ボタンを置く
6. **社員紹介**（働く人の魅力を伝える）: 黒地。人物写真を横スクロールの列にし、説明文と青ボタンを添える
7. **準備中コンテンツ**（今後公開するページを予告する）: 見出し・写真・本文をすべて淡いグレーにし、公開予定のプレートを重ねる
8. **イベントガイド**（インターンなどのイベントへ誘導する）: グレー地。中央揃えの大見出しの下に2列のイベントカードを並べ、幅いっぱいの青CTAで締める
9. **採用情報**（採用区分ごとのエントリーへ導く）: 白地。区切り線で区分を分け、枠線・青ベタ・水色の3種のボタンで導線を分ける
10. **関連リンクとフッター**（関連コンテンツとサイト内の回遊を促す）: グレー地にバナーを横スクロールで並べ、チャコールのフッターにナビとロゴコピーを置く

## Imagery

- 職場や工場で議論・作業する社員を、明るく自然光の多い写真で撮る
- 人物写真は白や明るい背景の前で笑顔のバストアップにし、縦長で揃える
- 都市夜景・地球・社屋など、スケールの大きい景観写真を青みに寄せて使う
- FVは青のグリッター粒子と半透明の斜めの矢印で構成するグラフィックにする
- 線画の群像イラストは補助バナーにだけ使う
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- PCではヘッダー右上にENTRY・MY PAGEの青ボタンとメニューを固定する
- PCのメッセージ部は左にテキスト、右に写真の2カラムにする
- PCのトピックスは大小の写真を左右交互に千鳥配置する
- PCではイベントカードを4列、社員写真を6列以上の横並びにする
- PCの採用情報は左に見出し、右に区分の行とボタン3列を置く
- 準備中の2セクションはPCで横並びの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-30cac5a9`（元 LP の URL から採番）
- **元 LP**: https://www.daikin.co.jp/recruit
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-20、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、掲載削除を希望される場合、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。