ワイヤーDL株式会社カワタテック 採用サイト
「課題×挑戦×学び＝成長」の式のようなコピーと工場の写真で、1年目から挑戦できる会社であることを伝える。
webcan analyze www.nittobutsuryu.co.jp/recruit
RECRUITING · 千葉県 · PICKED 2026.10.31
株式会社日東物流 採用サイト採用サイトのホームページデザイン参考 — 水彩イラスト・ブルー・グリッド
出典：www.nittobutsuryu.co.jp/recruit ↗確認日 2026.10.31
EDITOR'S NOTE編集部の視点
水彩のイラストだけで、ドライバーの仕事と働く人を描き切る。
千葉県四街道市の物流会社の採用サイト。ファーストビューは街・ドライバー・休憩の場面などを描いた水彩のイラストを、角丸の枠の中でグリッド状に組み、青い枠に「プライドを胸に、運ぶ。」のコピーを入れている。トップはAbout・Works（3つの約束・職種の紹介・先輩社員の声）・Good Points・募集要項・お問い合わせの順で、ヘッダーに「募集要項」と「10秒で簡単エントリー」の2つのボタンを置いている。
- 01ファーストビューを、大小のイラストを組み合わせたグリッドと、コピーを入れた青い枠で構成している
- 02Worksは「安心して働ける、3つの約束」「職種の紹介」「先輩社員の声」の3枚のカードで、それぞれ下層ページへつないでいる
- 03写真を使わず、ドライバー・トラック・社員などをすべて同じタッチの水彩イラストで描いている
3 VIEWPOINTS3つの視点で見る
デザインの視点
写真を使わず、同じタッチの水彩イラストを角丸のグリッドに組み、コピーを入れる青い枠を1つに決めている点を真似るとよいです。ヘッダーとスマホ下部に、青の「募集要項」と赤の「10秒で簡単エントリー」を色分けして置いています。
集客の視点
ヘッダーに青の「募集要項」と赤の「10秒で簡単エントリー」を並べ、スマホでは同じ2つを画面下に固定している。右下の社員イラストと「ご質問、お問い合わせはこちらから！」の吹き出しが、応募をためらう人向けの軽い入口になっており、この段階分けが参考になる。
Webディレクターの視点
仕事の中身を「3つの約束・職種の紹介・先輩社員の声」の3枚のカードに分け、それぞれ下層ページへつないでいます。「募集要項」と「10秒で簡単エントリー」の2ボタンを、ヘッダーとスマホの固定バーに置く作りは、採用サイトにそのまま使えます。
CONVERSION集客の工夫
－電話番号をヘッダーに常設PC・ファーストビュー
－タップで電話できるSP・tel:リンク 0か所
✓SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線問い合わせる
－LINEで相談・予約LINE公式アカウント
－営業・診療時間の明記トップページ内
応募の入口を2段階に分ける
ヘッダーに青の「募集要項」と赤の「10秒で簡単エントリー」を並べている。条件を確かめたい人と、すぐ応募したい人の両方に入口がある。スマホでは同じ2つのボタンを画面下に固定している。
質問の入口を人の絵で添える
画面の右下に社員のイラストと「ご質問、お問い合わせはこちらから！」の吹き出しを出している。いきなり応募するのをためらう人に、問い合わせという軽い一歩を用意している。
仕事の範囲を具体的に書く
募集要項のブロックで、関東エリアの飲食店・スーパーマーケット・物流センターへの配送であることと、24時間365日体制であることを書いている。どこへ何を運ぶ仕事かが、応募の前にわかる。
チェック項目は 2026.10.31 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#FFFFFF背景
#E8EFF7セクション背景 · ペールブルー
#1866B2コピーの枠・募集要項ボタン・見出し · ブルー
#E56A6Aエントリーボタン · コーラルレッド
#111111本文テキスト
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 英字見出し（Works・Good Points）
- 使用フォント
- Montserrat
- 無料で近いもの
- Montserrat
- 用途
- 和文本文・小見出し
- 使用フォント
- 秀英ゴシック 銀（Adobe Fonts）
- 無料で近いもの
- Noto Sans JP
- 用途
- ナビ・ボタン
- 使用フォント
- FOT-筑紫A丸ゴシック（Adobe Fonts）
- 無料で近いもの
- Zen Maru Gothic
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h2 | 67.5px / 700 | 1.00 | 30px / 700 |
| h3 | 24.8px / 600 | 1.50 | 18px / 600 |
| 本文（p） | 18px / 500 | 2.00 | 14px / 500 |
実測値（PC 1440px・SP 375px、2026.10.31 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
フッター
フッター／店舗情報＋ナビ型 - 09
PARTSパーツ別に見る
PC
SP
PC
SP
PC
SP番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.10.31 以降に撮影したもので、現在の表示とは異なる場合があります。
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01「募集要項」と「すぐエントリー」の2つのボタンを色分けして、ヘッダーとスマホの固定バーに置く
- 02仕事の中身を「約束・職種・先輩の声」の3枚のカードに分け、それぞれ下層ページへつなぐ
- 03写真を使う場合も、全体のタッチ（色味・切り抜き方）をそろえて1つの世界観にする
- 04応募の前段に、人の絵や顔を添えた問い合わせの入口を置く
FAQよくある質問
日東物流の採用サイトで使われているフォントは？
英字見出しは Montserrat（Google Fonts）、和文は Adobe Fonts の秀英ゴシック 銀と FOT-筑紫A丸ゴシックです。無料で近づけるなら、和文本文に Noto Sans JP、丸ゴシックに Zen Maru Gothic が使えます。
イラストを描いてもらう予算がない場合は？
ファーストビューのグリッドは、社員や車両の写真でも同じ組み方ができます。写真の明るさと色味をそろえ、コピーを入れる色の枠を1つ決めると、まとまって見えます。
どんな会社の参考になりますか？
運送・配送のほか、介護・清掃・建設など、現場の仕事が中心で、仕事の中身と働きやすさを伝えたい会社の採用サイトに応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利は株式会社日東物流 採用サイトおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの採用サイトの参考サイト
FROM REFERENCE TO YOUR SITE
このテイストで、
御社の採用サイトを。
「株式会社日東物流 採用サイトのような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料相談はこちらFREE SITE CHECK（ 無料診断 ）
自社サイトの今の状態を、30秒で確かめる。
URLを入れるだけで、GoogleのSEOとAI検索の両方から見た対応度と、優先して直すべき点がわかります。会員登録・メールアドレス不要です。