オススメしたい採用サイトのデザイン事例まとめ25選!【2022年度版】

毎年個性的なサイトが多く見受けられる採用サイトのデザイン
単なる企業サイトの1コンテンツに留まらず、企業の全てを余すところなく伝えるために、各社全力で取り組んでいます。
デザインなど表現の仕方も最新の手法を取ることが多いため、Webでの表現方法は最新の情報を得ようとする採用担当者も多いことでしょう。

  • 今年のWebサイトのトレンドは何だろう?
  • 会社の魅力を全力で伝えられるデザインにするにはどんなポイント抑えたら良いのか?

そのようなお悩みに応えるべく、
Webサイトの表現トレンドを抑えた主要企業の採用サイトをまとめました。
また、求職者に訴求できる採用サイトをデザインする際のポイントもをご紹介します。

なお、すでに制作をご検討の方は、採用サイトに強みをもつ制作会社をまとめていますので以下をご覧ください。

採用サイトに強い会社を目的に合わせてご紹介 【プロが厳選】採用サイトに強いホームページ制作会社まとめ【目的にあわせてご紹介】
採用サイト制作に強いおすすめホームページ制作会社を
実績豊富、集客、特定の領域に強みを持つなど、発注目的や特徴に合わせてご紹介します!

目次
  1. 1. オススメしたい採用サイトのデザイン事例(2020年度版)
    1. 1-1. 新卒採用サイト23選
    2. 1-2. 中途採用サイト2選
  2. 2. 採用サイトのデザイン事例を掲載している、参考サイト
    1. 2-1. 採用サイト| 縦長のWebデザインギャラリー・サイトリンク集|MUUUUU.ORG
    2. 2-2. 就職・求人・採用サイト Webデザインのリンク集 - イケサイ
    3. 2-3. 就活・就職・採用サイトをまとめたプラットフォーム | 求人カタログ
    4. 2-4. 採用サイト | SANKOU! | Webデザインの参考サイト集
  3. 3. 採用サイトのデザインのポイント
    1. 3-1. ターゲットに合わせたデザインを
    2. 3-2. 写真やイラストにはこだわる
    3. 3-3. 必ずしもコーポレートカラーを基調にする必要はない
    4. 3-4. エントリーボタンは見やすい位置に
  4. 4. 採用サイトのデザイン まとめ
    1. 4-1. 自分で採用サイトの制作会社を探せない!という方へ

オススメしたい採用サイトのデザイン事例(2020年度版)

新卒採用サイト23選

ブリッジコーポレーション

ブリッジコーポレーションの採用サイト

http://recruit.bridge-net.co.jp/student20/

「ともに成長し、未来を創るブリッジになろう!」という採用のキャッチコピーと共にエンターページが設けられたデザインとなっています。
全体的にフラットなデザインで、見やすいのが特徴です。
また、トップページのメインビジュアルには在籍社員の写真が用いられています。それぞれの社員をクリックすると、彼らの仕事内容を見ることができます。

小学館

小学館の採用サイト

http://jinji.shogakukan.co.jp/2019_teiki/

オレンジと黄色のデザインでまとめられているのが小学館の2019年の採用サイトです。
採用のコンセプトは「トンテンカン、小学館」。
メイン画像がスライドしていたり、マウスを置くとメニューが出たりするなど、動きが付いているのが特徴です。
2020年の採用サイトは、オレンジとは反対色の水色でまとめられたデザインとなっています。
採用コンセプトは「おもしろ層小学館」。「層」を表すために立体的なサイトデザインとなっているのがポイントです。

バンダイ

バンダイナムコの採用サイト

http://www.bandai.co.jp/recruit/grad/

バンダイの採用コンセプトは、「Beyond もっとワクワクの未来へ」です。
笑顔の人物や、賑やかなシーンを切り取った写真を配置し、「わくわく」を表現しています。
外国人の写真や家族写真も用いられているため、楽しそうでグローバルな印象を受けます。

タカラトミー

タカラトミーの採用サイト

https://www.takaratomy.co.jp/company/recruit/

タカラトミーの採用コンセプトは、「挑戦状」です。トップ画像には「タカラトミーグループの挑戦状」と掲げられています。
社員紹介ではなく、「キャラクター図鑑」というメニューにしているところからも、おもちゃを取り扱う企業としてのコンセプトが感じられます。

星野リゾート

星野リゾートの採用サイト

https://www.hoshinoresorts.com/recruit/

星野リゾートの採用サイトTOP画面には、1枚の写真が大きく背景全体に配置されています。
加えて、「私たちが追いかけているもの、それは、オペレーションのReality」というキャッチコピーが大きく掲載され、インパクトのあるトップ画面となっています。
メニューボタンが無く、下にスクロールしていくサイトデザインなので、LPのような印象も。

  • 黒背景に白文字
  • 明朝体による文字組み

を使っているため、重厚感が感じられます。

みずほ

みずほフィナンシャルグループの採用サイト

https://www.mizuho-fg.co.jp/saiyou/index.html

みずほフィナンシャルグループの採用サイトは、横スクロールなのが特徴です。
背景に宇宙のような画像が使われており、テクノロジーやビジネスを連想させる写真が次々と流れていくため、「最先端」という企業イメージを受けます。
サイトの操作感や写真のクオリティなどから、信頼感や大企業ならではの安心感といった印象を抱く方もいるでしょう。

ホンダ

ホンダ技研の採用サイト

http://www.honda-recruit.jp/

ホンダの採用サイトは、動画が主体です。
アクセスすると画面いっぱいに張られた動画と共に、「どうなるかじゃない、どうするかだ。」というコピーに目が行きます。そのためメッセージ性の強い印象を受けます。
また、1つ1つのメニュー画像が大きいため、クリックしやすいことも特徴の一つでしょう。

トヨタ

トヨタ自動車の採用サイト

http://toyota-saiyo.com/

トヨタの採用サイトもホンダと同じように、トップ画として動画が使用されています。
それに重なるように「世界への責任、未来への覚悟」というコピーが配置されています。
色は下記の3色で構成されており、白色部分が多いためシンプルな印象を受けます。

  • 背景色:白
  • 文字色:黒
  • アクセントカラー:赤

スッキリとした見た目なので、見やすいと感じる方が多いでしょう。

トゥモローゲート株式会社

トゥモローゲートの採用サイト

http://www.tomorrowgate.co.jp/special/

「ようこそ、ブラックな企業へ」というコピーが1文字ずつフラッシュ暗算のように表示されるTOP画面から、「ルパン三世」のオープニングのような印象を受ける採用サイトです。
黒、白、黄色で構成されているため、クールなデザインとなっています。
縦スクロール型のサイトデザインで、1セクションに1メッセージのため、スタイリッシュかつ情報を読みやすいのが特徴です。

ユナイテッド

ユナイテッドの採用サイト

https://united.jp/recruit/

ユナイテッドは、黒色、白色をメインカラー、黄色をアクセントカラーとして構成されています。
そのためスタイリッシュな印象を受けます。
画像にカーソルを合わせると黄色のレイヤーがかかります。
その結果、シンプルなデザインですが、クリックごとに会社のカラーをユーザーに印象付けやすくなっているのが特徴です。

USEN

USENの採用サイト

https://usen-next.co.jp/recruit/students/

USEN-NEXT GROUPの採用キャッチコピーは「超!全力採用」です。
最初に、エンターの代わりに「始動する」というボタンをクリックするため、
「これから何が起こるのだろう?」と、ワクワク感を掻き立てられます。
遷移後のページは、黒背景に白文字のデザインですが、ファーストビューに動画が使われていたり、アクセントカラーとして赤色や緑色が使われていたりするため、シンプルというより賑やかな印象を受けます。

プラットイン

プラットインの採用サイト

https://www.platin.co.jp/saiyo/

プラットインの採用サイトデザインは、旅行がテーマとなっています。
キャッチコピーは「乗り遅れるな」。
横スクロール型のサイトデザインで、それぞれのメニューが

  • Start
  • Tokyo
  • Platform

など、世界観が作り込まれているのが特徴です。

楽天

楽天の採用サイト

https://corp.rakuten.co.jp/careers/graduates/

楽天の採用サイトは白背景で、アクセントカラーとして赤色が用いられており、
コーポレートカラーを印象づけるデザインとなっています。
キャッチコピーは楽天が創業時から掲げている理念の「Empowerment」。
全体的にポップな画像が使われており、それらも動くため、賑やかで楽しそうな印象を受けます。
ビジュアルがメインとなっているため、スタイリッシュさも感じれらるデザインです。

株式会社ダイワコーポレーション

ダイワコーポレーション

https://saiyou.daiwacorporation.co.jp/

物流大手のダイワコーポレーションの新卒採用サイトです。新卒向けにわかりやすく、アニメーションを使った明るいPOPなデザインに仕上げています。

まだ入社前でも親しみが持てる工夫がされているデザイン事例です。

株式会社ディーエイチシー

株式会社ディーエイチシー

https://shinsotsu.dhc.co.jp/#1

株式会社ディーエイチシーの新卒採用サイト。1枚絵ではなく、TOPビジュアルを分割し、実際に働く姿を追加していることが特徴。

直帰率を下げるために、内定者座談会のリンクをTOPに配置していることもポイントです。

東洋ハイテック株式会社

東洋ハイテック株式会社

https://www.toyohi.co.jp/recruit/

トップを事業内容をデフォルメしたイラストとアニメーションで表現し、サイトを訪れたときの第一印象を身近なものにしています

コンテンツでは理系学生の知的好奇心をくすぐる「ニッチな情報」を掲載し、インタビューページは画面内の文章と写真を分割して表示することで、飽きずに読める仕組みになっています。

株式会社キャリアデザインセンター

株式会社キャリアデザインセンター

https://recruit.type.jp/

成長をやめない、前進し続けるコンセプトを表現するため、トップページは社員がウォーキング、ランニングする動画を表示

社員インタビューページは、よりアクティブなスチール写真で表現しています。

株式会社WOWOW

株式会社WOWOW

https://corporate.wowow.co.jp/recruit/

「偏愛上等。」という採用活動のスローガンをトップページに大きく打ち出し、社員の持っている偏愛を多分に紹介することで、企業文化を掴んでもらえるように設計しています。

写真はすべて違う撮影手法を用いて、たくさんの個性を際立たせていることもポイントです。

オンワード商事

オンワード商事

https://www.onward-shoji.co.jp/recruit/

「Show your mind」という採用スローガンを真ん中に表示し、事業と人柄の魅力を伝えることを意図しています。

オープニングのアニメーションで、社員の本音をタイポグラフィーで表現し、動きをつけることで、サイト全体への期待感を演出

キービジュアルは、スライドショーを使用し、さまざまな社員を紹介することで、サイトのボリューム感を伝えています。

株式会社サジェスト

株式会社サジェスト

https://saiyo-branding.fands-c.com/works/suggest_2020/

スケール感のある空をモチーフとし、見る人の期待感を高めるデザイン。情緒的で芯のあるコピーを大胆にレイアウトし、コンセプトをストレートに伝えています。

シンプルでも単調に感じさせないレイアウトと、控えめな色づかいで写真と文章がスムーズに目に入ってくる効果を演出。

社員紹介ページは、社員の心情を臨場感を持って伝えるため物語のような表現と、続きを見たくなる読み物風のデザインに仕上げています。

株式会社ベンチャーバンク(jump one)

株式会社ベンチャーバンク(jump one)

https://saiyo-branding.fands-c.com/works/jumpone_2020

コンセプトカラーのオレンジと黒をベースにPOPなイラストでコンテンツそれぞれに動きに特徴を持たせ、コンテンツの役割をはっきりさせたデザインです。

一目見たら記憶に残るインパクトとjumponeのエンターテイメント性を表現。サラリーマンとしてではなく、エンターティナーとして働こうという訴求しています。

ついクリックしたくなるコミカルな動きとコンセプトカラーでjumponeの世界観を表現していることもポイントです。

株式会社ホリプロ

株式会社ホリプロ

https://horipro-recruit.com/

エンタメの楽しさや、ホリプロのアットホームで楽しい社風、ホリプロで働くことの楽しさを演出したデザインです。

各事業のイメージをイラスト化し、ホリプロが総合エンターテインメント企業であることを表現。ビジュアル自体が事業一覧のインフォグラフィックスになっていることがポイントです。

株式会社クオキャリア

株式会社クオキャリア

https://www.qua-recruit.info/

挑戦的なキャッチコピーの採用サイト。「キャッチコピーを目立たせた他にないビジュアル」で、訪問者の関心を掴むことを狙い、デザインはピンク・黒・白で統一。

口腔をイメージさせる健康的なピンクを基調に、余計な装飾は省略し、個性も出しつつ、軽薄ではない強さや、熱い想いを表現しています

中途採用サイト2選

あらい

あらいの採用サイト

http://www.arai-saiyo.biz/chuto-saiyo/

あらいの採用サイトでは、TOPの白背景に「圧倒的卸」と記されており、
インパクトだけでなく、爽やかさや、信頼感を感じさせるデザインとなっています。
自社の考えや、会社の構造を、図解をつけてわかりやすく記載しています。

ヤマト住建

やまと住建の採用サイト

https://recruit.yamatojk.co.jp/

ヤマト住建の採用サイトはオレンジ色をアクセントカラーとして使用しています。
また、笑顔の社員の画像がTOPに掲載されているため、暖かみを感じる採用サイトデザインとなっています。

こちらもチェック! ユニークなアイデアを採用サイトに活用している事例を集めました!
意外性を狙う採用サイトをお考えの方はぜひご覧ください。
ユニークなアイデア満載の面白い採用サイト30選!参考になるものだけ厳選

採用サイトのデザイン事例を掲載している、参考サイト

採用サイト| 縦長のWebデザインギャラリー・サイトリンク集|MUUUUU.ORG

採用サイト| 縦長のWebデザインギャラリー・サイトリンク集

https://muuuuu.org/category/sitetype/recruit

MUUUUU.ORG(ムーオルグ)は、Webデザインのギャラリーサイトです。シンプルなデザインで見やすく、登録されているWebデザインも1500個以上
採用サイトのカテゴリもあるので、ここを見れば、他の企業がどのような採用サイトを作っているのか、一覧にして見ることができます。

就職・求人・採用サイト Webデザインのリンク集 - イケサイ

就職・求人・採用サイト Webデザインのリンク集 - イケサイ

https://www.ikesai.com/cat/recruit/

ikesai.comは、「イケてるサイト」を集めてリンクを掲載しているサイトです。
先ほどのMUUUUU.ORGと同じように、採用サイトのカテゴリがあります。
また、配色別のカテゴリもあるため、「こういう配色のデザイン」と決まったのであれば、他分野で同系色のサイトを参考にしてみると良いでしょう。

就活・就職・採用サイトをまとめたプラットフォーム | 求人カタログ

就活・就職・採用サイトをまとめたプラットフォーム | 求人カタログ

https://kyujincatalog.com/

求人カタログは、採用サイトをまとめているサイトです。
採用サイト専門というだけあって、カテゴリも細分化されています。
デザイナーや不動産など、職種や業種別に採用サイトを見ることができるため、採用サイトの参考になるはずです。

採用サイト | SANKOU! | Webデザインの参考サイト集

採用サイト | SANKOU! | Webデザインの参考サイト集

https://sankoudesign.com/category/recruit/

SANKOU!は、Webデザインの参考になるサイトを集めたサイトです。
シンプルでわかりやすいデザインで、「手書き感」「漫画風」「やさしい」など、豊富な検索カテゴリが特徴です。

採用サイトのデザインのポイント

ターゲットに合わせたデザインを

自分たちの好みのデザインだと、ユーザーが遠ざかってしまう恐れも。
そのため、採用サイトをデザインする前に、きちんとターゲットを明確にしておきましょう。
「そのターゲットに好んでもらえるデザインとは何か」と逆算して考えると、デザインしやすくなるはずです。

また、複数のメンバーでサイトデザインを制作するのであれば、ターゲットをより深く設定しておきましょう。

例えば、「新卒で就活している女性」ではなく、
「都内の私立大に通っている3年生。趣味はカフェ巡りで、サークルはテニスサークル。よくみるファッション雑誌は美人百花」など、具体的なペルソナを設定しておくと良いでしょう。

抽象的 具体的
・新卒で就活している女性

・都内の私立大に通っている3年生

・卒業後は東京の企業に就職を希望しており、就活中

・趣味はカフェ巡りで、サークルはテニスサークル

・よくみるファッション雑誌は美人百花

また、ペルソナ設定は、担当したメンバーによってデザインの印象がバラバラになることを防ぐ役目もあります。

写真やイラストにはこだわる

画質が粗かったりフリー素材のものを使うと、臨場感が薄れてしまいます。
そのため、写真やイラストは、なるべくオリジナルかつクオリティの高いものを使用するようにしましょう。

ただし、高画質の写真を掲載しすぎると、サイトの表示スピードが遅くなることもあるため注意が必要です。
そのため、サイト表示速度を計測するツールを用いて、確認するようにしましょう。

必ずしもコーポレートカラーを基調にする必要はない

採用サイトのデザインは、コーポレートカラーに従う必要はありません。
採用サイトのターゲットを考えたときに、彼らに合った色、好んでもらえる色があるのなら、そちらに合わせるのも手段の一つです。

  • ターゲットにとって好ましい配色か
  • 採用のコンセプトを表現できている配色か

といった軸でサイトの基調カラーを合わせるのも有効です。

エントリーボタンは見やすい位置に

どれだけコンテンツが良くても、「この後どうしたら良いのか」が曖昧になっていると、応募に繋がりにくくなってきます。
そのため、エントリーボタンは見やすい位置に設定し、なるべく大きくすると良いでしょう。

グローバルナビゲーションに固定してエントリーボタンを置いたり、アクセントカラーを使ったボタンにしたりするのがオススメです。
こうすると、求職者が次に取るアクションに結びつきやすくなります。

採用サイトのデザイン まとめ

今回は採用サイトのデザイン例と制作時のポイントをまとめてご紹介しました。

  • サイト制作を行う前に、必ずターゲットを具体化し、彼らから選んでもらえるデザインを考える
  • 写真やイラストはこだわりを持ってクオリティの高いものを。また可能な限りオリジナルのものを使用する。
  • 採用サイトの目的はあくまでも応募。エントリーボタンは見やすい位置に。

どの企業も動画やスクロール、アニメーションなど、独自の工夫をしながら伝えるべき情報を見やすく記載しています。
以上、あなたの採用サイトが訴求力のあるものになれば幸いです。

こちらもチェック! かっこいい採用サイトのデザイン事例をまとめました!
クールな採用サイトをイメージされている方は、ぜひ参考にしてください。
かっこいい!&イケてる採用サイトの事例まとめ

自分で採用サイトの制作会社を探せない!という方へ

自分ではなかなか探す時間がない・会社の違いが分からないという方はWeb幹事にご相談下さい
Web幹事は、あなたに最適なホームページ制作会社を「人力で」マッチングするサービス。
実際にWeb制作を経験したプロのコンサルタントが対応するため、業者選びの手間なく、質の高いマッチングを受けることが可能です!

コンサルタントのご紹介 Web幹事 コンサルタント 岩田真 岩田 Web制作会社を設立し、
3年間で上場企業を含む50社以上制作に携わらせていただきました。

様々なお客様のWeb制作を実際に行ってきましたので、
初心者の方でも安心してご相談ください!

あなたの目的や予算にに合わせて最適な制作会社をご紹介させていただきます。
ご相談はもちろん無料。また紹介された制作会社に必ず発注する必要はありません。

【無料】採用サイトに強いホームページ制作会社を紹介してもらう