サイバーエージェント｜新卒採用サイト2014

Webデザイン３つの良いとこ : 3 Good Point!

1. サイト全体をブロックで
2. イメージを定着させる小さな心がけ
3. 読みやすく採用情報を魅せる−目的に合わせたデザイン

私はWebデザインのココを見た！

• Tweet
• 

昨日に引き続き企業採用ページのWebデザインをレビューします。今日はサイバーエージェントのWebデザイン。ブロックでパラパラ表示され、クリックしていくと導かれていくインタラクションが良いですねー。

HTML5で多彩な演出

HTML5で制作されたページですが、普通にFlashのような動きですよね。このブロックのjsいいな・・・。

余白が大きいトップページ、唯一色があるブロックをクリックすると、ふわふわっとコンテンツが開閉します。

各ページを開くたびにもブロックでパラパラと表示されます。

ここまで恣意的にブロックで表示されると、サイト全体のイメージが固まって良いですよね。新しいページに行く際のこのブロックでパラパラと表示される演出が、このサイトの特徴をつけていると思いました。

中途半端に演出を加えないで、固まるまでやる。という良い例。

採用情報が「見やすく」詰まっている−目的に合わせたデザイン

トップページでは何もないように感じるデザインですが、多くのコンテンツが実はつまっています。

「社員紹介」をはじめ「プロジェクトストーリー」や「社員講談」などなど。

どれも非常にわかりやすくまとまっています。

そしてデザイン的に注目なのが、それぞれのコンテンツがそれぞれのデザイン演出をしている。という点。

トップページから次のページまで切り替わるまで、ブロック的な演出が繰り返されますが、それぞれのコンテンツ内では可読性が高く目に優しい演出をそれぞれ別のデザインで行なっています。

例えば上キャプチャの「社員座談会」のページではスクロールとともに座談会の社員の様子が切り替わっていって、臨場感があふれていますよね。同様に社員紹介では社員としての清潔感を醸しだすデザインが施されています。それぞれのページには別々の伝えたいことがあり、それはそれぞれ別の目的を持っているからだと思います。

しっかりと目的別にページデザインを分けている、多彩な表現を垣間見れるWebデザインだと思いました。

■■■

・・・が、ひとつだけ。バッと、社員や想いがブロックで表示された後、表示される画面がこれ

もしかしたら、「急にどういうこっちゃ」となってしまう方いるかもしれませんよね。

シンプルで余白を活かすWebデザインではありますが、あくまで新卒採用の対象は「学生」であるので、慣れていない方は慣れていないわけです。それにこのデザインを急に見せられたら戸惑ってしまう方もいるのではないかな、と思いました。

ですが、見方によってはこの「余白」には大きい意味が込められているのかもしれません。

例えば、「この余白には将来の会社を担う未来の君たちが入る」とか、「これから会社はこの余白を塗りつぶしていく、これから伸びていく会社だ」とか、色々あると思います。それはちょっと今の私にはわかりかねるのですが、どちらにしても色々と参考になり、考えさせられるWebデザインでした。

私は好きです！勉強になりました。

この素敵なWebデザイン、「いいな」と思いました？
その気持ちをポチッと残しておきましょう！

• ツイート
•