WEBサイトのデザイン観察 vol.4
今回も、以下のサイトのアドバイスしたがって、WEBサイトのデザインのポイントを書き出してみます。
https://www.webcreatorbox.com/tech/improve-design-skills
観察するサイト
今回はこちらのサイトについて考察します！
デザイン観察
《気になったところ》
・縦スクロールで、文字が大きめ、四角のブロックに四角のブロックを重ねたデザイン（採用サイトでよく見る）
・写真多め、動きがついている
・黒、白を基調にしている
・他の採用サイトとデザインが似ているが、より洗練されたイメージがある
《なんのサイトか》
・ポート株式会社の採用サイト
考察：
・コーポレートサイトとデザインが似ている（配色、動きのつけ方）
・タイトルに使われているフォントが、コーポレートサイトと採用サイトで異なる
・採用サイトの傾向として、コーポレートサイトより動きが多めに作ってある（今回のサイトは、どちらも動き多め）
・動きが多めのサイトの方が、目を引く（主観）
《ターゲットのユーザー層を予想》
・四年制大学に通う、社会課題をテクノロジーで解決したいと思っている男性（新卒）
・社会課題を解決するために働きたいと思っている20代～30代の女性（中途）
考察：
・会社のミッションに共感する人材を集めたいように見える
・他社の採用サイトに比べて、オフィスの様子や、仲の良さなどよりも、ミッションに向かって活躍できるという面をアピールしている
《配色》
・白、黒（グレー）、紺、茶
考察：
・ファーストビューで黒を使用しているが、よく見ると写真に黒いフィルターをかけている
・コーポレートサイトと同じ配色
・洗練された都会的な印象
《書体》
・タイトルに使われているフォントが明朝体。コーポレートサイトはゴシック体
・説明文はゴシック体が使われている
考察：
・タイトル（目立つ文字）を明朝体にすることで、洗練された印象を与えている
・説明文にはゴシック体が使われているが、細字なので少し洗練された印象を与えている
《レイアウト》
・ヘッダー固定（下スクロールで消えて、上スクロールで表示される）
・シングルカラムレイアウト
・ブロークングリッドレイアウト
考察：
・下スクロールで消えて、上スクロール時に表示されるヘッダーは表示領域の少ないスマホなどで活きる。スマホでサイトを開くことを想定している。
・めちゃくちゃきれいにブロークングリッドしてある（感想）
・ブロークングリッドは採用サイトでよく使われている。トレンド？
サイトの説明をしてみる
テクノロジーで社会貢献をしたいと思っている20～30代の男女をターゲットにした、ポート株式会社の採用サイト。採用サイトのトレンドであるブロークングリッドレイアウトで構成されており、ファーストビューのキャッチコピーが際立っている。コーポレートサイトと揃えた白、黒（グレー）、紺などの都会的な色合いを使用し、洗練された雰囲気になっている。
参考
採用ホームページ作成の流れと押さえたいポイント
https://wwg.co.jp/blog/6727
ゴシック体とは？明朝体とは？書体の特徴と使い分けについて。
https://handywebdesign.net/2012/06/howdoyouusethefont/
ファーストビューって重要！デザインのポイントとパターン、サイズを教えます！
https://digitalidentity.co.jp/blog/creative/above-the-fold.html
多くの採用サイトが間違っていると私が思う理由
https://baigie.me/sogitani/2017/06/recruit_site_is_not_good/
【jQuery】下スクロールで消えて、上スクロールで出てくるグローバルナビゲーションを作る
https://webdesignday.jp/inspiration/technique/jquery-js/3657/
【Web デザイン】境界線をあえて外す「ブロークングリッドレイアウト」の参考サイト
https://webdesignday.jp/inspiration/web-design/4894/
この記事が気に入ったらサポートをしてみませんか？