あなたはいくつ知っていますか？2016年に最も話題になったWebデザイントレンド17選

更新日: 2020年07月30日

デザイン

2016年も1ヵ月を切り、アッという間に2017年を迎えてしまいそうです。
今年1年Webデザインの世界においても様々な重要キーワードが登場しました。その中でも今回は、2016年に登場した、最も話題になったWebデザイントレンドを17個紹介していきます。

これから紹介する17のWebデザインのトレンドの中で、果たしてあなたはいくつ知っているでしょうか。ぜひ、ご自身でチェックしてみてください。

2016年に登場！最も話題になったWebデザイントレンドまとめ

1. マイクロインタラクション

Facebook上で「いいね！」をタップする際にもちょっとした吹き出しのアニメーションの中にいろんな感情ボタンが出てきます。そうした小さなアクション(トリガー)とそれに対するリアクション(フィードバック)を結びつける小さな「瞬間」に、毎日何十回、何百回と出会っています。これがマイクロインタラクションです。

よく設計されたマイクロインタラクションは、とてもシンプルなのに、それでいて強力な力を持っています。毎日、Pinterestで印象的な写真をピンしたり、Instagramで「いいね！」したり、Twitterで感動的なメッセージをリツイートしたりします。小さなアクションを起こした時に、それらが上手く作動したというリアクションをささやかに返していきます。

Webデザイナーとして優れたユーザー体験を生み出したいのであれば、ホームページ上で行うアクションを簡単にするマイクロインタラクションを積極的に取り入れましょう。

2. イメージ依存

Webデザインが進化するごとに、高画質な画像を使う重要性が増してきています。もちろんどんなホームページでも魅力的なコピーライティングは力を発揮しますが、もしそうした優れたコピーライティングに美しい写真や面白いアニメーション、ショートビデオなどが添えられていたら、さらに見る人の心をそのホームページに惹きつけられるはずです。

▲ ANAのホームページでも、文字以上に画像を使ってイメージ喚起をするセクションが多くなっています

SEOの観点でいえば、もちろん主に評価されるのはテキストメッセージです。しかし、ホームページに新たに内容を足す時には、もっとホームページのエンゲージメント率を高め、もっとシェアしたくなるような方法がないか、じっくりと考えてみることをオススメします。

一般的には、テキストメッセージは曖昧さを回避する上で非常に効果的な方法です。しかし、視覚的な効果があれば、テキストメッセージをより引き立たせることができるだけではなく、場合によってはテキストよりも多くのメッセージを伝えることができます。

ただし、テキストのほうが優れているか、あるいはビジュアルのほうが優れているかという議論は、あまり意味をなしません。むしろ、心地いいユーザー体験を優先してアクセシビリティの高いWebデザインにしたいのであれば、ビジュアルとテキストをバランスよく使うほうがいいでしょう。

3. リアルデータを使ったモックアップ

プロトタイピングツールのおかげで、可愛いモックアップが作成できるようになりました。ただ、急いで作ったざっくりとしたモックアップに、ダミーテキストでお馴染みのLorem Ipsumや宮沢賢治の「ポラーノの広場」でテキストを流し込んでみても、いまいち実際にサービスを使っている様子がイメージできないことがあります。

そこで最近では、リアルなデータを使ってモックアップにデザインを施すことで、そのページがどのような意味を持っているのかを観察することが多くなってきました。
これにはいくつか理由がありますが、例えばヘッダータイトルが長過ぎて入り切らなかったり、アイコン画像が荒過ぎたりと、モックアップを作ったにも関わらずデザイナーが避けるのに苦労している、後から浮き彫りになる問題をはっきりさせるためでもあります。

4. ロングスクロール

スクリーンサイズが多様化してくると、*「アバブザフォールド」という言葉はあまり意味をなさなくなってきます。
「アバブザフォールド」とは、直訳すると「折り目より上の部分」で、ホームページ上でスクロールしなくても見える「ファーストビューの部分」*を指します。

以前は、ファーストビューこそが最も大切で、ファーストビューにこそ情報を詰め込むべきである、という考え方もありました。
しかし、なぜ「アバブザフォールド」自体はそれほど問題ではなくなってきているのでしょうか。スマートフォンなどのモバイル端末では、デスクトップよりも画面が小さいので、過度に情報を詰め込むことができないからです。

ロングスクロールのWebサイトが増えているのはなぜ？その理由とポイントを解説

これまでもロングスクロールをするアプリやホームページはありましたが、以上のようなUXの観点で改めて「ロングスクロール」や「無限スクロール」のコンテンツ画面が注目されています。Facebookアプリをはじめとして、さまざまなアプリがこうしたコンテンツの見せ方を採用していますが、それはなぜなのでしょうか。今回は、ロングスクロールを実装しているサイトが増えている理由と、ロングスクロールを実装するときのポイントについて解説します。

ユーザーがスマートフォンでホームページを見た時、一度ファーストビューで「デザインがイマイチだなぁ」と思ってしまうと、おそらくはスクロールすらせずに離脱してしまうでしょう。そういうわけで、注意を引くヒーローイメージ(画面全体に敷かれた大きなイメージ画像)とインパクトのあるキャッチコピーを冒頭に持ってきて、「もっと情報が知りたい」と思わせることが大切です。

余計なクリックをさせることを極力やめさせて、ページの移動をスムーズに行うと、ユーザーは情報を見つけ出すことが楽しくなります。さらに、目を見張るような面白い動きをするアニメーションが次から次へと繰り出してきたり、次に出てくるセクションがまわりとは違うレイアウトだったりしたら、ユーザーはまるでジャングルを探検するかのようにワクワクしながら次の情報を探しにいきます。

モバイルサイトだけではなく、デスクトップサイトも同様に、上手にロングスクロールを取り入れたホームページはUXデザインを豊かにします。

5. チャットボット

これまで数多くのSF作家が、ロボットに支配された世界で人間が危機にさらされるような物語をたくさん書いてきました。
しかし今のところ現実世界では、人工知能(AI)のおかげでかなり便利な世界に変わっています。とりわけWebの世界においてはチャットボットが大活躍しています。

これまで一方通行な情報のやりとりしかできなかったホームページの世界も、チャットボットを取り入れることで双方向的なやりとりへと変わります。また、会話するのはフォームを入力していくよりも簡単です。アプリやデバイス、様々なWebサービスを通じて、ネットショップで商品を注文したり、大好きなピザを頼んだり、旅行先や出張先でホテルを予約するのも、いくつかのテキストメッセージのやりとりで完結してしまいます。

さらには、ありがたいことにノンプログラマーでも簡単にチャットボットを作ることができるサービスもたくさん公開されています。本来であれば何年も先にやっとできそうなことも、シンプルな設定を少しするだけでできるようになりました。

▲ IBMのWatson Developer Cloudの無料評価版を使って、日本語対応したWatson Conversationで簡単にチャットボット作成を試すこともできます

そうすると、チャットボットの登場によって、こんな疑問が思い浮かぶかもしれません。
「それじゃあ一体、自分たちWebデザイナー・UI/UXデザイナーの役割ってどうなるんだろう……？」
結局は、チャットボットでの会話体験を成功させるためのWebデザインだったり、UI/UXデザインを考えるのが、自分たちの仕事になってきます。つまり、言葉そのものを発信したり受信したりすることが、ボタンやダッシュボードと同じようにUIだったりUXとなるということなのです。

6. ハンバーガーメニューからの脱却

ハンバーガーメニューを使うかどうかは、実のところこれまでも賛否両論ありました。実際のところ、ハンバーガーメニューはモバイルデバイスのスクリーンのスペースを節約してくれる、便利な存在として認識されていました。UIデザイナーなら誰でも一度はハンバーガーメニューをデザインしたことがあるでしょう。

ただ、ユーザビリティの観点から見てみると、ハンバーガーメニューは問題だらけです。
まず、ハンバーガーメニューの存在自体に気付く人が非常に少ないというところです。ハンバーガーメニューの存在に気付いたとしても、ハンバーガーメニューを押してみて開いてみるまでどんなメニューがあるかわかりません。さらに、もう一度押してみて初めてメニューを消すことができるということがわかります。ページを遷移するだけなのに余計なステップを踏まなければならないのは非効率だと感じているUXデザイナーは、ハンバーガーメニューを使うのをためらっています。

ハンバーガーメニューはページの横幅を隠すのには最適ですが、ハンバーガーメニューを出すことでもともと読んでいた本文のほとんどが隠れてしまうのも人気がなくなってきた決定的な理由の一つです。ナビゲーションメニューがスクリーン上で見えていれば、ユーザーはどんなページがあるのかが一目瞭然で、簡単に目的のページにたどり着くことができます。逆にナビゲーションメニューがどこにあるかわからなければ、サイトの全体像を把握することすら困難になります。

Spotifyをはじめとしてたくさんのアプリがハンバーガーメニューを使うのを諦め、代わりにもっとシンプルなナビゲーションメニューを取り入れています。あと数年もすれば、ハンバーガーメニューはプルダウンボックスを使ったメニューと同じようにかなり珍しいものになるかもしれません。

7. デスクトップブラウザのプッシュ通知

スマートフォンを使っていると、プッシュ通知は結構便利だなと思うことがあります。自分がどこにいても、何をしていても、プッシュ通知を使ったちょっとしたお知らせには気が付くものです。

そして今、多くのホームページやWebサービスがデスクトップブラウザを使ってプッシュ通知を届けようとしています。まだパソコンのブラウザでのプッシュ通知を見たことがない人も多いかもしれませんが、よく使われているブラウザから徐々に取り入れられています。これからは、Slackにアクセスする時のように、「このサイトによるデスクトップのプッシュ通知を許可しますか」というメッセージに出会う場面が多くなります。

これはいい方法です。なぜなら、結局あなたがそのホームページを見ているということは、少なからずそのホームページの内容に興味があるということです。いちいち更新情報を受け取るためにメールマガジンに登録するのも面倒ですし、仮に登録してもメールを毎回開封するでしょうか。それよりも、ページを読み込んだ瞬間に、ポップアップが出てきて「はい」か「いいえ」を選択するほうがずっと簡単です。

おそらく2017年にはもっと効果的な方法でプッシュ通知を許可する手法が出てくるのではないでしょうか。

8. プロモーションビデオ

動画は近年、ますますその重要性が高まっています。

2016年は、90秒程度でWebサービスの使い方や正確に商品の良さを伝えるような商品紹介のプロモーションビデオがたくさん登場しました。フラットデザインの可愛いイラストが、目を引くアニメーションとナレーションとともに登場し、この商品やサービスが素晴らしい理由を説明します。こうした動画も、会社や組織、サービスの規模に関わらず、簡単に作れてしまいます。

ただ、外出先でスマートフォンにイヤホンを接続していなかったりして、音声を流しながら動画を見る準備をしていないユーザーも多いので、動画にキャプション(字幕)をつけていないと不便に感じるユーザーもいます。また、動画を流すことすら面倒に感じるユーザーもいるので、ビデオだけで説明を完結させない、ということも気を付けるべきポイントです。

9. デュオトーン

▲ 映画Triple9のオフィシャルTumblerでは、赤と黒のデュオトーンが印象的です

2016年はデュオトーンが流行した1年でした。デュオトーンとは、グレースケールでプリントしたような写真に別の1色をオーバーレイで重ねたような写真の加工方法です。ホームページがミニマル志向になるにつれて、オリジナリティを表現するために使われたりしました。

▲ 東京大学エッジキャピタルのホームページではブルーを基調としたデュオトーン風のヒーロー動画が敷き詰められています

デュオトーンは多くのホームページではヒーローイメージとしてファーストビューの背景に敷き詰められると同時に、デュオトーンで利用された色がホームページ全体のテーマカラーとして用いられています。デュオトーンを使うことで、簡素でありながらも、一貫性を持ったページに見せることができます。

10. 大胆なタイポグラフィ

▲ ロゴや中央の「STREET FOOD」の文字が印象的なBlock16のホームページ

ミニマルなデザインにしたいのであれば、ヘッダータイトルなどの文字を美しく見せるために余白を上手に使ってみてください。サイズを極端に大きくしたり、普段では使わないようなWebフォントを使用してみたり、一般に使われるフォントを大胆に活用したりすると、かなり印象的です。Google FontsやAdobe Type Kitのおかげでどのフォントを使うかの選択肢も広がり、ブラウザのデフォルトのフォントにこだわる必要もなくなってきました。

フォントサイズを複数組み合わせることで、大きなインパクトが生まれ、ページに一体感が生まれます。異なったサイズのフォントを使うとヒエラルキー(重要度の「階層」)が生まれ、ユーザーも情報のレベルを捉えやすくなるので、ほしい情報を探しやすくなります。フォントが大きければその分ページの重要なメッセージを伝えることができる一方で、小さいフォントを使えば周りの要素をサポートするメッセージの役割を果たします。フォントサイズを独創的に使いこなすことで、Webデザイナーは見た目においても動きのあるページを作ることができます。

さらに、IT企業が開発したフォントが登場しました。UPSの「UPS Sans」に始まり、Apple社の開発した「San Francisco」やAndroidの「Roboto」などは、ブランドアイデンティティを感じる好例でしょう。もちろんこうしたフォントを作るには時間も費用もかかりますが、他社との差別化を図る上で強力な効果を発揮してくれます。

▲ San FranciscoはApple Developerでダウンロードできます

そして、従来から使われているフォントも、もっと独創的な形で使われています。ベタ塗りの四角形に穴が空いているようなデザインを施したり、オーバーレイをかけた大胆な見せ方をしたりする方法です。また、古くからあるフォントをあえてヴィンテージ風にすることで、新しく登場したフォントと対照的に使う手法も登場しました。

▲ 切り抜きに様々な写真を覗くようなデザインのTALK PRのホームページ

しかし、GitHubに代表される主要なプラットフォームの中には、新しいどころかシステムにデフォルトで入っているフォント(システムフォント)を使っているところもあります。Webフォントなどのカスタムフォントは他のホームページと差別化することもでき、何よりも美しい表現が可能ですが、場合によっては読み込み速度が低下するなどのマイナス面も起こることがあります。GitHubのようなプラットフォームが快適に使えるのは、ArialやHelveticaのおかげかもしれません。

11. ビビッドカラー

フラットでミニマルなデザインは今も人気ですが、ビビッドカラーもまた復活の兆しを見せ始めています。ビビッドで明るい配色はWebデザインに限ったことではなく、ファッションの世界や天気予報のグラフィック、インテリアデザインでも見かけることがあります。

カードレイアウトやコンテナーレイアウトと呼ばれるグリッドレイアウトの新しい形も、ビビッドな配色の大胆さと大いにマッチングします。ビビッドな配色は彩度や色相が高いので、ボタンやナビゲーションメニューのようなUI要素が目立ちやすくなるというメリットもあります。さらに、ビビッドな配色はブランドイメージの構築にも使われています。Googleのロゴに使われている原色やAmazonのスマイルマークに採用されているオレンジなど、色がブランドイメージと密接に結び付くことはよくあることです。

こうしたビビッドカラーも、昨今のWebの世界では様々な形で取り入れられています。

DiFaのホームページでは、新着記事をディープピンクの「New」という文字で大胆に配置しています。全体をシンプルにデザインし、ボタンや線など、一部の要素にのみビビッドカラーを使うことで、鮮やかな色相がより一層引き立ちます。

一方、WebデザイナーのMatthew Bambachさんのポートフォリオサイトでは、先ほども紹介したデュオトーンをビビッドカラーで取り入れています。デュオトーンは彩度を落として暗くする渋めのカラーが好んで使われますが、ビビッドなピンクを使うことで印象も大きく変わってきます。

12. ブロークングリッドレイアウト

左右対称のホームページはシンプルで見ていて気持ちがいいものですが、グリッドレイアウトは次の段階に進もうとしています。まだしっかりとした呼び名はついていませんが、「ブロークングリッド」とでも言うべき少々ルーズなレイアウトが登場しました。この種のレイアウトでは、グリッドデザインのきっちりとしたところを残しながらも、散らかったぐちゃぐちゃな状態にはしていないので、風変わりなデザインのわりにしっかりと情報を伝えることができます。

▲ Epicurrenceのホームページはグリッドを崩した面白いレイアウトを採用しています

13. ダイナミックストーリーテリング

「物語を語ること」を意味するストーリーテリングというキーワードが、2016年はたくさんのところで登場しました。しかし、テキストを読むだけの一方的なストーリーテリングはすでに廃れつつあり、「ダイナミックストーリーテリング」とでも言うべき見せ方が登場しました。

ダイナミックストーリーテリングでは、カスタマーの背後にあるブランドをもっとよく知ってもらうために、面白い展開のビデオや美しいグラフィック、そして補助的にテキストを用いてストーリー展開をしていきます。

これはサービスそのものや製品にも同じことがいえます。製品やサービスの誕生までの裏話を語ることで、目に見える単なる機能だけではない、より深みを持った愛着を持つことができます。

Bagigiaというバッグのホームページでは、スクロールするごとにバッグそのものの特徴や、バッグの誕生秘話、バッグの製作者などを覗き見ることができます。ページを遷移することなく、製品であるバッグを主役としながら、スクロールだけで１つの製品のストーリーを追いかけることができます。

14. 直接的なチャットサポート

カスタマーとテキストでのやりとりをして質問に答えていくと、企業の存在感をはっきりさせることができます。海外でよく使われている、ホームページに簡単に設置できるオンラインチャットサービスにIntercomがありますが、Intercomに代表されるアプリやサービスによってFacebookのようなソーシャルメディア上でどのようなメッセージのやりとりが行われているのかを確認することができます。また、カスタマーに迅速に対応することは、信頼感のあるブランドイメージの構築にもつながります。

チャットはカスタマーの問題を解決するのに効果的なツールなので、Amazonなどのコマースサイトでも積極的に使われています。Appleのカスタマーサポートでは、あまりパソコンの操作に慣れていない人のために、デスクトップを共有して遠隔操作しながら問題解決を行うこともあります。

チャットボットを設置しているホームページが増えてきたとはいえ、しばらくは担当者が直接カスタマーとやりとりを行うテキストチャットは存在し続けるでしょう。問題を抱えているカスタマーのうち半分くらいは、実際のところ「何が問題なのか」すらわかっていないこともあります。一問一答形式で担当者とやりとりをして問題が解決されれば、「さすがプロだ」と感心してまた一人あなたのサービスのファンが増えていくでしょう。

15. フルスクリーン・サインアップ

ニュースレターやメールマガジンを購読させるのに、わずらわしいポップアップに出会うことも珍しくありません。しかし、そんなことをしなくても、堂々とフルスクリーンでメールアドレスの登録を促すランディングページも主流になってきました。

ポップアップを表示させたり、複数のフォームやボタンがあるランディングページは、ユーザーに本当にしてほしいこと、つまりサインアップ以外の選択肢を与えるので、結果的にコンバージョンが下がってしまいます。

ユーザーは必要以外の情報を探すのを面倒に感じているため、結論ありきのWebデザインが求められています。ランディングページであれば、何をしてほしいかを明示した上で、なぜ登録すればお得なのか、登録しないとどんな機会損失があるのかを説明していきます。

これだけソーシャルメディアの世界が拡大していっても、Eメールマーケティングは今もなお健在です。ユーザーに興味を持ってもらい、サインアップしてもらってリストを取得することは、これまで以上に重要になってきます。できるだけユーザーにストレスを与えずにストレートに登録までこぎつけるためには、まず登録できることを明示することが大切です。

16. オリジナルの可愛いイラストやアイコン

美しいグラフィックを使ったムービーたっぷりのハイカラなWebデザインとは対照的に、素朴なイラストを使った可愛らしいサイトも人気があります。最新のテクノロジーを使ったホームページを見ると先駆的なイメージを持ちますが、イラストレーションを見つけると人間味を感じることができて、どこかほっこりします。

岡山のファッション関連企業ストライプのホームページでは、ボールペンで描いたようなゆるい男女の絵を取り入れながら、オリジナリティあふれる白と黒をベースとしたデザインになっています。

自作のイラストやアイコンは、それだけで個性を表します。極端な話、写真は貼り付けるだけで終わりですが、イラストレーションには描く過程があります。人間が持つ特有のあたたかさを出したいのであれば、ぜひイラストレーションを取り入れてみてください。

17. WebとVR技術

この分野に関してはまだ始まったばかりかもしれませんが、VR(バーチャルリアリティ)を使ったWebブラウジングは文字どおり「現実味」を帯びてきています。Mozillaを中心に開発しているWebVRチームのMozilla VRを使うことで、どんなホームページでも、これまで自分たちが慣れ親しんできた平面のWebとはまったく違った「3D」の世界を楽しむことができます。