UIデザイン比較 ー検索＆検索結果画面編ー（デザインのお仕事/MOREWORKS）
デザイナーのasatoです。
この前はデザインのお仕事とMOREWORKSの2つのクリエイター向け求人サイトのトップ画面のUIデザインを比較しました。
今回はそれに続いて、検索画面と検索結果画面のUIデザインを比較していこうと思います。
前回はこちら↓
デザインのお仕事
検索画面はなく、トップ画面のヘッダーから選択する仕様です。
ドロップダウン方式で選択でき、カーソルを合わせると色が変わるので分かりやすいです。
選択すると、検索結果画面に飛びます。
左側にある検索欄ではカテゴリーもしくは職種を選ぶ仕様となっています。 複数選択はできず、一つのカテゴリーを選ぶ形です。また、現在選択しているカテゴリーは黄色に変化します。
また、画面上の見出しに大きく自分が選択したカテゴリーが表示されるので分かりやすいです。
会社情報の項目内では、NEWの文字を他ではあまり使用されていない赤を使って目立たせています。新情報が見逃しにくくなるよう工夫されています。
また、雇用形態の部分は黄色の色付きで一目で分かるようになっています。
会社情報の内容はシンプルで会社名と職種名のみです。
そのかわりキャッチコピーを載せ、色も変えて目立たせて興味を引かせるようにしています。
ちなみに、項目にカーソルを合わせると枠の色が黄色に変化します。
画面左のカテゴリー選択欄の下には、コンテンツ欄があり実際にクリエイターとして働いている人の様子を知ることが出来ます。
スクロールしていくと、求人一覧が載っていて一度に多くの情報を見られます。すぐに大量の求人情報を見たい時に便利です。
MORE WORKS
続いて、MORE WORKSの画面を見ていきます。
前回でも書きましたが、トップ画面の上の部分から検索できます。
プルダウン方式で、入力する手間を減らしています。
検索ボタンを押すと、検索結果画面に飛びます。
画面左上の目立つ位置に検索結果の件数や表示件数が載っているので分かりやすいです。
また、順番が並び替えできます。 現在の並び順は青緑色で示しているので分かりやすく親切です。
検索は左からできます。トップ画面よりも更に詳細な検索を行え、新たに年収の項目が加わっていたり、チェック方式で気になる条件を追加できたりします。
会社情報の項目内ではアイコンを使用して分かりやすくしています。
この求人を詳しく見るや気になるリストは色を変えて押せることを強調しています。
また、この求人を詳しく見るボタンを押さなくても項目のどこかを押せば詳細が見られるようになっています。あえてボタンを設置することで詳細画面への導線を明確にしつつ、項目全体がボタンになっているため、いちいちカーソルを合わせなくても詳細画面へ飛べるのです。
そして、ログインすると気になるリストに追加するボタンを押せるようになります。
押すと追加され、ページ上もしくは右上のメニューから気になるリストが見られます。ワンクリックで解除も行えます。
また、カーソルを合わせると会社情報の項目周りにシャドウがつきます。
スクロールしていくと、トップ画面にもあった様々なカテゴリから検索できる項目が現れます。一旦実際の求人情報を見てから、違う切り口で検索をすることが可能なのです。
まとめ
2サイトを見て気がついた点は以下の通りです。
共通点
・検索画面の専用ページは無い
・検索後も新たに検索できるよう設置
・目立たせたいところは色を使用して視覚的に訴える
・会社情報の項目にカーソルを合わせると変化が起こる
相違点
デザインのお仕事
・情報量はシンプルながらも、キャッチコピーでアピール
・画像はロゴを使用
MORE WORKS
・検索結果画面の方でより詳細に検索条件を指定できる
・画像は写真を使用
以上が2サイトの検索画面、検索結果画面を比較して気づいたことでした！
次も引き続きデザインのお仕事とMOREWORKSの画面比較記事を書こうと思います！
他にも弊社のデザイン部では様々な記事を上げています。
よろしければ見てみてください🌸