UIデザイン比較 ートップ画面編ー（デザインのお仕事/MOREWORKS）
デザイナーのasatoです。
今回はクリエイター向けの求人サイトのUIデザインを比較しようと思います。
サイト名はデザインのお仕事とMOREWORKSです。
この記事内ではトップ画面の比較をします！
デザインのお仕事
トップ画面の構成は上の画像の通りです。
求人情報をトップ画面の時点で数多く掲載して、ユーザーが興味のある求人情報を見つけやすくしています。
また、サイト自体の色使いは基本彩度が低く、シックなデザインとなっています。その中で彩度の高い黄色を使用しているため、アクセントカラーとなり目立っています。
ヘッダーではカーソルを合わせると選択した箇所に下線が引かれ、ドロップダウンメニューが出てきます。ここから求人が検索できるようになっています。
求人を掲載している項目ではピックアップ求人と求人一覧とでレイアウトに違いがあります。
ピックアップ求人では、ひと枠ごとのスペースが広くその分多くの情報を載せています。ここでは注目度の高いものを載せているため、何故注目度が高いのかユーザーにも伝わるよう情報量を多くしているのかなと思いました。
また、両項目とも目立たせたい箇所は色がついており分かりやすくなっています。
カーソルを合わせると枠が黄色に変色するので分かりやすいです。
フッターは最下部に配置しておらず、珍しいタイプだと思いました。
ページの最下部では運営メディアの紹介をしています。
最下部という目が止まる位置に運営メディアの紹介をして、興味を持たせるようにしているのかなと思いました。
フッター自体も黄色がアクセントカラーとなっているので最下部に無くても目立つ仕組みになっておりここに配置していても問題ないのだと思いました。
MOREWORKS
次はMOREWORKSのトップ画面を見ていきたいと思います。
MOREWORKSの構成は上の通りで項目数が多く、様々な切り口から求人を検索できる仕組みになっていることが分かります。
色使いはメインとしてグラデーションがかった緑を使用しており、深い青緑から明るい青緑になるため、落ち着いた雰囲気と爽やかな雰囲気どちらも両立している印象を受けました。
ヘッダーではデザインのお仕事と同様、カーソルを合わせるとメニューが出てくる仕組みになっています。
また、ページの最初に検索欄があるためサイトに来てすぐに求人の検索ができます。キーワード欄以外は選択できる仕組みです。
検索項目が4つあり、この段階である程度細かく検索条件を指定できるようになっています。
会員登録やログインの項目が大きめに配置されていて分かりやすいです。
また、ページの最初の方にインタビューを持ってくることで実際に働いているクリエイター像をすぐに把握できるようになっています。
その下には企業のロゴを並べ、ロゴを見て興味を持った場合はクリックすると求人詳細画面に飛ぶようになっています。
職種から探す項目は有彩色+大きめの配置で目立っています。おそらく職種で探す人が多いため、目立つようにしているのかなと思いました。
ピックアップ求人と新着求人情報の項目です。
職種欄では職種から探す項目で使用されていた配色が適用されています。
情報量は絞りつつ、年収や勤務地などユーザーが気になる情報を配置しているので興味を引かれます。
カーソルを合わせると項目が浮くのでクリックできるのが視覚的に分かります。
上の写真の4つの項目（キーワードから探す、事業領域から探す、事業形態から探す、インタビューから探す）では写真が使用されていたり、手短な説明文が載っていたりとシンプルながら分かりやすい項目になっています。
また、ページ内のこの部分までスクロールしたユーザー＝興味を持ったユーザーであると考えられます。
そういった人へ向けてユーザー登録のメリットを載せることで登録に乗り気になってもらうような仕組みだなと思いました。
そして、フッターからも検索できるようになっています。
また、ページの上部にすぐ戻れるようボタンも配置しています。
2サイトを見て気がついた点は以下の通りです。
共通点
・ヘッダーはドロップダウンメニュー
・彩度の低い色の中にアクセントとして彩度の高い色を入れている
・写真やロゴでイメージがしやすくなっている
相違点
・項目数（デザインのお仕事はトップで求人を数多く載せ、最初の時点で求人情報に興味を持ってもらう仕組み、MOREWORKSは項目数を多く設定し、検索への導線を多数引く仕組み）
・フッターの位置
以上が2サイトのトップ画面を比較して気づいたことでした！
次も引き続きデザインのお仕事とMOREWORKSの画面比較記事を書こうと思います！
他にも弊社のデザイン部では様々な記事を上げています。
よろしければ見てみてください〜。