ワイヤーDL株式会社日東物流 採用サイト
水彩のイラストだけで、ドライバーの仕事と働く人を描き切る。
webcan analyze kawatatec.co.jp/recruit
RECRUITING · 奈良県 · PICKED 2026.10.26
株式会社カワタテック 採用サイト採用サイトのホームページデザイン参考 — 採用サイト・ネイビー・工場写真
出典：kawatatec.co.jp/recruit ↗確認日 2026.10.26
EDITOR'S NOTE編集部の視点
「課題×挑戦×学び＝成長」の式のようなコピーと工場の写真で、1年目から挑戦できる会社であることを伝える。
奈良県桜井市の、工作機械のチャックやパレットチェンジャをつくるメーカーの採用サイト。ファーストビューは、工場で作業着の社員が立つ後ろ姿などの青みのある写真が切り替わる中に、「課題 × 挑戦 × 学び ＝ 成長」のコピーを大きく4行に積んで組み、右下に「募集要項はこちら」のボタンを置いている。社員へのメッセージ、採用情報のお知らせ、カワタテックについて、社長インタビュー、応募要項、カワタテックでの仕事（先輩インタビュー）、エントリーと続く。
- 01濃いネイビーを基調にし、セクションの境目を四角いブロックが崩れたような模様でつないでいる
- 02英字の大きな見出し（Schibsted Grotesk）に、和文の小さな見出しを添えている
- 03工場で働く人の写真を大きく使い、仕事の現場を見せている
CONVERSION集客の工夫
－電話番号をヘッダーに常設PC・ファーストビュー
－タップで電話できるSP・tel:リンク 0か所
✓SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線お問い合わせはこちら
－LINEで相談・予約LINE公式アカウント
－営業・診療時間の明記トップページ内
エントリーをヘッダーの右上に置く
PCのヘッダーの右上に青い「Entry」ボタンを置いている。どのページを読んでいても、応募の入口にすぐ戻れる。
応募の入口を3つに分ける
ページの最後のエントリーで、新卒・中途採用、インターンシップ、会社説明会の3つの入口を並べ、それぞれ募集中かどうかを書いている。応募したい形と、今受け付けているかがひと目で分かる。
社長と先輩の言葉で会社を伝える
「From Our President」で社長インタビューへの入口を置き、「Work at Kawatatec」で製造課・営業課の先輩インタビューを並べている。会社の考え方と現場の働き方を、人の言葉で伝えている。
チェック項目は 2026.10.26 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#022257背景（メイン） · ネイビー
#002F7C英字の見出し · ブルー
#005AAFエントリーボタン
#F1F1F1セクション背景 · ライトグレー
#FFFFFF濃色の上のテキスト
#333333本文テキスト
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 英字の見出し
- 使用フォント
- Schibsted Grotesk
- 無料で近いもの
- Schibsted Grotesk
- 用途
- 和文（見出し・本文・ナビ）
- 使用フォント
- Noto Sans JP
- 無料で近いもの
- Noto Sans JP
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 15.2px / 400 | — | 15.4px / 400 |
| h2 | 24px / 500 | 1.00 | 17.3px / 500 |
| h3 | 15.2px / 500 | 1.70 | 19.2px / 500 |
| 本文（p） | 14px / 500 | 1.00 | 12.5px / 500 |
| ボタン | 15.2px / 400 | — | 14px / 700 |
実測値（PC 1440px・SP 375px、2026.10.26 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
- 04
採用情報（お知らせ）
お知らせ／お知らせ一覧型 - 05
- 06
- 07
- 08
- 09
- 10
PARTSパーツ別に見る
PC
SP
PC
SP
PC
SP
PC
SP
PC
SP番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.10.26 以降に撮影したもので、現在の表示とは異なる場合があります。
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01会社が大切にしていることを、式のような短いコピーにしてファーストビューに置く
- 02社長と先輩社員のインタビューを分けて、会社の考え方と現場の働き方の両方を伝える
- 03エントリーは応募の形ごとに入口を分け、受付中かどうかを書く
- 04ヘッダーにエントリーのボタンを置き、どこからでも応募に進めるようにする
FAQよくある質問
カワタテックの採用サイトで使われているフォントは？
英字の見出しは Schibsted Grotesk、和文は Noto Sans JP です。どちらも Google Fonts で無料で使えます。
中小メーカーの採用サイトでは、何を載せるとよいですか？
このサイトは、社員へのメッセージ、会社の紹介、社長インタビュー、先輩インタビュー、応募の入口を順に並べています。会社の考え方と、入社後にどんな仕事をするかの両方が読めます。
どんな業種の参考になりますか？
機械・部品などのメーカーのほか、工場や現場の仕事がある建設・物流などの会社が、若手の採用サイトをつくるときに応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利は株式会社カワタテック 採用サイトおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの採用サイトの参考サイト
FROM REFERENCE TO YOUR SITE
このテイストで、
御社の採用サイトを。
「株式会社カワタテック 採用サイトのような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料相談はこちらFREE SITE CHECK（ 無料診断 ）
自社サイトの今の状態を、30秒で確かめる。
URLを入れるだけで、GoogleのSEOとAI検索の両方から見た対応度と、優先して直すべき点がわかります。会員登録・メールアドレス不要です。