---
version: alpha
name: Corporate Blue Recruit LP with Orange Accent
description: 写真に青のオーバーレイをかけたファーストビューと、太い欧文の大見出し、グレーと青の帯を交互に置くセクション構成でできた採用 LP。オレンジは小見出しの点、数字の図版、エントリー帯だけに使い、誠実さと勢いを両立させている。
colors:
  primary: '#0055D4'
  secondary: '#068DE4'
  background: '#FEFFFF'
  background-alt: '#E5E6EA'
  dark-section: '#172234'
  on-dark: '#FFFFFF'
  cta: '#E85B25'
  on-cta: '#FFFFFF'
  accent-1: '#E8622A'
  text: '#20324C'
  text-body: '#333333'
  surface: '#FEFEFE'
  line: '#D7D8DB'
  accent-1-accessible: '#CC4C16'
  cta-accessible: '#CE4916'
typography:
  display:
    fontFamily: Montserrat
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Montserrat
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: 0.03em
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.05em
  accent:
    fontFamily: Montserrat
    fontSize: 11px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0.1em
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.05em
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 400
    lineHeight: 2.0
    letterSpacing: 0.05em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.03em
  label-button:
    fontFamily: Montserrat
    fontSize: 11px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0.08em
rounded:
  sm: 2px
  md: 4px
  lg: 8px
  full: 999px
spacing:
  unit: 8px
  card: 16px
  section: 72px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text-body}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  hero-overlay:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.display}'
    height: 420px
  section-heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    height: 60px
  interview-card:
    backgroundColor: '{colors.secondary}'
    typography: '{typography.headline-sm}'
    height: 240px
  number-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.accent-1}'
    typography: '{typography.headline-lg}'
    rounded: '{rounded.sm}'
    height: 130px
  link-more:
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    rounded: '{rounded.full}'
    height: 24px
  job-list:
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 40px
  entry-banner:
    backgroundColor: '{colors.cta}'
    textColor: '{colors.on-cta}'
    typography: '{typography.headline-lg}'
    rounded: '{rounded.sm}'
    height: 140px
  footer-dark:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.note}'
    height: 360px
---

# DESIGN.md — 青×白とオレンジ差し色の採用サイト LP（Corporate Blue Recruit LP with Orange Accent）

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

## Overview

- **業種**: 求人・採用 ／ **雰囲気**: 信頼・誠実、クール・先進的、清潔・爽やか
- **キーワード**: 青のデュオトーン写真・欧文の太い大見出し・グレーの帯・オレンジの差し色・数字のインフォグラフィック・ネイビーのフッター
- **地の質感**: フラットな面が基本。数字セクションは青のグラデーションに細い線の数字を透かして入れ、フッターには薄い曲線模様を敷く。
- **形**: 四角を基本にして角丸は小さめ。リンクは丸い矢印アイコンを添えたテキストで、帯はところどころ画面幅より狭いブロックにして左右に余白を残す。
- **温度感**: 青が主体の涼しい印象に、オレンジで少しだけ温かみを足す。

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#0055D4` | ブランドの青（数字セクションの地、FV のオーバーレイ） | 12% | 画素の実測 |
| `secondary` | `#068DE4` | 明るい青（グラデーションの終点、キャプションの帯） | 8% | 画素の実測 |
| `background` | `#FEFFFF` | 基本の白地 | 30% | 画素の実測 |
| `background-alt` | `#E5E6EA` | 薄いグレーの帯 | 20% | 画素の実測 |
| `dark-section` | `#172234` | フッターのネイビー | 12% | 画素の実測 |
| `on-dark` | `#FFFFFF` | 暗い地の上の文字 | 1% | 画素の主要色に補正 |
| `cta` | `#E85B25` | エントリー帯のオレンジ | 3% | 画素の実測 |
| `on-cta` | `#FFFFFF` | エントリー帯の上の文字 | 0% | 画素の主要色に補正 |
| `accent-1` | `#E8622A` | 英字ラベルの文字・見出し横の点・図版の線 | 1% | 推定 |
| `text` | `#20324C` | 見出しの文字（ネイビー） | 2% | 画素の主要色に補正 |
| `text-body` | `#333333` | 本文の文字 | 2% | 推定 |
| `surface` | `#FEFEFE` | 数字カードの白い面 | 4% | 画素の実測 |
| `line` | `#D7D8DB` | リストの区切り線 | 0% | 画素の主要色に補正 |
| `accent-1-accessible` | `#CC4C16` | AA を満たす補正値（計算） |  | 計算 |
| `cta-accessible` | `#CE4916` | AA を満たす補正値（計算） |  | 計算 |

- 地は白とグレーの帯を交互に置き、中盤に 1 か所だけ青グラデーションの帯を入れる。
- オレンジは英字ラベル、見出し横の点、数字の図版、エントリー帯に限って使う。
- 写真の上は青のオーバーレイで統一し、白文字を載せる。
- 人物写真のキャプションは青の帯に白文字で載せる。
- フッターはネイビーで締め、文字は白と薄いグレーにする。
- `number-card` は文字 `#E8622A` × 背景 `#FEFEFE` のコントラスト比が 3.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#CC4C16`、4.51:1）を使う。
- `entry-banner` は文字 `#FFFFFF` × 背景 `#E85B25` のコントラスト比が 3.53:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#CE4916`、4.58:1）を使う。

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | ファーストビューの英字ページタイトル | 欧文サンセリフ | Montserrat | 600 | 40px | 1.1 | 0.02em |
| `headline-lg` | 各セクションの英字大見出し | 欧文サンセリフ | Montserrat | 600 | 32px | 1.15 | 0.03em |
| `headline-md` | メッセージ見出し（和文） | ゴシック | Noto Sans JP | 700 | 20px | 1.5 | 0.05em |
| `accent` | 英字の小ラベルとキャッチの斜体 | 欧文サンセリフ | Montserrat | 600 | 11px | 1.4 | 0.1em |
| `headline-sm` | 大見出しの下に添える和文の小見出し | ゴシック | Noto Sans JP | 700 | 11px | 1.4 | 0.05em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 2.0 | 0.05em |
| `note` | 社員名・入社年などの注記 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.03em |
| `label-button` | もっと見る系のリンク | 欧文サンセリフ | Montserrat | 600 | 11px | 1.0 | 0.08em |

- 大見出しは英字を大きく置き、すぐ下に和文の小見出しを小さく添える。
- 英字見出しの左上にはオレンジの小さな点を付ける。
- 本文は行間を 2 前後と広く取り、中央または左に揃える。
- 数字は太く大きくして、単位は小さく添える。
- ファーストビューのキャッチは斜体寄りの白文字で 2 行にする。
- 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

## Layout

- **カラム**: SP は 1 カラム。PC は見出しと本文の 2 カラム、カードは 4 列、数字は 3 列＋3 列
- **本文ブロックの幅**: 画面幅の約 88%
- **余白**: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
- セクションごとに地の色を切り替え、上下に広い余白を取る。
- グレーの帯は片側を画面端から離し、ずらして配置する。
- PC は見出しを左、説明を右に置く。
- 人物カードは上下に段差を付けて並べる。
- 画像の脇の見出しは左右を交互に入れ替える。

## Elevation & Depth

- 基本は影を付けずフラットにする。
- 数字カードは青の地に白い面を置くだけで、影はごく薄くする。
- 人物カードの写真にも影は付けない。

## Shapes

- **角丸**: 小 2px ／ 中 4px ／ 大 8px。ボタンはピル型。
- **写真の切り抜き**: 人物は縦長の長方形に収め、背景は暗いグレーのスタジオ調にする。風景写真は四角で重ねて並べる。
- **セクション境界**: 直線で区切る。帯を画面幅より狭いブロックにして段差を作る。
- ナビの問い合わせボタンだけピル型の枠線にする。
- リンクには丸い枠の矢印アイコンを添える。
- エントリー帯は角丸を小さく付けたブロックにする。

## Components

- **青オーバーレイのファーストビュー**（`hero-overlay`）: 複数の写真をタイル状に並べて青を重ね、英字の大タイトルとキャッチを白で載せる。
- **英字大見出し＋和文小見出し**（`section-heading`）: 左上にオレンジの点を付けた英字の見出しと、その下に和文の小見出しを置く。
- **社員インタビューカード**（`interview-card`）: 暗いグレー背景の縦長人物写真の下端に、青い帯で 2 行のコピーを重ね、その下に名前と入社年を添える。
- **数字のインフォカード**（`number-card`）: 白いカードにオレンジの線画アイコンと大きな数字を置き、青グラデーションの帯の上に並べる。
- **もっと見るリンク**（`link-more`）: 小さな英字に丸い枠の矢印アイコンを添えたテキストリンク。
- **番号付きの職種リスト**（`job-list`）: 01 などの番号、職種名、右端の矢印を並べ、行の間を細い線で区切る。
- **エントリー帯**（`entry-banner`）: オレンジのグラデーションに写真を淡く重ね、左にコピー、右に英字のエントリーと外部リンクのアイコンを置く。
- **ネイビーのフッター**（`footer-dark`）: ロゴ、会社情報、英字と和文を併記したサイトマップ、ページトップへ戻るボタンを置く。

## Do's and Don'ts

**Do**
- 写真は青のオーバーレイか白背景でトーンを揃える。
- 英字の大見出しと和文の小見出しを必ずセットで使う。
- 数字は図版とセットで大きく見せる。
- オレンジは要所だけに少量使う。
- 白とグレーの帯を交互に置き、リズムを作る。

**Don't**
- オレンジを本文や広い背景に使わない。
- 角丸の大きいカードやポップなイラストは使わない。
- 強い影や立体的な装飾は付けない。
- 1 つのセクションに青とオレンジの面を同じ量で並べない。
- 本文の行間を詰めない。

## Page Structure

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

1. **ファーストビュー**（採用ページであることと理念を伝える）: 青オーバーレイの写真タイルに、英字の大タイトルと 2 行のキャッチを白で載せる。
2. **メッセージ**（会社の想いを伝える）: 白地の中央に英字ラベル、和文見出し、短い文を何行か重ねて置く。
3. **社員インタビュー**（働く人の姿を見せる）: グレーの帯の上に人物カードを 4 枚、段差を付けて並べる。
4. **数字で見る会社**（定量的な情報で安心感を出す）: 青グラデーションの帯に、白い数字カードを 3 列 2 段で並べる。
5. **仕事・文化紹介**（働き方と価値観を紹介する）: 左に写真を重ねて置き、右に英字見出しと説明、リンクを置く。
6. **募集要項**（職種の一覧へ誘導する）: グレー地の左に番号付きの職種リスト、右に集合写真を置く。
7. **エントリー CTA**（応募へ誘導する）: オレンジのグラデーションの横長帯に、写真を淡く重ねる。
8. **フッター**（会社情報とサイト内の導線を置く）: パンくずの下に、ネイビー地で会社情報とサイトマップを並べる。

## Imagery

- 人物はスーツかオフィスカジュアルで、暗いグレーのスタジオ背景で撮った上半身にする。
- ファーストビューはオフィスや街の写真を青のデュオトーンにする。
- アイコンはオレンジの細い線画（ビル・円グラフ・ヤシの木など）にする。
- 数字セクションの背景には、細い線の大きな数字を透かして入れる。
- 集合写真は白背景で明るく撮る。
- 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

## Responsive Behavior

- SP では 2 カラムを縦に積み、見出しを先、本文を後にする。
- 人物カードは SP で 2 列にするか、横スクロールにする。
- 数字カードは SP で 2 列にする。
- グローバルナビは SP でハンバーガーメニューにする。
- 英字の大見出しは SP で 32px 前後まで縮める。

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