RecruitJapanPicked 2026.09.26

株式会社トヨックス採用サイト

採用のWebデザイン参考 — ホース・工業用製品メーカー

出典: recruit.toyox.co.jp

Editor's note — 編集部の視点

ホースみたいな白い曲線が、ページ中をうねってる。

株式会社トヨックスの採用サイトは、工場の「血管」と呼ばれるホースの流れを青い曲線と波の区切りに置き換え、BtoBの硬さを抜けのいい爽快感に変えている。

IrisColor & Brand

青って冷たく見えがちなのに、白と淡い水色をたっぷり挟んでるから、晴れた日のプールみたいにひんやり気持ちいい感じ。工場の写真まで明るく見えるのがすき。

1FVの白い曲線がコピーの下をすり抜ける。製品のホースを、図解ではなく“流れ”として先に見せる
2セクションの境目はすべて波形。長い縦スクロールでも、水が流れるように次の章へ運ばれる
3社員写真は縦長の角丸で抜き、雲形の面に浮かべる。工場の現場写真でも角が立たない

Color

株式会社トヨックス採用サイトの配色

Typography

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

和文見出し・本文

Aa あア

使用: Zen Kaku Gothic New
代替: Zen Kaku Gothic New

英字ラベル・日付

Aa あア

使用: Ysabeau
代替: Ysabeau

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

見出しKatapick 型42px · 1.75 · 700
小見出しKatapick 型20px · 1.5 · 700
本文The quick brown fox — 参考を型にする16px · 1.75 · 500
ボタンKatapick 型16px · 1.4 · 700
注釈The quick brown fox — 参考を型にする14px · 1 · 400

Structure

ページ構成（上から順）

01
ヘッダー
左にTOYOXロゴと「RECRUIT SITE」、右に角丸の枠で囲んだ4項目のドロップダウンナビ。スクロール後は白いカプセル型の固定ヘッダーになり、ENTRYボタンが加わる。
02
ヒーロー
社員写真のスライドに、斜めに組んだ太いコピー「〇〇の未来につながる仕事」（モノづくり・地域・世界）と白い曲線を重ねる。左下にホワイト企業認定のバッジ、下部の波の上にNewsを1行表示。
03
イントロダクション
「世界のモノづくりを支える、グローバルニッチNo.1企業へ。」の見出しとステートメント。背景に淡い世界地図を敷き、角丸の写真を左右に置く。
04
工場の「血管」
山並みと街の写真を背景に、ホースがモノづくりの現場を支えていることを中央揃えの白文字で語り、事業紹介へ誘導する。
05
会社を知る
雲形の淡いブルーの面に「私たちの歩み」「職種紹介」の2つの入口を置く。
06
働く人を知る
縦書きの「社員インタビュー」見出しと、角丸の背景に切り抜いた社員写真のカルーセル。
07
クロストーク
「#01」「#02」の番号バッジと角丸写真で、座談会とプロジェクトストーリーを紹介。
08
働く環境を知る
福利厚生と教育（共育）制度の2つの入口を、雲形の面と写真で見せる。
09
エントリー・フッター
青地に「トヨックスはまだまだ進化の途中。」のメッセージ、新卒・キャリア・インターンの角丸カード3枚、画面幅いっぱいに流れる「ENTRY」の文字。

Interaction

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

FVは Swiper による写真とコピーのスライド。コピーのうち「モノづくり／地域／世界」の部分だけが入れ替わる構成と思われる
白や水色の曲線はSVGのpathでセクションをまたいで描かれている。stroke-dashoffset をスクロール量に連動させると、線が伸びていく演出として再現可能
最下部の「ENTRY」は CSS の @keyframes で translateX させる無限マーキー
スクロール後はヘッダーがカプセル型に切り替わって固定表示される

スクロールのコマ撮り400–120000ms

検出された技術:SwiperWordPressGoogle Fonts

Reproduce

再現するときのポイント

01背景は白と #f0f7fa の淡いブルーを交互にし、要所だけ #006fbf のベタ面で締める
02セクションの境界は直線ではなく波形のSVGで区切り、曲線をセクションにまたがせて流れをつくる
03写真は縦長の大きな角丸で抜き、白や淡いブルーの面の上に浮かべる
04見出しは Zen Kaku Gothic New の太字、英字ラベルは Ysabeau で柔らかさを足す

再現MDに含まれるもの

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

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

toyox-recruit.katapick.md

1---
2title: "株式会社トヨックス 採用サイト 再現用デザイン仕様書"
3source: https://recruit.toyox.co.jp/
4katapick: https://katapick.com/sites/toyox-recruit
5category: 採用
6region: 国内 (JP)
7tags: [ブルー基調, ライト, 写真主体, 角丸, 固定ナビ, マーキー]
8launched: 2026-04
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 28
13generator: Katapick
14---
15 
16# 株式会社トヨックス 採用サイト — 再現用デザイン仕様書
17 
18> ホースみたいな白い曲線が、ページ中をうねってる。株式会社トヨックスの採用サイトは、工場の「血管」と呼ばれるホースの流れを青い曲線と波の区切りに置き換え、BtoBの硬さを抜けのいい爽快感に変えている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22