あなたはいくつ知っていますか？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デザイナーは、ハンバーガーメニューを使うのをためらっています。

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