2016年に備えてしっかり確認しておきたい、Webとグラフィックデザインのトレンドと今後の展望

Webデザインやグラフィックデザインのトレンドをしっかり知っておくことは、非常に大切です。廃れゆくものを採用するのではなく、今必要とされているものが何なのか、そしてなぜそれが必要とされているのか理解することで、よりよいものが制作できます。

Webとグラフィックデザインのトレンドとその背景、目的、展望などを紹介します。

しっかり確認しておきたい、Webとグラフィックデザインのトレンドと今後の展望

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。

サイトのキャプチャ

16 Graphic Design Trends To Watch In 2016

各項目ごとのグラフィックも分かりやすく、注目です。

01. ユーザーが使いやすいこと

2016年、デザインはユーザーのことを全面に考えるべきです。ユーザエクスペリエンス(UX)はまさに必須と言えるでしょう。

もしあなたのデザインが使いにくいものであるなら、誰もあなたのデザインに見向きもしません。

あなたがユーザーを引きつける必要は早々に訪れます。ユーザエクスペリエンスを考慮にいれないなら、あなたのオンラインビジネスを増やすことは本当に難しいでしょう。

サイトのキャプチャ

Googleのアルゴリズムの変更、ビジターの行動のデータ、、、それらはすべて同じ方向を示しています。すなわち「Webサイトを素早く表示して、そして使いやすくする必要があります。」

ページのスピードはEコマースサイトでは重要な問題です。1秒かかるごとに売上が27%下がることを意味します(参考: 表示時間とコンバージョンレートの関係)。ユーザーが求めているのは、かっこよく見えるサイトではなく、素早く表示される使いやすいサイトです。

02. レスポンシブデザインの考え方

わたし達はレスポンシブのサイトがもう任意ではないことを知っています。モバイルは今日、すでに「ファースト スクリーン」です。Googleはすでに「モバイル フレンドリー」を取り入れ、モバイルに対応していないサイトを文字通り鎮圧しています。

参考:
15 Digital Marketing Trends for 2016
30+ Important Takeaways from Google's Search Quality Rater's Guidelines
モバイル フレンドリー アップデートを開始します

ユーザビリティはすべてのプラットホームで非常に重要です。そしてモバイルが今「ファースト スクリーン」ですから、スマホに関するユーザエクスペリエンスが重要となります。良いレスポンシブデザインとは、スマホのスクリーンで完璧なユーザビリティを持つことです。スマホユーザーのためにデスクトップの機能を隠すことはもう許される解決方法ではありません。

もしあなたのユーザーが日常の、例えば電車の中であなたのWebサイトを楽しむことができないなら、あなたのWebサイトは修正する必要があります。

サイトのキャプチャ

2016年には、あなたのすべてのグラフィックデザインとアートワークは、レスポンシブに対応させる方がよいでしょう。「一つのサイズではなく、すべてにフィットするフォーマットにする」ことを意味します。
レスポンシブデザインは、ロゴやヘッダ画像やバナーなど、あなたが思いつくビジュアルコンテンツのどんなものに手を伸ばしても大丈夫です。

03. アプリを彷彿させるWebデザイン

知っているとは思いますが、ユーザーはネイティブアプリでより速いブラウジングを体験しています。デザイナーは長年に渡り、Webサイトがアプリケーションデザインのよい点(スピードやUXなど)を見習うべきであることを提案してきました。

現在、マーケッターはこのトレンドにおいて遅れを取り戻しています。
すべての重要ではない情報を削除して、ユーザーがあなたのコンテンツに素早くアクセスできるようにしてください。

サイトのキャプチャ

04. ナビゲーションの進化

若干の人は、最近のサイトでよく見かけるハンバーガーメニューやナビコンを嫌っています。これは新しいナビゲーションのただの第一歩に過ぎません。もっと直感的に分かり、より洗練されたメニューが生まれようとしています。

ユーザーが行動することで表示されるこのナビゲーションは「Hidden Menu」と呼ばれ、2016年には更なる進化が期待されます。このナビゲーションの重要なコンセプトは、ユーザーは重要なことから気をそらされることがないということです。

ぱっと見、ナビゲーションがあるように見えなくても、わたし達は経験上Webサイトにナビゲーションが存在すると判断します。見えなくても心配する必要はありません、必要なときにそれは現れます。

サイトのキャプチャ

専門家たちは、この「Hidden Menu」が多方向性のスクロールにおいてレスポンシブにパーフェクトであると予測しています。実際それはどのようなものでしょうか? まだ新しく、進化しているトレンドなので、明確な基準はありませんが、下記ページでその一端をみることができます。

参考:
Examples of Hidden Menus

05. モジュール式のテキスト

どんな人でも宣伝の長いテキストを読むことを好みません、そうではないですか?

Webで長いテキストをブレイクダウンする最初のこつは、短いパラグラフで書くことでした。しかし後に、デザイン面から解決する手段として、Webページレイアウトのモジュール式のアプローチが提供されました。

モジュール式のデザインは、すべてがブロック状のグリッドパターンを使って作られるテクニックです。これはチェス盤のように、単調なパターンを意味するものではありません。ユーザーが読みやすいパターンを想定して、グリッドをデザインします。

サイトのキャプチャ

モジュール単位に情報をまとめ、その一つひとつを内容のタイプごとにデザインすることで、ユーザーはWebサイトの情報を正確に、そして容易に読むことができます。

06. モジュール式の無限スクロール

モジュール式のトレンド全体で最近特に動きがあるのは、モジュール式のスクロールです。これはWebサイト上のすべてのモジュールが他のモジュールから独立して、自身がスクロールすることです。

難しく聞こえましたか? そんなに難しいことではありません。
例えば、メインのコンテンツと同じスピードでスクロールしないサイドバーを見たことがあるでしょう。それのことです。下記のサイトではコンテンツが2つあり、左右で独立したスクロールを備えています。

サイトのキャプチャ

Rocco Forte

このことはすべて無限スクロールから始まりました。2015年のトレンドとしてあなたは気がついていたかもしれません。Pinterest, Twitter, Facebookなど人気の高いサイトでも使われています。

サイトのキャプチャ

モジュール式の無限スクロールの利点は、下にスクロールすることはクリックより簡単で速いことです。このことは次のページをロードすることによりユーザエクスペリエンスを中断させません。ユーザーが下にスクロールすることで、新しいコンテンツが自動的に表示されます。

PinterstやFacebookでページ当たりの滞在時間が多くなるのは、不思議ではありません。無限スクロールで表示される次のコンテンツがユーザーのために適切であるなら、この無限スクロールは非常に便利です。

参考:
Poynter
Time.comでは無限スクロールを採用した後、バウンスレートが15%下がりました。

07. Material Design

Material Designは2013年から今日まで、トレンドのリストで必ず現れていました。しかし2015年まで広く採用されていませんでした。

しかしもしあなたが2015年がMaterial Designの年であったと思うなら、考え直してください。2016年、Material DesignはトレンドとしてWebサイトやアプリケーションやアートワークで大規模に採用されることになるでしょう。Material Designの支配の年になります。

このことはデザインの領域において、GoogleがAppleに勝つことを意味します。

サイトのキャプチャ

08. フラットデザイン

Material Designがフラットデザインのユーザビリティの問題を直すために登場しましたが、フラットがなくなったことを意味しません。フラットデザインは人気が高く、2016年にも上昇するでしょう。

実際、多くのブランドがここ数年でフラットデザインを採用しており、多くのユーザーはそのビジュアルが良くなったと認識しています。

フラットでデザインされたロゴ

Images credit: Brafton

さらにフラットなWebデザインはUXにおいてもう一つ利点があります。それはフラットデザインの画像のファイルサイズは比較的軽量で、ページのロード時間が速くなることです。

サイトのキャプチャ

09. 1,000の言葉よりもビジュアルで

「百聞は一見にしかず」「一枚の絵は千の言葉に値する」といった格言を耳にしたことがあると思います。これはWebデザインで言うと、長いテキストで説明するよりも、イメージや動画を使った方がより良く機能することを意味します。この「ビジュアル ストーリーテリング」は実際、非常に効果的です。

  • 1億人の世界中の人々が1日に少なくとも1本の動画を見ています。
  • Webサイトの訪問者は64%、動画を見た後で購入する可能性が高いです。
  • 動画を見た人の80%は、30日以内に動画の広告を見たことを思い出します。
  • モバイル端末で動画を見た92%の人がその動画をシェアします。
  • 人間は文字を読むよりビジュアルで見た方が60,000倍速く処理します。

ソース: Bryan Kramer

サイトのキャプチャ

10. インフォグラフィック

あなたはきちんとしたインフォグラフィックを使って、情報や記事を伝える良い方法を知っていますか?

デジタルのマーケティングチャンネル(ソーシャルネットワーク、コンテンツマーケティング、SEOなど)で、インフォグラフィックがなぜ人気が高いか理由があります。多くの人は良いインフォグラフィックが好きで、とりわけ結果を好みます。インフォグラフィックは他のビジュアルコンテンツよりもう3回シェアされます。

少し偏った説明になってしまいました。インフォグラフィックをつくる上で重要なポイントを説明します。

2016年ではどんな種類のインフォグラフィックがユーザーの興味をつくるでしょうか? 昔からあるテンプレートに基づいた古いインフォグラフィックは次第に消えていきます。3, 4個の黒点を使ったリストやかわいいアイコンを加えるだけでは通用しません。

サイトのキャプチャ

これからのインフォグラフィックに必要なのは、データのビジュアル化とそれに対する深い洞察を交えたストーリーケイパビリティです。

11. タイポグラフィ

良いインフォグラフィックには、良いフォントがつきものです。タイポグラフィはどんなブランディングにでも重要なキーエレメントとなり、多くのユーザーはそのタイポグラフィに注目します。

タイポグラフィはそれ自体はただの言語です。数年前まではグラフィックデザイナーだけがその言語を使うことが可能でしたが、今日ではWebフォントが広まったおかげで、多くの人々がタイポグラフィを利用することができるようになりました。

もう一つ大きな理由があります、それはGoogleフォントの功績です。かっこいいフォントが誰でも無料で利用できます。

サイトのキャプチャ

2016年の傾向としては、ロゴや見出しにWebフォントで印象的なタイポグラフィをより多く見かけるようになるでしょう。またペンで書いたようなスクリプト系も人気で、手描きのグラフィックも同様に増えるでしょう。

12. モダンレトロ

モダンレトロは、かっこいいです。ロゴデザインのトレンドとして始まったモダンレトロのブームは、Webデザインやグラフィックデザインの全ての局面に浸透してきました。

しかし、レトロが前進する意味とは微妙な相違があります。古いレトロとは60年代まで、20世紀初頭を示します。近代的なレトロとはコンピュータ時代の初頭についてです。昔のテレビゲーム、ピクセルアート、大きなケータイ電話、Tron、冒険野郎マクガイバーなど、いや冒険野郎マクガイバーは違いますね。70年代後期から90年代初期のビジュアルのスタイルでかっこよかったものです。

サイトのキャプチャ

13. 魅力的なカラー

カラーの選択でも、80年代は最高です。明るいパステルと大胆なアクセントカラーを準備してください。

Pantoneによると、2016年春のトレンドカラーはパステルを基調にした10色です。

Pantone 2016年春のトレンドカラー

Pantone Fashion Color Report For Spring 2016

あなたがすべきことは、退屈で疲れたようなカラーを選ばないことです。

サイトのキャプチャ

14. グリッドとジオメトリックの図形

05. モジュール式のテキスト」で述べたように、2016年のWebデザインは今までよりいっそうグリッドベースになるでしょう。それはグリッドレイアウトがCSSで仕様になろうとしているほどです。

参考:
W3C CSS Grid Layout Module Level 1

しかしグリッドがWebデザインを独占するとは思いません。同じことはグラフィックデザインでも言うことができます。このトレンドは「ジオメトリックの図形とパターン」に浸透します。

最近のミニマルなデザインは「Swiss Style」からインスピレーションを引き出しているので、驚くべきことではありません。そして「Swiss Style」の原則の一つは、すべてがグリッドシステムでデザインされているということです。PinterestをはじめとするカードベースのWebデザインはこの方法を踏襲しています。

サイトのキャプチャ

しかしこのトレンドは裏面を持っています。ジオメトリックと同時に、不規則な図形も人気があると専門家は予測しています。いわゆるラフ・グランジといったもので、手描きの形状にも注目が集まるでしょう。

15. ストックフォトからの卒業

多くのクリエイターは最終的にストックフォトをあなたのWebサイトに使用する最も退屈で、独創的なではないもの一つであることを悟っています。これは何年も前から起きるべきでした。しかし2016年にはWebデザイナーとオンラインビジネスがストックフォトをつぶし始める年になるかもしれません。

2015年は非常に多くの無料で利用できるストックフォトのサイトが公開されました。それにより、多くの人が同じ写真を繰り返し利用し、オンラインで同じ写真を何度も見ることになりました。

なぜストックフォトを利用するのでしょうか? あなたはたくさんの選択肢を持っています。あなたのサイトのために作られたイメージを使用するのが一番です。手描きのイラストや動画もよい方法です。

サイトのキャプチャ

16. 動画とアニメーションgif

最近のかっこいいWebサイトで背景に動画を使っているのを見たことがあるでしょう。動画はロードするのに長い時間がかかるから避けている人は、動画ファイルの圧縮方法を理解すると気が変わるかもしれません。

参考:
10 Guidelines for Better Website Background Videos

重要なことは動画は多くの場所に、Webサイトの背景以外でも画像に代わるであろうということです。VineやSnapchatなどは、動画を短いループで見る習慣をつくりました。プロフィールの写真はもう画像ではなく、短い動画でつくる時代がきたのかもしれません。

サイトのキャプチャ

中でもアニメーションgifの浸食に十分注意してください。パンドラの箱を開けたFacebookは責められるべきです。アニメーションgifはいたるところに存在します。

top of page

©2017 coliss