LogoWebマーケティングに
強くなるメディア

  • ログイン
  • 会員になる
  • ログイン
  • 会員になる

  • 総合

    • 新着
    • ランキング

    トレンドを知る

    • ノウハウ&トレンド ニュース
    • リリース ニュース
      - ferret×PR TIMES -
    • マーケター特集
      - マーケティングジャーニー -
    • マーケターのキャリアとは
      - ferret × マイナビ転職 -

    体系的に学ぶ

    • 基礎〜応用を学ぶ
      - カリキュラム -
    • コンテンツマーケティングを学ぶ
    • Googleアナリティクスガイド
    • 事例
    • セミナー
    • 資料ダウンロード
    • マーケティング用語辞典

    実践ツール

    • マーケティングオートメーション
      - ferret One -
    • 1文字0.8円〜!
      - ferret コンテンツライティング -
    • 画像1点99円〜!
      - 画像・写真の加工編集サービス -
    • ferretのノウハウを公開
      - オウンドメディア運用・構築支援 -
    • Instagram分析ツール
      - ナビスタ -

    Info

    • ferretとは
    • 運営会社
    • メンバー紹介
    • 著者一覧
    • お問い合せ
    • 広告掲載について
    • 利用規約
    • プライバシーポリシー
    • 特定商取引法に基づく表示

  • 新着
  • ランキング
  • トレンドを知る
    • ノウハウ&トレンド ニュース
    • リリース ニュース
      - ferret×PR TIMES -
    • マーケター特集
      - マーケティングジャーニー -
    • マーケターのキャリアとは
      - ferret × マイナビ転職 -
  • 体系的に学ぶ
    • 基礎〜応用を学ぶ
      - カリキュラム -
    • コンテンツマーケティングを学ぶ
    • Googleアナリティクスガイド
    • 事例
    • セミナー
    • 資料ダウンロード
    • マーケティング用語辞典
  • 実践ツール
    • マーケティングオートメーション
      - ferret One -
    • 1文字0.8円〜!
      - ferret コンテンツライティング -
    • 画像1点99円〜!
      - 画像・写真の加工編集サービス -
    • ferretのノウハウを公開
      - オウンドメディア運用・構築支援 -
    • Instagram分析ツール
      - ナビスタ -
  1. TOP
  2. ニュース
  3. インパクトが大事!デザイントレンドを取り入れたカッコいい採用サイト20選
  1. shares
Normal

インパクトが大事!デザイントレンドを取り入れたカッコいい採用サイト20選

  • Profile
  • ferret編集部
  • 2017年2月6日
  • ニュース
  • 760
Profile

ferret編集メンバーが不定期で更新します。
Webマーケティング界隈の最新ニュースからすぐ使えるノウハウまで、わかりやすく紹介します!

企業が採用活動を行う際は、求人媒体への掲載、会社説明会の準備、採用ツールの用意……と何かとやることが多いことをご存知でしょうか。
おそらく実際にその様子を体感した方でないとわからないかもしれません。

その企業の採用活動において重要なのが、企業自体が運営する採用サイトの存在です。

求人媒体には掲載することができなかった自社の働きがい・魅力を発信でき、企業からダイレクトに情報を発信することが可能で、ある種、企業をより知ってもらうことができる役割を担っています。

そのため自社専用の採用サイトを持つことが企業として当たり前になっている昨今、ほかの企業よりもインパクトを残そうとデザイントレンドを取り入れるなど、様々な工夫を施した採用サイトが増えています。

上手な見せ方ができれば、会社の良いところを効果的にアピールでき、可能な限りその要素を採用サイト内に取り入れたいものです。とはいえ、実際にはどうやってトレンドを取り入れれば良いのか、とお悩みの方も多いのではないでしょうか。

そこで今回は、採用担当者にぜひともオススメしたい採用サイト20個を事例としてご紹介します。
最近のデザイントレンドを上手く使った魅力あるものばかりですので、参考にしてみてください。
  

Curriculum pt1

デザイントレンドを取り入れた採用サイトまとめ

1. 全研本社株式会社

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

ここ最近急速に増えている、ヘッダー×動画の活用事例です。
大きな早送り動画がインパクト大なデザインで、スピード感を生み出しています。

配置された画像には時間が記載してあり、全研社員の一日を一目で表しています。
そのほかにもバナーが動画になっていたり、ローディング画像が出てきたりと、かなり細かい部分までこだわったデザインです。

ページレイアウトには近年トレンドのカードレイアウトを採用しており、全体的に今っぽい採用サイトです。
  

2. 株式会社テレビ朝日

https://saiyo.tv-asahi.co.jp/2018/

画像形式といえば「jpeg」「png」が主流ですが、近年注目を集めているのが「SVGファイル」です。

アニメーション業界で普及した流れから、Web業界でも多く使われるようになってきました。
SVGはビットマップデータであり、どれだけ拡大しても劣化せず綺麗なのが特徴です。

テレビ朝日の採用サイトでは、そんな旬のSVG画像を取り入れてデザインしています。
使用しているイラスト画像の多くがSVG形式で、所々アニメーションも取り入れています。
  

3. 株式会社小学館

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

大手出版社の一つである小学館では2018年の採用コンセプトを「柄」とし、カラフルな色使いの採用サイトを公開。このような1980年代を感じさせる明るく大胆な配色は2016年からの新たなトレンドで、多くのデザインに採用されています。

ポップな雰囲気のデザインにしたいという企業は、ぜひ参考にしてみてはいかがでしょうか。
  

4. 日本管財株式会社

http://www.nkanzai.co.jp/recruit/new/index.html

日本管財株式会社の採用サイトでは、仕事内容をイラストでわかりやすく説明しています。
トレンドのパララックス効果を取り入れることで、読み進めていくと道路を車が走っていく構造になっており、ページ下部までどんどん進みたくなります。

ヘッダーのデザインもページとリンクしており、下部にスクロールしていくと同時に動きます。
動きのあるデザインにしたい時に参考となる事例です。
  

5. 株式会社Wiz

http://012grp.co.jp/fresh/

2016年頃からパステルカラーを使用した、ポップで明るい雰囲気のデザインが多く登場しました。

株式会社Wizの採用サイトでも、最近トレンドのパステルカラーを取り入れています。同社ではコーポレート内に採用サイトを作っており、コーポレートサイトだけを見るとかっちりとした印象です。

しかし、パステルカラーを使うことで採用サイトの各コンテンツは親しみやすさを感じるデザインになっています。パステルカラーの与えるイメージを効果的に活用した事例といえるでしょう。

さらに、ブロックレイアウト、レスポンシブデザインという今人気のデザインでスマホからも見やすくなっています。
  

6. 株式会社サイバーエージェント

https://www.cyberagent.co.jp/recruit/fresh/real/data/

株式会社サイバーエージェントの採用サイトでは、たくさんのデータをインフォグラフィックスでわかりやすく紹介しています。インフォグラフィックスとは情報を視覚的に表現したもので、データを素早く表現したい場合に有効な手段です。

地図、標識、教育分野で用いられてきましたが、最近ではWebデザインでも多用されています。
数字だけだと見る気が失せてしまいますが、このようにわかりやすく表示してあるとついつい読んでみたくなります。
  

7. 稲畑産業株式会社

http://www.inabata.co.jp/recruit/

近年は積極的に動画を取り入れる流れがきており、ファーストビューだけではなく、画面全体に動画を配置したデザインも増えています。

電子材料・住宅設備関連を扱う稲畑産業の採用サイトでもトップページにフル画面動画を活用しており、映像をとおして会社の雰囲気が伝わってきます。
「商売は、汗だくだ」といった力強いメッセージと、失敗しながらも日々業務に取り組む社員の姿は、見る人に強いインパクトを与えます。

こうした動画はページを訪れると自動で再生されるので、一瞬でユーザーを引き付け、メッセージを効果的に伝達することが可能です。
  

8. 株式会社大広

https://www.daiko.co.jp/ja/recruit/2017/index.php

総合広告会社 大広の採用サイトは、ページ全体に無数のアイコンを並べた個性的なデザインです。
色数が少なく、多くがアイコンというデザインながら、所々に動きのあるGIF画像を取り入れることで、こだわり感ある飽きのこない見た目に仕上がっています。

また、ページをスクロールしていくと枠とともにメッセージが次々に出てきて、まるで一つの物語のような構成です。

このような物語形式のデザインは「ストーリーテリング」と呼ばれており、近年注目を集めているトレンドです。最近主流のシングルページデザイン、バックグラウンドムービーと相性が良く、あわせて使うケースも多くあります。
  

9. 伊藤忠商事株式会社

http://career.itochu.co.jp/student/#

伊藤忠商事の採用サイトでは、トップページに「ひとりの商人、無数の使命」というキャッチコピーと大きく人物の写真を掲載しており、一定時間で写真が切り替わります。
単なる写真ではなく、シネマグラフのような早送り動画を組み合わせているのがポイントです。

最近動画を使った採用サイトが増えていますが、このような取り入れ方はあまりないのではないでしょうか。

また、メニューにマウスポインタを乗せると、メニュー画面を大きく表示するのもユニークです。
  

10. jeki RECRUITING 2018 FUN TO ALL|jeki(株)ジェイアール東日本企画

http://www3.jeki.co.jp/recruit/graduate/

コーポレートカラーのグリーンをメインに、明るめの配色でデザインした楽しい雰囲気の採用サイトです。

レイアウトには、トレンドのカードレイアウトを採用しており、ポインターを乗せると写真が動くという仕掛けがあります。
カードレイアウトはPiterestが活用していることでもおなじみのレイアウトで、すっきりと整った印象が与えられるほか、情報が探しやすいというメリットがあります。
  

11. エイム株式会社

http://www.aim-info.co.jp/recruit/

自動車開発を行うエイム株式会社の採用サイトは、ネイビーを基調としたクールで落ち着きのあるデザインです。
画面遷移時の動きが特徴的で、一本の線が引かれるとともにコンテンツをスライドしながら表示します。

ページ全体のデザインと相性のいい動きで、よりデザインのカッコよさを引き立てている印象です。

さらに、最近増えているハンバーガーメニューも取り入れています。
  

12. 株式会社プライムクロス

http://www.prime-x.co.jp/recruit/2018/index.html

ネット広告代理店 株式会社プライムクロスの採用サイトは、最近流行の動画背景が目を引くデザインです。
先輩社員の日常のシーンを動画だけで知ることができます。

また、インフォグラフィックスで社内情報を紹介したり、オフィスを360度動画で公開するなど、ユニークなコンテンツが満載です。
プライムクロスで働くと毎日どんな感じなのかがよくわかる採用サイトとなっています。
  

13. 株式会社シグマクシス

https://www.sigmaxyz.com/recruit/#home

株式会社シグマクシスの採用サイトでもトレンドの大きな動画を活用していますが、こちらは音声付きで自動的に動画と音が流れるようになっています。
カッコいい雰囲気の音声が、ページ全体をより洗練した印象にしているように感じます。

最近は同社の事例のように、音声付き動画ビデオを採用するケースも増えています。

しかし、場合によっては驚かせてしまったり音声を好まない人もいるので、使用するかどうかは十分検討したいところです。
  

14. 株式会社TBSテレビ

http://www.tbs.co.jp/job/

TBSテレビの採用サイトは、ブルー系のグラデーションが美しいデザインです。
最近よく見るヘッダー動画を採用していますが、グラデーションを活用することで個性的な印象に仕上がっています。

こうしたグラデーションは一時あまり見なくなりましたが、また最近増えつつあります。
また、ハンバーガーメニューも近年多く登場しているトレンドのUIデザインスタイルです。

ハンバーガーメニューとは
3本の線が並んだアイコンのことで、線がパン、ハンバーグ、パンに見えることからハンバーガーメニューと言われています。

  

15. クックパッド株式会社

https://recruit.cookpad.com/2018

レシピ投稿サイトでお馴染み、クックパッド株式会社の採用サイトです。
ヘッダーに設置した動画でオフィスや作業中の様子、どんな社員がいるのかを知ることができクックパッドへの関心が湧きます。

全体的にはシンプルなデザインですが、動画を取り入れるだけで新しい印象になります。
  

16. 株式会社プレスマン

https://www.pressman.ne.jp/recruit2018

Webマーケティング、システム開発を行う株式会社プレスマンの採用サイトでは、インフォグラフィックスとイラストを使用し様々なデータをわかりやすく表示しています。
トップページのコンテンツの中でも一際目立っているのが、このインフォグラフィックス部分です。

社員増加数や男女比、平均年齢、社内表彰制度といった就活の気になるデータが一目でわかります。
  

17. ヤフー株式会社

http://hr.yahoo.co.jp/

ヤフー株式会社の採用サイトは、コーポレートカラーの赤色を基調とし、ヘッダー動画、インフォグラフィックスと随所にトレンドを取り入れたデザインです。
社員紹介部分の写真にマウスポインタを合わせると、くるくると動く仕掛けもユニークです。
  

18. 株式会社ソニー・ミュージックエンタテインメント

http://saiyo.sme.co.jp/graduate_17/#(´-`).。oO(今年のソニーミュージックは変)

ソニーミュージックの採用サイトは、「変人募集中」というキャッチフレーズとともに、たくさんのキャラクターイラストが次々に表示されるユニークなデザインです。
キャラクターごとに色が決まっており、テキスト色、背景色も変わり、同様にイラストを多用するデザインがここ最近多く登場しており、今後も増えると予想できます。

URLに顔文字を使用しているのも大変ユニークです。

また、最近流行のハンバーガーメニューも採用しています。
  

19. 株式会社LITALICO

http://litalico.co.jp/recruit2017/

就労支援、教育・インターネット事業を行う株式会社LITALICOの採用サイトです。
鮮やかな色をたくさん使った大胆な配色が魅力的で、デザイン性抜群です。

流行のハンバーガーメニューを取り入れており、メニューアイコンをクリックすると綺麗なブルーのメニューを表示します。
  

20. 株式会社ビーワークス

http://recruit.beeworks.jp/

出版サービス、広告・販促事業 などを行う株式会社ビーワークスの採用サイトです。
全体的にはシンプルな印象ですが、トップページの動画が今っぽさを感じさせるデザインです。

また、初めにページを開く際に文字のローディング画像が現れるのも印象的です。
  

まとめ

いかがでしたでしょうか。

採用サイトと聞くとちょっと堅いイメージがありますが、近年では様々なアプローチをしている企業が多くあります。その中でも、トレンドの動画は多くの採用サイトが積極的に活用しています。

「見ているだけでも楽しい」「つい眺めていたくなる」と思わせることができれば、ただ募集要項を掲載するよりも自社に興味を持ってもらえ、効果的にアピールできるでしょう。

採用サイトのデザインを考えるにあたり、トレンドを意識するのももちろん重要ですが、情報がわかりやすいことも重要です。せっかく訪れた学生に自社への興味を持ってもらえるよう、企業の魅力をしっかりとわかりやすく伝えましょう。

また、トレンドだからといって何でもかんでも取り入れると、会社のイメージに合わなかったり、見づらくなってしまう恐れもありますので注意が必要です。

ぜひ、自社の採用サイトデザインの参考にしてみてください。
  

関連記事

  • スマホサイトだけチェックしていませんか?BtoB領域なら無視できないPCサイトのデザイントレンド17選
  • 2016年のデザイントレンドを振り返ろう!印象に残る国内・海外サイト50選
  • 五感を刺激する!2017年注目のWebデザインアイデア10選
  • 参考になる!2015年、新卒リクルーティングサイト20選
  • デザイナーが確認しておきたいデザインリソース完全ガイド80選

Webマーケティングのノウハウ集をプレゼント!

ferretマーケティングメソッド(無料)

創業より10年以上、Webマーケティングの最前線で弊社が得てきた効果をあげるためのノウハウを1つの資料にまとめました。(全83ページ)

抜粋版のサンプルを読む(全3ページ)限定版の資料をダウンロードする(全83ページ)

Original

PRferretライター募集

Logo icon

現会員341,920人

ログインはこちら

会員限定Webマーケティングのノウハウをまとめた資料を限定公開

新着をキャッチ

  • RSS を購読する
  • Twitter をフォローする
  • facebook でファンになる
  • LINE で友だちになる

コンテンツマーケティング成功例

  • 昨日
  • 週間
  • 月間
Thumb

世界一簡単にブラウザのプッシュ通知を実装できる「Push.js」の使い方を徹底解説

Thumb

ストックしておいて損はなし!ユニークな日本語フリーフォント10選

Thumb

本当に使えるのはどれ?ブログ作成でおすすめできる人気の無料サービスを21個比較

Thumb

ノンデザイナーでも安心!便利な無料パターン素材107選【2月編】

Thumb

有限会社はもう存在しないって知っていましたか?意外と知らない法人の分類を解説

Thumb

本当に使えるのはどれ?ブログ作成でおすすめできる人気の無料サービスを21個比較

Thumb

初心者でも使いやすいオススメのテキストエディタ19選

Thumb

ホームページ作成に使えるのはどれ?無料で簡単に作れるツール15選

Thumb

容量だけで選んでいいの?無料オンラインファイルストレージ比較13選

Thumb

スマホ対応済み!WordPressの人気無料テンプレートまとめ

Thumb

本当に使えるのはどれ?ブログ作成でおすすめできる人気の無料サービスを21個比較

Thumb

ホームページ作成に使えるのはどれ?無料で簡単に作れるツール15選

Thumb

初心者でも使いやすいオススメのテキストエディタ19選

Thumb

容量だけで選んでいいの?無料オンラインファイルストレージ比較13選

Thumb

スマホ対応済み!WordPressの人気無料テンプレートまとめ

コンテンツ

トレンドを知る

  • ノウハウ&トレンド ニュース
  • リリース ニュース
    - ferret×PR TIMES -
  • マーケター特集
    - マーケティングジャーニー -
  • マーケターのキャリアとは
    - ferret × マイナビ転職 -

体系的に学ぶ

  • 基礎〜応用を学ぶ
    - カリキュラム -
  • コンテンツマーケティングを学ぶ
  • Googleアナリティクスガイド
  • 事例
  • セミナー
  • 資料ダウンロード
  • マーケティング用語辞典

実践ツール

  • マーケティングオートメーション
    - ferret One -
  • 1文字0.8円〜!
    - ferret コンテンツライティング -
  • 画像1点99円〜!
    - 画像・写真の加工編集サービス -
  • ferretのノウハウを公開
    - オウンドメディア運用・構築支援 -
  • Instagram分析ツール
    - ナビスタ -

Info

  • ferretとは
  • 運営会社
  • メンバー紹介
  • 著者一覧
  • お問い合せ
  • 広告掲載について
  • 利用規約
  • プライバシーポリシー
  • 特定商取引法に基づく表示

求人情報バナー

おすすめ記事

Thumb

スマホサイトだけチェックしていませんか?BtoB領域なら無視できないPCサイトのデザイントレンド17選

Thumb

2016年のデザイントレンドを振り返ろう!印象に残る国内・海外サイト50選

Thumb

五感を刺激する!2017年注目のWebデザインアイデア10選

Thumb

参考になる!2015年、新卒リクルーティングサイト20選

Thumb

デザイナーが確認しておきたいデザインリソース完全ガイド80選

エントリー

  • 新着
  • ランキング

トレンドを知る

  • ノウハウ&トレンド ニュース
  • リリース ニュース
    - ferret×PR TIMES -
  • マーケター特集
    - マーケティングジャーニー -
  • マーケターのキャリアとは
    - ferret × マイナビ転職 -

体系的に学ぶ

  • 基礎〜応用を学ぶ
    - カリキュラム -
  • コンテンツマーケティングを学ぶ
  • Googleアナリティクスガイド
  • 事例
  • セミナー
  • 資料ダウンロード
  • マーケティング用語辞典

実践ツール

  • マーケティングオートメーション
    - ferret One -
  • 1文字0.8円〜!
    - ferret コンテンツライティング -
  • 画像1点99円〜!
    - 画像・写真の加工編集サービス -
  • ferretのノウハウを公開
    - オウンドメディア運用・構築支援 -
  • Instagram分析ツール
    - ナビスタ -
  • ferretとは
  • 運営会社
  • メンバー紹介
  • 著者一覧
  • お問い合せ
  • 広告掲載について
  • 利用規約
  • プライバシーポリシー
  • 特定商取引法に基づく表示
Logo whiteWebマーケティングに
強くなるメディア

© 2016 basic Incorporated.

過去10年間で弊社が得てきたWebマーケティングのノウハウを

1冊の資料にまとめました。(全83ページ)