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

2019・2020年の採用サイトのデザイン21選

【1】リクルート

淡い色合いの映像を背景に、「KEEP YOU WEIRD」（変人であれ）という新卒採用キャッチコピーが掲げられたデザインです。サイト全体のコンセプトに沿ってフォントや文字色、ロゴの配置まで緻密に計算されている、まさに採用サイトの見本のようなデザインです。

【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：http://kodansha.saiyo.jp/2019/

“ゆるい”デザインで親しみやすさを前面に押し出したサイトです。マスコミ志望者は自由な社風を好む方が多いため、従来通りの固いデザインのサイトよりも詳しく読んでみようという気が起こされるでしょう。

【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

白黒写真の背景画像で職種が紹介されており、真っ赤なボックスでエントリー受付中であることが示されています。職種を一通り把握した後「ENTRY受付中」の表記にたどり着くことで思わず応募したくなるという目線誘導の計算が巧みです。

【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/

余白が大きめにとられており、見やすいサイトデザインです。最近のWebデザインは、余白をうまく生かすことが重要だといわれています。白主体の色使いも含め、その一つのお手本となるサイトかもしれません。

【16】ナイル

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

オーロラが輝く背景画像がサイトを見た人に強い印象を残します。「100年後の世界に贈る。そんな会社を、創っていこう」というキャッチコピーも合わせて、企業のスケールの大きさを強く感じさせる効果があります。

【17】キャタラー

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

サイトトップで揺れ動くキーワードをクリックすることで詳細にアクセスできるという独特な仕組みの採用サイトです。文字が非常に多い分、画像を使わないことで見やすさのバランスを保つという思い切ったデザイン手法を取っています。

【18】ライトオン

URL：https://biz.right-on.co.jp/career/shinsotsu/

アパレルメーカーの採用サイトはやっぱり「おしゃれさ」が重要。ブルー系のカラーで写真の背景も統一することで、サイト全体のデザインの方向性が完全にコントロールされています。

【19】小野薬品工業

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

幾何学模様の隙間から働く人の姿が見えるデザイン。遮蔽物がある分、余計に写真に写された人の姿に目を惹かれてしまうという計算が光ります。エントリーボタンやメニューが右上に固められており、分かりやすいのも好印象です。

【20】佐藤工業

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

「地球が、現場だ。」というインパクトの強いキャッチコピー。そちらに説得力を与えるべく、かっこよく撮影された工事現場の写真を背景で見せるデザインです。シンプルなデザインでキャッチコピーを生かすというのは、学生の心に印象を残す手法の代表例です。

【21】シロキ工業

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

画面の背景を左から右へ、「ステキ」「士気」といったポジティブな言葉が駆け抜けていきます。矢印で方向性が示されているため、ついつい目をやってしまい印象に残るサイトのデザインとなっています。見た人に忘れられないようにという情熱が伝わります。

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

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

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

採用サイトは、「採用情報」を伝えることを目的としたサイトです。会社情報、採用メッセージ、福利厚生、エントリーフォームなど、新卒・転職者が知りたい情報がどこにあるのかが直感で理解できるUIデザインとなっていなければ意味がありません。「ページ上部にナビゲーションを配置する」「アコーディオンメニュー内に各情報のリンクをまとめる」といった工夫を行って、情報へのアクセス性を高めましょう。

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

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

一見してインパクトのあるデザインが有利

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

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

トレンドを押さえる

採用サイトには毎年トレンドがあります。一見してほかよりも古いサイトでは、見た人の印象も悪くなってしまいます。その年のトレンドを押さえて、デザインのアイディアに取り入れましょう。2019年度新卒採用のトレンドには以下のようなものがあります。

平面でシンプルに表現するフラットデザイン
全画面に画像が広がったシンプルなデザイン
あえてレイアウトを崩すデザイン
背景に動画やアニメーションを取り入れたデザイン

最近の採用サイトのデザインはスマホに対応しているレスポンシブデザインがもはや前提となっています。そのため、スマホでも崩れにくいフラットデザインや全画面のデザインが人気なのです。
その一方、インパクトを残すためにあえてレイアウトを少し崩して違和感を演出したデザインや通信技術の高まりを背景に動画やアニメーションを取り入れたデザインなども増えてきています。

採用サイトのデザイン制作の流れは？

採用サイトのデザイン制作は大きく分けて4ステップで進みます。インターンシップがスタートする大学3年時の5月までに完成させることを目標に、以下の手順でデザイン制作を進めましょう。

サイトのコンセプトを決める

サイト全体の方向性であるコンセプトはサイト作りの最初の段階で行うべきです。納得のいくコンセプトづくりを行うためには人材用件を明確にする、自社の競合他社に対する強みを言語化するといった下準備も必要です。それらの情報を元にサイトを通して何を伝え、どのように感じてほしいのかを考えましょう。

サイトのコンテンツを確定する

コンセプトが決まったら、それに応じてサイトのコンテンツを確定します。サイトのコンテンツには、募集要項、選考プロセスなど絶対に掲載すべきものと他社との差別化のために掲載する自社独自のものがあります。過不足ない情報を就活生・転職者に提供することを意識して慎重に選定しましょう。

サイトのコンテンツについて詳しくは→採用サイトの作り方採用担当者向けに基礎からコツまで解説

制作を依頼する

自社にクリエイターが在籍していない場合は、Web制作会社にサイト制作を依頼することになります。サイト制作費用は平均数十万円～百数十万円と、作りたいサイトのイメージやコンテンツによって異なります。コンセプトを決める段階からアドバイスがもらえる企業も多いため、まずは自社の予算感にあった制作会社を探してみましょう。