【2021年版】Webデザインの流行トレンドまとめ

Webデザインのトレンド歴史

最新のWebデザイントレンドを知る前にWebデザインの歴史を少し見ていきましょう。

最初のWebサイト

出典：World Wide Web

人類最初のWebサイトと呼ばれているのが、1991年8月6日にイギリス人のティム・バーナーズ＝リー博士が公開したと言われる「World Wide Web」というページです。当たり前とも言えますが、画像などはなく文字だけで構成されたページとなっています。この時代、インターネットの通信網はまだまだ脆弱で画像を送るような事はほぼできませんでした。

1990年代のサイト

出典：The Wayback Machine：Apple

この頃はまだ、インターネットというものが世に出てまだそこまで時間がたっていませんでしたので、基本的には必要最低限の画像と文字で構成されています。やはりデータ通信の制限によるものが大きく画像の転送に時間がかかってしまうのが問題でした。

画像を多用できないので、テキストを段や列に分けたり、ナビゲーション機能を持たせたりすることでユーザーが使いやすいページを実現していた時代でもありました。またグラフィックもグラデーションなどを使ったデザインが多い頃でした。

2000年代のサイト

出典：The Wayback Machine：Amazon

2000年代になると技術の進歩も進み、ある程度のデータ通信もできるようになり、画像などを使ったよりリッチなページを作ることが可能となりました。インターネットが爆発的に広まった時代でもあり、Flashなどの技術の出現も相まって様々なデザインのサイトが作成されました。

FlashはAdobe社が開発したWebサイトでアニメーションやゲームなどを表現するのに使われるソフトのことで、パソコンにインストールして使います。あのYoutubeもFlashを使用するなど、2000年代では非常に多くのサイトで使われましたが、徐々に衰退し、2020年に廃止が決定しました。

2010年前半のサイト

出典：The Wayback Machine：Apple

このころになると通信網も発達し、現在と同じようなデザインがチラホラ出てくるようになってきました。スマートフォンの普及もこのころからで、スマートフォンとWebサイトで同じように見れるようにする「レスポンシブデザイン」と呼ばれるデザイン手法が登場しました。

また、ツイッターやフェイスブック、インスタグラムといったソーシャルメディアが普及してきた時期でもあり、よりデザインが重視されたサイトが注目されるようになりました。

2010年後半（現在）のサイト

出典：The Wayback Machine：Apple

2010年後半から現在におけるWebデザインのトレンドキーワードといえば「フラットデザイン」ではないでしょうか。現在最も普及しているOS「Windows」もフラットデザインですし、Appleなど有名な企業のWebサイトにも多く採用されいます。

フラットデザインは光沢感や立体感という視覚効果を利用しないデザインのことで、今では非常に多くのサイトで取り入れられています。おしゃれなサイトではほとんど採用されていますので、皆さんはあまり意識せずと見ているはずです。

2019年に流行っているトレンドまとめ

これまでのWebデザインの歴史を見てきましたが、それでは現在流行しているトレンドにはどのようなものがあるか、見ていきましょう。

フラットデザイン2.0

出典：Bikke

フラットデザインは今ではWebデザインの主流となっていますが、これからはフラットデザイン2.0なるものが主流となるかもしれません。

これは従来のフラットデザインに縛られ過ぎないデザインという意味で、単色で立体感のないデザインのフラットデザインですが、これに少しの立体感やグラデーションを組み合わせることでよりユーザが使いやすく見やすいデザインへ進化しようという動きです。

ミニマルデザイン

出典：Apple

ミニマルデザインとは伝えたいことをシンプルに無駄を省いて伝えるというイメージです。情報が多ければ多いほど、本当に伝えたいことがぼやけていってしまうので、必要最低限の情報に絞ることで見る人に伝えたいことをダイレクトに伝えることができます。

また、ミニマルデザインの特徴としては、文字は少なく明確にする。インパクトのあるフォントにする。シンプルな色使いを心がける。余白をうまく使う。などのテクニックが用いられます。AppleのサイトもiPhoneと文字だけに絞ることで、シンプルかつ効果的に魅力を伝えることに成功しています。

ノングリッドデザイン

出典：conduitstudio

ノングリッドデザインは画像やテキストを縦、横方向に整った位置に並べるグリッドデザインとは逆の考えで、必要なコンテンツに規則性を持たさないで、自由に配置をするというデザイン手法です。自由にコンテンツを配置することで自由で開放感のあるイメージを与え、より独創的なサイトだとユーザーに印象付けることができるでしょう。

ただし、自由に配置できるということはデザイナーのセンスが問われることになり、変な配置になると見る側に見にくいという印象を与えることになります。また、サイトの構築も通常のフラットデザインよりは高度な技術が要求されます。

流体シェイプ

出典：zeroqode

波のようななめらかな曲線をデザインに取り入れる液体シェイプは特に海外でよく見られるデザインで、後述するグラデーションデザインとよく組み合わせて用いられます。曲線で描かれ、優しい色使いで表現されることが多く、柔らかな印象を与えることができます。

流体シェイプは波のようなデザインから、液体が流れるようなデザイン、また泡のような球体のデザインと一緒に使用されることが多いデザインです。流れるようなデザインになるため、全体的に最初差から最後まで一体感のあるデザインになることが特徴です。

動画を用いた背景

出典：名城大学

最近では定番の1つになってきましたが、今年もまだまだトレンドとして残るであろう動画背景。やはりインパクトという面では他のトレンドよりは一歩抜きんでています。テキスト通常のデザインより多くの情報を印象的に伝えることができます。

やはりネックなのは読み込み速度、背景なので再生、停止という概念が無い場合が多く、通信環境によってはなかなかページが表示されないということもよくあります。圧縮や動画の部分を限定するなどの工夫が必要なトレンドデザインでもあります。

印象的なタイポグラフィ

出典：Anne Thai.Design.Art Direction

タイポグラフィは文字をうまく配置することで画像などを配置しなくてもインパクトを与えることができ、伝えたいイメージを強く印象付けることができます。印象的な色使いで大きく文字を配置することもよく用いられる手法ですが、通常の画像などを使ったサイトでも大きく、はっきりとしたフォントで文字を配置することでも同様の効果を得られます。

大きなフォントで表示することによって、堂々としたイメージを伝え、安心感のあるデザインになります。また、このデザインではフォントなども重要ですが、何を伝えるか、などの文章も重要となってきます。

モノトーン

出典：Tokyo Mild Foundation

白と黒を中心としたシックで印象的なデザインも2019年のトレンドとして注目されています。ただ単に白黒にするだけではなく、選択された項目だけ色を付けるなどの印象的な効果を利用することによってモノトーンの効果を最大限に利用する手法も最近はよく見られます。

モノトーン自体ははるか昔から使用されている技法ですが、そこに大胆な文字や一部だけ色を付けるなどアクセントを加えるという手法を用いることで見る人に斬新な印象を与えることができます。

鮮やかなグラデーション

出典：symodd

鮮やかなグラデーションを用いることで、従来のフラットデザインイメージより斬新なデザインにすることができます。これも流体シェイプと同じで最近海外ではよく見られるデザインです。

これまでもグラデーションを用いたサイトはもちろんありましたが、あくまで部分的なもので、最近は画面全体にグラデーションを用いたインパクトのあるものが主流となります。またグラデーションもはっきりとしたものより、もっと淡く繊細な色を用いたグラデーションが好まれる傾向にあるようです。

イラストデザイン

出典：ヨコハマハンドメイドマルシェ

現在主流のデザインは写真と単色の配色を使ったフラットデザインが主流ですが、これからは手書きのイラストデザインも人気が高まってきそうです。手書きのイラストを使用することによって温かみのある印象を与え、デザイナーによるセンスで伝えたい情報の印象をさらに強めることができます。

イラストは親しみやすく、とても分かりやすくイメージを伝えることができますので、トップページはもちろん内容を伝える部分でも使用すれば効果が高そうです。

分かりやすいユーザービリティ

出典：KDDI

ユーザービリティとは簡単言うと、使う人が「使いやすい」と感じるかどうかです。KDDIはユーザービリティランキングで、ユーザー目線の使いやすさをしっかりと維持しつつ、技術進化を取り入れ、常にサイトを改善し続けてきた結果であると評価され150社中1位でした。

使いやすさと言っても人それぞれだとは思いますが、ユーザビリティ研究の第一人者であるヤコブ・ニールセン博士によると
・学習しやすさ：ユーザーがすぐ使えるように、簡単に学習できなければならない。
・効率性：一度学習すれば、あとは効率的に使用できなければならない。
・記憶しやすさ：ユーザーがしばらく使わなくても、また使うときにすぐ使えるよう覚えやすくしなければならない。
・エラー発生率：ユーザーが使用中にエラーを起こしにくく、エラーが発生しても簡単に回復できるようにしなければならない。また、致命的なエラーが起こらないようにする。
・主観的満足度：ユーザーが満足し、楽しく利用することができなければならない。
という5つの要素をユーザービリティと定義しています。

ユーザービリティに配慮されていないWebサイトはやはり訪れる人も少なくなります。そういう意味ではユーザービリティは永遠の課題でもあり、永遠のトレンドとも言えるのではないでしょうか。

モバイルファースト

2018年にGoogleがMFI（モバイルファーストインデックス）というものを導入しました。これはスマートフォンなどのモバイル機器向けのWebデザインを重視するという動きです。基本的にはPCサイトをスマートフォン向けに変更などするのが基本ですが、この考え方はまずスマートフォンのWebサイトデザインから行うという考え方です。

基本的にはPCでもスマートフォンでも同様なページが見れるレスポンシブデザインというのが一般的ですが、それに加え「タップ」や「スワイプ」といったスマートフォンならではの動きに、どう対応するかというのも重要なポイントとなっています。

まとめ

一言にトレンドといっても様々な形があり、一概にこれが良い、という風なことは言えませんが、同じようなデザインばかりだとみている方も飽きてくるというのが現実です。また、トレンドはもちろんその年代によって変わってくるものですが、基本的には相手にいかに印象付けるか、いかに使う側の身になって考えられるかという点はいつまでも変わらないのではないでしょうか。

今回ご紹介したトレンドを参考にして、新しいトレンドの1ページを作っていただけたら幸いです。