Webサイト制作B

Design

SHElikes PROデザイナーコース 課題⑤は、採用サイトを制作しました。

工夫した点

採用サイトということでビジネス要素も必要ですが、私はクライアント様の世界観を大事にしたい思いを一番に考えました。なので、この世界観に共感し、一緒に働く中で「世界をやさしさでつつむ」ものづくりやコミュニティーができる方にエントリーしていただきたいなという思いがありました。

PC版にはヘッダーにエントリーボタンを配置し、ヘッダーはスクロールしても追従するようにしているので、どのセクションからでもエントリーしやすいようにしました。

セクションの順番は、世界観に共感してもらい、働く環境などから募集職種の流れにしました。採用フローからエントリーのボタンに誘導し、最後のメッセージでさらに世界観を共感してもらえればとメッセージを表示するアニメーションにもこだわりました。
 
ビジネスのものはどうしても文章として情報量が多いので、これまでの障がい者事業所で学んだ情報量が多いことで伝わらないというふうにならないようにと私は考えました。文字として理解しやすい人と絵や写真などでイメージしやすい人といるので、イメージで伝えたいところを絞り、特に写真に関しては、一番情報量が多いものと私は教わったので、できるだけ情報量を減らせられるように背景やカラーを工夫しました。

● ヘッダー - Header -  
ヘッダーは固定することで、各セクションに移動できるようにし、エントリーの申込や予約ができるように配置しました。

● キービジュアル - Key Visual - 
子育てをしながら在宅で働ける雰囲気と子供への愛情が伝わればと思い、3枚の写真をふわっと浮き出て消えるアニメーションにしました。

● 私たちについて - About - 
クライアント様の意向としてTSUTSUMU様の世界観がとても重要だと考えました。そこで文章のフレームは心をやさしく包み込むイメージとしてハートを手で包み込む画像にしました。

● 事業について - Business - 
事業内容は、事業の展開というワードがあったので、扉を開くイメージとして、フレームのイラストを作成しました。スライダー表示にすることで、1つ1つの事業をじっくり見れるようにしました。

● 働く環境 - Workplace - 
他のセクションでの情報量が多かったので、このセクションはシンプルな表示にすることにしました。個々が活躍するけれど、チームでの連携がしっかりされているのかなと思い、積み木の車を繋げた形にしました。

● メンバー紹介 - Team- 
このセクションから採用サイトのビジネス要素を意識しまた。各セクションに詳細ボタンをつけるということだったので、情報量の多いメンバー紹介は人の雰囲気とどんな職種かのイメージが伝わるようにしました。なので、ここは添削の際にご指摘がありましたが、あえて 服装も少しに抑え、一言コメントもつけませんでした。ただ、働く仲間の声として載せるとするなら、ホバー時に吹き出しで出るアニメーションにしてもよかったかなとも思っています。

● 募集職種 - Job Opening - 
メンバー紹介と同じ職種は同じアイコンにし、イメージが結びつきやすいようにしました。写真のほうがイメージしやすいということもわかるのですが、メンバー紹介での情報量とのバランスでここは写真を使用しませんでした。今回のサイトでは詳細ボタンがあるということも踏まえてできるだけシンプルにしました。 フレームのカラフルなシャボン玉は、夢や希望をイメージし、イラストを作成しました。

● 採用の流れ - Hiring Process - 
エントリーから内定までのフローがあったほうが良いと思ったので、このセクションを追加し、ここでCTAも配置しました。

● メッセージ - Message - 
最後にさらに世界観を伝えたくてメッセージのセクションを追加しました。