多くの人々にハピネスを提供する!UNIEARTH

オフィシャルブログ
会社HPへ
お問い合わせ

2016年 WEBデザイン & 2017年 流行デザインを考える!

webデザイントレンド

WEBデザインの移り変わりは早いもの。今流行のデザインを導入することは当然ですが、置いてきぼりを食らわない為にはそれだけではいけません。というこで、今年のデザインを振り返りながら、2017年のデザインを考察しました。

2016年に流行ったデザインのおさらい

シネマグラフ

シネマグラフとは画像の一部のみを動かすWEBデザインの技術です。このデザインを導入することで動画とは違う、洗練したインパクトをユーザーに残すことができます。

ss1
http://gilgul.co.il/eng.html

パララックス

パララックスはスクロールなどの動作に応じて視覚的エフェクトが発生するWEBデザインです。参考サイトは化粧品メーカーのサイトですがスクロールにちょっとしたエフェクトを加味することでインパクトがある商品ページとなっています。

ss2
https://www.shiseido.co.jp/gb/ibuki/

インフォグラフィックス

インフォグラフィックスはグラフや表などデータなどを視覚的に見やすい形で表現したデザインです。通常、データや表の記載はどうしても堅苦しいものになりがちですが、それにデザインセンスを取り入れることで、見やすい画期的なWEBデザインになります。

ss3
http://econte.co.jp/resource/item/cmig2015/

クロムなし

クロムなしとはその言葉のまま、コンテンツを囲むクロムを排除したWEBデザインです。クロムなしにすることで、よりメッセージが際立ち、視覚的インパクトを強めることができます。スタイリッシュな印象が残せるので、参考サイトの週末仙台は、仙台に訪れることそのものをおしゃれに感じさせることに成功しています。

ss4
http://weekend-sendai.com/

ストーリーテリング

ストーリーテリングとはサイトが一つの物語を読み進めるような順序で構成されたWEBデザインです。このようなデザインを導入することで一般的なサイトとは違い徐々にユーザーを引き込みながら情報を与えることができます。参考サイトは芸人を起用してよりインパクトがあるものとしていますが、ユーザーの感性に訴えかけやすいWEBデザインといえるでしょう。

ss5
http://lovers-labo.jp/

2017年のデザインは・・・2017年度の新卒採用サイトから考察

ついに出そろった、大手企業の2017年度の新卒採用サイト。この時期になると、各社の新卒採用サイトが出そろってきますよね。大手企業は貴重な人材獲得のために、新卒採用には力を入れるものです。特にメディア業界や広告業界などのHPなら、なおさら最先端のデザインを取り入れるはず!?新卒採用サイトのデザインを分析することで2017年の流行のヒントが得られるはず!?
と勝手に仮定し、2017年の新卒デザインをチェックしました。

リクルート 

ss6
http://r.recruit-jinji.jp/

  • カード型デザイン・グリッドレイアウト
  • マウスオーバーの動きがかっこいい
  • コピーの見せ方がうまい

カード型デザインは、UI的に見にくくなりがちで賛否両論ありますが、
一つ一つのカードを大きくすることで、その見にくくさを改善。さらに、グラデーション背景をうまくつかい、境界線が明確になっています。さすがリクルートさん!カード型デザインも、デザイン次第でまだまだ活躍しそうですね。

博報堂

 
ss7
http://h-mp-recruit.jp/2017/

  • typographyのgifアニメ
  • インパクトが強い
  • 白ベースでスッキリ
  • 右カラム

typographyのgifアニメがインパクト大!
メッセージ性の必要な新卒サイトにはもってこいですね。
また、白ベースでシンプルになりがちなところを、しっかりとインパクトをつけているところが、流石です!また、トップのナビといえば、上か左が王道ですが、あえての右。同じように右カラムにしているサイトを最近ちらほら見るので、もしかして右カラムがじわじわ来ていたり!?

ADK

ss8
http://adk-recruit.jp/

  • アニメーションがおもしろい
  • トップのナビは2つのみで構成。その他メニューはバーガーボタンに収納。
  • コンセプトとデザインがマッチしている

複数あるナビゲーションをあえてスマホライクなバーガーメニューに収め、
メインのナビを2つのみで構成。これが不要なものを剥ぎ取る究極のUIだったり!?
余談ですが「相棒」というコンセプトと、そこから想起する某テレビ番組のイメージとがリンクしてしまうので、私だけでしょうか!?

サイバーエージェント 

ss9

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

  • 動画が動きまくる
  • クロムなし
  • 全体通して、大小さまざまなコマ割りで構成

トップの動画も含め、大きさの違う小さめのコマ割りが全体で使われてます。
クロムがないデザインはバランスが難しくなるので、使うときは注意が必要ですね。

DeNA

ss10

https://dena.com/jp/recruit/students/

  • コマ割りを敷き詰めたメインビジュアル
  • ビビッドなアクセントカラー

コマ割りで敷き詰めたトップデザインは、他社でもよく見られるので、
来年も使えそう!DeNAさん王道のビビッドなアクセントカラーは、やっぱりいいですね。
サイトのブランディングやトーンコンセプトを大事にされているのでしょう。サイトをみて企業が想像できるのは素晴らしいですね。

ヤフージャパン

ss11

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

  • トップは動画
  • 全体フラットデザイン
  • 一部カード型デザインのアレンジ
  • インフォグラフィックやマイクロインタラクションの使用

全体をフラットで統一しながら、ざっくり構成でインパクトも有り。
また、インフォグラフィックやマイクロインタラクションなど、さまざまなテクニックが使用されています。フラットベースは今や王道の構成ですね。

関西テレビ

 
ss12

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

  • スプリットスクリーンのような左カラム
  • よく動くので、ワクワクする
  • フラットデザイン、パララックス

今、世界で流行っているスプリットスクリーンのように、トップが2画面に分かれているので、インパクト大!スクロールするとカラムが引っ込むのでUIも迷わない。
動きが多い点と、それに合うポップなデザインが、とてもよいUXを演出しています。

まとめ

ここまで2016年流行りのWEBデザインと2017年の新卒サイトをみて来ました、いかがでしたでしょうか。今回は新卒採用のみから2017年のデザインのヒントを探るという無謀な内容となりましたこと、ご容赦ください。来年のデザイン制作をする上での何かの参考としていただければ幸いです。
WEBデザインの流行は循環が早くどんどん新しいデザインが出てきます。WEBに関連する仕事をするのであれば常に最先端の情報に触れ続けること、そして次の流行を予測することを意識したいものです。

この記事を書いた人

ユニアース広報部

ユニアース広報部

ユニアース広報部です! ITにまつわる情報をどんどん発信していきたいと思います!

ユニアース広報部の最近の記事

pagetop