UI/UXデザイナーの仕事ぜんぶ見せます。画面設計する前にジェイ・ラインが必ずやっている3ステップ

UI/UXデザイナーの「仕事の範囲」はどこまで？

ジェイ・ラインのUI/UXデザイナーは、「きれいに仕上げる人」ではなく、課題発見から関わるメンバーです。
採用サイトやコーポレートサイトの案件では、営業やディレクターと一緒にクライアントの課題を整理し、「誰に・何を・どう伝えるか」を設計。そのうえで、情報設計・導線設計・UIデザインまで一気通貫で担当します。
作業としては、要件整理、ユーザー定義、サイトマップ作成、画面遷移図、ワイヤー、UIデザイン、レビュー・改善提案までがセット。Figmaを触る時間より、「考えている時間」のほうが長い仕事です。

STEP1：課題ヒアリングとユーザー整理

最初の仕事は「クライアントが本当に困っていることは何か？」を言語化するところからです。
・現状の数値（応募数、離脱率、問い合わせ数など）
・想定しているターゲット像（年齢、職種、行動パターン）
・採用・事業上のゴール（量か質か、短期か長期か）
といった情報をヒアリングし、ディレクターと一緒に整理します。
ここで、ペルソナやカスタマージャーニーを簡易的にまとめることも多く、「このユーザーは何に迷うか？どこで離脱しそうか？」を先に想像しておくのが、その後のUIの精度を決めるポイントです。

STEP2：サイト構成と導線設計

次にやるのが、サイト全体の「骨組みづくり」です。
・トップからどの情報にどう遷移させるか
・採用なら「エントリー」までの最短ルートは何か
・迷子になりやすいポイントをどう減らすか
を意識して、サイトマップや画面遷移図を作成します。
「メニュー構成をどう分けるか」「1ページにどこまで情報を詰めるか」といった情報設計の段階で、ディレクターやライターと細かくすり合わせ。ここで意思決定しておくと、Figmaに入ったあとに手戻りが少なくなります。

STEP3：ワイヤー作成〜UIデザイン・レビュー

導線が固まったら、FigmaやXDでワイヤーフレームを作ります。
・各セクションの目的（共感・信頼・比較・行動喚起など）
・視線の流れと情報の優先度
・PC/SPでの見え方の差
を押さえつつ、「テキスト量」と「ビジュアルの役割」を整理。
その後、ブランドトーンを反映したUIデザインに落とし込み、社内レビューで「仮説とデザインがつながっているか」をチェックします。レビューでは「なぜこのUIにしたのか」をきちんと説明することが求められます。

ケーススタディ1：採用サイトのBefore/After

ある採用サイトでは、Beforeは「画像が大きくておしゃれだけど、応募ボタンが見つかりにくい」という状態でした。アクセス解析を見ると、募集要項ページへの遷移率が低く、トップで離脱しているユーザーが多数。
そこで、「仕事像が見えないまま離脱している」という仮説を立て、Afterではトップに「1日の流れ」「社員インタビュー」への導線を配置。さらに、各ページの下部に応募ボタンを固定で配置しました。結果として、募集要項への遷移率とエントリー率がともに向上しました。

ケーススタディ2：コーポレートサイトのBefore/After

別のコーポレートサイトでは、Beforeは「事業内容ページが縦長すぎて、何をしている会社か一目で伝わらない」構成でした。アクセスログを確認すると、中盤以降のスクロール率が極端に低下。
そこで、「一画面目で事業全体像を俯瞰できること」をゴールに再設計。事業領域を3ブロックに整理し、アイコンと一文で概要を提示、その下に詳細ページへの導線をまとめました。結果、事業詳細ページへの遷移率が改善し、問い合わせフォームへの導線もスムーズになりました。

ポートフォリオをUX視点で見直すチェックリスト

記事を読んだあとにできる簡単なワークとして、自分のポートフォリオを次の観点で見直してみてください。
・課題とゴールが1〜2行で説明できているか
・想定ユーザー像を明示しているか
・サイトマップや導線の意図を図解しているか
・ワイヤーやラフの段階を載せているか
・「なぜそのUIにしたのか」を文章で書いているか
・成果や改善結果を可能な範囲で数値で示しているか
このあたりを整理しておくと、面接での説明にも一貫性が出て、「考えられるデザイナー」であることが伝わりやすくなります。