どうも、デザイナーの酒うさぎです！普段はWebグラフィック、UIデザイン担当をしております。今回はタイトル通り、デザイナー視点で転職サイトのデザインを観察し、2サイトの比較をした結果を纏めてみました。

観察対象は、はたらこねっととバイトルです。

サイトを選んだ基準について、「求人サイト」「転職サイト」などキーワードを入力し、検索結果の1ページ目に表示される求人サイトの中から利用ユーザー層が近しいものを選びました。

その中から、今回の観察対象の組み合わせを選んでいます。今後も他のサイトを観察していく予定です！

それでは早速見ていきましょう！
※なおこの記事で記載する結果は私の勝手な観察結果であり、関係者様とは関係ございません

1.Webサイトの構成特徴

はたらこねっと、バイトルそれぞれのサイト構成を洗い出します。

♦️はたらこねっと

【特徴：ファーストビュー】
はたらこねっとの特徴はファーストビュー。
ユーザーが1番はじめに目にするコンテンツは、勤務地域から選ぶための地図型リンクでした。

彩度の高い黄緑で塗られているので全体的に淡い黄色系の背景になっているサイトなので、目に飛び込んできやすいデザインです。

【理由考察】
はたらこねっとは正社員、契約社員、パート、アルバイト、バイト、紹介予定派遣など幅広い雇用形態の求人を掲載するので、勤務地も幅広い＋重要視されることが多いからなのかもしれません。

なおモバイル版では地図はなくエリアボタンを選択する形でした。
モバイルの場合はキャラクターの存在感も大きめで、「エリアを選択してください」の横に肉球マークがあって可愛いらしい印象がPC版よりやや強めです！

♦️バイトル

【特徴：ファーストビュー】
はたらこねっと同様、最初にエリア選択が大きく出ます。地図には、メインカラーの赤よりも彩度は低いながら目立つ黄緑を使っています。
イメージキャラクターもいるので目に留まりやすいです。

【理由考察】
今回バイトルとはたらこねっとを比較対象に選んだ理由が絡んでくると考えました。
このふたつは同じ運営会社が運営しており、さらにターゲットにしているユーザー層も近いらしいです。（ソースはこちら）

と、いうことでバイトルの特徴の理由もはたらこねっとと近いからかもしれません。

モバイル版でも地図型でエリアを選びます。あとはアプリダウンロードの広告が出てきます。
PC版ではヘッダーにあった情報も地図内で割と大きく表示されました。

2.デザイン要素

続いて、デザイン要素の観察です。

♦️はたらこねっと

はたらこねっとはロゴの色であるオレンジや黄色がメインカラーです。
ロゴと同じ色の彩度の高いオレンジは強調したい数字の表示に使っています。また、メインカラーが暖色に対して他の色は寒色系の色を使用することで、暖色系の色が強調できています。
しかし、基本的な明度に大きな差はなく、全体的に統一感がある印象です。

また、サイト上部には画像の使用が少なくコンテンツ幅に余裕があり、枠線もシャドウにしてぼかしているため、有彩色（白黒グレー以外の色）の面積は多いですが、ごちゃっとした印象を与えないデザインだと思いました。

サイト後半にはアイキャッチ付きリンクが固めてある構成です。アイキャッチのみ、色の使用やイラストの多様によりカラフルでポップな印象が増しています。

♦️バイトル

バイトルのメインカラーは赤です。彩度が高くパキッとしたビビット寄りのトーンです。
その他、CVボタンなどサブカラーは地図で使用した緑に近い色を使っています。（色コードは違います）

また、ボタンやコンテンツにシャドウをつけず、枠線で区切り全体的にフラットなデザインです。あとはイラスト素材が多く使われている点もポイントに感じました。

地図と色がほぼ同様の緑のサブカラーは主にこういったボタン周りで使用されています。

赤と緑は反対色。反対色の効果は、互いの色を引き立て合い、より鮮やかに見せることができます。バイトルはサービスカラーが赤なので、緑を使うことでロゴやキャラクターを引き立てながら、CVボタンなどを程よく主張させることができる色の組み合わせだと思います。

3.比較

ここまでの気づきを元に、両サイトを比較して気づいたことをまとめます！
まずは、ここまでに挙げたそれぞれの特徴です。

♦️はたらこねっと特徴

・オレンジ黄色系のイメージが残る
・画面上部に画像が多くないのでシンプルな印象
・目立たせたい数字にはロゴのオレンジを使用
・イメージキャラを多用しない

♦️バイトル特徴

・メインカラーの赤と背景の白いイメージが残る
・色はポイント程度にしか使わない
・アイキャッチつきリンクは少なく文字情報が多め
・イメージキャラを多用しない

以上のことから、以下の共通点と相違点があると考えます。

♦️共通点

・ファーストビューにはエリア選択地図を配置
・イメージキャラクターがいるがデザインで多用しない

♦️相違点

はたらこねっと：柔らかいトーンの色で統一していてポップな印象だがごちゃっとしないシンプルな印象

バイトル：メインの赤カラーに合わせて有彩色の彩度は高いが、白地面積が多くてシンプルな印象だがコンテンツ量は多い

4.結果

今回2サイトを比較してみて感じたポイントです。

♦️Point

・色よりも、コンテンツの幅間と枠線の有無が情報量の印象を左右する
・ユーザーが意識して見るデザインは色だが、無意識のうちに影響をうける部分はコンテンツ幅など細かい構成にある

コンテンツ数が多いor少ないサイトを作るときほど、このポイントが見せ方の要になりそうです！

色はコンセプトやブランディングの味付けとして、最後の一押しポジション、という感じかなと思いました。

個人的には、こういった情報量が多いサイトのデザインする時に大事なこととして、「誰に何を見せるための存在なのか」また、「ユーザーが使いやすいかどうか」が重要な目的になると考えています。

とはいえ、使い勝手だけを追求するとビジュアルデザインとのバランスが悪くなることもあるので、それぞれのポイントを制作時にチェックしていきたいですね！

以上、２サイトの観察・比較結果でした。

 

参考サイト（順不同）：
はたらこネット
バイトル