# 株式会社トヨックス 採用サイト｜採用のWebデザイン参考

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

- URL: https://recruit.toyox.co.jp/
- 解説ページ: https://katapick.com/sites/toyox-recruit
- カテゴリ: 採用 / 地域: 国内（JP）/ 業種: ホース・工業用製品メーカー
- テイスト: ブルー基調、ライト、写真主体、角丸、固定ナビ、マーキー
- 公開・リニューアル: 2026-04 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 28 時間）

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

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

## 配色
- #006fbf Toyox Blue（メインカラー / セクション背景）
- #f0f7fa Pale Mist（セクション背景）
- #ffffff White（背景 / 曲線）
- #091e2d Deep Navy（テキスト）
- #1abdf8 Sky Cyan（アクセント（ENTRY・News））
- #909090 Silver Gray（日付・補足テキスト）

## フォント
- 和文見出し・本文: Zen Kaku Gothic New（代替: Zen Kaku Gothic New）
- 英字ラベル・日付: Ysabeau（代替: Ysabeau）

## よくある質問
### トヨックスの採用サイトで使われているフォントは？
和文は Zen Kaku Gothic New、英字のラベルや日付は Ysabeau が使われています。どちらも Google Fonts で無料で利用できます。

### トヨックスの採用サイトのような流れる曲線はどう作る？
SVGのpathで曲線を描き、セクションの境界をまたぐように絶対配置します。stroke-dashoffset をスクロール量に合わせて減らすと、線が伸びていくような動きになります。

### どんな業種の参考になる？
BtoBのメーカーや工業製品の会社、地方に拠点を持つ企業の採用サイトなど、製品が一般に見えにくい業種で“爽やかさ”を打ち出したい場合の参考になります。

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