2026.08.31

UI/UXデザイナーの仕事まるわかりガイド：“採用ブランディング”の世界へ

Webデザイナー仕事のこと
# Figma活用術# ユーザー視点の情報設計# 応募導線最適化# 採用サイト設計# 採用ブランディング

採用サイトのUI/UXって、普通のWebと何が違う？

採用サイトのUI/UXは「応募したくなる体験」を設計する仕事です。商品購入や問い合わせではなく、「この会社で働く自分」をイメージしてもらうことがゴールになります。
そのため、見る人は

  • 候補者本人（20〜40代の転職・就活層）
  • 家族やパートナー
  • 社内の現場メンバー・経営層

と、多層的。事業理解だけでなく、カルチャー・働き方・評価制度など“中のリアル”をデザインに落とし込む必要があります。

ビジュアルのトーンやUIの動き一つで「この会社、ちゃんとしていそう」「なんか古そう…」と感じ方が変わる。ここに採用ブランディングならではのおもしろさがあります。

Figmaでのワイヤーづくり：まずは「誰に・何を」整理する

ジェイ・ラインの案件では、Figma上でワイヤーからスタートすることが多いです。
最初にディレクターと一緒に、

  • ターゲット（例：第二新卒エンジニア、地方工場の製造職など）
  • 応募前に解消したい不安（給与・残業・成長機会…）
  • その会社らしさが伝わる要素（価値観・チームの空気感）

を整理し、「1ページで何を伝きるか」を決めます。

Figmaのワイヤー画面には、モジュールごとに「目的」「想定読者」「メッセージ」をコメントで書き込み、チーム全員でレビュー。ここで“情報整理の甘さ”をつぶしておくと、後工程がスムーズになります。

情報設計と導線設計：候補者の“心理の順番”を並べ替える

採用サイトの情報設計では、「見せたい順」ではなく「知りたい順」にコンテンツを並べることが重要です。
例えばエンジニア採用なら、

  1. どんなプロダクト・技術スタックか
  2. 誰と働くのか（チーム構成・上司像）
  3. 働き方・評価・給与のリアル
  4. 応募〜選考フローの透明性

といった流れを、トップページ〜詳細ページ〜FAQ〜エントリー導線に落とし込みます。

Figmaでは、サイトマップとユーザーフローを並べて、「ここで一度迷うよね？」とディレクターやエンジニアとディスカッション。必要に応じて、スカウト用LPやnote記事への動線も組み込みます。

ビジュアル設計：写真・色・余白で“チームの空気”を見せる

ビジュアル設計のポイントは「雰囲気を盛りすぎないリアルさ」です。
実際の案件では、

  • インタビュー記事の原稿からキーワードを抽出し、色・フォント・写真トーンを決める
  • Figma上でヒーローエリアとインタビューモジュールを並べ、PC／SPどちらでも“人の顔”がしっかり見えるか確認
  • 「数字で見る〇〇」など、統計情報をインフォグラフィックで整理

といった流れで進行します。

写真選定もUIの一部。オフィスの“キラキラ写真”だけでなく、ミーティング中やオンライン会議の自然な表情を使うことで、候補者がリアルな職場を想像しやすくなります。

公開後のUI改善：FigmaからGA・ヒートマップを見るデザイナーへ

リリースして終わりではなく、CVRやページスクロール率を見ながらUI改善を行うのも特徴です。
「エントリーボタンがスマホでタップしづらい」「インタビュー記事から応募に進んでいない」など、Googleアナリティクスやヒートマップで仮説を立て、Figmaで改善案を作成。
小さな改修であっても、

  • 課題 → 仮説
  • UI変更案 →期待する行動
  • 検証方法

をセットで言語化し、ディレクター・クライアントと共有します。

「自分のUI変更で応募数が◯％増えた」といった手触りが、採用ブランディング案件ならではのやりがいです。

チームでつくる採用ブランディング：ライター・人事との掛け算

ジェイ・ラインでは、UI/UXデザイナーが単独で完結することはほぼありません。
ディレクターがクライアントの課題を整理し、ライターがインタビューで“言葉になっていない採用軸”を掘り起こし、それをデザイナーが体験設計とビジュアルに翻訳します。
たとえば、ライターが拾った印象的な一言を、ヒーローコピーやインタビュー見出しに反映したり、人事担当者と「このメッセージは現場も本当にそう思っていますか？」と確認しながらトーンを整えたり。
チームで議論しながら、「この会社らしさって何だろう？」を探っていくプロセス自体が、採用ブランディングの醍醐味と言えます。

応募前に見直したいポートフォリオ3つのポイント

採用サイト・ブランディング案件に挑戦したいUI/UXデザイナーなら、ポートフォリオで次の3点を整理しておくと伝わりやすくなります。

  1. 構成：案件ごとに「背景 →役割 → 成果物 → 学び」と同じフォーマットで揃える。
  2. 説明テキスト：「誰に・何を・どう伝えるためのデザインか」を1〜2文で明記する。
  3. 成果の書き方：数字があればCVRや改善率、なければ「クライアントからの評価」「社内での再利用」など質的成果を書く。

静止画キャプチャだけでなく、FigmaのプロトタイプURLやUI改善前後の比較を載せると、思考プロセスまで伝わりやすくなります。

あわせて読みたい