RecruitJapanPicked 2026.09.26

JR西日本電気システム株式会社採用サイト

採用のWebデザイン参考 — 鉄道電気工事・設備電気工事

サイトを見るj-nesco.com

www.j-nesco.com/recruit開く ↗

サイトを開く ↗

Editor's note — 編集部の視点

方眼と六角形の写真で、図面っぽく仕事を見せる。

JR西日本グループの総合電気工事会社、JR西日本電気システムの採用サイトは、図面のような方眼と線画に六角形の写真を重ね、現場の手触りを背景にまで染み込ませている。

BrunoStructure & IA

「会社を知る」「仕事を知る」「人を知る」って、見出しが全部“〜を知る”でそろってるんだよね。会社から仕事、人、環境へと順に近づいていくから、読む順番に迷わない。これはうまい。

1列車と現場社員を大きな六角形で切り抜いて重ねる。硬くなりがちな現場写真に、親しみのある輪郭を与える
2薄い方眼に作業員や建物、車両の線画を散らす。背景そのものが、設計図を広げたような仕事の舞台になる
3青は情報、コーラルはEntry。色の役割を2つに割り、応募の入口をどの画面でも見つけやすくしている

Color

JR西日本電気システム株式会社採用サイトの配色

Typography

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

和文見出し・本文・英字見出し

Aa あア

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

英字ラベル・補足

Aa あア

使用: Barlow
代替: Barlow

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

見出しKatapick 型26.7px · 1.3 · 500
本文The quick brown fox — 参考を型にする22.9px · 1.3 · 500
ボタンKatapick 型15.2px · — · 400
注釈The quick brown fox — 参考を型にする12.4px · 1.3 · 500

Structure

ページ構成（上から順）

01
ヒーロー
方眼と線画の背景に、左上のロゴ「RECRUITING SITE」と縦並びのメニュー、SNSアイコン。左下に「Our Mission」と2行の大きなキャッチ、右に六角形の写真2枚を重ね、コーラルの六角形の Entry ボタンと青の円形装飾を添える。
02
Message
小さな「Message」ラベルの下に、左揃えの会社メッセージを数段落。右に作業員の線画イラスト。
03
会社を知る / Company
和文ラベルと大きな英字見出し、説明文、青い角丸ボタン2つ（NESCOについて・NESCOを早わかり!）。右に現場社員の大きな六角形写真。
04
仕事を知る / Works
左上を斜めに切った薄い青のパネルに、見出しと説明、下に3枚のカード（地域貢献・仕事・プロジェクト紹介）。カードは写真やイラストの下に青い帯と矢印アイコン。
05
人を知る / Person
角を落とした八角形の青いパネルの中央に、六角形の社員写真と吹き出し風のボタン（詳しく見る・社員一覧へ）。左右に別の社員写真を線でつなぎ、下にひとことと所属・入社年のラベル。
06
働く環境 / Environment
働き方座談会・社員アンケート・研修制度の3つを六角形カードにして上下にずらして並べる。カードの下半分は青い帯と矢印。
07
動画で知る / Movie
左側を大きな円弧で切った青いパネルに見出し・説明・白い「動画一覧」ボタン、右に現場写真を配置。
08
採用情報 / Recruit
見出しの下に「新卒採用情報」「キャリア採用情報」の横長の青いボタンを2つ並べる。
09
フッター
線画イラストを横一列に並べ、中央に六角形の「Top」ボタンとコピーライト。

Interaction

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

ヒーローの六角形の写真はPCスクショとフルページキャプチャで異なるカットが写っており、フェードで切り替わるスライドショーと思われる
角の丸い六角形は SVG の clipPath か、CSS の clip-path: polygon() に border-radius 相当の丸みをつけた SVG マスクで再現できる
右上の Entry ボタンとハンバーガーはフルページキャプチャの各所に写り込んでおり、position: fixed で常に表示されている
人を知るパートは左右の写真を線でつないだ横並びで、矢印ボタンで社員を切り替えるスライダーと思われる。慣性スクロールは Lenis

スクロールのコマ撮りLenis · 80000–120000ms

JR西日本電気システム株式会社採用サイトをスクロールしたときのフレーム1 — 01

JR西日本電気システム株式会社採用サイトをスクロールしたときのフレーム2 — 02

JR西日本電気システム株式会社採用サイトをスクロールしたときのフレーム3 — 03

JR西日本電気システム株式会社採用サイトをスクロールしたときのフレーム4 — 04

JR西日本電気システム株式会社採用サイトをスクロールしたときのフレーム5 — 05

JR西日本電気システム株式会社採用サイトをスクロールしたときのフレーム6 — 06

検出された技術:LenisGoogle Fonts

Reproduce

再現するときのポイント

01背景は #eaf1fa 系の薄い方眼（linear-gradient の繰り返し）に線画イラストを重ね、図面・現場の雰囲気を出す
02写真・ボタン・カードの形を六角形に統一し、会社のモチーフとして繰り返す
03青 #0086c9 を面とボタン、コーラル #eb614b を Entry と装飾だけに使う
04各セクションに「和文ラベル＋大きな英字見出し」の同じ見出しパーツを使う

再現MDに含まれるもの

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

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

j-nesco-recruit.katapick.md

1---
2title: "JR西日本電気システム株式会社 採用サイト 再現用デザイン仕様書"
3source: https://www.j-nesco.com/recruit/
4katapick: https://katapick.com/sites/j-nesco-recruit
5category: 採用
6region: 国内 (JP)
7tags: [ブルー基調, 写真主体, 角丸, イラスト, 固定CTA]
8launched: 2026-04
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 28
13generator: Katapick
14---
15 
16# JR西日本電気システム株式会社 採用サイト — 再現用デザイン仕様書
17 
18> 方眼と六角形の写真で、図面っぽく仕事を見せる。JR西日本グループの総合電気工事会社、JR西日本電気システムの採用サイトは、図面のような方眼と線画に六角形の写真を重ね、現場の手触りを背景にまで染み込ませている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22