自社採用サイト制作の裏側 ~デザイン編~
こんにちは、株式会社KKI デザイナーのイワタです ㅎㅎ
今回は、私が担当した採用サイトのデザイン制作に焦点を当て、リニューアルの裏側を公開します。
（各担当者によるSTUDIO実装編と、コンテンツ設計／ワイヤーフレーム編の公開も順次予定しております 💁）
採用サイトのリニューアル過程を中心に、デザイン制作の具体的な進め方について詳しく解説します。この記事が、皆様のWEBサイト制作におけるヒントの一つとなれば幸いです。
KKI採用サイト
https://recruit.v-kki.co.jp/
2023年3月公開
ノーコードツール STUDIOを使用
制作期間：およそ3ヶ月
株式会社KKIとは？
弊社は、パンを中心とした食品のフィルムパッケージ製造・販売を手がけています。
本社を愛知県に構え、東京、神奈川、大阪、沖縄の拠点から、全国の工場様へ食品パッケージをお届けしています。
私たちKKI DESIGNチームは、インハウスデザイナーとして所属しています。
自社メディアの制作・運用で培ってきた『ビジネスに貢献するデザイン』の知見をもとに、現在はBtoB企業様中心にWEBサイト制作を承っています。
KKI採用サイト リニューアルプロジェクトの背景
弊社の採用活動について、以下のような課題を抱えていました。
弊社が抱える課題
・BtoB企業であるため、事業内容が伝わりにくい
・企業認知度が低い
・既存メディアでは、社内の雰囲気や企業の中身を十分に紹介できていない
・求人メディアの利用等により、求人活動のコストが高い
すでにデザイナー求人向け採用サイトは立ち上がっていましたが、メイン事業であるパッケージ製造に関わる職種の求人情報が不足していました。
求職者が求める情報コンテンツを充実させ、自社の魅力をより効果的に伝えるために、リニューアルプロジェクトを始動しました。
デザイン制作のコンセプト設計ステップ
デザインによる解決が必要な課題
BtoB企業が故に事業内容が伝わりにくい
社内の雰囲気や企業の中身を十分に紹介できていない
特にこの2つの課題を解決するためには、デザインの力が不可欠です。
ワイヤーフレーム制作時には、求職者が求めるコンテンツの設計を行います。
デザインでは、情報を整理して内容がわかりやすく伝わるよう工夫し、企業らしさを表現します。デザイン作業を始める前に、まずはコンセプト設計から着手します。
STEP1.自社イメージを明確にするための社内アンケートを実施
デザインに社内の雰囲気やイメージを反映するため、まず、自社のイメージを明確にすることが必要でした。そこで、沖縄から東京までの各支店の全社員を対象に社内アンケートを実施しました。
アンケートの質問内容
アンケートでは以下の質問を含め、社内に意見を求めました。
もしKKIを人に例えるとどんなイメージですか？「KKIさん(擬人化)」についてのイメージを教えてください。
・「KKIさん」にあてはまるキーワード
・「KKIさん」をイメージする色
この質問はブランドパーソナリティの考え方に基づいて設定しています。
ブランドパーソナリティとは？
ブランドを人間の性格のように捉え、その特性を明確にすることです。ブランドの個性や価値観を具体的に表現することで、消費者に親しみやすく、記憶に残りやすいブランドを構築することができます
STEP2.アンケート結果を元に、自社のイメージ整理と言語化
社内アンケートの結果を整理するために、「ディメンションフレームワーク」を使用しました。このフレームワークでキーワードを体系的に整理し、企業の「ブランドパーソナリティ」を明確にしました。これにより、企業の個性や魅力を視覚的に表現するための基盤が築かれました。
ディメンションフレームワークとは？
ディメンションフレームワークは、ジェニファー・アーカーが開発したブランドパーソナリティのフレームワークです。これは、ブランドの性格を「誠実」「刺激」「能力」「洗練」「頑丈」の5つの属性に分けて評価します。
まず、現在のブランドを思い浮かべた時のキーワードを3～5つ挙げます。次に、それらのキーワードがどの属性に該当するかを評価します。この方法は、現在のブランドイメージを正確に反映することが重要です。
最終的に、キーワードが多く集まるカテゴリーがブランドの主な特性を示します。
アンケート結果によると、社員が感じる弊社のイメージとして「誠実」「親切」「信頼」「安心」「責任感」が多く挙げられました。これらは、日配品を中心とした「食」に関わるパッケージ製造を行う弊社の企業文化や日々の業務に対する姿勢が反映されていると考えます
アンケート結果によると、多くの社員が「青」をイメージする一方で、「クリーンな白」や「温かみ・親しみを連想させるオレンジや赤などの暖色系」を選ぶ社員もいました。
これらの色の選択にはそれぞれ理由があるものの、全体的には「誠実」「親切」「信頼」「安心」「責任感」といったイメージワードと共通点があります。
また、拠点や在籍年数、職種によって回答に偏りが生じることを懸念していましたが、実際には大きな偏りは見られませんでした。これは、全社員が共有する企業の一貫したブランドイメージが存在することを示しています。
STEP3.デザインコンセプトの定義
上記の結果を踏まえ、社内の雰囲気として”KKIらしさ”を伝えるために、以下のようなコンセプトを定義しました。
デザインコンセプト
気取らないデザイン。
だけど少し洗練されていて、清潔な印象を与えるデザイン。
クリーンなイメージから、誠実さや安心を感じさせるデザイン。
デザインコンセプトの具体的な反映
では、社内アンケートを基にしたデザインコンセプトをどのように採用サイトに反映させたか、具体的にご紹介します。
●配色
採用サイトのデザインでは、青を基調色としています。青は「信頼性」を象徴する色ですが、冷たく感じられることもあるため、黄色やエメラルドグリーンのグラデーションを加えました。これにより、信頼感を与えつつ、クリーンで爽やかな印象を感じてもらえるよう配慮しています。
●フォント
個人的に好きな書体の一つであり、WEBデザインでも定番の「Montserrat」を採用しました。
この書体は、ミニマルでおしゃれな印象を持ちながらも、平体気味でぽってりした可愛らしさがあります。コンセプトの「少し洗練されているデザイン」に「Montserrat」がマッチしていると考えました。
メインの日本語書体として「こぶりなゴシック」を採用しました。
ゴシック体の読みやすさを持ちながらも、エレメントに柔らかい印象を与えるこの書体は、コンセプトにマッチしているため採用しました。
●あしらい
波状デザインで事業内容を象徴
デザインのあしらいには、メイン事業であるフィルムパッケージを連想させる波状のパターンを採用しました。これは取り扱う製品の特徴を象徴し、訪問者に弊社の業務内容を間接的に伝える役割を果たします。
- このあしらいに至るまで…
制作初期段階から、弊社のブランドイメージ「親切」「信頼」「安心」を表現するために、グラデーションとブラーを用いて柔らかな雰囲気を目指しました。
しかし、このアプローチでは柔らかさは表現できましたが、企業独自の個性、”KKIらしさ”が不足していると感じました。
この課題を解決するために、”KKIらしさ”を保ちつつ、イメージキーワードを反映させる新たなデザイン要素として、「波状オブジェクト×グラデーション」というフィルムをモチーフにしたスタイルを採用しました。
- インスピレーション元
デザインに行き詰まると、いろいろなデザインを見たり、スケッチしながら打開策となるアイデアを探求します。
今回その打開策のインスピレーション元の一つが下記のウェブサイトでした（既にラフスケッチは断捨離してしまいました…）。
イメージを直接引用することはありませんが、気になるデザインは日常的に集め、クリエイティブな種として活用しています。
●写真
社内にはカメラマンが在籍しており、今回もそのカメラマンが撮影を担当しました。実際の打ち合わせ中の自然体の社員たちの写真は、会社のリアルな空気感を伝えています。
●レイアウト
インタビューページは、チャット風のレイアウトを採用し、読み手がテンポ良く情報を得られるように工夫しています。
このデザインにより、訪問者がページと対話しているかのような感覚を生み出し、弊社をより身近に感じてもらえるようにしました。
採用サイト公開後の反響
弊社の新しい採用サイトが公開された後、今春に入社した新しいメンバーたちからのフィードバックをご紹介します。
就職活動中にKKI採用サイトを見た感想
KKIの採用サイトは働く場所の写真や働いている人の写真があるので働いた時の想像がしやすかったです。コンテンツの内容からも、社員一人ひとりを大切にし、寄り添った会社だと思いました。実際入社してみると、サイトの印象以上に社員に寄り添っていて、コミュニケーションが取りやすい雰囲気でした。
採用サイトを見た際、配色に統一感があり見やすいと率直に感じました。
また、サイト全体や掲載された各拠点の写真を見て、穏やかな雰囲気の職場だろうという印象を受け、入社したい気持ちが高まりました。
実際に入社すると働く場所だけでなく、社員の方々もフランクで柔らかい雰囲気の方が多く働きやすいと感じております。
これらのコメントからも、コンセプトに基づいた採用サイトデザインは社内の穏やかで親しみやすい雰囲気が反映できていることが確認できました。
またSNSでも反響いただきました。サイトを通じて、実際の企業文化を忠実に表現することが、弊社の採用戦略の成功に繋がっています。
このサイト、情報がよく整理されてて、読み手にストレスなく読んでもらえるような工夫が随所にあってめっちゃいい〜。素敵だな〜。https://t.co/ciPno62ANb
— sachi (@sachini_design) July 15, 2023
今日のPICKhttps://t.co/23C4jUIc9r
— 青木 猛｜Re:design (@aoki_takeshi10) June 28, 2023
STUDIOでのサイト。波のような流線型がレイアウトに自由さを与えていて、フレッシュさや清潔感が伝わってきます。#kyopicks
終わりに
採用サイトのリニューアルは、単なるビジュアルのアップデートではなく、事業そのものをデザインとして昇華させたプロジェクトでした。
サイト上で企業文化の魅力を効果的に伝えることにより、エンゲージメント率の向上に繋がったと考えています。
このリニューアルを通じて、デザインがどれほど企業ブランディングに寄与するかを改めて認識しました。見た目の美しさだけでなく、その背後にある戦略的な意図が、訪問者との強いつながりを築く鍵となります。
また、こちらのインタビュー記事でも当社の採用サイトについて取材いただきました！
この記事を書いた人：イワタ
Xアカウント：@i_w_a_t_a_
もし弊社の採用サイト制作サービスにご興味をお持ちでしたら、詳しい情報やお見積もりが必要な場合は、こちらから。
あなたの事業を一緒に成長させるお手伝いをさせていただきます。
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか？