2020年採用サイトのデザイン21選。印象に残るポイント解説

採用サイトの重要性

採用サイトとは、自社に興味を持っている求職者に向けて情報を発信する、人材採用のための専用Webサイトです。

インターネットが普及した昨今では、求職者が業界や企業の情報収集を行う際に、企業のWebサイトを訪問することが当たり前の時代です。

企業は自社の採用サイトに求職者が求めている内容を掲載し、求職者へのアピール力を高める必要があります。
求職者は採用サイトを見て応募の可否を決めることもあるため、訴求力が低い採用サイトの場合は、応募すらしてもらえない可能性もあります。

なお通常のコーポレートサイトやサービスサイトは、企業のマーケティング部門などが制作・運用するのが一般的ですが、採用サイトは人事部門の管轄であることが多いです。
魅力的な採用サイトにするために、基礎的なインターネット知識やデザインノウハウを学んでおくこともおすすめです。

2022・2023年の採用サイトのデザイン21選

【1】リクルート

URL：https://www.recruit-jinji.jp/

生き生きとした若い人物の写真を前面に出し、企業ミッションを学生にも分かりやすい表現で伝えています。

多様な事業を持っているリクルートらしく、「自分らしい人生を選べる」というメッセージの下に事業ブランドロゴを配置することで、学生の選択を尊重している様子がうかがえます。
デザイン面では色を控えた画面の右上に、黄色とコーポレートカラーのブルーで「ENTRY」ボタンが目立つようになっているため、アクションを促す効果があります。

【2】DeNA

URL：https://student.dena.com/

‟「面白がり」、求む。”というキャッチコピーが象徴的で、ひと目でどんな人材を求めているかが分かるトップページになっています。

働く若手社員の画像をメインに使用していますが、自動で様々な社員に切り替わることで、多様な「面白がり」があることを伝える効果があります。
「こういう人に応募してほしい」というメッセージ性を強めたい会社は、参考になるデザインとなっています。

【3】LINE

URL：https://linecorp.com/ja/career/newgrads/

コミュニケーションアプリを提供するLINEらしく、すっきりと見やすいデザインで、サイト来訪者が迷いにくい導線になっているのが特徴です。

近年の採用サイトは、UIデザイン（ユーザーが直感的に使いやすいデザイン）であることが非常に重視されています。
また、職種を前面に出すことで、新卒採用であっても個人の専門性を求める企業メッセージが感じられます。

【4】集英社

URL：https://www.shueisha.co.jp/saiyo/

出版社らしく、縦書きのコピー“その種を、育てよう。”が印象に残るデザインです。

キャッチコピーと相性が良い優しいイラストからは、和やかな社風が感じられます。
ENTRYフォームへのリンクが目立ちやすい緑色で表現されており、他業界より早いエントリー期限を応募者が見逃すことのないようにという配慮が見られます。

【5】講談社

URL：https://recruit.kodansha.co.jp/2023/

手書き風のキャッチコピーと、賑やかなデザインで親しみやすさを前面に押し出したサイトです。

マスコミ志望者は自由な社風を好む方が多いため、ありきたりな固いデザインのサイトよりも詳しく読んでみようという気が起こされるでしょう。

採用サイトは直接的な目的は人材採用ですが、前述したように企業ブランディングにも貢献します。
たとえ「社員採用」という形で自社にご縁がなかった人であっても、ゆくゆく自社の顧客になる可能性はあります。

そんな採用サイトの展開も考慮し、ぜひ自社らしいサイトのあり方を検討していってください。

【6】テレビ朝日

URL：http://company.tv-asahi.co.jp/saiyo/shinsotsu/

色味を抑えて、「新しい時代のテレビ局へ」のコピーに相応しいスタイリッシュなデザインとなっています。

派手なアニメーションを使わないことで、ページの読み込みスピードが速く、デザイン性と利便性のバランスが取れた採用サイトといえるでしょう。

【7】TBS

URL：https://www.tbs.co.jp/job/

生き生きと働く人物写真を前面に押し出したデザインで、「明日の世界をつくる。」という前向きなメッセージを後押ししています。

写真は人物が大きく写っているもので統一されており、人材に自信がある会社だということがよく伝わります。

【8】GMOペパポ

URL：https://recruit.pepabo.com/

手書き風のコピーとやや明るさを押さえた写真でシックな印象を与える効果を狙っています。

地味ではないけれど派手すぎない、エンジニア・デザイナーなどクリエイター系の人材にぴったりハマるトーンのサイトデザインだといえるでしょう。

【9】マクロミル

URL：https://www.macromill.com/recruit/freshers/

マーケティングリサーチ事業で急成長したマクロミル。様々な表情で働く人の画像が多数使われており、会社の勢いや躍動感が感じられます。

スタイリッシュなベンチャーに憧れを持つ学生からの共感を呼びやすいサイトデザインです。

【10】ワークスアプリケーションズ

URL：https://career.worksap.co.jp/index.php/276

青空背景のビル画像と、ビジネスパーソンの影の画像を組み合わせており、大人のビジネスサイトという印象が際立ちます。

新卒と中途採用を兼ねたトップページゆえの配慮かと思いますが、親しみやすさを前面に出すことが多い他社の新卒採用サイトのデザインと一線を画する効果が出ています。

【11】東京海上日動

URL：http://www.saiyou.tokiomarine-nichido.co.jp/

モノクロのビジネスビルのイラスト背景に、青文字の「一緒なら、世界は変えられる。」というスケールの大きなキャッチコピーが際立ちます。

グローバルナビゲーションもすっきりとシンプルな設計で、分かりやすさ以上にメッセージ性を重視したいというデザインの意図が伝わってきます。

【12】ライフネット生命

URL：http://recruit.netseiho.com/

ユニークな採用コンテンツを取りそろえたライフネット生命の新卒サイトでは、サイトトップのメイン部分でそのメニューラインナップを宣伝する形を取っています。

文字は黄緑のコーポレートカラーで統一されており自社らしさ重視という一貫したデザインコンセプトが伝わります。

【13】佳新堂

URL：https://keishindo-recruit.jp/

えびせんべいの製造・販売を行う佳新堂は、自社商品を前面に押し出した「えび家族」という象徴的な採用コンセプトを策定。

サイトデザインもコンセプトに沿ったユニークで楽しいものとなっています。コンセプトを徹底して表現するデザインは印象に残りやすいです。

【14】タグチ工業

URL：https://www.taguchi.co.jp/recruit_newgraduate/

画面の中心に採用メッセージが配置され、、その周囲に四角く切り取られた社員画像が取り囲む非常に安定感が感じられるデザインです。

トップページにコンセプトムービーボタンを設置することで、動画でエモーショナルに訴求したいという工夫がうかがえます。

【15】SCREEN

URL：https://www.screen.co.jp/recruit/fresh/

トップページに採用メッセージのムービーが埋め込まれているインパクトがあるデザインです。

次々と挑戦的なメッセージが表示され、野心がある学生へのアピール力は抜群でしょう。またハッシュタグでサイトメニューを表示しているのもユニークで、昨今の若者へのウケが良さそうです。

【16】ナイル

URL：https://mid-career.nyle.co.jp/

オーロラが輝く背景画像がサイトを見た人に強い印象を残します。

「100年後の世界に贈る。そんな会社を、創っていこう」という壮大なキャッチコピーと画像との相性が相乗効果となり、企業のスケールの大きさを強く感じさせる印象があります。

【17】キャタラー

URL：https://www.cataler.jp/

サイトトップで揺れ動くキーワードをクリックすることで詳細にアクセスできるという独特な仕組みの採用サイトです。

文字が非常に多い分、あえて画像を使わないことで見やすさのバランスを保つという思い切ったデザイン手法を取っています。

【18】ワールド

URL：https://corp.world.co.jp/recruit/freshers/

さまざまなファッションブランドを手がける株式会社ワールドらしく、ファッションで時代を創っていこうという前向きなキャッチコピーが印象的な採用サイトです。

単にファッションだけに着目するのではなく、次世代ビジネスという言葉が含まれることで、ファッション業界のリーディングカンパニーであることをアピールしています。

【19】小野薬品工業

URL：https://recruit.ono.co.jp/

コーポレートカラーの青色を基調として、働く研究員の画像をメインに設置した薬品会社らしいトップページです。

1ページ構成でスクロールすると「会社を知る」「仕事を知る」などのメニューが現われますが、キャッチコピーの「挑戦」というキーワードでコンテンツをまとめているのが分かりやすいです。

【20】佐藤工業

URL：http://www.satokogyo.co.jp/saiyo/

「建築品質。」という骨太でインパクトが強いキャッチコピー。

そちらに説得力を与えるべく、スタイリッシュに撮影された工事現場の写真を背景で見せるデザインです。シンプルなデザインでキャッチコピーを生かすというのは、学生の心に印象を残す手法の代表例です。

【21】シロキ工業

URL：http://www.shiroki.co.jp/recruit/

画面の背景を左から右へ、「ステキ」「士気」といったポジティブな言葉が駆け抜けていきます。

矢印で方向性が示されているため、ついつい目線を動かしてしまう印象に残るサイトのデザインとなっています。見た人に忘れられないようにという情熱が伝わります。

採用サイトデザインの基本3ポイント

数多くの採用サイトデザインを分析して分かった、採用サイトデザインで重視すべき基本の3ポイントをご紹介します。

情報が”伝わる”ことを最重視する

採用サイトは、「採用情報」を伝えることを目的としたサイトです。

会社情報、採用メッセージ、福利厚生、エントリーフォームなど、新卒・転職者が知りたい情報がどこにあるのかが直感で理解できるUIデザインとなっていなければ意味がありません。

「ページ上部にナビゲーションを配置する」「アコーディオンメニュー内に各情報のリンクをまとめる」といった工夫を行って、情報へのアクセス性を高めましょう。

また、文字自体の読みやすさも高めるために、以下のようなポイントを押さえると良いでしょう。

背景色は基本的に白（目立たせたい部分はカラフルでOK）
文字サイズは小さくしすぎない
文字色は基本的に背景色の補色
余白をきちんと取る
情報は細かく分けすぎない

自社ブランディングを意識する

採用サイトは採用情報を伝えるほかに、企業のブランディングを行うツールでもあります。

「こんな企業に入りたい！」と学生・転職者に思わせられるようなスタイリッシュなサイトやユニークなサイトは採用の歩留まりを高めるだけでなく、取引先や顧客に対するアピールにもつながるかもしれません。

とはいえ、いざインパクトのあるサイトをデザインしようとしても、奇抜すぎて見にくいページになったり、そもそも思いつかなかったりすることは良くあります。
そんなときは、「採用方針と自社の強み」から考えましょう。リーダーシップを取れる体育会系の学生が欲しいのか、技術の高いエンジニア系の人材が欲しいのかによってサイトで打ち出すべきイメージは大きく変わります。

また、自社の打ち出せる強みが表現できれば、他企業には真似できないサイトのオリジナリティにつながります。