スタンバイのUI分析をしてみた

こんにちは。デザイナーのasatoと申します。
今回は自分がスキルアップの一環として始めた求人サービスのUI分析を備忘録としてnoteに書いていこうと思います。
まずはスタンバイの分析を始めます。
スタンバイにはインストールするネイティブアプリも存在しますが、今回はWebアプリのスマホ版に絞って絞って見ていきます。

トップ

トップ

まずはトップ画面です。
全体的に白、オレンジ、水色で構成されておりシンプルだと言えるでしょう。余白もかなり意識されていて見やすい印象を受けます。

FV(ファーストビュー)にはロゴや数字を仕様した文言を載せることで、引きの強い画面になっています。
背景にはオレンジが使用されていて、目立たせつつもサービスカラーの印象づけになっています。

検索項目には勤務地や雇用形態といったユーザーが予め希望を出しやすい条件を設定し、検索のハードルを下げています。
またフリーワードにはサジェスト機能がついており、より検索しやすくなっています。

検索項目以下は「〜から探す」の項目を設けており、自分の興味のある分野を気軽に押せるようになっています。
ただのテキストリンクにするのではなく、ボタンのデザインにすることでより押しやすさが出ていますね。
またボタンにした結果、余白が自動的に設けられていて余裕のある見た目になっていると感じられます。

下の方にはスタンバイのコンテンツを載せて、サービスの魅力を押し出しています。全体的にシンプルなデザインなので画像を取り入れるだけでも目立つ構成になっています。

アプリの宣伝も、背景や重要ポイントをオレンジにして目立たせることで下の方にあっても目が留まりやすいデザインになっています。

エリア検索

エリア検索

1回検索して検索結果一覧画面に移動したあとは、更に詳細な検索条件を設定できます。
エリアに関してはエリアだけを設定できるポップアップが表示されます。
アイコンを設置し、視覚的に分かりやすい構成となっています。

また表示する内容を小分けにすることでユーザーが選択に迷わないように設計されています。
市区町村は数も多く、目が滑りそうなのであえてボタンにして目立つようにしているのかなと感じました。
全選択をすると小項目がグレーアウトするようになっています。明らかに押せないことが分かる見た目になっているので親切ですね。

絞り込み検索

絞り込み検索

その他の詳細条件に関しても検索結果一覧から設定できるようになっています。
タブ切り替えで一気に条件を選べるので負担になりづらいです。
また大項目は一覧表示、小項目はアコーディオンにしてあるので自分が希望する職種をすぐに選べます。
項目削除はボタンだけではなく、下の欄からもすぐに削除できるので気軽に選択しやすいです。

検索結果一覧

検索結果一覧
※企業情報部分はモザイク処理をかけています。

職種や雇用形態で絞って検索した場合は27件、給与とこだわり条件で絞って検索した場合は20件ほど表示されました。
カード数は多すぎてもスクロール量が気になりますし、少なくても次のページへ移動する際のロード時間で集中が途切れたりするのでこのぐらいが見やすいのかなと感じました。

検索結果数はオレンジで表示してあるので目立っています。
検索条件を件数の上に表示してすぐに把握できるようになっています。

また雇用形態を選択せずに検索した場合は、画像上部に載せた働き方の選択肢がスクロールしている途中で出てきます。
途中で載せることで、わざわざ上に戻って絞る手間が省けます。

カード自体のデザインは、新着や特徴を四角で囲いより目立たせていたり、求職者が気になる情報をピックアップして載せて判断しやすいようになっていると感じました。画像も載せてよりイメージがつきやすいようになっています。

詳細画面

詳細画面

応募画面へ進めるボタンは画面下に固定されているだけではなく、あらゆるところに設置されています。すぐに応募できるので便利ですね。

長い内容に関しては「もっと見る」で区切っているので全体的なスクロール量が抑えられています。
線で区切られているので項目ごとの境目が分かりやすいですね。

下の方で改めてこの求人情報の特徴を載せているので、わざわざ上に戻らなくて済むようになっています。

また「よく一緒に見られる求人」も出すことで更に一覧の中から探す手間が省けています。

以上がスタンバイのUI分析でした。
全体的にシンプルですっきりとしたUIであると言えます。
次回も分析した結果を備忘録としてまとめていくのでよろしくお願いします🌸