2025.01.06

たまちゃん

【事例10選】白の採用サイトデザイン｜誠実さが伝わる余白の使い方

「——無難に白でいきましょうか」

採用サイトの色を決める打ち合わせで、このような結論になる場面をよく見かけます。しかし、白を選んだ会社ほど、その後の制作で行き詰まることが多いのが正直なところです。

白は無難な色だという誤解がありますが、決して簡単な色ではありません。写真の質や原稿の量、情報の整理具合など、ごまかしたい部分が白い画面の上ではすべてそのまま見えてしまうからです。逆にいえば、そこさえしっかりと用意できていれば、白ほど企業の誠実さがまっすぐ伝わる色もありません。

つまり白は、中身が伴っている会社だけが強く見える色なのです。

この記事でわかること

白の採用サイトが求職者に何を伝える色なのか
白を選んだときに準備が必要になるもの
業種ごとの差し色の考え方
実際に白を基調にしている採用サイトのデザイン事例10社分

白の採用サイトが伝えるのは「誠実さ」と「透明感」

白は、そのデザインが持つ清潔感や透明感を通じて、企業の誠実さや信頼性を視覚的に伝えてくれます。求職者が採用サイトを開いたとき、最初に受け取るのは文章ではなく画面全体の印象です。そのため、文章を読ませる前に「隠しごとのない会社だ」と感じてもらえる点が、白を選ぶ最大のメリットになります。

『ホワイト企業』という言葉があるように、白色の採用サイトは、応募者にクリーンでオープンな企業文化を直感的に伝えます。入社前にこうした印象を持ってもらうことで、入社後のギャップを防ぐ効果も期待できます。白の持つ「純粋さ」や「信頼感」が、企業の魅力を効果的に引き立ててくれるのです。

業種を選ばないのが白の強み

後ほど紹介する事例を見ていただくとわかりますが、建設、歯科医療、IT、広告、化粧品と、さまざまな業種の企業が白を選んでいます。緑や青のように「この業種に向いている」という縛りがないのが白の特徴です。

その反面、白を選んだだけでは他社と差がつきません。差がつくのは、白い背景の上に何を置くかという点です。

白を選ぶなら、先に用意しておきたい3つのこと

白の採用サイトは、デザインの良し悪しよりも「素材が揃っているか」で仕上がりが決まります。制作に入る前に、この3つを確認しておいてください。

1. 写真の質｜白の上では、粗も全部出る

背景が白い画面では、求職者の視線は自然と写真に集まります。そのため、暗い写真や傾いた写真、社内の雑然とした背景が写り込んだ写真は、粗が目立ちやすくなります。

白を基調としたサイトでは、写真の質がそのまま企業の印象に直結します。だからこそ、撮影だけはプロのカメラマンに依頼することをおすすめします。弊社がこう繰り返しお伝えしているのは、白基調のサイトではとくに写真の質が影響するからです。

2. 情報量を絞る勇気｜余白は削り代ではない

「せっかくスペースがあるから」と要素をどんどん足していくと、白は途端に「隙間を埋めそこねた画面」に見えてしまいます。

余白は余りではなく、読ませたい一点に視線を集めるための設計です。求職者に伝えたいことを3つ程度に絞り込めるかどうかが、白基調のサイトを美しく見せる分かれ目になります。

3. 差し色1色で「業種の温度」を出す

白だけでは会社の個性は伝わりません。青系を足せば技術的な誠実さが、木のトーンやベージュを足せば人の温かさが伝わります。モノクロで締めれば、ブランドの硬質な雰囲気を出すこともできます。

事例でも、青い葉脈を背景に敷いたシステムメトリックス様と、モノクロで統一したBULK HOMME様では、同じ白基調でも受け取る印象がまったく違います。採りたい人物像を決めてから、差し色を1色だけ選ぶ。これが、遠回りに見えて一番確実な進め方です。

対象者と情報を整理し、写真・余白・差し色を設計する手順とレイアウトの模式図。

「はたらく人の顔」が見える白のデザイン事例

ここからは、Webデザイン的な観点も踏まえた「白」の採用サイトを紹介していきます。まずは、白の上に働く人の写真を主役として置いたタイプから。「（制作：地方採用ワークス）」と書かれたサイトは弊社の制作実績です。

株式会社岡島ホールディングス様（住宅建材販売・建具製造）

岡島ホールディングスグループ様のホームページデザイン（岐阜県/住宅建材販売・建具製造）

https://recruit.okajima-h.co.jp/（制作：地方採用ワークス）

白を背景としてではなく、人物を切り抜いて置くための条件として使いました。地を白1色に決めたので、社員8人を別々に撮って合成しても影の付き方がそろいます。8人はスーツ、事務服、作業着とばらばらの装いで、青い「OKAJIMA」の文字に寄りかかったり、脚立に座ったりしています。白の面積が大きいほど、切り抜きの輪郭のあらが目立つため、髪の毛の際まで処理を通しました。上部の「関ケ原から建築・建設業界で働く、を新しく。」は黒のまま置き、青と白の2色構成に対して3色目を最小限にとどめています。右上のENTRYだけが黄緑で、白い画面の中で1点だけ強い色になります。

株式会社ノエル様（外構設計・エクステリア工事）

株式会社ノエル様のホームページデザイン（愛知県/外構設計・エクステリア工事・デザイン事務所）

https://recruit.noel-garden.jp/（制作：地方採用ワークス）

左半分に置かれているのは、純白ではなく生成りに寄せた地の色です。その上に「Design for living」をセリフ体で大きく組み、日本語のコピーを小さく添えるだけにとどめています。白を白のまま使わず、わずかに色みを残すことで、右側の写真の色と地の色を近づけました。右半分には高さの違う写真を6枚並べ、図面を指す手元、モニターを囲む3人と、打ち合わせの場面ばかりを選んでいます。完成した外構が写っているのは6枚のうち1枚だけです。写真の密度と余白の差が画面を左右に分けるので、線で区切らずに構造が伝わります。

株式会社市川工務店様（土木・建設・ゼネコン）

「株式会社市川工務店」様のホームページデザイン（岐阜県/建設業）

https://www.ic-group.co.jp/recruitment/（制作：地方採用ワークス）

画面の白は、地の色ではなく写真の中の空です。造成現場を後ろから撮り、上半分を晴天の空に譲ってあります。余白を紙の側で作らず、被写体の中に見つけて使いました。4人の作業員は全員が後ろを向いていて、顔は1つも写っていません。視線の先にはクレーンと重機が並び、現場の広さがそのまま奥行きになります。縦組みの「暮らしをイチから」は白抜きで、空の明るい部分に置いても読める太さに調整しました。上部のナビゲーションは細い線で左右に振り分け、中央にはロゴだけを残しています。写真の中心を空けたまま機能を成立させる置き方です。

佐藤歯科医院様（歯科医療サービス・矯正歯科・訪問歯科診療）

佐藤歯科医院の実際のサイトデザイン

https://recruit.dentist-sato.com/（制作：地方採用ワークス）

白衣ではなく、淡い桃色とグレーのスクラブで7人をそろえています。背景の診療室も白く飛ばしてあり、画面の中でいちばん濃い色は袖の紺です。白の中に白を重ねる構成なので、明度差ではなく人の輪郭だけで画面を持たせました。手前の床のグレーがわずかに沈み、7人が立っている位置が分かります。左側の「いい笑顔をつくる仕事」は黒の明朝で、その上に水色の筆記体「Make a Good Smile」を重ねました。白の上では線の細い書体が飛びやすいのですが、黒と水色の2段構えにすることで読みを確保しています。右上のENTRYは橙色で、唯一の暖色です。

おしゃれさを打ち出す白のデザイン事例

続いて、白を「洗練」の方向に振り切ったタイプです。人物写真よりも、余白とタイポグラフィで世界観を作っているのが共通点になります。

システムメトリックス株式会社様（ソフトウェア開発・販売）

株式会社SystemMetrix様のホームページデザイン（愛知県/IT業・ソフトウェア開発）

https://www.systemmetrix.jp/（制作：地方採用ワークス）

IT企業の採用サイトは白を使う例が多く、それだけでは他社と並んだときに区別がつきません。この画面は白を地に敷かず、街路樹の並ぶ大通りの写真を青一色に沈めてから、その上に社名を黒で置きました。白を余白ではなく、文字が乗る面としてだけ残しています。「SystemMetrix」はセリフ体で、その下の「RECRUIT SITE」は白抜きの細い英字です。写真は名古屋の街並みで、地方に本社を置く会社であることが背景から読み取れます。色数を青と黒と白の3つに絞っているぶん、社名の書体の選び方が画面の性格を決めています。