2020年、注目されているWebデザインの最新トレンドと技術の進化

Webデザイナーとデベロッパー向けに、2020年参考にしたいWebデザインの最新トレンドと技術の進化を紹介します。

最近注目されているWebサイトやスマホアプリのトレンドを調べ、デザインと技術の変化とそのトレンドの根底にある背景を解説します。

2020年、注目されているWebデザインの最新トレンドと技術の進化

Top Web Trends for 2020 and why they are coming
by Jouan Marcel

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

サイトのキャプチャ

Webデザインのほとんどのトレンドは、その時点で利用可能な技術に遡ることができます。少し前までは例えば、表示がフェードインする要素、レスポンシブレイアウト、パララックスなどがそうです。また、グラフィックデザインのトレンドと並行することもあります。

磨りガラスのエフェクト

磨りガラスのエフェクトとは

磨りガラスのエフェクトは、他の要素の背後にある半透明でぼやけた外観です。最初にこのエフェクトが多く使われたのはWindows Aeroでしょうか、その後AppleのiOSやアプリにも多く採用されるようになりました。

磨りガラスのエフェクト

apple.comのナビゲーションバーの磨りガラスのエフェクト

それまではあまり見かけませんでしたが、磨りガラスのエフェクトはますます増えています。現在一般的に使用されているのは、ナビゲーションのバーあるいは画像上のテキストの背景です。

rgb.wikiのナビゲーションバーの磨りガラスのエフェクト

技術的な背景

少し前までは、この磨りガラスのエフェクトは実装が困難でしたが、スタイルシートの新しいプロパティ「backdrop-filter」を使用すると簡単に実装できます。backdrop-filterは現在、ほとんどのブラウザでサポートされています(参考: Can I use)。非サポートブラウザに対しても、半透明の無地の背景を使用してフォールバックが簡単にできます。

画像上のテキストの背景

yahoo.comの画像上のテキストの背景

ダークモード

ダークモードとは

2019年にデスクトップ・スマホの主要なOSで、ダークモードの対応が完了しました。これにより、OSの設定(外観モード)を判別し、Webアプリやサイトにダークモードに適したカラースキームを適用することができます。

ダークモード

youtube.comのダークモード

技術的な背景

一部のサイトでは数年前から、このダークモードに手動で対応していました。ページの隅にスイッチを配置し、ダークモードに切り替えます。2019年になり、スマホおよびデスクトップの主要なOSにダークモードが採用されたことで、多くのWebアプリやサイトがダークモードに対応し始めています。

Admin Dashboard light vs night mode

サイトやブログをダークモードにするのは、簡単です。CSSのprefers-color-schemeをメディクエリで使用し、OSがダークモードの場合にそのスタイルを適用できます。すべてのモダンブラウザでサポートされています。

ダークモードについて詳しい情報は、下記をご覧ください。

どこにでもグラデーション

どこにでもグラデーションとは

グラデーションとは、ある色から別の色へ徐々に変化することです。フラットデザインが主流になる前は、リアルな表面を作成するためにグラデーションが使用されていました。数年前にフラットデザインが主流になると、純粋なフラットなデザインからグラデーションを使ったデザインに少しずつ移行され、現在はある程度の奥行きをつけるデザインになっています。

ボタンのボーダーにグラデーション

apple.comのボタンのボーダーにグラデーション

最近ではグラデーションはさまざまな要素に使用されています。ボタンのボーダー、フォントのカラーなどにも適用されています。フォントではグラデーションを最大限に活用するために、より大胆で大きなタイポグラフィがWeb上で求められています。

サイトのキャプチャ

studiovoila.comの文字にグラデーション

技術的な背景

グラデーションをより魅力的にする特定のWebテクノロジーはありません。背景、フォントなど、要素のグラデーションは以前から適切にサポートされていました。

サイトのキャプチャ

stadia.dev

background-clipやtext-fill-colorはグラデーションでテキストを作成することが考慮されています。また、mix-blend-modeは複数のグラデーションをブレンドすることで平面グラデーションを可能にします。これらのテクノロジーは長年にわたって良好なサポートを受けており、本番環境で使用するのに適しています。

サイトのキャプチャ

css-tricks.com

しかし、複数のブランドや企業がアイデンティティにグラデーションを採用しているのを見ると、自然発生的なトレンドであり、テクノロジー主導のトレンドではないように感じます。

さまざまなブランドに採用されているグラデーション

さまざまなブランドに採用されているグラデーション

Instagramは2016年に純粋なフラットデザインから変更しました。2019年には、複数のブランドがグラデーションを採用しました。

洗練された3Dグラフィックス

洗練された3Dグラフィックスとは

映画のような大きな画像と動画。いくつかは実際の3Dレンダリングであり、またスクロールしてインタラクティブに再生する動画もあります。それらの共通点は、ユーザーの注意を引くためのWebメディアの洗練度にあります。

サイトのキャプチャ

netguru.com/carlens、この3Dモデルはアニメーションします。また、ここでもグラデーションが使用されています。

技術的な背景

これはテクノロジーのトレンドというより、継続的な進化です。現在では、安価なスマホでも高品質な動画や3Dレンダリングを再生できるようになり、Webが成熟してきた今、Webデザイナーやデベロッパーは再生が失敗することを心配せずに、このようなテクノロジーを利用できるようになりました。

bruno-simon.com、インタラクティブな3Dゲーム。スマホでもプレイ可能。

AV6、H.265、WebMなどの高品質なビデオフォーマットのサポートは増加傾向(参考: Can I use)で、Web上でより大きなより優れたグラフィック要素の必要性が示されています。このトレンドはthree.jsのような一般的な3dフレームワークの全体的な開発とともに継続的に進む可能性があります。

google.com/store

水平スクロール

水平スクロールとは

水平スクロールとは横方向にスクロールすると、次のコンテンツに移動するものです。スマホでは特に、横方向のスペースが限られているため、コンテンツを増やすには横方向にスクロールする必要があり、この水平スクロールを組み込んだデザインが増加しています。

サイトのキャプチャ

Storages Management - App

技術的な背景

テクノロジーの進歩は特に必要なく、水平スクロールは小さなスクリーンでもたくさんのコンテンツを見せる必要性から生じた変化でしょう。水平スクロールを使用すると、次のセクションに進むためにスクロールする必要がなくなり、そのコンテンツに集中することができます。これはWebにおけるUXの変化と考えることができ、特にこのようなジェスチャーはネイティブアプリではすでに一般的です。

サイトのキャプチャ

Bidirectional Scrolling

従来の常識を破るレイアウト

従来の常識を破るレイアウトとは

変形、回転、オーバーラップ、重なりなどを使用したグリッドのようなレイアウトを見かけるようになりました。

サイトのキャプチャ

Shamel

技術的な背景

このグリッドのようなレイアウトを実装するのはCSS GridとFlexboxのおかげで、どちらもすべてのモダンブラウザでサポートされています。デザイナーはすでに非対称の要素を配置してセクションを重ねたりして、単純なグリッドパターンからの脱却を試しています。Webデザイナーとデベロッパーは将来的に、実験的なバリエーションを持つより多くのユースケースを探究することが期待できます。

サイトのキャプチャ

Rosewood — Agency

マイクロインタラクション

マイクロインタラクションとは

マイクロインタラクションとは小さなアニメーションと繊細なフィードバックを提供するものです。マイクロインタラクション自体はすでに大量に存在しています。例えば、送信ボタンをクリックすると進行状況をバーで表示、プルトゥリフレッシュのインタラクション、Mediumの記事の拍手など、より分かりやすく配慮されたインタラクションが増えています。

giphy.com

技術的な背景

Webアプリ、コンポーネントベースの開発(再利用可能な要素)、Webのネイティブジェスチャーの採用は着実に増加しています。ユーザーとの感情的なつながりを作ることに依存している会社はたくさんあり、メディアとインタラクションを通じて作成されます。開発の負ワームワークとプラクティスを成熟させることで、マイクロインタラクションを使用してこれらのより詳細にさらに注意を向けることができます。

Dribbble - Micro Interaction

スクロールスナップ

スクロールスナップとは

スクロールスナップを使用すると、ユーザーがコンテンツをスクロールした際に特定の要素にスクロール位置を自動的に合わせることができます。これにより、ユーザーはコンテンツを中断することなく、明確なフォーカスを得ることができます。

tesla.com

理由

コンテンツをスクリーンに合わせるためにスクローツ位置を調整する必要性は、特にJavaScriptで実装されたサイドスクローラーで顕著でした。特にスマホではコンテナと画像を巡回するために横方向に簡単にスクロールする必要性があるため、コンテンツを表示するためのテクノロジーとして人気でした。

ark-shelter.com

しかし最近では、CSSのscroll-snapを使用するだけで、数行のコードでスクロールスナップを実装することができます。高いニーズを考えると、その使用は増えてくるでしょう。仕様は当初から変更されましたが、IE/Edgeでも部分的にサポートされています(参考: Can I use)。
CSSのscroll-snapについて詳しい情報は、下記をご覧ください。

あなたが、興味のあるトレンドを教えてください! あなたはどんなトレンドを待っていますか? どのようなトレンドが減少していますか?

sponsors

top of page

©2020 coliss