on:2019年12月19日sponsorsWebデザイナーとデベロッパー向けに、2020年参考にしたいWebデザインの最新トレンドと技術の進化を紹介します。最近注目されているWebサイトやスマホアプリのトレンドを調べ、デザインと技術の変化とそのトレンドの根底にある背景を解説します。Marcel下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。Webデザインのほとんどのトレンドは、その時点で利用可能な技術に遡ることができます。前までは例えば、表示がフェードインする要素、レスポンシブレイアウト、パララックスなどがそうです。グラフィックデザインのトレンドと並行することもあります。磨りガラスのエフェクトダークモードどこにでもグラデーション洗練された3Dグラフィックス水平スクロール従来の常識を破るレイアウトマイクロインタラクションスクロールスナップ磨りガラスのエフェクト磨りガラスのエフェクトとは磨りガラスのエフェクトは、他の要素の背後にある半透明でぼやけた外観です。Aeroでしょうか、その後AppleのiOSやアプリにも多く採用されるようになりました。apple.comのナビゲーションバーの磨りガラスのエフェクトそれまではあまり見かけませんでしたが、磨りガラスのエフェクトはますます増えています。現在一般的に使用されているのは、ナビゲーションのバーあるいは画像上のテキストの背景です。前までは、この磨りガラスのエフェクトは実装が困難でしたが、スタイルシートの新しいプロパティ「backdrop-filter」を使用すると簡単に実装できます。非サポートブラウザに対しても、半透明の無地の背景を使用してフォールバックが簡単にできます。yahoo.comの画像上のテキストの背景ダークモードダークモードとは2019年にデスクトップ・スマホの主要なOSで、ダークモードの対応が完了しました。これにより、OSの設定(外観モード)を判別し、Webアプリやサイトにダークモードに適したカラースキームを適用することができます。一部のサイトでは数年前から、このダークモードに手動で対応していました。ページの隅にスイッチを配置し、ダークモードに切り替えます。2019年になり、スマホおよびデスクトップの主要なOSにダークモードが採用されたことで、多くのWebアプリやサイトがダークモードに対応し始めています。modeサイトやブログをダークモードにするのは、簡単です。CSSのprefers-color-schemeをメディクエリで使用し、OSがダークモードの場合にそのスタイルを適用できます。すべてのモダンブラウザでサポートされています。ダークモードについて詳しい情報は、下記をご覧ください。CSSのメディアクエリ「prefers-color-scheme」でダークモード対応にする方法と注意点ダークテーマをデザインする時に気をつけたい5つのポイント今までのカラーシステムと一貫性を保ちつつ、ダークモードに対応する方法を解説どこにでもグラデーションどこにでもグラデーションとはグラデーションとは、ある色から別の色へ徐々に変化することです。フラットデザインが主流になる前は、リアルな表面を作成するためにグラデーションが使用されていました。数年前にフラットデザインが主流になると、純粋なフラットなデザインからグラデーションを使ったデザインに少しずつ移行され、現在はある程度の奥行きをつけるデザインになっています。apple.comのボタンのボーダーにグラデーション最近ではグラデーションはさまざまな要素に使用されています。ボタンのボーダー、フォントのカラーなどにも適用されています。フォントではグラデーションを最大限に活用するために、より大胆で大きなタイポグラフィがWeb上で求められています。studiovoila.comの文字にグラデーション技術的な背景グラデーションをより魅力的にする特定のWebテクノロジーはありません。背景、フォントなど、要素のグラデーションは以前から適切にサポートされていました。stadia.devbackground-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ゲーム。スマホでもプレイ可能。use)で、Web上でより大きなより優れたグラフィック要素の必要性が示されています。このトレンドはthree.jsのような一般的な3dフレームワークの全体的な開発とともに継続的に進む可能性があります。google.com/store水平スクロール水平スクロールとは水平スクロールとは横方向にスクロールすると、次のコンテンツに移動するものです。スマホでは特に、横方向のスペースが限られているため、コンテンツを増やすには横方向にスクロールする必要があり、この水平スクロールを組み込んだデザインが増加しています。App技術的な背景テクノロジーの進歩は特に必要なく、水平スクロールは小さなスクリーンでもたくさんのコンテンツを見せる必要性から生じた変化でしょう。水平スクロールを使用すると、次のセクションに進むためにスクロールする必要がなくなり、そのコンテンツに集中することができます。これはWebにおけるUXの変化と考えることができ、特にこのようなジェスチャーはネイティブアプリではすでに一般的です。Scrolling従来の常識を破るレイアウト従来の常識を破るレイアウトとは変形、回転、オーバーラップ、重なりなどを使用したグリッドのようなレイアウトを見かけるようになりました。GridとFlexboxのおかげで、どちらもすべてのモダンブラウザでサポートされています。デザイナーはすでに非対称の要素を配置してセクションを重ねたりして、単純なグリッドパターンからの脱却を試しています。Webデザイナーとデベロッパーは将来的に、実験的なバリエーションを持つより多くのユースケースを探究することが期待できます。Agencyマイクロインタラクションマイクロインタラクションとはマイクロインタラクションとは小さなアニメーションと繊細なフィードバックを提供するものです。マイクロインタラクション自体はすでに大量に存在しています。送信ボタンをクリックすると進行状況をバーで表示、プルトゥリフレッシュのインタラクション、Mediumの記事の拍手など、より分かりやすく配慮されたインタラクションが増えています。giphy.com技術的な背景Webアプリ、コンポーネントベースの開発(再利用可能な要素)、Webのネイティブジェスチャーの採用は着実に増加しています。ユーザーとの感情的なつながりを作ることに依存している会社はたくさんあり、メディアとインタラクションを通じて作成されます。開発の負ワームワークとプラクティスを成熟させることで、マイクロインタラクションを使用してこれらのより詳細にさらに注意を向けることができます。Interactionスクロールスナップスクロールスナップとはスクロールスナップを使用すると、ユーザーがコンテンツをスクロールした際に特定の要素にスクロール位置を自動的に合わせることができます。これにより、ユーザーはコンテンツを中断することなく、明確なフォーカスを得ることができます。tesla.com理由コンテンツをスクリーンに合わせるためにスクローツ位置を調整する必要性は、特にJavaScriptで実装されたサイドスクローラーで顕著でした。スマホではコンテナと画像を巡回するために横方向に簡単にスクロールする必要性があるため、コンテンツを表示するためのテクノロジーとして人気でした。ark-shelter.comしかし最近では、CSSのscroll-snapを使用するだけで、数行のコードでスクロールスナップを実装することができます。高いニーズを考えると、その使用は増えてくるでしょう。CSSのscroll-snapについて詳しい情報は、下記をご覧ください。