“読み捨てられない採用サイト”のつくり方：UI/UXデザイナーが語る3つのこだわり

「きれいだけど記憶に残らない」採用サイトの共通点

ビジュアルは整っているのに、候補者の記憶に残らない採用サイトには共通点があります。
・見る人が「自分ごと化」できない
・知りたい情報にたどり着くまでが遠い
・スマホでの閲覧ストレスが大きい
この3つです。どれも見た目の“かっこよさ”だけでは解決できません。ジェイ・ラインでは、UI/UXデザイナーが企画段階から関わり、「誰に」「どんな体験を提供するのか」までセットで設計することで、応募数だけでなくマッチング精度も高めることを重視しています。

こだわり① ペルソナから始める情報設計

最初にやるのは「ペルソナの解像度を上げること」です。年齢や職種だけでなく、
・今どんな環境で働いているか
・何にモヤモヤして転職を考えているか
・どんな変化を得られれば応募したくなるか
まで具体化します。たとえばテクニカルディレクターであれば「コードは書けるが、もっと上流に関わりたい」「顧客折衝も嫌いじゃない」といった価値観を起点に、必要なコンテンツ（案件事例・関わり方・チーム体制など）をFigma上でマッピングし、情報の優先順位を決めていきます。

こだわり② 候補者の“モヤモヤ”起点の導線設計

次に考えるのは「どんな順番で不安を解消していくか」です。
・この会社、何をしているの？
・自分のスキルは活かせる？
・働き方や評価は？
といったモヤモヤを時系列で洗い出し、「トップ →事業理解 →仕事内容 → 働き方 → 応募」のようにストーリー化します。ビフォーでは散発的だったコンテンツを、アフターでは「1スクロールごとに不安が1つ減る」構成に整理。Figmaのプロトタイプ上で、候補者目線のクリックシナリオを確認しながら導線を微調整していきます。

こだわり③ スマホ前提のUIデザイン

採用サイトのアクセスの多くはスマホです。にもかかわらず、PC前提でデザインし、最後にレスポンシブ対応するだけでは「読み捨てサイト」になりがちです。ジェイ・ラインでは、
・最初にスマホサイズでワイヤーを引く
・1画面1メッセージを徹底する
・タップしやすいボタン配置と行間設定
を基本ルールにしています。たとえば「社員インタビュー」は、長文テキストではなく、見出し・要約・詳細の3段階に分けて、通勤中でもストレスなく読めるUIに落とし込んでいます。

Figmaでの設計プロセスとビフォー／アフター事例

Figma上では、最初に「情報カード」を量産し、ペルソナの興味度合いごとに整理します。ビフォー事例では、
・事業説明と採用メッセージが混在
・CTAボタンが目立たない
といった課題がありました。アフターでは、ヒーローエリアで「どんな人に来てほしいか」を明示し、その下に「1日の流れ」「プロジェクト事例」「使用ツール」など、候補者が判断しやすい情報を並べています。この情報再配置だけで、応募数と面接後のミスマッチが大きく改善したケースもあります。

応募数だけでなく“マッチング精度”に効くデザイン

採用サイトのUI/UX設計で目指しているのは、応募数の最大化だけではありません。「来てほしい人だけに強く刺さる」状態をつくることです。たとえば、
・顧客折衝や進行管理が楽しいと思えるか
・チームで成果を出したいか
・変化の多い環境を前向きに楽しめるか
といった価値観を、コンテンツとインタラクションで具体的に伝えます。読み捨てられない採用サイトは、単に情報量が多いサイトではなく、「自分はここで腕を磨きたいか」が数分で判断できるサイトだと考えています。