# コクヨ 新卒採用サイト KOKUYO RECRUITING｜採用のWebデザイン参考

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

- URL: https://recruit.kokuyo.com/
- 解説ページ: https://katapick.com/sites/kokuyo-recruiting
- カテゴリ: 採用 / 地域: 国内（JP）/ 業種: 文具・オフィス家具メーカー
- テイスト: モノクロ、大胆なタイポ、レッド基調、余白、写真主体、カルーセル
- 公開・リニューアル: 2026-07 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 4/5（目安 32 時間）

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

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

## 配色
- #e60012 Kokuyo Red（楔 / ラベル / フッター背景）
- #ffffff White（背景）
- #f0f0f0 Paper Gray（セクション背景）
- #202020 Ink（テキスト / ボタン）
- #bcbcbc Silver（補足テキスト / 罫線）

## フォント
- 英字ロゴ・ナビ・ラベル: Gotham（代替: Montserrat）
- 和文見出し・本文: Yu Gothic（代替: Noto Sans JP）

## よくある質問
### コクヨの採用サイトで使われているフォントは？
英字に Gotham、和文に游ゴシック（Yu Gothic）が使われています。無料で近づけるなら英字は Montserrat、和文は Noto Sans JP がおすすめです。FVのコピーは写真をはめ込んだ画像と思われます。

### 文字の中に写真をはめ込む表現はどう作る？
SVGの <text> や文字のアウトラインを clipPath にして写真を切り抜くか、デザインツールで作り込んだ画像を書き出します。文字の一部だけ写真にする場合は、画像で作るほうが崩れません。

### どんな業種の参考になる？
メーカーや総合職採用の大企業など、コーポレートカラーを1色に絞って強いメッセージを打ち出したい新卒採用サイトの参考になります。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「再現用Markdown」は https://katapick.com/sites/kokuyo-recruiting からダウンロードできます。
出典: Katapick（https://katapick.com）