2015年以降に起こっているWebトレンドのまとめ&今後のトレンドは？

スマートフォンが普及し、デスクトップやモバイルの速度も安定してきたので、それに合わせてホームページのデザインも変化しています。
もちろん、定番で形式化されたデザインやレイアウトもある程度は存在していますが、挑戦的なデザインはどの時期にもあるものです。

とりわけ、モバイルファーストが急速に普及していった2015年を境に、ホームページのデザインは次の段階へとステップアップしています。
スマートフォンでのホームページの閲覧がデスクトップを上回ったことで、スクロールを重視したり、マルチデバイスに合わせたデザインが一般化してきたので、いかにスマートフォンでも閲覧しやすく、デザインや機能性も保持できるかが重要になってきます。

今回は、2015年以降に起こっているWebトレンドのまとめと今後のトレンドの大胆予測をご紹介していきます。
ホームページやアプリのデザインを行う機会のある方は、ぜひこの機会にこれまでのトレンドを振り返ってみましょう。

2015年以降に起こっているWebトレンドのまとめ

1. パララックスデザイン＆スクロールエフェクト

▲ TOKYO BASE

もはや定番となった「視差効果」を表す「パララックスエフェクト」を取り入れたデザインは、登場当時はとてもユニークで面白いと好評でした。
スクロールするたびに奥行きを意識したインタラクションが行われるので、ホームページの離脱率が下がるとも言われています。

また、視差効果ではありませんが、画面スクロールを行うとアイコンが回転したり面白いエフェクトがかかるようなスクロールエフェクトを取り入れたデザインも登場しました。

古いブラウザだと挙動がおかしくなったり、低解像度のディスプレイだと閲覧者が自分の現在位置を見失ったりするので、最近では過剰な効果ではなく、さりげない装飾へと変わっています。
また、スマートフォンでもパララックスやスクロールエフェクトを楽しめるホームページも次第に増えてきました。

2. マテリアルデザイン

▲ MaterialUp

マテリアルデザインは、2014年にGoogleが発表したデザインガイドラインのことで、現在ではGoogleのサービスのほとんどがこのガイドラインに従って作られています。
デザイン手法というよりは、インタラクションに物理的なフィードバックを与えることで、ユーザビリティを向上させるための考え方と言ってもいいでしょう。

要素同士の重なりを物理的に捉えたもので、全てのホームページに適しているものとは言えませんが、Webブラウザを利用したWebアプリケーションでは、マテリアルデザインを取り入れることで使いやすさを追求することができます。

3. セミフラットデザイン

▲ GoSimple

フラットデザインがWebデザイン界隈で存在感を増している中、新しいフェーズへと突入しています。
すこしだけ影を加えていく(シェーディングを行う)ことで、半立体的な「セミフラットデザイン」へと変化してきたのです。

フラットデザインはミニマルなデザインを構築する際によく利用されており、セミフラットデザインも同様です。
白をベースに彩度が高く明度が低い落ち着いた配色を組み合わせるケースが多く、2017年後半以降も引き続き進化をしていくでしょう。

4. ヒーロー動画

▲ AbemaTV Recruitment

2016年頃から一気に流行を始めたのが、「ヒーロー動画」を活用したホームページです。
ヒーローとは、ホームページを開いた瞬間に大画面で現れるイメージ画像のことで、これまでは静止画を活用したヒーロー画像とキャッチコピーを組み合わせたものが主流でした。
ところが、昨年を境にヒーロー部分が動画になることによって、さらにエンゲージメントを高め、ユーザーの心を掴もうとしたデザインが広がっていったのです。

動画は写真以上にたくさんの情報を伝えることができるので、ブランドの世界観を上手に伝えるのにも適しています。
動画を作る手間や読み込み時間がかかるといったマイナス面もありますが、ビジュアルをうまく活かすという意味では非常に効果的な戦略であると言えるでしょう。

5. デュオトーン

▲ NewDealDesign

2016年、あらゆるホームページで「デュオトーン」が見られるようになりました。
デュオトーンとは、グレースケールでプリントしたような写真に別の1色をオーバーレイで重ねたような写真の加工方法のことです。
ミニマルなホームページが多い中で、オリジナリティの高いホームページにするために取り入れられました。

デュオトーンを採用することは、必然的にカラーパレットを固定することになるので、簡素でありながらも一貫性を持ったホームページに仕上げることができます。

6. ウルトラリッチエフェクト

▲ Active Theory

以前はFlashの独壇場であったインタラクティブな表現も、現在ではHTML5やCSS3、WebGLなどの技術を使って簡単に表現することができるようになりました。
ゲームをしているかのようなリッチな表現、ビジュアルとマウスを動かした時のアクションが魅力的です。

こうしたホームページは、ページの読み込みが遅くなってしまうというデメリットがありますが、読み込み時にプログレスバーを表示したり「57％」のように読み込みの度合いを示したりすることで離脱をカバーしようとしているケースも見られます。
まだスマートフォンではこうしたエフェクトがうまく活かされていないですが、今後スマートフォンでもリッチなエフェクトが表現される日が来るかもしれません。

7. コンプレクション・リダクション

▲ 参考：デザインはもっとシンプルに！無駄な要素を削ぎ落としたUIデザイン「コンプレクション・リダクション」とは？

「コンプレクション・リダクション」は直訳すれば「色彩要素の削減」となり、フラットデザインやミニマルデザインの次に来るものと言われています。
例えば、民泊アプリのAirbnbは、これまでピンクを押し出したUIを前面に押し出していましたが、急なデザイン変更を行いました。

ピンクとグリーンをアクセントカラーに採用しながらも全面的に白を基調として、雑誌を選ぶかのように並んでいる旅行先の画像をはっきりと際立たせています。
ブランドカラーは、現在選択されているタブや、タイトル部分など、視線を集めたいところに、わずかにアクセントとして取り入れているだけです。

コンプレクション・リダクションによってシンプルなデザインにすることで、結果的に一目でわかるようなユニバーサルなUIデザインになります。
デザインによる「個性」ではなく、操作性による「全体性」を重視した結果、ユーザーにとっても自然と使いやすくなるのです。

8. 非平行ヘッダー

▲ Stripe

台形ヘッダーとも呼ばれている「非平行ヘッダー」は、その名の通り2つの平行線で囲まれていないヒーローヘッダーのことです。
通常、ヒーローヘッダーは長方形で区切ることがほとんどですが、単に長方形を使うのではなく、一箇所斜線を用いるだけでスタイリッシュに見えます。

あまり複雑にしすぎるともったりとした重い印象を与えてしまうので、デザインのバランスを考えながら非平行ヘッダーを取り入れることが大切です。

9. グラデーションカラー

▲ Ink

Instagramが、ロゴやイメージを単色からグラデーションカラーに変えたのをはじめとして、淡く色が変化したグラデーションを取り入れたホームページは現在ではさまざまなところで見ることができます。

単色でテーマカラーを決めるのと同じく、もはや2つの色の組み合わせでさえも「カラーアイデンティティ」としてデザイナーたちの間では認識され始めています。
特に青や紫を取り入れたグラデーションは頻繁に見られますが、2つの英単語から「blurple」という名前まで付いています。

グラデーションを適切に使うことで、近未来的で洗練された印象になります。

今後のトレンドの大胆予想

ここで紹介したトレンド以外にも様々なものが流行していきましたが、今後はどのようなトレンドがやってくるのでしょうか。
ここでは、今後のトレンドになりそうないくつかのデザインテーマを取り扱ってみます。

1. マジックムーブエフェクト

▲ YouTube TV

AppleがMacに搭載しているKeynoteの機能に、「マジックムーブ」と呼ばれる機能があります。
これは、ある位置からオブジェクトを別の位置に動かすことで簡単に視線を集めることができるエフェクトです。

スクロールするごとに、マジックムーブのようにオブジェクトが付いてきて、各ヘッダーに応じて変幻自在に変わるようなホームページが登場し始めています。
例えば、先日Googleが発表した動画のリアルタイム配信サービスYouTube TVのホームページもそのひとつです。

マジックムーブはストーリーテリングとも非常に相性がいいので、ユーザーに「あなたがなぜこのサービスを使うべきか」をスムーズに伝えることができます。

2. タクタイルグラフィック

▲ Open Annual Awards

VRやMRが普及しています。
WebVRなど、ブラウザを使ってVRを楽しむことも一部で可能にはなってきましたが、完全にWebの世界にリアルな体験を持ち込めるようになるにはもう少しだけ時間がかかりそうです。

その代わり、3Dグラフィックを使った表現は今後ますますデザイン分野に影響を与えるでしょう。
特に、タクタイル(触覚)に訴える、本当に目の前にあるかのようなグラフィックデザインが、ホームページのヘッダーを飾る日も遠くはなさそうです。

3. アニメーションロゴ

▲ Lottie

動きのあるデザインは、2017年最も注目を集めるトレンドですが、SVGを使った画像フォーマットが広がっているのと重なり、SVGアニメーションを利用したアニメーションロゴが今後増えてくる可能性があります。

まとめ

デザイントレンドの寿命はそう長くはありませんが、トレンドは追いかけていくこと自体が重要なのではなく、ユーザーが何を求めているのかという原点こそが重要です。

今後はますます、視覚に訴える「感覚的」なホームページが増えてきそうです。
ホームページが、単に情報を伝えるツールから、ある種のエンターテインメント性を帯びてきた証なのかもしれません。

自分自身に合うトレンドを見つけ、ユーザーにとってよりよいホームページを目指していきましょう。