はじめまして、KNAPデザイナーの阿部です。
ちょうど１年前、生活クラブ風の村さまのコーポレートサイト／採用サイトのリニューアルでデザインを担当させていただきました。
今回はデザインのウラガワということで、私がどうやってデザインを作ったか、採用サイトの方に焦点をあてて書いていこうと思います！

🍃風の村様 採用サイトはこちら

デザインに入る前に

思い返せば、こちらは提案時から携わった案件でした。
提案書を見返してみると、阿部はキャラクターラフ提案をしていました。懐かしい、、。(風の村さまのコンセプトを練り込んでいます)

デザインコンセプト

まずコーポレートサイトのデザインを決め、その後採用サイトに取り掛かりました。
コーポレートサイトはターゲットが入居者のご家族向けでしたので、「見やすさ・信頼感・あたたかさ・自然」を意識したデザインで、イラストをメインに使用しました。

代わって採用サイトはターゲットの年齢層が下がり、「風の村で働きたい！」と思わせる魅力を伝える必要がありました。
コーポレートサイトと差別化を図りながら、でもどちらを見ても「風の村」と分かるような統一感も必須でしたので、「あたたかさ・自然」を感じさせながら、「人の顔」が見えるサイトにしました。
写真を多く使い、一緒に働く仲間を想像することで、採用応募につなげる狙いでもあります。

解説① トップページ／共通パーツ

採用サイトは明るい緑をメインに使用し、風や木々を感じさせました。
（風の村さまの施設のイメージ）メインビジュアルはキャッチとボディコピーを読ませたかったため、スクロールしてもらえるように背景に画像を敷いています。写真は働く写真の温かで自然な働くシーンを撮影しました。
(みなさんとても笑顔が素敵で、写真を選ぶ時つられてニコニコしてしまいました^^))

大見出し(Interview〜の部分)は、文字に滲みのある加工をし、色は水彩のグラデーションを使用しました。他の大見出しは色違いになっていくのですが、風の村さまのロゴの虹マークを取り入れました。「〜」の部分は風が吹いているイメージを表現しています。
ホバー時は(下記写真右側)陽の光が差しているような色味に設定しました。
「風・緑・光」が感じられるサイトを目指して作成したのがこのトップページになります。

解説② 5分でわかる風の村

こちらのページは情報が詰め込まれているので、読みやすさ、最後まで読みたくなる仕掛けをアニメーションで表現しました。まずはじめに風の村のメッセージを読ませ、その下では、風のラインが４つのサービスを繋げていき、「人生の全てのステージで必要とされる支援」の一体感を生み出しました。

＜充実したサポート制度＞
こちらではコーポレートと同じテイストのイラストを使用することで、共通イメージを保ちつつ、説明が頭に入ってきやすいよう手助けをしています。

＜多種多様な研修制度＞
研修プログラムの流れをステップで分けて、スクロールすると点線で次に進むところをアニメーションで誘導しています。

解説③ 風の村の想い

こちらは風の村さまの伝えたいメッセージや歴史が書かれているページになります。
前半は写真とメッセージで現場の雰囲気を伝えていきました。
後半部分＜風の村ができるまで＞は、ディレクターから「ここはじっくり読んでもらいたい」という要望もあったため、本を開いたデザインに乗せて、風の村様の歴史を一つのストーリーのように表現しました。

解説④ 職員インタビュー／クロストーク

風の村の職員、働き方をより身近に感じてもらうためのページになります。そのため写真を大きく使い、紙物のような文字組みで他ページとは違う、新鮮な気持ちで読めるよう意識して作りました。

＜インタビュー＞
こだわりはメインビジュアルのメッセージ部分です。一人ひとりの言葉をよりその人の言葉だと感じやすくさせるため、手書きフォントを使用しています。

＜クロストーク＞
こちらも見出しを縦書きにしたりレイアウトを工夫しました。また、写真もお互いが話している目線の角度で撮影しています。

また、一人ひとりの顔アイコンは話す内容によって表情を変えて、読み手に臨場感が伝わるようにこだわりました。

最後に

いかがでしたか？

こちらのサイトは社員のみんなに協力してもらいながらやっとのこと完成したものになります。
撮影、イラスト、デザイン、コーディングすべて自社で作成しています。
風の村さまのご担当者様とも何度も打ち合わせをして、何度も確認をしていただき、、本当に全員で完成に持って行ったコーポレート、採用サイトですので、ぜひ皆様も訪れてみてください。

春のような温かくて明るい風を感じていただけるのではないでしょうか。