Webリニューアル・Webマーケティングの強化のご相談・ご依頼など、
売上アップに関することは、当社コンサルタントにお気軽にご相談ください。
国内最大級アルバイト求人サイトのCVRを劇的改善したUI/UX刷新
自然流入ユーザの応募率を高めるユーザー中心設計
Client
パーソルキャリア株式会社(旧インテリジェンス)は、多様な人材サービスを展開し、はたらく人々の成長と企業の採用活動を支援する企業です。求人メディアの運営や人材紹介などを通じて、労働市場における最適なマッチングを提供しています。
Result
会員登録数とエントリー数を大幅に増加、サイト全体のCVR改善と問合せ数向上を実現。
Solution
Overview
本プロジェクトの対象である「an」は、国内最大級のアルバイト求人サイトとして多くの求職者に利用されてきました。しかし、求人一覧や求人詳細ページへ自然流入するユーザーのコンバージョン率(CVR)が著しく低下しているという深刻な課題を抱えていました。
その大きな要因として、ユーザー中心のUI/UX設計が全くできておらず、求職者が目的の情報にスムーズにたどり着けない構造になっていたことが挙げられます。このような状況を打破し、サイト経由の応募数や会員登録数を再び増加させるため、専門的な調査に基づいた抜本的なデザインリニューアルを実施することになりました。
Process
Point.01
本フェーズでは、ユーザビリティセオリーの観点および競合サイトとの比較を通じ、現状の対象サイトに潜む課題の抽出を実施しました。専門家の目線でサイトを回遊し、ユーザーが目的を達成する上で障壁となる要素を詳細に洗い出しています。その結果、トップページから応募フォームに至るまで、合計31項目にも及ぶユーザビリティ上の課題が浮き彫りとなりました。
抽出された課題の内訳は、キャッチアップに関するものが17項目、他社との差別化要素に関するものが14項目となっています。ページ別の内訳を見ると、トップページおよび共通ヘッダーで6項目、中間・モーダルページで5項目、一覧ページで5項目、詳細ページで9項目、そしてコンバージョンに直結する応募フォームで5項目と、サイト全体にわたって改善の余地があることが判明しました。
これらの結果を総合的に評価したところ、5段階中、最も低い「E(致命的な問題あり)」という厳しい判定が下されています。これは、サイトの目的や用途に対して大きな悪影響を与える致命的な問題が存在し、早急な修正が不可欠であることを意味します。特に、ナビゲーションの構造、情報の分類、入力フォームの使い勝手、デザインのメリハリといった多岐にわたる項目において、ユーザーに過度なストレスを与えている状態であることが分かりました。

ヒューリスティック&競合ベンチマーク評価1

ヒューリスティック&競合ベンチマーク評価2

ヒューリスティック&競合ベンチマーク評価3

ヒューリスティック&競合ベンチマーク評価4
この評価は絶対的な基準によるものではなく、課題の傾向や今後の改善による「伸びシロ」の大きさを関係者間で共有しやすくするための相対評価として実施されています。
これにより、どの部分を優先的に改修すればCVRの向上に最も貢献できるのかが明確になりました。競合他社の優れたUIデザイン(アコーディオン形式の採用やタブ形式での情報整理など)と比較することで、自社サイトに欠けているユーザビリティのベストプラクティスを取り入れる方向性も同時に定義しています。
重要度の高い課題例
・応募フォームにおいて、ファーストビューに求人情報が一部しか表示されず、入力欄の赤色に対してグレーアウトしているためオン/オフの状態に見えてしまう。
・一覧ページから開く「職種を選択」などのモーダルウィンドウで、画面を何度もスクロールしないと全体像を把握できない構造になっている。
・求人詳細ページにおいて、ファーストビューの範囲に肝心なコンバージョン導線が配置されていない。
・応募ボタンなどの重要なコンバージョン導線が、サイトの基調色である赤色と同系色でデザインされており、視覚的に目立ちにくい。
・新規会員登録やログインを行った際、ログイン前に閲覧していた「最近見たシゴト」や「保存したシゴト」の履歴情報が引き継がれない。

ヒューリスティック&競合ベンチマーク評価5

ヒューリスティック&競合ベンチマーク評価6

ヒューリスティック&競合ベンチマーク評価7
Point.02
本ステップでは、アクセス解析ツール(サイトカタリスト)を用いて取得した定量的データに基づき、ヒューリスティック評価で策定した改修方針の妥当性を検証しました。対象期間は2016年3月1日から15日までのログデータとし、ユーザーの実際のサイト内行動を精緻に分析しています。通常はワイヤーフレームの策定前に実施される工程ですが、プロジェクトの進行スピードを加速させるため、画面設計と並行して分析が進められました。
解析の結果、サイト内のページビュー構成比において、求人詳細ページへのアクセスが全体の72%(約33万回)と圧倒的に多く、次いで一覧ページが43%を占めていることが確認されました。このデータから、詳細ページおよび一覧ページのUI/UX改善が、サイト全体のパフォーマンス向上において極めて高いインパクトを持つことが裏付けられています。

アクセスログ解析1

アクセスログ解析2
また、本解析を通じて、事前に立てた仮説が正しいことを示す9つの重要事項が定量的に確認されるとともに、新たな発見として3つの改善要素が抽出されました。
リニューアル後の効果測定を見据え、トップページのファーストビュー以下への遷移率や、「最近見たシゴト」「保存したシゴト」機能の利用率など、6つの中間KPIも新たに設定しています。
さらに、ユーザーの離脱ポイントも明確になりました。
一覧ページからの離脱率が22%、詳細ページからの離脱率が42%、応募フォームからの離脱率が13%となっており、各ステップでのユーザーの離脱を防ぐための具体的な施策が必要不可欠であることがデータとして示されています。特に検索行動においては、ユーザーが条件を絞り込む過程で迷いが生じており、検索導線の見直しが急務であると結論付けられました。
重要度高い課題例
検索導線の見出し分類がユーザーの思考と合致しておらず、検索ニーズを正しく汲み取れていないことがデータ上の離脱傾向から確認された。
エリアや駅などの複数条件を掛け合わせた絞り込み機能が弱く、比較検討をスムーズに行いたいというユーザーの本来の目的にマッチしていない。
応募フォーム画面から求人詳細画面へと戻ってしまうユーザーが一定数存在し、応募決断に必要な情報がフォーム上で不足していることが示唆された。

アクセスログ解析3

アクセスログ解析4

アクセスログ解析5
Point.03
ヒューリスティック評価およびアクセスログ解析から得られた知見を統合し、サイト内の各ページが果たすべき本来の役割を再定義しました。その上で、具体的な改善方針を策定し、ユーザーを迷わせない新しいワイヤーフレームの作成へと繋げています。

制作方針1

制作方針2

制作方針3

制作方針4

制作方針5

制作方針6
トップページでは、ユーザーがいち早く目的のエリアや条件を選択できるよう、日本地図を用いた直感的なナビゲーションを配置し、エリアトップへの遷移率向上を狙いました。また、初回訪問者に対して「このサイトで何ができるのか」を明確に伝えるため、ブランドの信頼感を示すコンテンツをファーストビューの目立つ位置に配置しています。
検索の中間ページにおいては、本来の役割である「条件の絞り込み」に特化させる方針をとりました。従来は上位に配置されていたプッシュ型の情報やバナーの優先度を下げ、ユーザーが純粋に検索条件の設定に集中できるレイアウトへと刷新しています。
検索結果の一覧ページでは、複数の求人情報を比較検討しやすくするため、条件変更エリアのデザインをコンパクトに圧縮し、求人情報の表示面積を拡大させました。
さらに、勤務時間や特徴アイコンなど、比較の軸となる情報に視覚的なメリハリを持たせることで、ユーザーが自分にマッチした求人を直感的に見つけられるよう配慮しています。
求人詳細ページについては、ユーザーが「応募する」という判断を下すために必要な情報(勤務地、職種、給与、シフトなど)と、働く意欲を高めるための情報(仕事内容の詳細、職場の写真など)を分類しました。これらの重要情報をファーストビュー内に分かりやすく整理し、ユーザーの応募へのモチベーションを最大化する構成へと変更しています。
応募フォームでは、ユーザーの入力ストレスを最小限に抑えることを最優先としました。現在の入力進捗を示すステップナビを導入するほか、どの求人にエントリーしようとしているのかを一目で確認できるサマリー情報を配置し、スムーズな手続き完了を促す設計指針を固めました。

画面設計ワイヤーフレーム1

画面設計ワイヤーフレーム2

画面設計ワイヤーフレーム3

画面設計ワイヤーフレーム4

画面設計ワイヤーフレーム5

画面設計ワイヤーフレーム6
Point.04
策定したワイヤーフレームと制作指針をベースに、ユーザーの視覚的な使いやすさと操作性を両立させた具体的な画面デザインへと落とし込みを行いました。特に、コンバージョン率に最も大きな影響を与える応募フォームのUIデザインにおいて、細部にわたる緻密な改善が施されています。
フォーム画面の上部には、「情報入力」「応募完了」といった現在の進捗状況を示すステップナビゲーションを配置し、ユーザーがゴールまでの距離を直感的に把握できるようにしました。これにより、入力中の心理的な負担感を軽減する狙いがあります。
また、ユーザーが複数の求人に一括で応募するケースを想定し、応募先情報の見せ方にも工夫を取り入れました。
応募先が4件以下の場合は全件を表示させますが、5件以上になる場合は4件目からグラデーションを用いて徐々にフェードアウトするデザインを採用しています。さらに「すべての応募求人を見る」というアコーディオンボタンを設置することで、画面が縦に長くなりすぎるのを防ぎ、スッキリとした洗練された印象を与えています。
入力項目自体についても、視認性を高めるための細やかな配慮がなされました。
必須項目を示すマークには、サイト全体の基調色である赤色と混同しないよう、サブの強調色としてオレンジ色を採用しています。これにより、最重要アクションである「応募ボタン(赤)」の存在感を際立たせつつ、入力漏れを防ぐ効果をもたらしています。さらに、フォーム内の各入力項目群に見出しを設け、情報の区切りを明確にするレイアウトへと変更しました。
ユーザーは自分が今何の情報を入力しているのかを整理しやすくなり、入力ミスの減少に繋がります。
万が一入力エラーが発生した際にも、エラーメッセージから該当箇所へスムーズに移動できるページ内リンクボタンを配置し、修正にかかる手間を最小限に抑えるユーザーファーストなデザインを実現しました。

デザイン制作1

デザイン制作2
不動産や求人サイトのように、膨大なデータベースの中からユーザー自身に希望の条件を設定させ、目的の情報を探し出させる形式は「ディレクトリ型サイト」と呼ばれます。このようなサイト構造において、ユーザビリティの質はビジネスの成果に直結する極めて重要な要素となります。
ディレクトリ型サイトを利用するユーザーは、「希望の条件に合う情報を、できるだけ早く、簡単に比較検討したい」という明確な目的を持っています。そのため、検索条件の絞り込みにくさや、情報配置の分かりにくさ、あるいは入力フォームでのわずかな操作の手間など、サイト内に存在する小さな摩擦(ストレス)が、そのままユーザーの離脱へと直結してしまいます。離脱が増加すれば、最終的な目標である応募や問い合わせの数は必然的に減少し、ビジネスとしての売上機会を大きく損失することになります。
本プロジェクトの対象であった「an」においても、自然流入したユーザーが途中で離脱してしまい、コンバージョン率(CVR)が低下しているという課題が存在していました。しかし、今回のリニューアルのプロセスで示されたように、専門家によるヒューリスティック評価でUIの欠陥を客観的に洗い出し、さらにアクセスログ解析によってユーザーの実際の行動データを定量的に裏付けるというアプローチは非常に有効です。課題を正確に可視化し、それに基づいた緻密なワイヤーフレームの策定と、ユーザー心理に寄り添ったデザイン制作を行うことで、初めて根本的な改善が可能となります。
CVRは、こうしたディレクトリ型サイトにおいてまさに「生命線」と呼ぶべき指標です。ユーザーがストレスなく目的の情報に到達し、スムーズにアクションを起こせるUI/UXを提供することは、単なる見た目の美しさを整えることではありません。それは、顧客体験の最大化を通じてビジネスの売上を飛躍的に向上させるための、最も確実かつ戦略的な投資であると言えます。
Webリニューアル・Webマーケティングの強化のご相談・ご依頼など、
売上アップに関することは、当社コンサルタントにお気軽にご相談ください。
Consulting Specialist