就活情報サイトのデザインを観察・比較してみた #3
どうも、デザイナーの酒うさぎです。
今回もタイトル通り、デザイナー視点で求人サイトのデザインを観察し、2サイトの比較をしたのでざっくり結果を纏めています。
なんだかんだこのシリーズも3本目になってきました。これまでの記事はこちら！
今回の観察対象は、マイナビ2023とリクナビ2023のトップページデザインです。次回は別ページの観察結果を書こうと思います。
それではいきましょ〜！
サイトの構成特徴
まずはマイナビ2023を主軸にリクナビ2023と比較しつつ、それぞれの構成を洗い出します。
◆マイナビ2023の特徴5つ
✔️トップ右側にはCMでお馴染みのドラえもん配置、その上にインターン検索ボタン
✔️トップ左側には2つのタブで分けられた条件絞り込み検索ウィンドウ配置
✔️トップのすぐ下に自己分析コンテンツ
✔️特色からインターン/仕事体験先をアイコンボタンから絞れるコンテンツあり
✔️画面サイドにメニューなどなく、横いっぱいにコンテンツ配置
続いてリクナビ！
◆リクナビ2023の特徴5つ
✔️ヘッダーロゴの右横にワード検索ボックス配置
✔️トップ左側には2つのタブで分けられた条件絞り込み検索ウィンドウ配置
✔️トップのすぐ下にWebセミナー予約案内バナー
✔️TOP下から画面右にコンテンツ表示枠
✔️気になる数が多い企業ランキング/締め切りが近いインターンシップ案内のコンテンツがある
ビジュアルデザインの特徴
さて次はビジュアルデザインを比較します。（画像にある黄緑の付箋はビジュアルの特徴をメモしたもの）
◆マイナビ2023の特徴5つ
✔️明るい色がメインカラーだが使う色は絞られている（メインの水色・差し色のオレンジ・ポイントのみで使う青）
✔️背景は白・薄いグレー
✔️アイコンイラストは塗りなしで線タイプ
✔️実写の写真を使用したバナー素材が多い（ドラえもんはトップ画像以外いない）
✔️コンテンツごとの区切りは縁をグレーのグラデーションにする又は背景をグレーにしている
続いてリクナビ。
◆リクナビ2023の特徴5つ
✔️有彩色が6つ（青・オレンジ・明るい青・青緑・青系グレー）/バナーもカラフル（ピンクや黄色などもある）
✔️トップビューの画像は実写写真のスライドショー
✔️トップビュー以外はイラストを使ったバナー画像などが多め
✔️アイコンは塗りイラスト
✔️コンテンツの区切りは背景を青系グレーで塗っている
比較
最後はここまでの気づきを元に、両サイトを比較して気づいたことをまとめます！
【共通点】
・TOPビューにはタブ切り替えつき検索ウィンドウ配置
・青系がメインカラーなので差し色は彩度の高いオレンジ色
・コンテンツ幅が十分に取られているのでゴチャついた感じがしない
【相違点】
マイナビ2023：明るい色数も限られている・コンテンツ幅が十分に取られている・アイコンが線イラストかつ大きさが小さめ、などの理由からシンプルですっきりとした印象を与える
リクナビ2023：メインの青色とサブのオレンジ以外にも色が使われている・割と大きさのあるバナーがイラスト素材多めで装飾も多い・字の太さに強弱をつけているなどの理由から、ポップで元気な印象を与える
両サイトとも、共通のコンテンツや近いメインカラーを使っていますが与える印象は違うように感じました！
短いですが今回はここまで。次回は引き続きマイナビとリクナビの、別ページのデザイン比較をしていきます！
最後に。
弊社のデザイン部メンバーがデザインに関する内容をnoteで発信しています。よければ覗いてみてください👀