ワイヤーDL株式会社日東物流 採用サイト
水彩のイラストだけで、ドライバーの仕事と働く人を描き切る。
webcan analyze recruit.toyox.co.jp
RECRUITING · 富山県 · PICKED 2026.10.18
株式会社トヨックス 採用サイト採用サイトのホームページデザイン参考 — 採用サイト・ブルー・曲線
出典：recruit.toyox.co.jp ↗確認日 2026.10.18
EDITOR'S NOTE編集部の視点
自社のホースを思わせる青い曲線でページ全体をつなぎ、製品の会社であることを採用サイトの見た目でも伝える。
富山県黒部市のホースメーカーの採用サイト。ファーストビューは社員の写真が切り替わり、白い曲線に沿って「世界の未来につながる仕事」「自分の未来につながる仕事」などの大きなコピーを置き、左下に「ホワイト企業認定 PLATINUM」のマーク、右下にお知らせを出している。会社の紹介、工場の「血管」と呼ばれる製品の説明、会社を知る、働く人を知る（社員インタビュー・クロストーク）、働く環境を知る、新卒・キャリア・インターンのエントリーと続く。
- 01青と水色の曲線をセクションの区切りに使い、ページ全体を流れるようにつないでいる
- 02ファーストビューのコピーを、太い文字で傾けて大きく組んでいる
- 03ナビを「会社を知る」「働く人を知る」「働く環境を知る」「募集要項・よくある質問」の4つにまとめている
CONVERSION集客の工夫
－電話番号をヘッダーに常設PC・ファーストビュー
✓タップで電話できるSP・tel:リンク 1か所
－SPの追従ボタンSP・画面下に固定
－予約・問い合わせ導線—
－LINEで相談・予約LINE公式アカウント
－営業・診療時間の明記トップページ内
エントリーをいつも右上に
ヘッダーの右上に水色の「ENTRY」ボタンを置いている。社員インタビューを読んでいる途中でも、応募したくなったときにすぐ進める。
応募の入口を3つに分ける
ページの最後に「新卒採用」「キャリア採用」「インターン応募」の3つのカードを並べ、その下に大きな「ENTRY」の文字を流している。学生・転職者・インターン希望者が、それぞれの入口から進める。
知りたいこと別にナビをまとめる
ナビを「会社を知る」「働く人を知る」「働く環境を知る」の3つと募集要項に分けている。会社・人・制度のどれから知りたいかで読み始められ、トップの並びも同じ順番にしている。
チェック項目は 2026.10.18 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#FFFFFF背景
#F0F7FAセクション背景 · ペールブルー
#006FBF曲線・見出し・ボタン · ブルー
#1ABDF8ENTRYボタン・差し色 · スカイブルー
#091E2D本文テキスト · ネイビー
#909090日付・補足テキスト
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 和文（見出し・本文・ナビ）
- 使用フォント
- Zen Kaku Gothic New
- 無料で近いもの
- Zen Kaku Gothic New
- 用途
- 欧文
- 使用フォント
- Ysabeau
- 無料で近いもの
- Ysabeau
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h2 | 50px / 700 | 1.80 | 30px / 700 |
| h3 | 22px / 700 | 1.50 | 18px / 700 |
| 本文（p） | 16px / 500 | 1.75 | 15px / 500 |
| ボタン | 17px / 700 | 1.75 | 17px / 700 |
実測値（PC 1440px・SP 375px、2026.10.18 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
- 04
- 05
- 06
働く人を知る（社員インタビュー）
人・代表／代表・院長あいさつ型 - 07
クロストーク
事例・実績／大判1件＋サムネ型 - 08
- 09
- 10
PARTSパーツ別に見る
PC
SP
PC
SP
PC
SP
PC
SP
PC
SP
PC
SP番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.10.18 以降に撮影したもので、現在の表示とは異なる場合があります。
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01自社の製品や仕事を思わせるモチーフを、ページの装飾に使う
- 02ナビは「会社」「人」「環境」など、求職者が知りたいこと別にまとめる
- 03応募の入口を新卒・中途・インターンに分けて並べる
- 04エントリーボタンをヘッダーに置き、どこからでも応募できるようにする
FAQよくある質問
トヨックスの採用サイトで使われているフォントは？
和文は Zen Kaku Gothic New、欧文は Ysabeau です。どちらも Google Fonts で無料で使えます。
地方のメーカーの採用サイトで、最初に伝えるべきことは？
何を作っている会社で、それが社会のどこで使われているかです。このサイトは「工場の血管と呼ばれる」という言い方で、目立たない製品の役割を学生にもわかる言葉で説明しています。
どんな業種の参考になりますか？
製造業のほか、建設・物流など、仕事の中身が外から見えにくい会社の採用サイトに応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利は株式会社トヨックス 採用サイトおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの採用サイトの参考サイト
FROM REFERENCE TO YOUR SITE
このテイストで、
御社の採用サイトを。
「株式会社トヨックス 採用サイトのような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料相談はこちらFREE SITE CHECK（ 無料診断 ）
自社サイトの今の状態を、30秒で確かめる。
URLを入れるだけで、GoogleのSEOとAI検索の両方から見た対応度と、優先して直すべき点がわかります。会員登録・メールアドレス不要です。