2020年、注目されているWebデザインの最新トレンドと技術の進化
Post on:2019年12月19日
sponsors
Webデザイナーとデベロッパー向けに、2020年参考にしたいWebデザインの最新トレンドと技術の進化を紹介します。
最近注目されている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がダークモードの場合にそのスタイルを適用できます。すべてのモダンブラウザでサポートされています。
ダークモードについて詳しい情報は、下記をご覧ください。
- CSSのメディアクエリ「prefers-color-scheme」でダークモード対応にする方法と注意点
- ダークテーマをデザインする時に気をつけたい5つのポイント
- 今までのカラーシステムと一貫性を保ちつつ、ダークモードに対応する方法を解説
どこにでもグラデーション
どこにでもグラデーションとは
グラデーションとは、ある色から別の色へ徐々に変化することです。フラットデザインが主流になる前は、リアルな表面を作成するためにグラデーションが使用されていました。数年前にフラットデザインが主流になると、純粋なフラットなデザインからグラデーションを使ったデザインに少しずつ移行され、現在はある程度の奥行きをつけるデザインになっています。
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
水平スクロール
水平スクロールとは
水平スクロールとは横方向にスクロールすると、次のコンテンツに移動するものです。スマホでは特に、横方向のスペースが限られているため、コンテンツを増やすには横方向にスクロールする必要があり、この水平スクロールを組み込んだデザインが増加しています。
技術的な背景
テクノロジーの進歩は特に必要なく、水平スクロールは小さなスクリーンでもたくさんのコンテンツを見せる必要性から生じた変化でしょう。水平スクロールを使用すると、次のセクションに進むためにスクロールする必要がなくなり、そのコンテンツに集中することができます。これはWebにおけるUXの変化と考えることができ、特にこのようなジェスチャーはネイティブアプリではすでに一般的です。
従来の常識を破るレイアウト
従来の常識を破るレイアウトとは
変形、回転、オーバーラップ、重なりなどを使用したグリッドのようなレイアウトを見かけるようになりました。
技術的な背景
このグリッドのようなレイアウトを実装するのはCSS GridとFlexboxのおかげで、どちらもすべてのモダンブラウザでサポートされています。デザイナーはすでに非対称の要素を配置してセクションを重ねたりして、単純なグリッドパターンからの脱却を試しています。Webデザイナーとデベロッパーは将来的に、実験的なバリエーションを持つより多くのユースケースを探究することが期待できます。
マイクロインタラクション
マイクロインタラクションとは
マイクロインタラクションとは小さなアニメーションと繊細なフィードバックを提供するものです。マイクロインタラクション自体はすでに大量に存在しています。例えば、送信ボタンをクリックすると進行状況をバーで表示、プルトゥリフレッシュのインタラクション、Mediumの記事の拍手など、より分かりやすく配慮されたインタラクションが増えています。
giphy.com
技術的な背景
Webアプリ、コンポーネントベースの開発（再利用可能な要素）、Webのネイティブジェスチャーの採用は着実に増加しています。ユーザーとの感情的なつながりを作ることに依存している会社はたくさんあり、メディアとインタラクションを通じて作成されます。開発の負ワームワークとプラクティスを成熟させることで、マイクロインタラクションを使用してこれらのより詳細にさらに注意を向けることができます。
スクロールスナップ
スクロールスナップとは
スクロールスナップを使用すると、ユーザーがコンテンツをスクロールした際に特定の要素にスクロール位置を自動的に合わせることができます。これにより、ユーザーはコンテンツを中断することなく、明確なフォーカスを得ることができます。
tesla.com
理由
コンテンツをスクリーンに合わせるためにスクローツ位置を調整する必要性は、特にJavaScriptで実装されたサイドスクローラーで顕著でした。特にスマホではコンテナと画像を巡回するために横方向に簡単にスクロールする必要性があるため、コンテンツを表示するためのテクノロジーとして人気でした。
ark-shelter.com
しかし最近では、CSSのscroll-snapを使用するだけで、数行のコードでスクロールスナップを実装することができます。高いニーズを考えると、その使用は増えてくるでしょう。仕様は当初から変更されましたが、IE/Edgeでも部分的にサポートされています（参考: Can I use）。
CSSのscroll-snapについて詳しい情報は、下記をご覧ください。
あなたが、興味のあるトレンドを教えてください！ あなたはどんなトレンドを待っていますか？ どのようなトレンドが減少していますか？
sponsors
