RecruitJapanPicked 2026.09.26

コクヨ新卒採用サイト KOKUYO RECRUITING

採用のWebデザイン参考 — 文具・オフィス家具メーカー

サイトを見るrecruit.kokuyo.com

recruit.kokuyo.com開く ↗

コクヨ新卒採用サイト KOKUYO RECRUITINGのPC版ファーストビュー

サイトを開く ↗

コクヨ新卒採用サイト KOKUYO RECRUITINGのスマホ版ファーストビュー

Editor's note — 編集部の視点

漢字の中に、白黒写真の人がはまり込んでる。

コクヨの新卒採用サイト「KOKUYO RECRUITING」は、文字の一部をモノクロ写真に置き換えたコピーと、画面を切り裂く赤い楔で、「誰よりも先に試す」姿勢を形にしている。

LunaType & Whitespace

FVであれだけ太く組んでおいて、中の見出しは細身のゴシックで静かに置く。英字ラベルは赤く小さく。叫ぶのは一回だけ、あとは余白に任せる。わかってるじゃない。……いいね！！

1「拓」の中には地球、「会」には階段。文字の一部を写真に差し替え、コピーそのものを一枚の絵にする
2赤い楔はプロジェクトストーリー6本とCEOメッセージで繰り返す。1つの形が、ページ全体の合言葉になる
3写真はすべてモノクロ、色は赤だけ。コーポレートカラーを一点に絞るから、楔の勢いが立つ

Color

コクヨ新卒採用サイト KOKUYO RECRUITINGの配色

Typography

使用フォントと無料の代替

英字ロゴ・ナビ・ラベル

Aa あア

使用: Gotham
代替: Montserrat

和文見出し・本文

Aa あア

使用: Yu Gothic
代替: Noto Sans JP

実測タイプスケール1440px幅 · 2026-09-26 計測

見出しKatapick 型12px · 1.17 · 700
本文The quick brown fox — 参考を型にする16px · 1.5 · 300
ボタンKatapick 型14px · 1 · 700
注釈The quick brown fox — 参考を型にする10px · 1 · 500

Structure

ページ構成（上から順）

01
ヘッダー
左に「KOKUYO RECRUITING」、右にMYPAGE・INTERNSHIPと斜線3本のメニューボタン。
02
ヒーロー
淡い世界地図の上に「誰よりも先に試し、社会の先を拓け。」を太いゴシックで組む。文字の一部にモノクロ写真（人物・階段・地球）をはめ込み、赤い楔を斜めに差し込む。
03
PEOPLE
「その意志に実験機会を」の見出しと、モノクロの社員写真・番号・一言・ハッシュタグを載せたカードの横スライダー。
04
PROJECT STORY
「変えていく人たちの、挑戦の連鎖」。6本のストーリーを、左に大きなコピー、中央に赤い楔と切り抜き写真、右に概要とREADボタンの3列で縦に積む。
05
BUSINESS DOMAIN & JOB
事業領域と職種紹介の2つの入口を、モノクロ写真で並べる。
06
CEO MESSAGE
紙のような質感のグレー地に、社長の切り抜き写真と赤い楔を重ね、「社会の先を拓く、コクヨの決意」へ誘導する。
07
HR STANCE・RECRUIT INFO
HRメッセージと福利厚生の2枚の写真カード、採用情報・Q&Aの黒いボタン。
08
フッター
赤地に白のナビとエントリー・マイページのボタン、右下に切り抜き写真。

Interaction

アニメーション・インタラクション

スタックに Lottie があり、FVの赤い楔やコピーの登場アニメーションに使われていると思われる
PEOPLE は前後ボタン付きの横スライダー
赤い楔は clip-path: polygon() の細長い三角形で作れる。スクロールで伸びる演出にするなら clip-path をアニメーションさせる
ヘッダーのMYPAGE・INTERNSHIP・メニューはスクロール後も右上に固定される

スクロールのコマ撮り100–350ms

コクヨ新卒採用サイト KOKUYO RECRUITINGをスクロールしたときのフレーム1 — 01

コクヨ新卒採用サイト KOKUYO RECRUITINGをスクロールしたときのフレーム2 — 02

コクヨ新卒採用サイト KOKUYO RECRUITINGをスクロールしたときのフレーム3 — 03

コクヨ新卒採用サイト KOKUYO RECRUITINGをスクロールしたときのフレーム4 — 04

コクヨ新卒採用サイト KOKUYO RECRUITINGをスクロールしたときのフレーム5 — 05

コクヨ新卒採用サイト KOKUYO RECRUITINGをスクロールしたときのフレーム6 — 06

検出された技術:AstroAdobe FontsLottie

Reproduce

再現するときのポイント

01写真はすべて grayscale にし、色は #e60012 の赤1色だけに絞る
02コピーは太いゴシックで組み、文字の一部に写真をはめ込む（SVGの clipPath か画像での作り込み）
03楔は細長い三角形を1つ決め、全セクションで角度と向きをそろえて使い回す
04見出しは細めのゴシックで大きく、赤い小さな英字ラベルを上に添える

再現MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全8セクションの仕様 / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 差し替え必須リスト

Katapick の再現MDは何がすごい？ →

kokuyo-recruiting.katapick.md

1---
2title: "コクヨ 新卒採用サイト KOKUYO RECRUITING 再現用デザイン仕様書"
3source: https://recruit.kokuyo.com/
4katapick: https://katapick.com/sites/kokuyo-recruiting
5category: 採用
6region: 国内 (JP)
7tags: [モノクロ, 大胆なタイポ, レッド基調, 余白, 写真主体, カルーセル]
8launched: 2026-07
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12estimated_hours: 32
13generator: Katapick
14---
15 
16# コクヨ 新卒採用サイト KOKUYO RECRUITING — 再現用デザイン仕様書
17 
18> 漢字の中に、白黒写真の人がはまり込んでる。コクヨの新卒採用サイト「KOKUYO RECRUITING」は、文字の一部をモノクロ写真に置き換えたコピーと、画面を切り裂く赤い楔で、「誰よりも先に試す」姿勢を形にしている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22