JR東日本 障がい者採用サイト

1. 01

   ヒーロー

   角丸のライトグレーのパネルに、駅に人々が集うイラストのスライドショー。左下に3行の太いコピー、右端に路線図風の縦インジケーターと「停止」ボタン。左上に緑のロゴタブ、中央上部に白いピル型ナビと緑のENTRYボタン。

2. 02

   イントロダクション

   白背景の左にコピーと事業・想いを語る本文、右にイラスト。周囲に色面の小さな図形を散らす。

3. 03

   メッセージ

   上端を波形にしたグリーン全面のセクションで「“わたし”の数だけ、道がある」を中央に置き、その下で事業・社員・環境づくりの3テーマを、左の角丸イラストカードと右のテキストで順に紹介する。

4. 04

   ENVIRONMENT（働く環境）

   大きな英字見出しと和文サブ見出し。円形に切り抜いたイラスト2点で職場の姿勢を示し、続けて01〜03の番号付き白カードで配慮の例をタグと箇条書きで整理する。

5. 05

   PEOPLE（社員紹介）

   角丸のグレー面に、写真・キャッチコピー・業務内容・障がいの種類を載せた社員カードを3列で上下にずらして配置。下部は緑の丘を歩く人々のイラストで締める。

6. 06

   Event

   フルページキャプチャが9000pxで切れているため、以降は抽出データの見出しのみ確認。障がいのある方向けの働き方・活躍フィールド紹介セミナーの案内。

7. 07

   Selection

   新卒採用・経験者採用それぞれのエントリー方法と、その他の採用情報（見出しのみ確認）。

8. 08

   FAQ

   在籍人数、待遇、雇用形態、選考時の配慮、問い合わせ先の5問（見出しのみ確認）。

9. 09

   フッター

   メインコピーの再掲、関連リンク、その他の採用情報で構成（見出しのみ確認）。

• FVとメッセージ内のイラストは自動で切り替わるスライドショーで、現在位置を路線図風のドットで示す。一時停止ボタン付きの自動再生は WCAG 2.2.2 の要件に沿った実装で、setInterval と aria-pressed を持つボタンで再現できる
• メッセージセクションは左のイラストカードを position: sticky で留め、右のテキストの進行に合わせて絵を差し替えていると思われる（IntersectionObserver で切り替え可能）
• PCは左上のロゴタブと中央のピル型ナビを固定表示。SPは画面下部にアイコン付きの4項目タブとENTRYボタンを固定する
• スライドのイラストは要素ごとに動くアニメーションの可能性があるが、静止キャプチャからは判断できない

スクロールのコマ撮り100–300ms

検出された技術:Astro

• 01コーポレートカラーの緑（#008803）を面で大胆に使い、白・薄いグレー・黄色の3色で補う
• 02ナビやインジケーターに路線図・駅のモチーフを持ち込み、企業らしさをUIの形で表す
• 03角丸の大きなパネルとカードで全体をやわらかくし、見出しは太めのゴシックで行間を広くとる
• 04社員紹介は項目名（業務内容・障がいの種類）を固定した同一フォーマットのカードにする

1---
2title: "JR東日本 障がい者採用サイト 再現用デザイン仕様書"
3source: https://recruit-diversity.jreast.co.jp/
4katapick: https://katapick.com/sites/recruit-diversity
5category: 採用
6region: 国内 (JP)
7tags: [イラスト, ライト, 角丸, 固定ナビ, 固定CTA, ロングページ]
8launched: 2026-08
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 30
13generator: Katapick
14---
15 
16# JR東日本 障がい者採用サイト — 再現用デザイン仕様書
17 
18> 路線図みたいなインジケーターで、鉄道会社らしさ全開。JR東日本 障がい者採用サイトは、駅に人々が集うイラストとコーポレートグリーンを軸に、線路を模したインジケーターで“わたしの数だけある道”をUIに落とし込んでいる。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22