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

更新日: 2018年01月31日

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

とりわけ、モバイルファーストが急速に普及していった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％」のように読み込みの度合いを示したりすることで離脱をカバーしようとしているケースも見られます。
まだスマートフォンではこうしたエフェクトがうまく活かされていないですが、今後スマートフォンでもリッチなエフェクトが表現される日が来るかもしれません。