POWER WORKのUIデザインを考察してみた
デザイナーのasatoです。
今回はPOWER WORKの4つの画面のUIデザインを考察していきたいと思います。
POWER WORKとは、建設業界に特化した求人サイトです。
トップ
トップ画面ではさまざまな切り口から求人を探せる仕組みになっていることがわかりました。ページ内に4つの検索につなげる動線があり、それぞれの項目も違うので様々なユーザーのニーズを満たせるようになっています。
また、これはサイト全体を通して言えることですが、オレンジがメインで元気な印象を受けつつも、彩度が高すぎないので柔らかい色になっており、親しみやすさがありますね。
そして、ページを下の方までスクロールすると、POWER WORK自体のアピールポイントやコンテンツの紹介が増えてきます。
ページを最後まで見るユーザーはPOWER WORKに興味を持っている場合が多いので、そのような項目をここに持ってくることでユーザーに自社の魅力を訴えているのです。
逆に最初に持ってくると、求人サイトの構造としては不親切になってしまうのでユーザーの離脱を多く招くことが予想されます。
会員登録
次に会員登録です。この画面では色を活用しており、視覚的に分かりやすい画面になっています。
例えば、この会員登録の画面全体を見て分かる通り、必須の項目で未入力の欄がある場合は枠が赤くなります。打ち終わると色が変わるのできちんと入力が完了したのだなとすぐに理解できます。
また、ページの下には残りの必須項目数をお知らせしてくれる項目が固定でついています。
これでユーザーは登録までかかる項目数を把握できるので、終わりが見えない徒労感を感じる必要がなくなります。
そして会員登録ボタンは利用規約・個人情報の取扱いについてに同意しないと押せない仕組みになっています。この項目もチェックを押す前は周りが赤くなっているので必須の項目であることがすぐにわかります。チェックすると会員登録ボタンの色がグレーからオレンジに変わるのでこれも視覚的に分かりやすいですね。
検索
次に検索画面です。
選択式が検索のメインで入力する手間を減らすように設計されています。
青枠で囲ってある箇所のプラスマークのついたボタンを押すとポップアップ形式で選択する項目が出てきます。選択肢も例えば路線から駅名を選択できたりと、かなり詳しく指定できます。
数が多くない場合は一覧からチェックする方式になっています。
また、ページの下では自分が指定した条件での求人検索数を固定でお知らせしてくれます。検索する前に数を知れると、こんなに数があるならもう少し細かく指定してみよう、など条件指定の目安になるため便利な表示だと感じました。
検索結果
検索結果画面では目立たせたいところをしっかり強調した作りになっています。
ページの上ではページを移動するボタンが設置されています。
一番下までスクロールしなくても気軽に次のページに飛べるようになっています。こちらは背景をグレーで囲っているので目立ちます。
あとは、この応募するボタンですが、他の画面ではあまり見なかった赤色を使用しています。重要な項目である応募ボタンを珍しい色にすることで応募への動線を迷わないようにしています。
ちなみに応募と詳細ボタンは光るようになっています。非常に強調されているので分かりやすいです。また、キープボタンは押すと色が変化するのでこちらも視覚的に分かりやすいです。
スマホ版
あとはスマホ版のデザインについて、PC版と違ったところをピックアップして説明します。
スマホ版は、全体的にタップすることを考えたデザインになっています。
検索画面ではPC版だとチェックボックスだったのが、スマホ版だとボタンになっていてタップする仕組みになっています。チェックボックスだと小さくてタップしづらいので、ボタン形式にしたのかなと感じました。
検索結果画面では、PC版ではページ下から検索を変更できる項目が固定であったのですが、スマホ版だと画面上から変更できるようになっていました。これは、スマホ版で画面した固定だとスクロールなどの操作でうっかり誤タップしてしまう可能性があるからこのような変更をしたのかなと思いました。
また、PC版には無い電話応募するの項目が追加されています、こちらも他の画面にはあまりない珍しい青を使用しているので目立ちます。
ここまでPOWER WORKのデザインを分析して気づいたことをまとめます。
まず、全体的に親しみやすい色使いで安心感を感じました。
次に項目ごとの余白が十分に取られているので、見やすくてすっきりとした画面だなと思いました。
そして、必須項目やボタンなど目立たせたいところをしっかり視覚的に強調し、ユーザーが迷子にならないような作りになっているなと思いました。
改善点
最後に勝手ながら...実際に使ってみてここを変えた方が良いかも？と思った点を上げさせていただきます。
会員登録画面では、ページ下部に固定された項目の背景が半透明なので数字が見えづらくなってしまうな、と感じました。
不透明にするか、もしくは赤の色を変える方が良いかも？と思いました。
検索画面では、勤務地を探す-駅で探すの項目はその土地に詳しくないと探しづらいかも？と感じたので、手入力でも打てるようにして駅名の予測候補が出るようにしても良いのかもと感じました。
あと検索結果画面のボタンが光るのは目立って分かりやすいのですが、項目を読んでいる際に気が散ってしまうので無くてもいいかなと感じました。
以上がPOWER WORKのUI考察でした！
弊社のデザイン部では他にも様々なデザインの記事があるので、ぜひ読んでみてください🌸
この記事が気に入ったらサポートをしてみませんか？