【リクナビNEXT】ユーザー視点を追求したワイヤーフレームの作り方「ワイヤーフレーム編」

ワイヤーフレームとは、ワイヤー（線）とフレーム（枠）を使って、シンプルに要素や情報を配置する「設計図」のようなものです。

どうすればユーザーにわかりやすく伝えられるかを考え、コンテンツの優先順位を可視化し、配置していきます。

ワイヤーフレームはUXの具体化と詳細化を進める重要なプロセスであり、評価を繰り返しながら進めます。

情報設計で整理した要素を配置します。作成したペルソナを基に、サービスを利用するユーザーを考慮し、画面のワイヤーフレームを作成します。

今回は初めてサービスを利用するユーザーを設定し、仮説を立てて、新規登録のユーザーストーリーを作成しました。アカウント作成済みで、キャリアシートの登録が完了済み、面接や書類選考など、ある程度進捗があるという利用条件のもと、画面のワイヤーフレームを作成していきます。

まずは大まかな設計を見てみましょう。以下は情報設計編までの過程で挙がった新機能の主な変更要素です。

• ダッシュボード(My Activity)の新設
• 生成AIによる応募書類自動生成ツールの実装
• 検索バーの利便性向上

ユーザーの行動や興味関心の高いカテゴリに合わせて、重要な情報を優先的に配置します。

大きな変更点の一つとして、ファーストビューの変更があります。既存の設計では、検索バーが画面最上部に表示されていました。しかし、ログインしたユーザーにとって最も重要なのは「転職活動の進捗状況」です。

そのため、進捗が確認できるダッシュボードを優先的にファーストビュー上部に配置し、その後に、次の行動を促すための検索バーがフローティングするように変更しました。

次に画面を細かく区切って、詳細を確認していきます。

ダッシュボード(My Activity)の新設

新設したダッシュボード(My Activity)は、ユーザーが転職活動の進捗状況を一目で把握できるように改善しています。

ダッシュボードには「応募状況」「面接スケジュール」「企業からのメッセージ」などが表示され、ユーザーが次にアクションするための情報を得ることができるようになっています。

これにより、ユーザーはログイン後すぐに現在の進捗を確認し、効率的に転職活動を進めることができます。

生成AIによる応募書類自動生成ツールの実装

また、AIを活用したキャリアシート自動作成ツールも新設しました。

このツールは、ユーザーが履歴書や職務経歴書をサイトにアップロードすると、AIがユーザーのデータを分析し、応募する際に必要な情報を自動で仕分けます。

これにより、毎回の情報入力の手間を省き、ユーザーがより迅速に希望条件に合った求人に応募できるようになります。さらに、AIがユーザーの経歴やスキルを分析し、最適な求人を提案するため、ユーザーは自分にぴったりの求人情報に辿り着きやすくなります。

検索バーの利便性向上

ユーザーがよく使用する3つの情報(職種・年収・業界)に分けて、UI的にタブ形式に変更することで、ユーザーは直感的に条件を選択できるように変更しました。

これにより、希望条件を選択する際の工程を簡易化させることができ、ユーザーはストレスなく検索できます。

さらに、検索バーが常に視界に入るように、フローティングさせることで画面に追従する機能を追加しました。

これにより、ユーザーはどのページにいても素早く検索機能にアクセスでき、必要な情報を迅速に探せます。

ナビゲーション

ハンバーガーメニューを押すと、横からスライドして表示される形式に変更しました。そうすることでトップページの表示エリアを広くし、ユーザーがより多くの情報を一目で確認することが可能になります。

従来のナビゲーションはトップページでは左側、他のページでは上側に配置されており、統一感がなくユーザーがページ遷移する際に混乱を招く恐れがありました。

他ページにも本デザインを適用することを想定し、統一感のあるデザインとなるよう設計しました。

また、ラベリングについては、どんなコンテンツが集約されているのかを想起しやすくなるよう、項目名の見直しを行いました。これにより、ユーザーは各項目の内容を直感的に理解しやすくなり、サイトのナビゲーションがよりスムーズになります。

求人情報や特集などのレイアウト見直しの説明

従来の縦並びの形式だと求人情報が大半を占めるサイトになってしまい、他の情報に辿り着きづらく、冗長に見える問題を解消するため、表示形式を横並びのカルーセル形式に変更しました。

この改善で、ユーザーはスクロールの手間を省きつつ、自分の意思で見たい求人情報にアクセスしやすくなりました。

また、従来の求人情報から必要な情報だけを抜粋し整理することで、求人情報をシンプルにし、ユーザーがスムーズに応募判断をできるように改善しました。