GreenのUI分析をしてみた

こんにちは。
デザイナーのasatoです。

自分の勉強かつ備忘録として、今回はGreenのブラウザ版(スマートフォン)のデザイン分析を行おうと思います。
※会社情報はプライバシーの問題からモザイクをかけて隠しています。

トップ画面

トップ

トップ画面でまずは目を引くのがキャッチコピーですね。
気軽さを演出している文言でユーザーの敷居を低くしています。
書体も文字の途中が切れて抜け感のあるものを使用しておりカジュアル感を演出しているなと感じました。
またGreenの理念がキャッチコピーの下に書かれています。
改行なしで一見窮屈に見えますが、文字間が開いているので堅苦しく感じませんね。

全体的に白/緑の配色で、要所で青やオレンジが使われています。
どの色も彩度が高くなく、柔らかい印象を受けます。この柔らかい色味が安心感を感じさせる配色だなと感じました。

ヘッダーが固定で上にあるのですぐにログイン/会員登録がしやすいです。
また5つの理由の下にCTAボタンを置くことで登録にスムーズに行きやすいようになっています。

その下に求人検索の項目があります。
FV近くではない場所に設置されていますが、ヘッダーに検索アイコンが常に表示されているのでこの位置でも問題ないかなと思いました。
需要の高い職種、勤務地、特徴から探すは独立して置いてより細かく調べたい場合には複数条件で探せるようになっています。
検索項目については次のセクションでより詳しく書こうかなと思います。

また更にその下にCTAボタンを置いてスムーズに会員登録しやすいようにしています。

その次は求人一覧ですね。こちらは求人一覧の分析セクションにて詳しく書きます。

最後の方で職種や他の条件を細かく載せて、気軽に検索しやすいようにしています。

サイト全体が結構文字サイズが小さめなのですが、あまり窮屈な印象を感じなかったです。
理由はきちんと余白を取っているからなのかなと感じました。

検索画面

トップから職種/勤務地/特徴/複数条件をそれぞれ押すと検索項目に移動します。
職種/勤務地/特徴については、1つだけ条件を選んで検索ができます。
あえて1つだけにすることで選択の負荷を下げ気軽に押しやすくする狙いがあるのかな？と感じました。

複数条件では前者3つを含めた詳細な条件を指定して検索できる画面に移動します。
自分がやりたいこと、会社に求めるものが細かく決まっている方に向いている検索方法ですね。
職種や勤務地、業種に関してはまず1つだけ選べるようにして、なるべく他の項目の選択肢を見えるようにしているのかなと思いました。
画面下部に固定で検索ボタンが設置、自分の条件に合った求人数をリアルタイムで反映しているので検索や条件の絞り込みの調整が気軽に行いやすいです。

求人一覧

求人一覧

Greenの場合はカードが大きめな印象を受けました。
一覧での情報が充実しているので、詳細に飛ぶ前にある程度内容を把握できます。写真が大きめにあるので会社の雰囲気も伝わりやすいですね。
またカードが大きいためか1ページに載る求人数は10件となっていました。
他サイトに比べて少なめですが、カードが大きい中で数が多いとスクロール量が増えてしまうのでちょうど良いかもしれません。

また「条件に合致したこの企業の他の求人」を押すと画像右のようにアコーディオンが開いて他の求人タイトルも見られるようになります。
SPだと文言が一緒なのですが、PCだと「条件に合った〇〇(会社名)の他の求人」と会社名が入るように異なっていました。
この部分にも会社名を入れることで印象付けをする意図があるのかもしれません。SPだと横幅が短く文字数の制限があるので共通文言なのかなと思いました。

気になるを押すには会員登録が必要になります。
このようにサイト内の機能を使えるのは会員のみとすることで、より登録率が上がりやすくなるのかなと思いました。

求人詳細

求人詳細

求人詳細ページではタブ切り替えで求人詳細の他にも、企業/PR/インタビュー/社員の声が見られます。

情報を同じページに載せるのではなくタブ切り替えにすることで見たい情報をすぐに手に入れやすいと感じました。

適宜見出しを入れたり、背景色が違う項目があったりするので目が滑らないです。
また会員しか見られない項目を入れることで登録率を上げる狙いがあるなと感じました。

ページの最後の方に会社情報や求人情報がまとまっており見やすいです。

企業のタブではアピールポイントを見出しのみで表示→アコーディオンで詳細を閲覧という形式にすることでユーザーが気になった情報のみを見られるので、簡潔で分かりやすいと感じました。

また募集している求人は職種ごとに求人情報がまとめられているので分かりやすいです。年収や勤務地、リモート可/不可などの需要が高い情報のみが載っているため簡潔です。

PRやインタビューなどより会社のことが分かるコンテンツが多いのも分かりやすくて良いなと感じました。

最後に自分が閲覧している企業と同じ業界の企業を載せることで、検索ページに戻る手間をユーザーに与えないようにしていると思いました。

PRは結構モザイクで隠れてしまっているのですが…
本来は実際に働いている社員の方が会社の魅力について答えるというものです。
こちらもユーザーのことを考えた項目だなと感じます。
インタビューも同様ですがこちらもモザイクだらけになってしまったので割愛させていただきます。

さいごに

Greenのデザインは大事な部分は大きく強調し、文字サイズは小さめにしてメリハリをつけている印象を受けました。

またページ内に別のページの要素を入れてユーザーが次々と移動しやすいようにしている印象を受けました。

以上がGreenのUI分析となります。
次回も引き続きUI分析を行おうと思うので、よろしくお願いします🌸