# JR東日本 障がい者採用サイト｜採用のWebデザイン参考

> 路線図みたいなインジケーターで、鉄道会社らしさ全開。JR東日本 障がい者採用サイトは、駅に人々が集うイラストとコーポレートグリーンを軸に、線路を模したインジケーターで“わたしの数だけある道”をUIに落とし込んでいる。

- URL: https://recruit-diversity.jreast.co.jp/
- 解説ページ: https://katapick.com/sites/recruit-diversity
- カテゴリ: 採用 / 地域: 国内（JP）/ 業種: 鉄道・障がい者採用
- テイスト: イラスト、ライト、角丸、固定ナビ、固定CTA、ロングページ
- 公開・リニューアル: 2026-08 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 30 時間）

## 編集部のひとこと（Bruno）
社員紹介より先に、働く環境を01〜03のカードで見せてるんだよね。応募する人がまず知りたいのは、たぶん配慮の中身。人より条件を先に置くこの順番、これはうまい。

## デザインの見どころ
- スライドの進行表示は、黄色い駅を緑の線でつないだ路線図。鉄道会社であることを部品ひとつで示す
- 自動で切り替わるイラストには必ず「停止」ボタン。動きを止める選択肢を、見る人の側に置く
- 社員カードは業務内容と障がいの種類を同じ書式で並べる。自分に近い先輩を、横並びで探せる

## 配色
- #008803 JR Green（メインカラー / セクション背景・CTA）
- #ffffff White（背景 / カード）
- #ebebeb Light Gray（FVパネル・セクション背景）
- #e5f3e6 Mint Tint（ラベル・淡いセクション背景）
- #222222 Charcoal（テキスト）
- #ffdf5d Signal Yellow（アクセント / 路線図の駅・見出しマーカー）

## フォント
- 和文見出し（h1・h2）: Zen Kaku Gothic New（代替: Zen Kaku Gothic New）
- 和文本文: Noto Sans JP（代替: Noto Sans JP）
- 英字見出し・ボタン: Poppins（代替: Poppins）

## よくある質問
### JR東日本 障がい者採用サイトで使われているフォントは？
和文見出しに Zen Kaku Gothic New、本文に Noto Sans JP、英字見出しやボタンに Poppins を使っています。いずれも Google Fonts で無料で使えます。

### 路線図のようなスライドインジケーターはどう作る？
縦に並べたドットを線でつなぎ、現在のスライドのドットだけ大きく縁取りします。進行中の区間の線を緑で塗りつぶすと、列車が駅から駅へ進むような表現になります。

### このサイトはどんな採用サイトの参考になる？
障がい者採用やダイバーシティ採用のように、配慮の内容や働く環境を具体的に伝えたいページの参考になります。イラスト中心で人物を特定しない表現や、停止ボタン付きのスライドなどアクセシビリティ面の工夫も参考になります。

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