ウェブデザインは常に進歩しています。技術が進みデザイナーが新しいスタイルに挑戦することで毎年新たなユニークで素晴らしいトレンドが生み出されます。近年登場したデザインや新しく開発した技術を振り返ることで、2020年のトレンドを予想することが可能です。
過去数年のウェブデザインを振り返り、新しく生み出されたスタイルを分析することで、これから流行るデザインを先取りしましょう。
トレンドを掴むべき理由
全てのウェブデザインの流行りが長続きするとは限らない–これは、自明の事実です。全てには、ふさわしい時と場合があり、ウェブサイトもむやみに変えるのはユーザビリティとUXの観点で懸命とは言えないでしょう。
検討せずにサイトを改装するのは良くないですが、最新のウェブデザインのトレンド、特に技術の進歩に基づいたものを把握しておくのは非常に重要です。
例えば、AIによるチャットボット、プログレッシブウェブアプリ、CSSグリッドをご存知ないという方は、時代遅れな技術を使用することにより重大な機会損失をしている可能性もあります。レスポンシブデザインがネット社会にもたらした革命を思い出してみてください。次にこのような技術が開発されたときに、乗り遅れてしまわないようにする必要があります。
また、サイトの美しさに関するトレンドも把握するに越したことはありません。例えば、白のクリーンでシンプルなサイトは機能的かもしれません。しかし、近年斬新なウェブデザインが多数登場してからは、シンプルなだけのデザインは閲覧者にとって魅力的ではなくなってきています。
色の追加、ブロークングリッドやマイクロインタラクションアニメーションを取り入れるなど、小さな変更でも、サイトの魅力を増すことに繋がります。
さらに、美しさと機能性が両立している限り、ウェブデザイナーが新しい技術を学び、取り入れ、成長することで、サイトの質が向上することが多いと言えるでしょう。20年前、いや10年前のサイトを思い出してみてください。驚くほど進化してきましたよね。そして、今後もどんどん進化していくことでしょう。
機能性を向上させる（少なくとも悪影響を及ぼさない）、ブランドにぴったりなモダンなウェブデザインを見つけたら、取り入れてみても良いかもしれません。
2018のウェブデザイントレンドを振り返る
2020年になった今、2018と言うと…かなり昔のことのように思えるかもしれません。しかし、その時のトレンドは、新しいスタイルが登場している今でも、ウェブ全体、そして近年のデザインにも大きな影響を及ぼしています。そのため、その軌跡を辿ることで見えてくるものがあるはずです。
近年ウェブデザインはミニマルでシンプルなものから、大胆で個性的なものへと変化していますが、その変化のピークは2018年でした。その傾向は今でも続いていて、今後もオリジナルでユニークなスタイルが増えていくことは間違いないでしょう。
2Dイラストレーション、3Dアニメーション
イラストレーションは個性を伝えるのに最適な方法の一つ。2Dのイラストレーションは益々使われるようになりました。ブランディングにぴったりで、サイトが記憶に残りやすくなります。素晴らしいイラストレーションの表示されたサイトはなかなか忘れられないでしょう。
3Dアニメーションもブラウザやアニメーション技術、コンピュータやスマートフォンの発達に伴い普及しました。特にポートフォリオやエージェンシーのウェブサイトで広く使用される3Dアニメーションは瞬時に注意を惹きつけ、楽しくインタラクティブなUIデザインを実現できる可能性が高まります。
今後は、自作のイラストレーションやアニメーションがますます人気になるでしょう。ブランドの個性を伝えることのできる唯一無二の方法です（しかも、効果的な戦略であることも実証されています）。
控えめ、フラット、ミニマリズム
オリジナルで注目を集めるスタイルへと移行しているとは言え、ミニマリズムデザインもまだ、大きな支持を得ています。クリーンでシンプルなデザインは間違いなく魅力的で、鮮やかな色や実験的な要素があるサイトであっても、フラットなデザインが使用されていることが良くあります。
しかし、フラットデザイン2.0とも言うべきセミフラットデザインは、シャドーやグラデーションなど、少し複雑な要素と組み合わせることが基本となっています。ミニマリズムが存在し続ける限り、デザイナーは今後もそこに工夫を加え続けるでしょう。
控えめなアニメーションもまた2018年に大流行し、わずかなパララックスや軽いホバーエフェクトがあちこちで使用されました。これらを使うことでシンプルでミニマリスティックなウェブサイトに可愛らしさを加えることができます。
幾何学的なデザイン
多くのサイトには、ある程度の多角形や図形が含まれますが、幾何学的なデザインは2018年のトレンドの大きな特徴でした。四角形や長方形、線などのシンプルな形をのみを用いて作られ、ボタンや装飾的なボックスなどの小さなディテールに注意が払われました。
中でも有機的な幾何学模様や不均一で不完全な幾何学模様が大流行しました。ソフトな角やアシンメトリーが特徴的。奇抜な見た目で面白いものが多く用いられました。多角形のシャープな角と、有機的な幾何学模様の丸いエッジを組み合わせ、魅力的なコントラストを生み出すような手法も多く見られます。
明るく大胆なカラー
かつてはプレーンな白を基調としたデザインが、今では鮮やかで大胆なカラーのデザインにとって代わられています。カラーを絞り込み、1色や2色に抑えた色相を使う時代は終わり、明るくて華やかなパレットが多く使われるようになりました。
あらゆるところで使用されるようになったグラデーションは今でも人気で、その鮮やかで印象的な色相が多くの人気サイトのヘッダーを彩っています。
また、明るいカラースキームとともに、グリッチエフェクトやディストーションエフェクトなどの、明るくちらつくアニメーションがデザイナーやデベロッパーのポートフォリオに多く登場するようになりました。最近ではその人気の勢いは若干衰えたものの、今でもネット上ではそのような効果を使用しているサイトが見られます。
ブロークングリッドデザイン
多くのサイトはシンプルなグリッドレイアウトで作成されており、要素が綺麗にセクション毎に分かれています。ブロークングリッドデザインではその概念を覆し、要素を重ねたり、枠内から飛び出させたりします。この型破りなレイアウトによってユニークで突出したサイトを作ることができます。
もう一つ注目を集めたのが、画面を二つに分割し、それぞれ独自のコンテンツを表示するスプリットスクリーンレイアウトです。こちらも全体的にレイアウトがユニークで面白くなります。
AIと機械学習
チャットボットは大したものです。この気の利いたプログラムはユーザーの質問にリアルタイムで応答し、サポートや購入のプロセスの一部または全体を人間の代わりに行ってくれます。機械学習もデータを精査し、質問やコメントへどのように回答すべきかを学習することにより、 人間によるサポートの負荷を軽減してくれます。
しかし、これらはまだ最初の一歩にすぎません。この技術はまだ進歩の過程にあり、AIや機械学習のオンラインシステムとの統合は今後ますます進んでいくでしょう。
ブルータリズムの台頭
ブルータリズムは可愛さとは無縁ですが、その奇妙な訴求力が多くの人の心を捉えました。けばけばしい色とUXアンチパターン、支離滅裂なデザインが特徴のブルータリズムは、その突飛もない作りで見る人の予想を裏切ります。今後、このような不均一なデザインがますます見られるようになることが予想されます。
ウェブデザインでストーリーを伝える
ストーリーを伝えたい場合にしろ、多くの情報を伝えたい場合にしろ、ビジュアルの使用は非常に有効です。ウェブデザイナーたちはメッセージの訴求力を高め、より理解しやすくなるよう、魅力的なイラストレーションと可視化されたデータをインタラクティブで視覚的なデザインと組み合わせます。
2019年もっとも流行ったウェブデザインのトレンド
2019年にはブロークングリッドや大胆なカラーのパレットなど多くの2018年に流行したウェブデザインのトレンドが引き続き用いられました。ただし、大胆なデザイナーにより数々の実験的な試みが実施され、より一層突飛なアイデアがたくさん生まれています。
2019年のテーマは、ルールの歪曲と破壊です。ホワイト、フラット、グリッドベースのミニマリズムデザインがやや廃れ、鮮やか、大胆、非対称なデザインが台頭しています。白い余白をたっぷりとったクリーンなデザインは今後も常に一定の支持を集めることになるでしょうが、最近、デザイナーはもっと新しいことに挑戦する傾向にあります。この傾向の多くは2020年により一層強まることが予想されます。
鮮やかさと実験的な色使い
インターネット全体がよりカラフルになりました。グラデーションはより一般的になり、ウェブサイトには数年前にはあまり見られなかった明るく派手なパレットが利用されるようになりました。パレット自体も従来の補色や対比色などの型にはまったものから、より実験的なものへ変化、多様化していきました。
サイトには同じような1色や2色の落ち着いた色を使ったデザインは使われなくなり、代わりに柔らかいパステルカラー、鮮やかな色相、様々な色の組み合わせが使われるようになりました。今ではシャープなコントラスト、柔らかで繊細な色合い、個性的なパレットを組み合わせたデザインで、ネット上のサイトは多種多様になっています。
モノクロのデザインも現在大流行。ダークな印象の、白、黒、グレースケールのページが多いですが、完全に白と黒だけを使用したページも見られます。
イラストレーションの増加
イラストレーションやビジュアルコンテンツは2018年も人気でしたが、それ以降も進化を続けてきました。多くのサイトで使用されている一般的かつシンプルなスタイルのイラストレーションから一歩進んだ、少し変わったものが使用されるようになりました。
奇抜で面白いものを使用するのが新しいトレンド。より抽象的でランダムなスタイルが好まれるようになりました。このイラストレーションは一般的な常識を無視して、クリエイターの個性を全面に押し出しています。
3Dイラストレーションも大きな人気を誇っています。フラットなアートワークに少し捻りを加えたものですが、それにより全く新しい表現が生まれます。3Dに見える2Dのイラストレーションもあれば、実際に3D化されているものもあります。いずれにせよ、3Dウェブアニメーションと共に支持を集めています。
そしてもう一つのトレンドはアニメーション。アニメーションは瞬間的に注意を惹きつける上、アートの表現にさらに個性を加えることができます。このトレンドが注目を集め続ける中で、2Dも3Dアニメーションも更なる成長を続けるでしょう。
大胆なデザイン
2019年のウェブデザインは次の言葉で要約できます—大きさと大胆さ。大きくて実験的であるほどよい、というもの。華やかで瞬間的に注目を集めるデザインにできれば、なおさらです。
ブルータリズムは今でも影響力を放ち、多くのサイトがブルータリズムの要素を取り入れています。冷たく、醜く、UIアンチパターンのデザインは非常に訴求力があります。ウェブデザインは常にユーザーエクスペリエンうの向上を目指してきましたが、ブルータリズムはアート作品としての側面に重きを置いています。ブルータリズムの流行がいつまで続くかは、定かではありませんが、今も熱心な支持者がいることは間違いありません。
全ての要素が巨大化する傾向が見られますが、その影響を最も受けているのがタイポグラフィーとナビゲーションです。画面いっぱいにテキストが表示されたものや、タイポグラフィーのみを中心として、画像がほとんどない、もしくは全くないというサイトデザインも珍しくありません。
また、Photoshopで加工したかのようにフォントをカスタマイズ、レンダリングできるカラーフォントの登場により、フォントも一層クリエイティブになっています。タイポグラフィーに重点を置いた手法は現在では有効なウェブデザインの手法です。
ナビゲーションも大きくなっています。華奢なヘッダーのナビゲーション、上品なドロップダウンメニューやハンバーガーメニューは、しばしば、巨大なタイポグラフィーの近くに表示される画面全体を使ったナビゲーションに取って代わられています。ウェブサイトナビゲーションのベストプラクティスの詳細についてはこちらの記事をご覧ください。
ビデオを使ったヘッダーや背景動画など、サイト上の動画コンテンツが増えた点も特筆すべきでしょう。今まで、動画コンテンツは読み込みが遅く、限られたモバイルデータを大量に消費してしまうため敬遠されがちでしたが、ハードウェアの強化と画像の代替表示により自由に動画を使えるようになりました。かつては珍しかった、背景にフルスクリーンの動画が表示される大胆なウェブサイトが、今後ますます一般的になっていくでしょう。
アシンメトリー
ブロークングリッドデザインは現在でもとても人気です。近年のウェブサイトは典型的なレイアウトを避け、様々な要素が画面のいたるところで重なり合う、よりアーティスティックなデザインが選ばれるようになりました。作成するのが難しいスタイルですが、成功すればとても見栄えが良くなります。
一方で、型を完全に破るのには気がひける、という人の代替案として考えられるのがアシンメトリーのレイアウトです。グリッドを保持しつつ非対称で印象的なスプリットスクリーンは特に人気です。
グリッドといえば、行と列の2次元で要素を配置することで簡単に一からウェブサイトのレイアウトを構築できる、便利なCSSグリッドレイアウトがCSSに新しく登場しました。CSSの操作から、ブロークングリッドレイアウトなど、なんでも作成することができます。ウェブデザイナーやデベロッパーはCSSグリッドレイアウトをどんどん取り入れていますので、しっかりチェックしておきたいものです。
エフェクトとアニメーションの増加
ブルータリズムが一部で流行する一方で、他方ではUI/UXデザインに重きを置く流れも存在します。つまり、より美しいインターフェースとユーザーエクスペリエンスの向上を同時に実現するというもの。
その中で大きな役割を担っているのが、マイクロインタラクションです。ストア内で商品にマウスカーソルを合わせたり、インタラクティブな背景動画で遊んだり、といったシーンで使われます。これらのさりげないアニメーションをクリックやマウスオーバーなどの際に表示することで、ウェブサイトの閲覧が楽しくなります。中には可愛らしいミニゲームを組み込むサイトまで登場しています。
しかしこれはエンターテイメント的な役割を果たすだけではありません。マイクロインタラクションは、微細なアニメーションと同じ役割を果たします。重要なUI要素への注目を促します。しかし、盛り込みすぎると陳腐な印象になってしまうので、サイト内にアニメーションをいくつ盛り込むかはとても重要です。
ダイナミックな奥行きを持たせ、サイトを面白くする、スクロールエフェクトやパララックス効果もますます人気が出ていています。
また、カスタムカーソルにも注目すべきでしょう。かつては小さなブログや子供用のサイト以外ではあまり見られませんでしたが、今では特に背景やナビゲーションに3Dアニメーションを利用したサイトなどで頻繁に使われています。上品なカスタムカーソルはサイトのデザインをより魅力的にすることができます。
白い余白
昔から一貫して白い余白をたっぷり使ったクリーンなデザインはウェブデザインのトレンドとして存在し続けています。シンプルでクリーンなデザインは懸命なチョイス。このスタイルがほとんどのモダンなウェブサイトで取り入れられているのには理由があります。
より大胆でユニークなアプローチを目指している場合でも、白い余白は必要な要素です。どんなサイトでも余白は必要で、白い余白を用いることで画像やその他のコンテンツを引き立てることができます。
画面の大部分を余白に使うことで、重要な要素がゆったりと見せられるため、白い余白はとても効果的。十分な余白をとったスタイルは、少なくとも今後数年間引き続き支持されるスタイルとなりそうです。
プログレッシブウェブアプリ
もう一つの大きなポイントはモバイル用のデザインであるプログレッシブウェブアプリ（PWA）です。このウェブベースのプラットフォームはHTMLやJavaScriptを用いてコーディングされますが、モバイルユーザーの端末ではミニアプリのように機能します。モバイルテクノロジーを使用する必要がなく、アプリストアでリリースしなくてもアプリの様な使用感になります。
PWAはオフラインで作動し、プッシュ通知を表示することができ、ホーム画面にピン留めすることができますが、何かをダウンロードしたり配布したりする必要は一切ありません。また、軽量で読み込みが速いのでデータを大量に消費することもありません。
あのTwitterもインターネット速度が遅いユーザー向けのTwitter Liteの開発にPWAを取り入れ、結果的にこのシステムをメインインターフェースに統合するまでになりました—この技術の有効性を証明する事例と言えるでしょう。
プログレッシブウェブアプリについて初めて知った、という方は調べておくことをお勧めします。この技術を取り入れ、モバイルユーザーエクスペリエンスを大幅に向上できるかもしれません。
まとめ
2018年・2019年はオンラインで様々な動きがあった2年間だったと言えます。2020年になり、さらに大胆なデザインが既に登場しています。アシンメトリーや鮮やかなカラー、ブルータリズム、アイキャッチとなるアニメーションなど…型破りなスタイルの人気は今後数年間、ますます高まっていくでしょう。
次にどのようなトレンドが流行するかは、誰にも分かりません。更に型破りな新しいアートスタイルが生み出されることは、間違い無いでしょう。
これらをまだ取り入れていないという方は、一度デザインを見直して新しいホットなトレンドを取り入れてみても、いいかもしれません。今後、ますますブランドやデザイナーは個性を押し出し、インターネットは、より鮮やかで面白いサイトで溢れるでしょう。
ウェブデザインの世界の次の10年間はリスクを恐れない革新的なデザインが主流となることが予想されます。遅れを取らないよう、心の準備をしておきましょう！
コメントを残す