人が主役の採用 Recruit People

DESIGN.md

DESIGN.md をコピーDESIGN.mdtokens.css

https://3pt.co.jp/design-library/md/recruit-people/DESIGN.md

# DESIGN.md — 人が主役の採用 / recruit-people

> **使い方**: このファイルをプロジェクトに置き、AIに
> 「DESIGN.md に従って◯◯のサイトを作って」と指示してください。
> ライセンス: 商用利用可・改変可・クレジット不要（AIっぽくないデザイン見本帳 / サードパーティートラスト）

## 1. コンセプト

新卒採用サイトの「型」を外す。中央見出し＋ボタン2つのヒーローも、集合写真＋ロゴ＋数字
カウントアップ＋3つの募集職種カードという定型も使わない。**主役は人の写真と言葉**。
丸ゴシックの親しみと、少し崩したグリッド（写真が段をまたぐ、名前タグが写真からはみ出す、
数字が斜めに置かれる）で、採用サイトに固有の躍動感をつくる。ビビッドな4色は「元気の演出」
ではなく、橙＝CTA/情熱、黄・緑・青＝職種タグと章の色分けという**役割**を持たせて使う。

**キーワード**: 人 / 声 / 躍動 / 親しみ（幼稚にしない） / 崩したグリッド
**この見た目が向く場面**: 新卒・中途採用サイト、社員紹介、企業カルチャーページ

## 2. タイポグラフィ

- 和文見出し: Zen Maru Gothic / ウェイト 700。丸いが締まった組みにする
  （級数と余白で大人の親しみを出す。ウェイト400以下は使わない＝線が細く丸みが弱まり幼稚に見える）
- 和文本文: Zen Maru Gothic / ウェイト 500 / サイズ 16px / 行間 1.9 / 字間 0.01em
- 欧文・数字: Fredoka / ウェイト 600〜700。数値（統計・時刻・号数）とラテン語の固有ラベルに使う。
  本文和文中に欧文を混植しない（Fredokaは数字・ラベル専用）
- 見出しスケール: h1 `clamp(34px, 6vw, 60px)` / h2 `clamp(26px, 4vw, 38px)` / h3 22px /
  本文 16px（比率を保ったまま画面幅で滑らかに変化させる。刻み跳躍させない）
- 特記: 見出しは元気だが「！」を連続させない（1見出しにつき最大1つ、多くの見出しは無しでよい）。
  空語のキャッチ（「〜を、もっと。」等）を書かない。具体的な動作・数字・固有名詞で書く

## 3. カラー（vivid-multi・役割分担）

生成りの地に4色。**橙＝CTA/情熱の1色、黄・緑・青＝職種タグと章の色分けという役割固定**。
信号色トリオの意味なき併用（バッジや装飾への機械適用）をしない。

| 役割 | 値 | 使用比率の目安 |
|---|---|---|
| 地（ベース） | #fbf7ef | 55%以上 |
| 地（節替え） | #f5efe0 | — |
| 文字（主・墨） | #2c2a28 | 30% |
| 文字（弱） | #6b6560 | — |
| 橙（CTA・情熱・見出しの点） | #ee7a30 | 8%以下 |
| 橙ホバー | #e8752c | — |
| 黄（商品開発タグ・数字の一部） | #f2c14e | 5%以下 |
| 緑（生産タグ・数字の一部） | #7fae5a | 5%以下 |
| 青（営業タグ・数字の一部） | #5b9bd1 | 5%以下 |
| 罫線 | #e4dcc9 | — |

**色の役割は固定する（勝手に増やさない）**: 橙＝CTAボタン・見出し中の点・主張したい1語のみ。
黄＝商品開発職に関するタグ・引用・数字。緑＝生産職に関するタグ・引用・数字。
青＝営業職に関するタグ・引用・数字。この4色以外の彩度色（赤・紫等）を追加しない。

**両方向のコントラスト実測（WCAG相対輝度式、AA=4.5:1基準）**——面に文字を載せる場合と、
文字色として転用する場合の両方を実測し、下記2つのルールに固定する。個々の数値は
§9 の `tokens.css` コメントにも記載する。

1. **橙・黄・緑・青を背景（ボタン・タグ・パネル）に使う場合、文字は必ず `--color-ink`**。
   クリーム/白文字を4色いずれの背景にも使わない（実測 2.55〜2.93:1 でAA未達）。
   墨文字なら橙5.08:1・黄8.52:1・緑5.52:1・青4.80:1で全てAA適合。
2. **橙・黄・緑・青を地（#fbf7ef）の上で文字色として使う場合、必ず `-text` の濃色版を使う**
   （素の彩度色は地の上で2.6〜3.0:1しかなくAA未達）。
   `--color-orange-text` #a84717（5.49:1）/ `--color-yellow-text` #8a6a15（4.73:1）/
   `--color-green-text` #3f5f2a（6.82:1）/ `--color-blue-text` #1f4f74（8.09:1）。

## 4. レイアウト・余白（broken-grid・balanced）

- コンテンツ最大幅: 1240px / 12カラムグリッド、gutter 20px（要素はカラムに強く縛られない。
  意図的にカラムをまたいだり、はみ出させたりしてよい）
- グリッドの性格: **均等3カラムのカードを作らない**。写真は縦2段をまたぐ、名前タグは
  写真の角から外にはみ出す、統計の数字は要素ごとに異なる角度（-3deg 〜 +2deg）で
  わずかに傾く。傾きは統計数字と一部の合図的な帯のみに使い、本文・見出しは傾けない
- セクション間余白: 96px 基準（モバイル 56px）/ 要素間は 8px の倍数
- ヒーローの構成: **中央寄せ＋ボタン2つの定型を作らない**。大きな写真（1人〜少人数の
  「働く人」）を画面の大部分に敷き、その上に食い込む形で色面パネル（橙）を左下寄りに
  非対称配置する。パネルには「採用メッセージの一文（数字ではなく言葉）」と
  **CTAボタンは1つだけ**（「エントリー」）。パネルは写真の端からはみ出す・写真の一部に
  重なることで「崩し」を作る（§9 コード例参照）
- 社員インタビューは**3枚横並びの角丸カードにしない**。写真＋名前タグ＋一言＋本文の
  「誌面」として組み、3人を左右交互（写真が奇数番目は左・偶数番目は右）に配置し、
  写真は縦2行分の高さを取る非対称グリッドにする（§9 コード例参照）
- 「一日の流れ」は縦のタイムラインとして組み、1箇所だけ写真を行をまたいで差し込む
  （タイムラインの罫線を写真が突き破ってよい＝崩しの一手）
- 「数字で見るまるみ」は不揃いな配置で数字を置く（等間隔グリッドにしない。数字ごとに
  わずかに傾け、余白の取り方を変える）。**数字はカウントアップさせない（静止で置く）**

## 5. コンポーネントの質感

- ヘッダー・ナビゲーション: 地色・sticky・下端1px罫線（`--color-line`）。ナビリンクは
  通常時 `--color-ink`、ホバーで橙の下線が左から伸びる（0.18s）。本文中のリンクとは別扱いで、
  本文リンクは常時下線＋ホバーで橙文字（`--color-orange-text`、実測5.49:1）
- 角丸: 写真・パネル・カード相当の面 24px / タグ・ボタンは pill（999px） / 小チップ 12px。
  **極端な丸み（40px超の角丸や完全な円形カード）にしない**——丸ゴシック＋大角丸の
  重ねがけは幼稚に振れるため、角丸は上記の値に固定する
- 影: 使わない（box-shadow 不使用）。奥行きは写真の重なり・パネルの色面・オフセット配置で作る
- ボタン: pill形状。主CTA「エントリー」は `--color-ink` 地に `--color-bg` 文字
  （実測14:1）、ホバーで `--color-orange` 地＋`--color-ink` 文字（5.08:1）に反転。
  副CTA「マイページ登録」は輪郭線ボタン（1.5px `--color-ink` 罫線・透明地・墨文字）。
  **サイト内のCTAボタンは「エントリー」と「マイページ登録」の2種のみ**（それ以外の誘導は
  テキストリンク＋矢印）。**pillボタンは必ず `white-space: nowrap` を付ける**
  （ヘッダー内など横幅が詰まる場所で文字が2行に折り返すと、pill形状が円形に潰れて
  見た目が壊れる。ヘッダーCTAを内包する親要素にも `flex-shrink: 0` を付け、
  ロゴ側の伸縮に押し潰されないようにする。375px幅程度の狭幅では、ヘッダーCTAの
  ボタンだけ padding/font-size を一段階小さくする専用メディアクエリを用意すること）
- カード的要素: 3枚横並びの角丸カード＋影＋アイコンは**使わない**（slop の定型）。
  インタビューは誌面レイアウト（§4）、募集要項は罫線区切りの定義リスト/表で組む
- フォーム要素: 本デモでは使用しない（エントリーはボタン誘導のみ）
- 画像の扱い: 角丸24px・枠なし。CSS `filter: saturate(1.02) brightness(1.02)` を
  全写真に統一適用し明るく整える（§9 コード例）。写真に色付きオーバーレイやグラデーションを
  かけない。名前タグ（`.tag`）は写真の角に重ねて配置し、写真の外に一部はみ出させる
- アクセント色の適用範囲: §3 の役割表に限定。特に橙は「CTAボタン・見出し内の1語・
  セクション番号のドット」以外に使わない（面として全面に敷かない）

## 6. モーション（rich）

- 量: rich。ただし**数字のカウントアップは禁止**（静止で置き、強さは級数と傾きで出す）。
  自動カルーセルも禁止
- 役割差＋階段ディレイ: 写真（`.reveal--photo`）は0.9s・遅延なしで先頭に大きくゆっくり
  現れる（`opacity` + `translateY(28px)`）。見出し（`.reveal--head`）は0.6s・80ms遅延。
  本文・タグ等の小要素（`.reveal--body`）は0.45s・セクション内インデックス×70ms
  （最大320msで打ち止め）の階段ディレイ。**全要素を同じ0.6sで一律フェードさせない**
- 名前タグの追従: `.tag` は対応する写真の `.reveal--photo` より **180ms 遅れて**
  ふわっと現れる（写真が先に定着し、タグが後から追いかける＝「少し遅れて追従する」の実装）
- スクロール連動の常時アニメーション（パララックス等）は使わない。動きは要素の初出現時のみ
- `prefers-reduced-motion: reduce` では全 `.reveal` 系要素を即時表示（transitionなし）にする

## 7. 写真・イラスト・図版

- 写真はCC0/PDのみ（Wikimedia Commons）。人物写真を主役に大きく使う（働く人・手元・
  オフィス/工場・チームの風景）。全写真に `filter: saturate(1.02) brightness(1.02)` を
  統一適用（§9）。第三者の実在ロゴ・団体名・所属標章がプリントに写り込む場合は、
  該当箇所のみ `filter: blur()` した領域を合成して読めなくする（人物そのものは加工しない。
  詳細は §9 のブラー合成コード例）
- アイコンは使う場合、線幅を統一した自作インラインSVG線画のみ（絵文字・既製アイコン
  セットの寄せ集めを禁止）
- 引用符・装飾記号は書体内蔵のグリフで足りる範囲にとどめ、絵文字装飾を加えない

## 8. 禁止事項（must not）

- Inter / Roboto / Arial / system-ui をデフォルトで使わない（Zen Maru Gothic / Fredoka で組む）
- 紫〜青の装飾グラデーションを一切使わない（背景・文字・ボタンすべて）。box-shadow・
  backdrop-filter（グラスモーフィズム）を使わない
- 中央寄せの定型ヒーロー（特大見出し＋サブコピー＋ボタン2つ＋下に画像）を作らない。
  ヒーローのCTAは1つだけ（§4・§5）
- 「集合写真＋ロゴ＋数字カウントアップ＋3つの募集職種カード」の採用テンプレに堕ちない。
  数字は静止で置く（カウントアップ禁止）。募集職種は表/定義リストで示し、角丸カード化しない
- 社員紹介を3枚横並びの均等角丸カード＋影にしない（§4・§5 の誌面レイアウトを使う）
- 絵文字をアイコン・装飾として使わない（🚀✨🎯 等）。丸ゴシック＋絵文字の幼稚な組み合わせをしない
- 橙・黄・緑・青の背景にクリーム/白文字を置かない（§3 の実測ルールに違反する。実測2.5〜2.9:1でNG）
- 橙・黄・緑・青を地の上で素のまま文字色に使わない（`-text` の濃色版を使う。§3）
- 4色を信号色のように意味なく併用しない（各色は§3の役割固定を厳守。バッジの装飾色として
  機械的に使い回さない）
- 傾き（rotate）を本文・見出し・写真に使わない（統計数字と§4で指定した帯のみに限定し、
  傾きは-3deg〜+2degの範囲に収める）
- 自動カルーセル・無限ループアニメーション・数字カウントアップを使わない
- 「AI-Powered」「次世代」「シームレス」「圧倒的」「革新」等の空語を使わない

## 9. 実装ノート

```css
/* tokens.css — この変数セットをそのまま使うこと */
:root {
  --color-bg: #fbf7ef;
  --color-bg-alt: #f5efe0;
  --color-ink: #2c2a28;
  --color-ink-weak: #6b6560;

  --color-orange: #ee7a30;        /* 背景専用。文字には使わない */
  --color-orange-hover: #e8752c;  /* 墨文字ホバー時 4.77:1 */
  --color-orange-text: #a84717;   /* 地の上で文字として使う場合はこちら（5.49:1） */

  --color-yellow: #f2c14e;        /* 背景専用 */
  --color-yellow-text: #8a6a15;   /* 地の上の文字用（4.73:1） */

  --color-green: #7fae5a;         /* 背景専用 */
  --color-green-text: #3f5f2a;    /* 地の上の文字用（6.82:1） */

  --color-blue: #5b9bd1;          /* 背景専用 */
  --color-blue-text: #1f4f74;     /* 地の上の文字用（8.09:1） */

  --color-line: #e4dcc9;

  /* 面に文字を載せる時は必ずこちらを使う（実測 WCAG AA 4.5:1 以上） */
  --on-orange: var(--color-ink);   /* 墨 on 橙 = 5.08:1 */
  --on-yellow: var(--color-ink);   /* 墨 on 黄 = 8.52:1 */
  --on-green:  var(--color-ink);   /* 墨 on 緑 = 5.52:1 */
  --on-blue:   var(--color-ink);   /* 墨 on 青 = 4.80:1 */
  --on-ink:    var(--color-bg);    /* 地 on 墨 = 13.38:1 */

  /* 変数には総称ファミリを含めない */
  --font-heading: "Zen Maru Gothic";
  --font-body: "Zen Maru Gothic";
  --font-latin: "Fredoka";

  --space-unit: 8px;
  --radius: 24px;
  --radius-pill: 999px;
  --radius-sm: 12px;
  --max-width: 1240px;
  --gutter: 20px;
}
```

**コントラスト実測一覧（WCAG相対輝度式で全数算出。この一覧をもとに §3・§8 の禁止を導いた）**

```
ink        on bg        = 13.38:1   ok（本文・見出し）
ink-weak   on bg         = 5.38:1   ok（弱テキスト）
orange     on bg         = 2.63:1   NG（文字に使わない）
orange-text on bg        = 5.49:1   ok
ink        on orange     = 5.08:1   ok（ボタン・パネル文字はこちら）
bg(cream)  on orange     = 2.77:1   NG（白文字禁止）
ink        on yellow     = 8.52:1   ok
yellow-text on bg        = 4.73:1   ok
ink        on green      = 5.52:1   ok
green-text on bg         = 6.82:1   ok
bg(cream)  on green      = 2.55:1   NG
ink        on blue       = 4.80:1   ok（ぎりぎり。14px以上で使用し11px未満に使わない）
blue-text  on bg         = 8.09:1   ok
bg(cream)  on blue       = 2.93:1   NG
ink        on orange-hover(#e8752c) = 4.77:1   ok
```

- フォント読み込み:
  `https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Zen+Maru+Gothic:wght@400;500;700&display=swap`
- 数値・時刻・号数は必ず `var(--font-latin)` で組む

### 写真フィルタ（統一トーン。全 `<img>` に適用）

```css
img.photo { filter: saturate(1.02) brightness(1.02); border-radius: var(--radius); }
```

### 第三者ロゴ・団体標章のぼかし合成（写真に写り込む場合）

CC0/PD写真に第三者の団体名・ロゴがプリントされている場合、人物・情景はそのまま使い、
該当箇所だけ範囲を絞って `GaussianBlur` を合成する（画像編集時点で処理し、CSSでのランタイム
ぼかしにはしない＝読めそうで読めてしまう半端なぼかしを避けるため強めに掛けて書き出す）。

```python
# 編集時（書き出し前）に適用する例。対象範囲は矩形＋角丸マスクで用意し、
# 元画像に対して十分な半径（radius 18〜22px程度）でGaussianBlurしたものを合成する
from PIL import Image, ImageFilter, ImageDraw
im = Image.open("photo.jpg").convert("RGB")
blurred = im.filter(ImageFilter.GaussianBlur(22))
mask = Image.new("L", im.size, 0)
draw = ImageDraw.Draw(mask)
draw.rounded_rectangle((x0, y0, x1, y1), radius=60, fill=255)  # ロゴ/文字の範囲
mask = mask.filter(ImageFilter.GaussianBlur(35))  # マスク自体をぼかし、境界を目立たなくする
out = Image.composite(blurred, im, mask)
```

### ヒーロー：写真に食い込む非対称パネル（中央寄せ定型の代替）

```html
<section class="hero">
  <img class="photo hero-photo" src="…" alt="作業台で先輩社員と話す新入社員">
  <div class="hero-panel reveal reveal--head">
    <p class="hero-eyebrow">まるみ食品 新卒採用2027</p>
    <h1>この春入った一年目が、<br>来年の新商品を決める。</h1>
    <a class="btn btn-primary" href="#entry">エントリー</a>
  </div>
</section>
```

```css
.hero { position: relative; overflow: hidden; padding: 0; }
/* padding:0 は必須。この見本は汎用ルール section { padding: 96px 0 } を使うため、
   .hero に上書きがないと写真の上下に地色/墨色の無地の帯が生まれてしまう。
   実装後は .hero と写真ラッパーの top を getBoundingClientRect で比較し、差が0(隙間なし)
   であることをデスクトップ・モバイル両方で確認すること */
.hero-photo { width: 100%; height: clamp(420px, 78vh, 760px); object-fit: cover; border-radius: 0; }
.hero-panel {
  position: absolute; left: 0; bottom: 40px;
  width: min(560px, 86vw);
  background: var(--color-orange); color: var(--on-orange);
  padding: 32px 32px 36px; border-radius: 0 var(--radius) var(--radius) 0;
  margin-left: -4px; /* 写真の左端からわずかに食み出す */
}
.hero-panel .btn-primary { background: var(--color-ink); color: var(--on-ink); }
.hero-panel .btn-primary:hover { background: var(--color-bg); color: var(--color-ink); }
```

### 社員インタビュー：誌面レイアウト（3枚角丸カード禁止の実装）

```html
<article class="profile profile--left">
  <div class="profile-photo-wrap reveal reveal--photo">
    <img class="photo" src="…" alt="商品開発部の宮下さん">
    <span class="tag tag--yellow reveal reveal--tag">商品開発部 ／ 入社3年目</span>
  </div>
  <div class="profile-body">
    <p class="profile-quote">「これ、まるみっぽくない」と言われた試作品が、いちばん売れました。</p>
    <p class="profile-name">宮下 陽菜</p>
    <p class="profile-text">…本文…</p>
  </div>
</article>
```

```css
.profile { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.profile--left  { grid-template-areas: "photo body"; }
.profile--right { grid-template-areas: "body photo"; }
.profile--left  .profile-photo-wrap { grid-area: photo; }
.profile--right .profile-photo-wrap { grid-area: photo; }
.profile-photo-wrap { position: relative; grid-row: span 2; }
.tag {
  position: absolute; left: 20px; bottom: -16px;
  padding: 8px 18px; border-radius: var(--radius-pill);
  font-family: var(--font-latin); font-weight: 600; font-size: 13px;
}
.tag--yellow { background: var(--color-yellow); color: var(--on-yellow); }
.tag--green  { background: var(--color-green);  color: var(--on-green); }
.tag--blue   { background: var(--color-blue);   color: var(--on-blue); }
/* タグは写真の下端から-16pxはみ出す＝崩しグリッドの合図。3人とも同じ側に固定しない */
```

### 統計：静止・不揃いな傾き（カウントアップ禁止の代替）

```html
<div class="stat" style="--tilt:-2.4deg;">
  <p class="stat-num">24<span class="stat-unit">/41</span></p>
  <p class="stat-label">過去5年の新商品のうち、入社5年目以下の発案数</p>
</div>
```

```css
.stat { transform: rotate(var(--tilt, 0deg)); }
.stat-num { font-family: var(--font-latin); font-weight: 700; font-size: clamp(44px, 6vw, 72px); color: var(--color-ink); }
/* JSでのカウントアップ・setIntervalは使わない。数値は常にHTMLに静止テキストとして書く */
```

### モーション：役割差＋階段ディレイ＋タグの遅延追従

```js
function isReducedMotion() {
  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
}

var io = new IntersectionObserver(function (entries) {
  entries.forEach(function (entry) {
    if (!entry.isIntersecting) return;
    var el = entry.target;
    var idx = Number(el.dataset.idx || 0);
    var extraDelay = el.classList.contains('reveal--tag') ? 180 : 0; // タグは180ms遅れて追従
    var stepDelay = Math.min(idx * 70, 320);
    el.style.transitionDelay = (stepDelay + extraDelay) + 'ms';
    el.classList.add('is-visible');
    io.unobserve(el);
  });
}, { threshold: 0.2 });

document.querySelectorAll('.reveal').forEach(function (el, i) {
  if (isReducedMotion()) { el.classList.add('is-visible'); return; }
  el.dataset.idx = el.dataset.idx || (i % 5);
  io.observe(el);
});
```

```css
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s ease; }
.reveal--photo { transition-duration: .9s; }
.reveal--head  { transition-duration: .6s; }
.reveal--body  { transition-duration: .45s; }
.reveal--tag   { transition-duration: .5s; transform: translateY(14px); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}
```