2016年2月04日

最先端の波に乗り遅れるな!

2016年に流行る7つの「Webデザイントレンド」を予想してみた!

2016年に流行る7つの「Webデザイントレンド」を予想してみた!

マルチデバイス化が進むなか、Webデザインの潮流は目まぐるしく変化しています。マテリアルデザイン、フラットデザイン、パララックスエフェクトなど、数々のトレンドが生まれては、世界中のWEBページを彩りました。今回は、2016年に流行りそうな7つのWebデザイントレンドを大予想。最先端のデザイン技術・情報をおさえて、ウェブデザイントレンドの波に乗りましょう。
 

1.ストーリーテリング

「ストーリーテリング」とは一般的に、考えや概念を伝える場合、それらを思い起こさせるエピソードや体験談などの物語を引用することによって、聞く人に強く印象づける方法のこと。マーケティングの手法としても有名ですが、2016年にはWebデザインでも活躍しそうです。
 
ファーストビューでユーザーの興味を引き、以降はストーリー仕立てで読み進んでもらえるように構成。そんなストーリーテリングの手法は、スクロールが長いシングルページデザインにぴったり。離脱率を抑えるのに役立つほか、近ごろ注目度が上がっているGIFアニメや動画などと併せて取り入れれば、さらにユーザーを魅了する演出に。思わずチェックしたくなるビジュアルコンテンツの完成です。
 

『movement-of-data』

http://akita.co.uk/movement-of-data/

ネットワーク上のデータがどのように移動していくかが、スクロールしていくことでストーリー仕立てで表現されている

 

2.インフォグラフィックス

情報を視覚的に表現する「インフォグラフィックス」。数値や専門的なデータも、ビジュアル化することで分かりやすく魅力的に伝える手法は、ここ数年、デザイナーだけでなくマーケティング担当者や企画職のユーザーなどからも、注目を集めています。
 
アニメーションを用いたインタラクティブなものもあり、インフォグラフィクスを作成できる無料ツールも複数提供されています。現状、PCでの閲覧を前提に作られることが多いですが、今後はスマートフォンやタブレットなどのモバイル端末でも見やすい形態へと、進化していくことが考えられます。
 

『ウェブの進化』

http://evolutionofweb.appspot.com/
 
webの進化をグラフィックで表現。オープニングの流れるような美しいアニメーションは圧巻

 

3.使いやすさ優先。ユーザーファーストのデザイン

 

UI・UXの重要性は昨年以前から叫ばれていますが、2016年のウェブデザイントレンドの現場では、さらに“使いやすさ”を重視する傾向が強くなることが予想されます
 
例えば、ユーザーがそのページで何をできるのか、ひと目でわかるような設計であったり、ワンカラムで情報をシンプルに見せて、ユーザーが迷子にならないように配慮することも一つの方法でしょう。
 
また、ユーザーがストレスを感じないようなパフォーマンスのサイトにすることも、必須条件です。どんなに優れたUIを実現していても、表示速度が遅くてコンテンツがなかなか表示されない、などという状態では、ユーザーにすぐ見切りをつけてられてしまうからです。
 

『Google』

https://www.google.co.jp/
 
GoogleのTOPページも、使いやすさを追求した好例。ひと目でページの目的が分かり、訪問時には検索窓がアクティブになっているので、検索窓をクリックする手間なしでキーワードを入力できる
 

『MUUUUU.ORG』

http://muuuuu.org/
 
webデザイナーには知られたページ。サムネールで参考サイトを探すというアクションと無限スクロールとの相性がよく、ユーザーはストレスなく目的にたどり着ける

 

4.アプリチックなWebデザイン

 

近頃、ネイティブアプリが普及したことにより、ユーザーの多くはスマートフォンやタブレットでのスムーズで直感的なアプリUIを経験しています。そのため、Webサイトにもそれらの条件を求める傾向にあります。
 
アプリ並みの優れたUX、UIを持ち、アプリのようにサクサク、快適に動作する、そんなWebサイトがユーザーに歓迎されることは間違いありません。Webサイトの軽量化、高速化によって実現されるアプリチックなWebサイトのデザインが、2016年もきっと求められるはずです。

 

『slack』

https://slack.com/

アプリも配信されているが、Webサービスもわかりやすく直感的でスマートなUIがアプリのよう

 

5.多様化する動画の使い方

 

ここ数年、Webサイトの背景いっぱいに動画を用いるスタイリッシュなデザインがよく見られるようになりました。しかし2016年には、動画をページの背景だけでなく、それ以外の用途に用いることによって、よりリッチな体験をユーザーに提供するケースが増えるかもしれません
 
ボトルネックになっていた重さの問題も、YouTubeなどの動画共有サービスを利用したり、Vineのように短い動画をループさせたりすることによって、改善を図る動きが見られます。
 
例えば下記『Zoff』サイトのように背景を静止画にして、その上で幾つもの動画や画像をアニメーションさせたり、『LEXUS』サイトのように動画をパララックス・エフェクトと組み合わせてデザインに取り入れたり。2016年は、動画を利用したウェブデザイントレンドの幅がより拡がりそうです。
 

『Zoff』

http://www.zoff.co.jp/sp/zoffsmart/

『LEXUS』

http://www.lexus.com/f-performance/#/performance/overview/
 
 

6.カード型デザイン

 

その名の通り、カード型のグリッドレイアウトを用いたデザイン手法。PinterestやFacebookを始め多くのサービスで採用されているほか、最近はECサイトやコーポレートサイトなどでも頻繁に見かけるようになりました。
 
カード単位に情報をまとめることで、ユーザーへ分かりやすく内容を伝えられるほか、イメージ写真を多く使用することにより、ユーザーを惹きつけることが可能です。また、カード型デザインでは、カードの位置をずらしたり、積み重ねたりすることなどによって、レスポンシブデザインに対応しやすいという特徴も。
 
それが、さらなるモバイル化が予想される2016年にも、カード型デザインが多く使われると推測する理由の一つです。
 

『Pinterest』

https://jp.pinterest.com/

 
 

7.タイポグラフィーの進化

 

Google Fonts や Adobe Typekit など、この数年間でWebフォントの技術が発展したことによって、以前はグラフィックでのみ用いられていたタイポグラフィーの概念が、Webデザインの領域にも適用されるようになりました。
 
それによって、豊富なコレクションのなかからページデザインにマッチした書体を選べるようになったほか、デバイスフォントでキービジュアルのコピーをデザインすることも可能に。
 
現状、字詰めはjsとcssを使って個々に詰めるしかなく、キャッチの内容を変えるとブラウザごとに調整が必要になることも。そのため日本語だと使いづらいという側面もありますが、今後、さらなる技術の進化にともなって、そうした問題の改善が期待されます。

 
 

『Google Web Fonts Typographic Project』

https://femmebot.github.io/google-type/
 
Google Fontsを使ったタイポグラフィ-コレクション。美しい写真にレイアウトされた多彩なGoogle Fontsの使用例が見られる
 

 
 

クリエイターの求人・案件探しは、
レバテッククリエイターへ

レバテッククリエイターでは、フリーランスや派遣で働くクリエイターを対象とした求人・案件の提案サービスを行っています。Web業界やゲーム業界を中心に年間1000件以上(※)の取り扱いがあり、様々なスキルを活かせる案件の提案が可能です。
※2016年度実績 自社調べ
求人・案件探しの相談をする

また、「今よりも年収をアップさせたい」「トレンドに敏感な現場でWebデザインスキルを磨きたい」などの理由からフリーランスへの転向を検討している方には、無料の個別相談会も実施していますのでお気軽にご相談ください。業界に精通したプロのコーディネーターが、一人ひとりの希望や状況に合わせて丁寧にサポートします。

「個別相談会」に申し込む

役に立った/参考になったと思ったら、シェアをお願いします。

この記事に関連する案件

Webデザイナーの案件を見る

人気のスキルの求人・案件情報

レバテッククリエイター
おすすめコンテンツ

レバテッククリエイターはWeb・ゲーム業界に特化したデザイナー・クリエイター向けの求人・案件提案サービスです。