株式会社YKベーキングカンパニー様の高校生向け採用サイト、動画、パンフレットを制作いたしました。
依頼内容
大阪府に本社を置くクライアント様は、これまでも関東エリアでの採用活動は実施しておりましたが、主に九州・関西・関東で採用活動を実施されておりました。
今回は、公開求人を出すうえで、求人訪問できない高校の方にも広くクライアント様の仕事内容を知っていただき、かつ、現在はパンフレットよりもネットで検索することが多いことから、よりタイムリーに情報を伝えられるサイト制作をご依頼いただきました。
ターゲット分析〜方針検討
今回のターゲットは高校生とその保護者や学校の教職員です。
就職を考えている高校生はアルバイト以外の就労経験はあまりない世代であることから、他サイトよりも親しみやすさを全面に出したデザインにする必要があると考えました。
また、よりタイムパフォーマンスを重視する傾向がある世代なことから、掲載するテキストを短く分かりやすくし、かつ、図や写真と交えて分かりやすく掲載する必要がありました。
加えて動画を活用することで、実際に就労する際のイメージがより具体的に想像できるようにする必要があると考えました。
また、教員・保護者の閲覧も想定されるため、読む方のニーズに合わせて具体的な会社の説明を掲載するページも用意いたしました。
WF検討／作成
ひと目である程度の内容を理解していただけるように、見出しのライティングや文字量に注意しながらページ構成を検討いたしました。
特に、生産職とエンジニア職について紹介しているページと先輩社員のインタビューページを回遊できるように導線設計を行い、実際の職場の雰囲気や働き方が伝わるような設計にいたしました。
また、顔写真と就業風景の写真に加え、対話形式のインタビューやメッセージを掲載することで自分ごととして捉えていただけるように工夫いたしました。
保護者・教職員の方にお伝えしたい情報ページでは、大事なお子様が今後勤める先がどのような会社なのかご理解いただけるように、住宅補助制度など内容をきちんとお伝えしクライアント様の信頼感や安定性を伝えられるように考慮いたしました。
ラフ作成〜トンマナ設計
親しみやすさを演出するために、デザインはイラスト・写真を多く使用し、楽しげな印象を受けるテイストに方向性を定めました。
その方向性の中で、ラフを2種類作成いたしました。
A：親しみやすさのあるトーンと、見せ方のギミックでキャッチーさを演出したデザイン
・競合他社の高校生向け採用ページを参考に、親しみやすさを優先したデザイントーン
・キービジュアルのイラストの構図を動きのあるものにしたり、各コンテンツの見せ方にギミック（道順のような見せ方）を足すことで競合他社との差別化を図る
B：魅力的なイメージ写真を多く入れて「どんな仕事・環境か」を想像してもらうデザイン
・親しみやすさよりもトレンド感・モダンさを優先させたデザイントーン
・実際の工場での様子や生活の中に根付いた食卓風景など、イメージ写真を使用することで「どんな会社なのか・どんな仕事をするのか・どんな職場で働くのか」を、サイトを訪れた高校生・保護者により明確にイメージさせることが狙い
上記の案を提案した結果、最終的に「B」をベースにデザインを進めていくことになりました。
デザイン制作
【Webサイトデザインについて】
イラストを散りばめることで、文字の多い印象を払拭し楽しく読み進められるサイトデザインにしました。見出しは本文よりも目に入りやすいため、親しみのある言い回しを心がけました。
サイト全体のカラーは競合調査やカラーの持つ意味の調査などを行い、「温かみ・親しみやすさのある色合い」「食品系のWebサイトの食欲をそそるような色合い」を考察し、それらを元に配色しています。
あしらいの部分では角丸や曲線などの丸みのある形を多用し、写真についても曲線的な形でトリミングし、無機質な印象にならないように、散りばめたイラストと馴染むようにデザインいたしました。
また、UIパーツは押しやすさ・よく目立つことを念頭に置きデザインいたしました。ボタンではドロップシャドウや矢印のアイコンを用いて押しやすそうな形状にすることで、閲覧する人それぞれのスマートフォン操作のリテラシーに関わらず閲覧しやすいページになるよう心がけました。
【パンフレットデザインについて】
パンフレットはWebサイトのデザインを元に制作いたしました。
Webサイトと同じく親しみやすさ・楽しげな印象を演出するために、ランダムなレイアウトでデザインを行いましたが、限られたスペースに多くの情報が掲載されるため、揃えるべき部分は揃えて整える・視線が左上から右下に誘導されるように意識してデザインをいたしました。
【工場見学動画について】
サイトやパンフレットの情報だけでは伝えきれない、実際の業務風景や工場の雰囲気を高校生にとって馴染みのある縦長のショート動画にまとめました。
パンの製造工程を追う構成にすることで、その中で行われる作業を知ってもらえるようにいたしました。
また、画面の上下にサイトデザインと連動したあしらいやイラストを配置することで、制作物としての統一感を持たせています。
実装
実装ではデザインの雰囲気を最大限に活かすために、優しい印象を与えるように要素をふわっと出現させたり、次々と要素が出現することでスクロールして次に進みたくなるようにいたしました。
サイトにアクセスした際に最初に目にするTOPページのキービジュアルでは、複数枚の写真がスライドする仕様にしており、職場の様々な場面を見せることで雰囲気が伝わるように工夫をいたしました。
また、動画への誘導も大きなポイントとなるため、動画に気付きやすくするために動きをつけた導線を配置する工夫をいたしました。
高卒採用サイト｜株式会社YKベーキングカンパニー
