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

Post on:2015年12月21日

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 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デザインはこの方法を踏襲しています。