HTML5事例/2014年度採用サイト

毎年12月ごろリリースされる採用サイト。毎年制作されるサイトだから、トレンドや最新の技術が盛り込まれているものが多く楽しみです。
これまでの採用サイトと言えばFlashの利用が目立ちましたが、今やほとんどの学生がスマートフォンを持ち採用活動にも使っているため、Flashを使わずにHTML5、CSS3で制作し、さらにレスポンシブとはいかないまでもスマートフォンでの最適化は必須となるでしょう。
それでは、今回は魅力的なHTML5の採用サイト事例をご紹介します。

1:リクルートホールディングス|新卒ネット領域採用サイト
http://recruit-jinji.jp/
リクルートホールディングス|新卒ネット領域採用サイト
グローバルナビゲーションのアニメーションに始まり、右端にもメニューを設ける画面構成に、スマートフォンでよくみかけるメニューのナビをリストとして起用している点、パララックスも取り入れたり、ナビゲーションを押すたびに配置や円の大きさがランダムで変わる芸の細かさ。新卒向けに最先端を走っている事をアピールするWEBトレンドが満載に盛り込まれたサイトです。

2:サイバーエージェント|2014年新卒採用特設サイト
http://www.cyberagent.co.jp/recruit/2014/
サイバーエージェント|2014年新卒採用特設サイト
社員の顔とマス目をいかしたデザインなど、1ページ1ページデザインが凝っています。レスポンシブではないもののスマートフォンサイトも見やすい画面構成と色鮮やかさでとても充実しています。

3:カヤック|いでよ!新社長 | 面白法人カヤック 新卒採用コンテンツ2014
http://www.kayac.com/company/fresh/2014/
カヤック|いでよ!新社長 | 面白法人カヤック 新卒採用コンテンツ2014
未来のCEO、CTO、CBOを募集というなんとも斬新なカヤックらしい企画。出世診断や初任給診断などのコンテンツも面白い。大学生でなくても興味をそそる、さすがの演出です。仁義なき戦いのBGMも。お仕事中の方、要注意。

4:コスモ石油|新卒採用サイト 2014
http://www.cosmo-oil.co.jp/recruit/newgraduate/
コスモ石油|新卒採用サイト 2014
コスモ石油だけに、宇宙(コスモ)をイメージしたデザイン。ふわふわと浮かんでいる様子で、宇宙の世界観を表現しています。全体的にかわいらしいイラストを多用していて、親しみやすく、学生も興味を持って見れそうです。

5:ホーマック|2014年度 新卒採用サイト
http://www.homac.co.jp/-/recruit/2014/
ホーマック|2014年度 新卒採用サイト
ホームセンター、ホーマックの採用サイト。シンプルでわかりやすいデザインと構成。さりげない雲やグラフの動きなど、細部にアニメーションが効果的に使われています。レスポンシブ風ですがそうではなく、スマートフォン最適化されていてとても見やすくなっていました。

6:日本調剤|プラスバイプラス 新卒採用2014
http://www.nicho.co.jp/shinsotsu/
日本調剤株式会社|プラスバイプラス 新卒採用2014
キーワードを組み合わせて見るコンテンツやゲームなど、楽しみながら企業を知ることが出来るような演出になっています。非常に濃く深い情報量ですが、キーワードを組み合わせることで探しやすくしています。レスポンシブWebデザインを採用しており、小さい画面の中でも情報は整理され非常に見やすい構成となっていました。

7:三井不動産リアルティ|リクルーティングサイト2014
http://recruit.mf-realty.jp/shinsotsu/
三井不動産リアルティ|リクルーティングサイト2014
レスポンシブWebデザイン。ブラウザサイズの変更に切り替わるコンテンツの動きがとても気持ち良いです。アニメーションなど特に凝ったギミックは使用していないものの、赤をポイントに美しくまとまったサイトでした。

8:オロ|2014年度採用サイト
http://www.oro.co.jp/recruit/
オロ|2014年度採用サイト
トップページで動きまわるバーはマウスに反応し、スタッフ紹介への導線となっています。スマートフォン最適化されていますが、一部コンテンツはPC向けのサイトへ誘導しています。PC用サイトも非常にシンプルな構成なので、そのままスマートフォンで見てもとてもわかりやすく操作しやすいです。

9:DNPデジタルコム|採用サイト
http://www.dnp-digi.com/recruit/2014/index.html
DNPデジタルコム|採用サイト
トップページはオフィスをイメージしているようで、常に人の動きが見えます。画面下の時間バーをスライドすると、人の動きや社内の様子が変化します。これらのアニメーションはもちろんFlashを使わずにHTML5にて作られています。

10:アトレ|2014新卒採用サイト
http://www.atre.co.jp/company/recruit/newgraduate/
アトレ|2014新卒採用サイト
駅ビルアトレの新卒採用サイト、トップページはドラマチックなイメージでカッコイイですね。直観的にクリックしやすくてわかりやすいです。レスポンシブではなくPC用ページがスマートフォンでも違和感無く見れるように作られています。グラフなどもアニメーション効果を入れてあり、単調な数値データも見せ方次第で楽しくなりますね。

以上10件、HTML5で制作された採用サイトの事例をご紹介しました。
レスポンシブWebデザインを採用していたのは、10社中2社でしたが、学生向けのサイトと言うことで他全てのサイトでスマートフォンでの最適化など、対応されているように見えました。
また、マウス操作に反応するギミックが多く取り入れられていたのと、グラフや背景など細かい箇所でアニメーションを使っていたりしました。
ただ、調査してみた結果、これは面白い!というサイトはたいていFlashで作られていました。魅力ある面白いコンテンツは“Flash”という認識がまだまだ常識なのかもしれません。
新しい技術にチャレンジしやすい採用サイト、今年は昨年よりHTML5の可能性は認知されていくでしょうから、今年度の終わりにまた多くのHTML5での採用サイト事例をご紹介することを楽しみにしたいと思います。