求人検索エンジンのレスポンシブデザインを比較してみた

今回はタイトル通り、求人検索エンジンのレスポンシブデザインについて書こうと思います。取り上げる媒体は主にスタンバイで、少しindeedと求人検索ボックスにも触れていきます​。

最初に結論を述べると、3媒体ともPC版よりもスマホ版の方がシンプルな作りになっていました。具体的にどの部分がシンプルになっていたのかを以下の文章に書いていきます。

レスポンシブデザインとは

そもそもレスポンシブデザインとは、PC、タブレット、スマートフォンなど、異なるデバイスの画面サイズによってレイアウトやデザインを調整することをいいます。

これにより、デバイスごとに最適な見え方のデザインをユーザーに提供できるという訳です。

今回はPC版とスマートフォン版（以下スマホ版）を比較していこうと思います。（タブレット版はPC版とほとんど差が無かったため）

スタンバイ編　トップ画面

まずはトップ画面です。

一番印象的なのはPC版にある写真がスマホ版だと無いことです。よりシンプルな印象を受けますね。

また、勤務地の項目がPC版は一覧で全て表示されているのに対し、スマホ版はタップで開閉する仕様になっています。

スタンバイ編　検索結果画面

次に検索結果画面です。

PC版は条件を選ぶ項目が左側にあるのに対し、スマートフォンはタップで開閉する仕様となっています。

また、PC版はカーソルを募集項目欄に合わせると色が白からグレーに変化します。
これはクリックできることをユーザー側に示していると考えられます。

スマホ版は「詳しく見る」のボタンを設置し、詳細が見れることを表しています。タップして操作するというスマホの特徴を活かした設計に変化しているのが分かります。

スタンバイ編　募集要項画面

PC版は関連する求人の項目が右側にあります。つまり、一画面内で募集要項と関連する求人項目が見られます。
一方で、スマホ版は下側にあり、すぐに飛べるように追従するボタンを設置しています。このボタンを設置することでユーザー側はスクロールする手間を省けます。また、「掲載元で見る・応募する」「お気に入り」ボタンも追従する仕様になっています。

スタンバイ編　まとめ

PC版とスマホ版を見比べてみると、スマホ版では項目を収めていることが多いことが分かりました。横画面の情報を縦画面に収めようとするとどうしても情報が長くなってしまいます。故に、スクロールする量を減らすために納めているのだと思います。

求人ボックス編　トップ画面

今度は求人ボックスのレスポンシブデザインの比較をしていきます。
また、求人ボックスとindeedは長くなってしまうため、トップ画面のみの比較をします。

PC版のグローバルナビゲーション（PC版のwebサイトの上の方にあるメニュー項目）がスマホ版（スマホ版のwebサイト）だとハンバーガーメニュー内に格納されています。

「働き方・雇用形態から探す」項目はPC版は同じ大きさですが、スマホ版では優先順位をつけて表示されています。全て同じ大きさだと縦幅を取って画面が長くなってしまうので、それを阻止するために大きさを変更しているのかもしれません。

「ランキング項目」では、PC版は色付きで横並びになっていますが、
スマホ版は切り替え方式で白背景になっています。よりシンプルな印象を受けますね。切り替え方式のためPC版のように色が違うと、切り替えるたびに色が変化して雑多な印象を受けてしまいます。なので、白に統一したのかもしれません。

こちらは、トップ画面にある職種選択画面です。スマホ版の方が明度が高く、白が多いことが分かります。

indeed編　トップ画面

indeedに移ります。

こちらもPC版にあるグローバルナビゲーションをスマホ版ではほぼハンバーガーメニュー内に格納しています。ですが、ログイン画面のみトップ画面に配置しています。ユーザーはトップ画面に飛んですぐにログインできますね。

また、検索ボタンの文言が違います。スマホ版では最初に条件を指定できるので「この条件で検索」といった文言に変更しているのかなと思いました。

「人気のキーワード」項目ではPC版とスマホ版では色が違うことが分かります。

スマホ版のみ「雇用形態・こだわり」の項目があります。また、タップすると詳細画面が表示される仕組みになっています。PC版は検索キーワードを入れて検索した後に詳細設定ができ、スマホ版は最初に詳細設定をした後に検索する仕様になっています。

まとめ

比較してみると、どれもスマホ版だと基本的によりシンプルな構成になっていることが分かりました。これはスマホ版はPC版より画面が小さく、情報を抑える必要があるからなのかも知れません。また、誤タップを防ぐためといった理由も考えられます。

以上、レスポンシブデザインの比較でした。