今、注目したいデザイントレンド4つ

Mie Kwon
8 min readJul 13, 2016

--

ここ数年デザイントレンドの主流は、フラットデザインからマテリアルデザインへと進化し移り変わってきました。

それ以外にも様々なデザイントレンドが年々予測されており、私たちデザイナーは、その中から目的に沿った表現を選んで制作に落とし込むということもあると思います。

2016年も後半に突入した今、各所でまとめられているデザイントレンドの中から、これから注目したい表現をピックアップして紹介したいと思います。

1. トーンを絞った鮮やかな配色

Source:spotify

サイトの印象の決め手になる配色は、数あるデザイン要素の中で注目すべきトレンドのひとつ。
トーンを絞った鮮やかな配色がここ最近のトレンドとして上がっています。

フルスクリーンの画像や背景、動画をより魅力的に見せたり、UIや特定の箇所にだけ強調を加えると、インパクトがあって印象も強く残ります。

Source:Nurture Digital

中でも注目したいトレンドは以下の3つ。

・デュオトーン
http://www.newdealdesign.com/

・オーバーレイ
http://www.ortizleon.es/

・美しいグラデーション
http://www.market-me.fr/bellagicons/

闇雲にあらゆる色を使うのではなく、色の明暗や補色などでトーンを絞ることで、シンプル且つクールに仕上がります。

また、はっきりとした色の区別は、強烈な印象を与えるためデザインのスパイスにもなり、コンテンツの選別にも役立ちます。

コンセプトや雰囲気にあった色を選んで、ユーザーの印象に残りつつ使いやすいUIを目指しましょう。

2. シネマグラフ

Source: Dribbble.

シネマグラフとは、画像の一部にだけ動きを取り入れたGIFアニメーションのことです。

GIFアニメーションは昔から使われている表現ではありますが、全てが動くよりも一部だけ動きを取り入れることによって、思わず目を留めてしまう不思議さがあります。

Source: Dribbble.

ユーザーへのアイキャッチ効果を期待できるため、サイトのTOPイメージのみならず、バナー広告やキャンペーンで活用するとより効果的です。

実際に、シネマグラフを使ったキャンペーンでは広告想起率やCTRが向上したというデータでその効果が実証されており、シネマグラフ作成ツールを提供するFlixel Photos Inc.が行ったABテストでは、シネマグラフを使ったバナー広告のクリック数は静止画バナー広告の5.6倍を記録しています。

Source:flixel.com

以下、シネマグラフが効果的に使われているサイトをいくつかご紹介します。

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

Pfister
http://www.pfisterfaucets.com/innovations/slate#.V3siWpOLQUF

キリン 澄みきり
http://www.kirin.co.jp/products/beer/sumikiri/

3. ストーリーテリング型シングルページ

Source:uformit

「ストーリーテリング」とは、伝えたい思いやコンセプトを、それを想起させる印象的な体験談やエピソードなどの“物語”を引用することによって、聞き手に強く印象付ける手法のことです。

この手法をwebサイトに取り入れると、物語の繋がりがユーザーを引き込ませるので、縦に長いシングルページでも飽きさせずに最後までスクロールして読み進めることができます。

Source: Dribbble.

キャンペーンページに限らず、企業のサイトや商品紹介ページなどでも主流になっている縦長のシングルページは、モバイルサイト対応のためにも、これからも取り入れられると思います。

縦長のシングルページは、限られた画面内で1コンテンツに集中させられるので、情報を伝える目的として効果的ではありますが、最後まで興味を持ってスクロールさせることが課題としてあります。

ただコンテンツを縦に並べていくだけではユーザーの気持ちが離れてしまいがちになるので、離脱率の減少を抑えるための解決策として、ストーリーテリングは注目すべき手法となるでしょう。

ストーリーテリングを取り入れるには、しっかりとしたコンセプトや構成を練り、そのストーリーに沿ったあらゆる表現(パララックス、動画、スプリットスクリーンなど)を効果的に使うことが必要です。

ユーザーに飽きさせないような様々な手法を取り入れていて、工夫がたくさん詰まったサイトをいくつかご紹介します。

mercedes benz
http://gla-class.mercedes-benz.com/com/en/#!/roadtrip

peugeot
http://graphicnovel-hybrid4.peugeot.com/start.html

converse
http://readyformoreontheroofs.converse.com/

theboat
http://www.sbs.com.au/theboat/

4. AR的表現

Source: Dribbble.

AR(拡張現実)とは、コンピューターを利用して、現実の風景に情報を重ね合わせて表示する技術をいいます。

AR的表現は、その技術を利用したときのような表現をビジュアル化したもので、ここ最近LPやアプリのUIで見られるトレンドの一つ。

端末やフレーム等のオブジェクトを、透過やシャドウを加えて画像の上に載せることで、実際の風景の上にコンテンツが重なっているように見えます。

Source: Dribbble.
Source: Dribbble.

奥行きや広がりを感じさせるダイナミックな表現は、先進的で未来感があり、見る人を惹きつけます。

VR・ARが身近に感じられるようになった今だからこそ、よりモダンでスタイリッシュに感じられるため、注目したい表現だと思います。

あとがき

今回ピックアップしたトレンドは、比較的これからの実制作に取り入れやすそうなものを選びました。特にAR的表現は、これからVR・ARが普及するにあたり、疑似体験ができるかのような感覚で未来を感じさえします。

デザイントレンドの移り変わりは技術の進化が伴っているため、新しいデバイスの登場とともに消えゆく表現もあったり、リバイバルされる表現もあったりするでしょう。(「No UI」の登場とともにUI表現が狭まる可能性もありますが)

ユーザーと技術の架け橋として、進化した技術を理解し、ユーザーに寄り添った表現こそがデザインルールとして提唱され広がっていくものなので、しっかりとトレンドキャッチして実制作に活かしていきましょう。

VASILYではデザイナー・学生インターンを募集しています。ユーザーと技術の架け橋として未来をデザインしたいという方歓迎です。ご応募お待ちしております。

http://bit.ly/1TNRGPd

--

--