ミニマル・シンプルな採用サイトデザイン事例｜情報の絞り方

「採用サイトを作ろうとすると、伝えたいことが次々に出てきて、結局どこを読めばいいか分からないサイトになってしまう」

——採用サイトの制作を進めるなかで、非常によく起きる失敗です。事業内容や沿革、福利厚生、さらには先輩社員の声や社長の想いなど、載せたい情報はたくさんあります。しかし、それらをすべて詰め込んだ結果、求職者にとって読みづらいサイトになってしまうのです。

その反動として、「ミニマルにしたい」というご要望をいただきます。しかし、ミニマルとは単に見た目をあっさりさせることではありません。何を削り、何を残すかを決め切る、情報量とレイアウトの設計のことです。誤解されがちですが、この決め切りができていないミニマルは、ただの情報不足になります。

ミニマル・シンプルとは、「白い」「スタイリッシュ」との違い

先に整理しておきます。ミニマル・シンプルとは、情報の優先順位を決め切り、優先度の低いものを削ぎ落とす設計思想のことです。色の話でも、見た目の印象の話でもありません。

「白い採用サイト」というのは、配色の選択の話です。背景が白くても、情報量の多いサイトはたくさんあります。「スタイリッシュ」というのは、求職者に与えたい印象の方向性の話です。ミニマルは、それらの手前にあるそもそも何を載せるかという意思決定を指します。結果として白いサイトになることも、スタイリッシュに見えることも多いです。しかし、出発点がまったく違うと考えてください。

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

参考記事：『【事例12選】スタイリッシュな採用サイトのデザイン｜洗練された印象はどう作る？』

この記事では、色や印象の話には踏み込みません。「情報量とレイアウトをどう設計するか」という点に絞って進めます。

ミニマルが成立する、情報を絞る設計の4条件

情報を削ぎ落として採用サイトを成立させるには、正しい順番があります。その条件は以下の4つです。

条件1｜伝えることを1つに決める

最初にやるべきなのは、デザインではなく情報の取捨選択です。「この会社に入社する理由を1つだけ挙げるなら何か」を考えてみてください。技術力なのか、働きやすさなのか、それとも人間関係なのか。ここが1つに決まると、載せるべき情報と削るべき情報が自動的に仕分けされていきます。逆に、社内の各部署の要望を全部足した時点で、ミニマルは崩壊します。まずは伝えることを1つに絞り込んでください。

条件2｜1画面1メッセージでレイアウトを組む

ミニマルなレイアウトの基本は、1スクロールの画面ごとに、伝えることを1つに絞ることです。見出しと写真、そして短い本文の3点で1つの画面を構成し、次の画面へ進めるようにします。情報を並列に詰め込まず、順番に手渡していく構造です。これにより、読み手がどこを読めばいいか迷わなくなります。

条件3｜余白を「区切り」として使う

要素を減らしただけでは、ただ間延びしたサイトになってしまいます。ミニマルデザインで余白は、装飾ではなく段落記号の役割を持ちます。セクションとセクションの間は広く取り、関連する要素の間は狭くします。この間隔の差が、罫線や飾りに頼らずに情報のまとまりを伝えるのです。あしらいを足す前に、余白で解決できないかを考えるのが、この設計の正しい順番です。

条件4｜配色とフォントを絞る

カラーパレットは、ベースとなる白系に、メインの1色、そしてボタン用の強調1色までに抑えます。フォントは1〜2書体に絞り、太さとサイズの差だけで見出しと本文の階層を作ります。色数と書体を絞るほど、写真と言葉が前に出ます。心理効果の面でも、削ぎ落とされた画面は「自信」や「誠実さ」といった印象を与えます。飾らないという選択が、飾る必要がないという無言のメッセージになるからです。

ミニマル・シンプルな採用サイトのデザイン事例4選

ここからは、弊社が制作した採用サイトの中から、絞り方の異なる4つの事例を紹介します。同じ「シンプル」でも、絞るものが余白なのか、色なのか、写真なのか、あるいはサイトの数そのものなのかで、画面に残るものはまったく違ってきます。判断の基準は、見た目が洗練されているかどうかではありません。情報を削ったあとに、求職者の判断材料がしっかりと残っているかどうかが重要です。

なお、テイストを横断していろいろな事例を眺めたい方は、業種別のデザイン事例集も参考になります。

あわせて読みたい

【保存版】採用サイトのデザイン事例32選｜参考にしたい地方企業を業種別に

「採用サイトのデザインを探しはじめると、たいてい途中で手が止まります。ギャラリーサイトを開けば都心の大企業や有名ブランドの事例ばかりが並び、『うちの規模でこれは無理だ』と閉じてしまう」——地方の中小企業で採用を担当している方から、よくお聞きする状況です。 ここで必要なのは、かっこいい採用サイト

システムメトリックス株式会社 様｜画面の左半分を空ける

https://leapy.jp/works/recruit/systemmetrix-3/（制作：地方採用ワークス）

名古屋市にある、互換CADのパッケージソフトを開発している会社です。トップページの左半分を白のまま空けており、コピーと2つのボタンしか置いていません。写真は右半分に1枚だけ配置し、しかも人物ではなく抽象的なビジュアルを使っています。要素を減らしたぶん、残ったコピーの一行がそのまま会社の説明になっています。

置いてあるボタンが「新卒採用」と「キャリア採用」の2つだけ、という点も非常に効いています。トップページで求職者に求めているのは、自分がどちらかを選ぶことだけです。1画面1メッセージのお手本のような構成だと言えます。

株式会社岡島ホールディングス 様｜社名の文字を主役にする

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

岐阜県関ケ原町にある、建築・建設グループです。使っている色は白と水色、それに黄緑のボタンだけです。装飾は一切なく、画面の中心にあるのは社名の英字のみです。そこへ社員の写真を切り抜きで絡ませることで、文字が単なる背景ではなく舞台として機能しています。

色数と要素を絞ると、残った1つの造形に会社の印象が集約されます。事務職も現場職も同じ文字の上に立っているため、「建設会社といえば現場だけ」という先入観も同時に外れます。書体と造形で個性を立てるこの型は、言葉と見せたい人物像がしっかりと固まっていないと成立しません。

株式会社日発電工 様｜写真1枚に全部を言わせる

https://leapy.jp/works/recruit/nippatsu/（制作：地方採用ワークス）

岐阜県関市の電気設備工事会社です。トップページに置いているのは、写真1枚とコピー1行だけです。しかも、明るい集合写真ではなく、暗い現場で天井を見上げて作業している場面を選んでいます。枚数を絞るほど、1枚に何を写すかの判断がそのまま結果になります。

この1枚が効いているのは、電気工事という仕事の実際の様子が写っているからです。もし整った集合写真に差し替えてしまったら、同じ構成でも伝わるものはまったく変わってしまいます。撮影だけはプロに依頼するようおすすめしているのは、まさにこういう場面があるからです。

ALL DIFFERENT株式会社 様｜サイトを2つに分けて役割を絞る

https://leapy.jp/works/recruit/newgraduates-la/（制作：地方採用ワークス）

こちらは、1社で2つの採用サイトを持っている例です。上の画像が新卒向けです。白いヘッダーの下に大きな写真を1枚敷き、伝えているのは「成長」の一点だけに絞っています。

https://leapy.jp/works/recruit/career-la/（制作：地方採用ワークス）

下の画像がキャリア採用向けです。同じ会社ですが、1枚の写真ではなく、青い面と写真を斜めに切り替えた分割構成になっています。働いている場面が複数見えるように設計しました。新卒向けは「これからどうなれるか」、中途向けは「いま何をする会社か」を伝えています。伝えることを1つに絞った結果、1つのサイトに収まらなくなったので分けた、という順番です。

ミニマルにすると情報が足りなくなる、という心配への答えのひとつがこれです。1つのサイトに詰め込んで絞りきれないのであれば、読み手ごとにサイトを分けたほうが、結果的に両方とも情報を絞れます。ただし、作る本数も更新する本数も増えるため、社内の運用体制と相談して決める必要があります。

中小企業との相性と、「情報不足」にしないための注意点

ミニマル・シンプルは、実は中小企業と非常に相性のいい設計です。理由は3つあります。1つ目は、コンテンツを大量に用意しなくても成立すること。2つ目は、更新箇所が少なく、兼務の担当者お一人でも運用が続けやすいこと。そして3つ目は、強みを1つに絞る作業が、そのまま採用の軸の整理になることです。業種との相性で言えば、設計事務所やIT、士業のような「引き算の美意識」が仕事と地続きになっている業種は特に馴染みます。しかし、条件を満たせば製造業でも建設業でも十分に成立します。

ただし、絶対に削ってはいけない情報があります。

• 募集要項と仕事内容……給与や休日、勤務地、仕事の中身は、求職者が応募の意思決定に使う実務情報です。デザインの都合でこれらの情報を薄めた瞬間、応募を検討するための材料がなくなってしまいます。
• 働く人の姿……ミニマルなサイトほど、掲載する数少ない写真の比重が上がります。1枚の写真で職場を代表させることになるからこそ、誰をどの場面で写すかは、社内でしっかりと決めておいてください。
• 会社の実在感……所在地や代表者、事業の実績など、信頼の土台になる情報まで削ると、洗練ではなく「中身がない」印象に転びます。

もう1つお伝えしておきたいことがあります。「シンプルだから安く早く作れる」というわけではありません。要素が少ないほど、1つひとつの言葉や写真の質、そして優先順位の判断がそのまま画面に出てしまいます。足し算のデザインより、引き算のデザインのほうが設計の難度は高いというのが正直なところです。

ミニマル・シンプルな採用サイトに関するよくある質問

Q1. 載せられる情報が少ない会社こそ、ミニマルにすべきですか

半分正解です。コンテンツが少なくても成立するのはミニマルの利点です。しかし、「情報がないからミニマルになった」場合と、「情報を絞ったからミニマルになった」場合とでは、読み手に伝わる印象がまったく違います。少ないなりに、伝えることを1つ決めて、その1点は深く見せる。この設計があるかどうかが分かれ目です。

Q2. ページ数はどこまで減らせますか

トップページ、仕事内容、募集要項、エントリーの4つの要素が確保されていれば、構成としては成立します。これらを1ページにまとめる縦長構成も選択肢に入ります。減らすこと自体が目的ではないので、「求職者が応募を決めるのに必要な情報が揃っているか」から逆算して決めてください。

Q3. 情報量が少ないと、検索で不利になりませんか

採用サイト単体で検索流入を狙う設計にするのであれば、情報量は武器になります。ただ、中小企業の採用サイトの主な役割は、求人媒体や紹介で会社名を知った人が確認しに来る「受け皿」です。この役割に徹するなら、情報の量よりも「知りたいことに最短で答える構造」のほうが効果的です。

削る勇気は、残すものが決まってから

ミニマル・シンプルな採用サイトは、色や雰囲気の選択ではありません。何を削り、何を残すかという意思決定の産物です。伝えることを1つに決め、1画面1メッセージで組み、余白で区切り、配色とフォントを絞る。この順番で設計すれば、少ない要素でも「ちゃんとした会社」だと伝わるサイトになります。

難しいのはデザインの作業ではなく、削る決断のほうです。まずは兼務の担当者お一人でも、基準を言葉にしておくことから始めてみてください。「この1年で入社した人が、入社前にいちばん知りたがったこと」を残す、と決めるだけでも、要望を足したい部署と話ができるようになります。基準がないと、取捨選択はどうしても好みの言い合いに寄っていきます。

弊社が情報設計に入るときも、まずこの基準を一緒に決めるところから始めます。

社内での調整が難しいと感じたら、「何を載せて、何を削ればいいか分からない」という段階のご相談でも大丈夫です。まずは御社の採用の現状と伝えたい強みをうかがったうえで、情報設計からご一緒します。

採用サイト制作のサービス詳細はこちら