https://www.shimz.co.jp/saiyou/recruitment
👉基本情報
商品・サービス
清水建設の採用情報サイト。
清水建設に関する事業紹介だけでなく働く人の声や働き方など、入社後の生活が詳しくわかるようなコンテンツがたくさん盛り込まれて構成されている。
Webサイトの目的
建築・土木だけでなく幅広い分野で活躍していることをWEBサイトを通して発信し企業のことを知って身近に感じてもらう。
会社の雰囲気や価値観、入社後の環境をわかりやすく発信し、応募者の獲得を目指す。
ターゲット
新卒の就活生 / キャリアを積んだ社会人
2. トンマナ
配色
白をベースとし、メインカラーにはコーポレートカラーのブルーを使用。
アクセントに明るいブルーを使用している。
メインカラーが鮮やかに映えることで、ブランドカラーが魅力的に引き出されている。
ページ内で使用されているブルーも数種類あり、細かな設計がされている。
あえて補色などを使わずブルーで統一されていてコーポレートらしさが表れている。
タイポグラフィー
英文：Lato
→どんな系統のサイトにも適応できる安定感！
和文：IBM Plex Sans
→初めて知ったフォント。IBMに合わせて作られたフォントとのこと。こちらも癖がなく読みやすく、コーポレートサイトなどに最適。
👉デザインの特徴と分析
コンテンツが多くなりがちな採用サイト。
細かな導線配置設計とデザインの引き算によって、見やすくすっきりと、かつ伝えたい情報は的確に伝えられるサイトとなっている。
その他準備中…
👉細かい分析
1.メインビジュアル
💡イチオシコンテンツをFV内で紹介
採用情報として魅力的なコンテンツをFV内に組み込む設計。
ユーザーへの優先的な導線を保つとともに、コーポレートカラーを背景に敷くことで、FV全体にブランドらしさが現れる。
💡絶妙な余白
左側に絶妙な余白が。ここに余白を設けることで全体的にすっきりとした印象を与える。
私だったら左いっぱいに配置しそう。
トレース時、試しに左いっぱいに配置してみたら確かに窮屈に感じた。
↓試しに左いっぱいに広げてみたトレース画像。ロゴ＝会社名が埋もれてしまう印象に。
2.ABOUT
概要文・想いなどの説明文はあえて省略。
下層ページへのバナーリンクを配置するシンプルな導線でユーザーがすぐに情報を得れるように設計
3.WORKS
- 画像をたくさん流すレイアウト。一目で多くの写真を見せて雰囲気をユーザーにつかませるこのに効果的
- 写真の種類：営業やじ事務、現場など様々な職種をバランスよく配置。女性の現場員の写真も多めに配置することで、女性の活躍も促している
- これまで左右レイアウトだったところを、中央レイアウトにすることでメリハリにも
4.PEOPLE
- ここで幅いっぱいに写真を配置し、さらにレイアウトにメリハリ
- 写真のチョイス：現場の「女性」にどフォーカスを当てることで
建築現場＝男性 と言うイメージを払拭して、建設現場とらしさと爽やかさどちらも兼ね揃えたイメージを与えることができている
5.ENVIRONMENT
- こちらも背景にうっすらと丸が熱ことで単調さを払拭。
しかもよく見ると動いている！ - モチーフであるドットがここにも矢印ボタン代わりとして用いられている
6.RECRUIT
ドットアイコンの並び方にもボタンによって細かな差が。
