# JR西日本電気システム株式会社 採用サイト｜採用のWebデザイン参考

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

- URL: https://www.j-nesco.com/recruit/
- 解説ページ: https://katapick.com/sites/j-nesco-recruit
- カテゴリ: 採用 / 地域: 国内（JP）/ 業種: 鉄道電気工事・設備電気工事
- テイスト: ブルー基調、写真主体、角丸、イラスト、固定CTA
- 公開・リニューアル: 2026-04 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 28 時間）

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

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

## 配色
- #0086c9 Rail Blue（メインカラー / パネル・ボタン）
- #eaf1fa Pale Blue（背景（方眼））
- #ffffff White（背景 / ボタン文字）
- #0e3365 Navy（ロゴ / ハンバーガー）
- #eb614b Coral（アクセント / Entry ボタン・装飾の六角形）
- #000000 Black（テキスト）

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

## よくある質問
### JR西日本電気システムの採用サイトで使われているフォントは？
和文と見出しの英字に Zen Kaku Gothic New、小さな英字ラベルに Barlow が使われています。どちらも Google Fonts で無料で使えます。

### 写真を六角形に切り抜くにはどうする？
CSS の clip-path: polygon() で6点を指定するのが最も簡単です。角を丸くしたい場合は、角丸の六角形を SVG で描き、clipPath か mask-image として画像に適用します。

### このサイトのデザインはどんな業種の参考になる？
鉄道・電気・建設・インフラなど、現場の仕事を明るく親しみやすく伝えたい技術系企業の新卒・キャリア採用サイトの参考になります。

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