UIデザイン比較 ー募集要項画面編ー（デザインのお仕事/MOREWORKS）
デザイナーのasatoです。
前回、前々回とデザインのお仕事とMOREWORKSの2つのクリエイター向け求人サイトのUIデザインを比較しました。
今回はそれに続いて、募集要項画面のUIデザインを比較していこうと思います。
前のnoteはこちら↓
デザインのお仕事
まずはページの構成を見てみましょう。
割とシンプルなページ構成でした。
次に細部を見ていきましょう。
募集要項画面にも画面左にカテゴリの選択欄が存在します。
検索結果画面のページに戻らずとも、気軽に求人の検索を行えます。
勤務地・職種・雇用形態などのユーザーが気になる情報は、横配置で一度に見られるような設計になっています。
また、ワークスタイルの特徴はアイコンを使用したり、当てはまるものには色がついていたりするため分かりやすいです。
応募方法を見るボタンを押すと、画面下の応募方法の項目へ飛びます。
先に応募に必要な書類や、採用フローなどを把握できます。
また、ボタンの上にカーソルを合わせると文字の下に線が引かれます。
また、ページの真ん中に自動でスクロールする写真の一覧が配置されています。
（自分でスクロールすることも可能）
測ってみたところ、約7-8秒で写真が変わりました。文字情報など細かい情報が載っていたりするわけではないので、このぐらいのペースで切り替わっても全く問題ないと思いました。
そして求人概要の項目です。
ここまでスクロールする＝求人概要に興味があるユーザー向けにより詳細な求人情報が載っています。
内容ごとに線で区切られているため、情報を一つ一つ追うことができます。
最後に応募方法の項目です。
ちなみに応募方法の部分は、ページ上にあった応募方法を見るボタンと同じ作りですがこちらは押せないようです、
こちらも内容ごとに線で区切られているので、情報をきちんと分けて把握できます。
MORE WORKS
MORE WORKSについても、まずページ構成を見てみましょう。
このようなページ構成でした。
写真と文章が交互に配置されているのが分かります。
次にページの細部を見てみましょう。
見出しのすぐ下に勤務地・雇用形態・年収の簡単な情報が配置されています。見出しに文言をつけずにアイコンで簡潔に見出し内容を表しています。
右側にはこの求人に応募すると気になるリストに追加するボタンが配置されています。
色付きで大きく表示されているため分かりやすいです。
本文に関しては、見出しが大きくセクションごとの区切りが分かるため、枠や線がなくても良いのだなと思いました。また、文章の合間に写真が挟まれているため、文字量が多くてもそこまで重たく感じません。
制作事例の項目では最初はこのように横一列で小さめに配置されているのですが、＋MOREを押すと
会社情報ページの制作事例項目に画面遷移され、このように画像が大きめになって表示されます。クリックするとより詳細な事例の内容が見られます。また、さらにMOREを押すと
一覧で一気に事例が表示されます。
一番下にCLOSEがあるので、そこを押すとまた一段階前の画面（画像が大きめで縦横2列表示）へ戻ります。
その次にはより詳細な求人情報が載っています。
この位置に配置することで、業務内容や活躍できる人物像、制作事例など会社のことや求めるものを把握した上で（＝ある程度この会社への興味がある状態で）
情報を参照できます。
タグの欄には青緑が使用されて目立っており、その企業の特徴をすぐに把握できます。
そして画面下には同会社で募集している求人情報や親和性の高い企業の求人情報、アクティブな企業の求人情報など様々な切り口から求人の紹介をしてくれる項目があります。
検索結果画面へ戻らなくても自分の気になった求人情報の把握ができます。
まとめ
最後に、募集要項画面を見てきて気がついた点をまとめます。
共通点
・最初に簡単な求人情報を載せる
・ある程度興味を持ったユーザー向けにページ下部に詳細な求人情報を掲載
・アイコンで分かりやすくする
・ボタンは色をつけて押せることを明示させる
相違点
デザインのお仕事
募集要項ページからも検索ができる
MORE WORKS
関連した求人を紹介してくれる
以上が気がついた点です。
今回でデザインのお仕事とMORE WORKSのデザイン比較は終わりになります。
最後まで読んでくださりありがとうございました。
他にも弊社のデザイン部では様々な記事を上げています。
よろしければ見てみてください🌸
この記事が気に入ったらサポートをしてみませんか？