見積もり
オススメしたい採用サイトのデザイン事例まとめ30選【2023年度版】
毎年個性的なサイトが多く見受けられる採用サイトのデザイン。
単なる企業サイトの１コンテンツに留まらず、企業の全てを余すところなく伝えるために、各社全力で取り組んでいます。
デザインなど表現の仕方も最新の手法を取ることが多いため、Webでの表現方法は最新の情報を得ようとする採用担当者も多いことでしょう。
- 今年のWebサイトのトレンドは何だろう？
- 会社の魅力を全力で伝えられるデザインにするにはどんなポイント抑えたら良いのか？
そのようなお悩みに応えるべく、
Webサイトの表現トレンドを抑えた主要企業の採用サイトをまとめました。
また、求職者に訴求できる採用サイトをデザインする際のポイントもをご紹介します。
なお、すでに制作をご検討の方は、採用サイトに強みをもつ制作会社をまとめていますので以下をご覧ください。
採用サイトに強い会社を目的に合わせてご紹介
【プロが厳選】採用サイトに強いホームページ制作会社まとめ【目的にあわせてご紹介】
採用サイト制作に強いおすすめホームページ制作会社を
実績豊富、集客、特定の領域に強みを持つなど、発注目的や特徴に合わせてご紹介します！
-
1.
オススメしたい新卒採用サイトのデザイン事例24選
- 1-1. ブリッジコーポレーション
- 1-2. 小学館
- 1-3. バンダイ
- 1-4. タカラトミー
- 1-5. 星野リゾート
- 1-6. みずほ
- 1-7. ホンダ
- 1-8. トヨタ
- 1-9. トゥモローゲート株式会社
- 1-10. ユナイテッド
- 1-11. USEN
- 1-12. プラットイン
- 1-13. 楽天
- 1-14. 株式会社ダイワコーポレーション
- 1-15. 株式会社ディーエイチシー
- 1-16. 東洋ハイテック株式会社
- 1-17. 株式会社キャリアデザインセンター
- 1-18. 株式会社WOWOW
- 1-19. オンワード商事
- 1-20. 株式会社サジェスト
- 1-21. 株式会社ベンチャーバンク（jump one）
- 1-22. 株式会社ホリプロ
- 1-23. 株式会社クオキャリア
- 1-24. 株式会社夢テクノロジー
- 2. オススメしたい中途採用サイトのデザイン事例6選
- 3. 採用サイトのデザイン事例を掲載している、参考サイト
- 4. 採用サイトのデザインのポイント
- 5. 採用サイトのデザイン まとめ
オススメしたい新卒採用サイトのデザイン事例24選
ブリッジコーポレーション
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
みずほフィナンシャルグループの採用サイトは、横スクロールなのが特徴です。
背景に宇宙のような画像が使われており、テクノロジーやビジネスを連想させる写真が次々と流れていくため、「最先端」という企業イメージを受けます。
サイトの操作感や写真のクオリティなどから、信頼感や大企業ならではの安心感といった印象を抱く方もいるでしょう。
ホンダ
ホンダの採用サイトは、動画が主体です。
アクセスすると画面いっぱいに張られた動画と共に、「どうなるかじゃない、どうするかだ。」というコピーに目が行きます。そのためメッセージ性の強い印象を受けます。
また、1つ1つのメニュー画像が大きいため、クリックしやすいことも特徴の一つでしょう。
トヨタ
トヨタの採用サイトもホンダと同じように、トップ画として動画が使用されています。
それに重なるように「世界への責任、未来への覚悟」というコピーが配置されています。
色は下記の3色で構成されており、白色部分が多いためシンプルな印象を受けます。
- 背景色：白
- 文字色：黒
- アクセントカラー：赤
スッキリとした見た目なので、見やすいと感じる方が多いでしょう。
トゥモローゲート株式会社
http://www.tomorrowgate.co.jp/special/
「ようこそ、ブラックな企業へ」というコピーが1文字ずつフラッシュ暗算のように表示されるTOP画面から、「ルパン三世」のオープニングのような印象を受ける採用サイトです。
黒、白、黄色で構成されているため、クールなデザインとなっています。
縦スクロール型のサイトデザインで、1セクションに1メッセージのため、スタイリッシュかつ情報を読みやすいのが特徴です。
ユナイテッド
ユナイテッドは、黒色、白色をメインカラー、黄色をアクセントカラーとして構成されています。
そのためスタイリッシュな印象を受けます。
画像にカーソルを合わせると黄色のレイヤーがかかります。
その結果、シンプルなデザインですが、クリックごとに会社のカラーをユーザーに印象付けやすくなっているのが特徴です。
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/
トップを事業内容をデフォルメしたイラストとアニメーションで表現し、サイトを訪れたときの第一印象を身近なものにしています。
コンテンツでは理系学生の知的好奇心をくすぐる「ニッチな情報」を掲載し、インタビューページは画面内の文章と写真を分割して表示することで、飽きずに読める仕組みになっています。
株式会社キャリアデザインセンター
成長をやめない、前進し続けるコンセプトを表現するため、トップページは社員がウォーキング、ランニングする動画を表示。
社員インタビューページは、よりアクティブなスチール写真で表現しています。
株式会社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）
https://saiyo-branding.fands-c.com/works/jumpone_2020
コンセプトカラーはオレンジと黒をベースにし、POPなイラストでコンテンツの動きに特徴を持たせ、コンテンツの役割をはっきりさせたデザインです。
一目見たら記憶に残るインパクトとjumponeのエンターテイメント性を表現。サラリーマンではなく、エンターティナーとして働こうと訴求しています。
ついクリックしたくなるコミカルな動き、コンセプトカラーによってjumponeの世界観を表現したこともポイントです。
株式会社ホリプロ
エンタメの楽しさ、ホリプロのアットホームな社風、ホリプロで働く楽しさを演出したデザインです。
事業のイメージをイラスト化。ホリプロが総合エンターテインメントの企業だと表現しています。ビジュアルが事業一覧のインフォグラフィックスになっていることがポイントです。
株式会社クオキャリア
挑戦的なキャッチコピーの採用サイト。訪問者の関心をつかむ意図があり、デザインはピンク・黒・白で統一しています。
口腔をイメージするピンクを基調に、余分な装飾は省略し、個性を出しつつ、強さや熱い想いを表現しています。
株式会社夢テクノロジー
https://www.yumeteku.jp/newgraduate/
株式会社夢テクノロジーの採用サイトは写真の顔がしっかり見えるデザインです。挑戦のイメージにふさわしい力強い表情の新卒メンバーの顔をトップページに表示し、興味を喚起させています。
※ここまで読んで、自社の採用サイトをどんなデザインにすればいいのか専門家に相談したい方はWeb幹事にお問い合わせください。
【無料】採用サイトに強いホームページ制作会社を紹介してもらう
オススメしたい中途採用サイトのデザイン事例6選
あらい
http://www.arai-saiyo.biz/chuto-saiyo/
あらいの採用サイトでは、TOPの白背景に「圧倒的卸」と記されており、
インパクトだけでなく、爽やかさや、信頼感を感じさせるデザインとなっています。
自社の考えや、会社の構造を、図解をつけてわかりやすく記載しています。
ヤマト住建
https://recruit.yamatojk.co.jp/
ヤマト住建の採用サイトはオレンジ色をアクセントカラーとして使用しています。
また、笑顔の社員の画像がTOPに掲載されているため、暖かみを感じる採用サイトデザインとなっています。
株式会社ユーティル
株式会社ユーティルの採用サイトは、どんな社員がいるかが伝わるデザインです。
トップページに社員の顔写真が大きく表示されるだけでなく、「メンバー」のページでは下のように社員の詳しい情報を見ることができます。
在籍する社員の雰囲気が伝わり、親しみを持ってもらえる効果が期待できます。
JEM株式会社
JEM株式会社の採用サイトはスタイリッシュさを前面に出しています。「人生最大に滾（たぎ）る」というキャッチコピーを目立たせ、動画を入れることでリアル感を意識しています。
株式会社フジテックス
株式会社フジテックスは社員や事業ではなく、求める人材のメッセージを全面に出しています。スケール感の大きさを感じさせるデザインで、メッセージに力強さを加えています。
株式会社リクルート
https://www.recruit.co.jp/employment/mid-career/
株式会社リクルートの採用サイトは挑発的なキャッチコピーと、鋭い眼力のインパクトがあるデザインです。トップページを見ただけで、どんな人材を求めているのかが伝わってきます。
こちらもチェック！
ユニークなアイデアを採用サイトに活用している事例を集めました！
意外性を狙う採用サイトをお考えの方はぜひご覧ください。
ユニークなアイデア満載の面白い採用サイト30選！参考になるものだけ厳選
※ここまで読んで、自社の採用サイトをどんなデザインにすればいいのか専門家に相談したい方はWeb幹事にお問い合わせください。
【無料】採用サイトに強いホームページ制作会社を紹介してもらう
採用サイトのデザイン事例を掲載している、参考サイト
採用サイト| 縦長のWebデザインギャラリー・サイトリンク集｜MUUUUU.ORG
https://muuuuu.org/category/sitetype/recruit
MUUUUU.ORG（ムーオルグ）は、Webデザインのギャラリーサイトです。シンプルなデザインで見やすく、登録されているWebデザインも1500個以上。
採用サイトのカテゴリもあるので、ここを見れば、他の企業がどのような採用サイトを作っているのか、一覧にして見ることができます。
就職・求人・採用サイト Webデザインのリンク集 - イケサイ
https://www.ikesai.com/cat/recruit/
ikesai.comは、「イケてるサイト」を集めてリンクを掲載しているサイトです。
先ほどのMUUUUU.ORGと同じように、採用サイトのカテゴリがあります。
また、配色別のカテゴリもあるため、「こういう配色のデザイン」と決まったのであれば、他分野で同系色のサイトを参考にしてみると良いでしょう。
就活・就職・採用サイトをまとめたプラットフォーム | 求人カタログ
求人カタログは、採用サイトをまとめているサイトです。
採用サイト専門というだけあって、カテゴリも細分化されています。
デザイナーや不動産など、職種や業種別に採用サイトを見ることができるため、採用サイトの参考になるはずです。
採用サイト | SANKOU! | Webデザインの参考サイト集
https://sankoudesign.com/category/recruit/
SANKOU!は、Webデザインの参考になるサイトを集めたサイトです。
シンプルでわかりやすいデザインで、「手書き感」「漫画風」「やさしい」など、豊富な検索カテゴリが特徴です。
採用サイトを作った制作会社がわかる|URAGAWA
画像引用：URAGAWA
URAGAWAは2023年5月時点で92の採用サイトのデザインを掲載したギャラリーサイトです。採用サイトを作った制作会社が載っているので、その会社に依頼することもできます。
シンプルでスクロールしやすい|WebDesignClip
画像引用：WebDesignClip
WebDesignClipは2023年5月時点で218の採用サイトの事例が載っているギャラリーサイトです。PCで閲覧したとき、横に3つの採用サイトが表示され、シンプルで見やすいので気になる採用サイトを探しやすいです。
※ここまで読んで、自社の採用サイトをどんなデザインにすればいいのか専門家に相談したい方はWeb幹事にお問い合わせください。
【無料】採用サイトに強いホームページ制作会社を紹介してもらう
採用サイトのデザインのポイント
ターゲットに合わせたデザインを
自分たちの好みのデザインだと、ユーザーが遠ざかってしまう恐れも。
そのため、採用サイトをデザインする前に、きちんとターゲットを明確にしておきましょう。
「そのターゲットに好んでもらえるデザインとは何か」と逆算して考えると、デザインしやすくなるはずです。
また、複数のメンバーでサイトデザインを制作するのであれば、ターゲットをより深く設定しておきましょう。
例えば、「新卒で就活している女性」ではなく、
「都内の私立大に通っている3年生。趣味はカフェ巡りで、サークルはテニスサークル。よくみるファッション雑誌は美人百花」など、具体的なペルソナを設定しておくと良いでしょう。
| 抽象的 | 具体的 |
|---|---|
| ・新卒で就活している女性 |
・都内の私立大に通っている3年生 ・卒業後は東京の企業に就職を希望しており、就活中 ・趣味はカフェ巡りで、サークルはテニスサークル ・よくみるファッション雑誌は美人百花 |
また、ペルソナ設定は、担当したメンバーによってデザインの印象がバラバラになることを防ぐ役目もあります。
写真やイラストにはこだわる
画質が粗かったりフリー素材のものを使うと、臨場感が薄れてしまいます。
そのため、写真やイラストは、なるべくオリジナルかつクオリティの高いものを使用するようにしましょう。
ただし、高画質の写真を掲載しすぎると、サイトの表示スピードが遅くなることもあるため注意が必要です。
そのため、サイト表示速度を計測するツールを用いて、確認するようにしましょう。
必ずしもコーポレートカラーを基調にする必要はない
採用サイトのデザインは、コーポレートカラーに従う必要はありません。
採用サイトのターゲットを考えたときに、彼らに合った色、好んでもらえる色があるのなら、そちらに合わせるのも手段の一つです。
- ターゲットにとって好ましい配色か
- 採用のコンセプトを表現できている配色か
といった軸でサイトの基調カラーを合わせるのも有効です。
エントリーボタンは見やすい位置に
どれだけコンテンツが良くても、「この後どうしたら良いのか」が曖昧になっていると、応募に繋がりにくくなってきます。
そのため、エントリーボタンは見やすい位置に設定し、なるべく大きくすると良いでしょう。
グローバルナビゲーションに固定してエントリーボタンを置いたり、アクセントカラーを使ったボタンにしたりするのがオススメです。
こうすると、求職者が次に取るアクションに結びつきやすくなります。
※ここまで読んで、自社の採用サイトをどんなデザインにすればいいのか専門家に相談したい方はWeb幹事にお問い合わせください。
【無料】採用サイトに強いホームページ制作会社を紹介してもらう
採用サイトのデザイン まとめ
今回は採用サイトのデザイン例と制作時のポイントをまとめてご紹介しました。
- サイト制作を行う前に、必ずターゲットを具体化し、彼らから選んでもらえるデザインを考える
- 写真やイラストはこだわりを持ってクオリティの高いものを。また可能な限りオリジナルのものを使用する。
- 採用サイトの目的はあくまでも応募。エントリーボタンは見やすい位置に。
どの企業も動画やスクロール、アニメーションなど、独自の工夫をしながら伝えるべき情報を見やすく記載しています。
以上、あなたの採用サイトが訴求力のあるものになれば幸いです。
こちらもチェック！
かっこいい採用サイトのデザイン事例をまとめました！
クールな採用サイトをイメージされている方は、ぜひ参考にしてください。
かっこいい！&イケてる採用サイトの事例まとめ
【参考】採用サイトの関する記事リスト
自分で採用サイトの制作会社を探せない！という方へ
自分ではなかなか探す時間がない・会社の違いが分からないという方はWeb幹事にご相談下さい。
Web幹事は、あなたに最適なホームページ制作会社を「人力で」マッチングするサービス。
実際にWeb制作を経験したプロのコンサルタントが対応するため、業者選びの手間なく、質の高いマッチングを受けることが可能です！
コンサルタントのご紹介
岩田
Web制作会社を設立し、
3年間で上場企業を含む50社以上制作に携わらせていただきました。
様々なお客様のWeb制作を実際に行ってきましたので、
初心者の方でも安心してご相談ください！
あなたの目的や予算にに合わせて最適な制作会社をご紹介させていただきます。
ご相談はもちろん無料。また紹介された制作会社に必ず発注する必要はありません。
ホームページ制作の相場ガイドブックを
無料でプレゼントします！！
