新しいレスポンシブ：コンポーネント主導のWebデザイン
レスポンシブWebデザインの新時代におけるマクロとミクロのレイアウトの制御。
最新のレスポンシブデザイン #
通常、「レスポンシブデザイン」という用語は、モバイルサイズからタブレットサイズ、デスクトップサイズにデザインのサイズを変更するときに、メディアクエリを使用してレイアウトを変更することを考慮しています。
しかし、このレスポンシブデザインの概念は、ページレイアウトに表を使用するのと同じように、すぐに時代遅れになってしまう可能性があります。
ビューポートベースのメディアクエリは、強力なツールをいくつか提供しますが、十分な精巧さがありません。ユーザーのニーズに対応する機能や、レスポンシブスタイルをコンポーネント自体に挿入する機能が不足しています。
グローバルビューポート情報を使用してコンポーネントのスタイルを設定できますが、それらはまだスタイルを所有しておらず、デザインシステムがコンポーネントベースでページベースではない場合は機能しません。
ただし、エコシステムは変化しており、急速に進化しています。CSSは進化しており、レスポンシブデザインの新時代が間近に迫っています。
これは約10年ごとに発生します。 10年前の2010年から2012年頃に、モバイルとレスポンシブデザインに大きな変化が見られ、CSS3が登場しました。
したがって、エコシステムは、CSSにかなり大きな変更を加える準備ができていることがわかります。ChromeとWebプラットフォーム全体のエンジニアは、レスポンシブデザインの次の時代に向けて、プロトタイピング、仕様作成、実装の開始を行っています。
これらの更新には、ユーザー設定ベースのメディア機能、コンテナクエリ、および折りたたみ式画面などの新しい画面タイプのメディアクエリが含まれます。
ユーザーへの対応 #
新しいユーザー設定メディア機能により、ユーザー自身の特定の設定やニーズに合わせてWebエクスペリエンスをスタイリングすることができます。つまり、プリファレンスメディア機能を使用すると、ユーザーエクスペリエンスをユーザーエクスペリエンスに適合させることができます。
これらのユーザー設定メディア機能は次のとおりです。
prefers-reduced-motionprefers-contrastprefers-reduced-transparencyprefers-color-schemeinverted-colors- その他多数
設定機能は、ユーザーがオペレーティングシステムで設定した環境設定を取得し、特にアクセシビリティが必要なユーザーにとって、より堅牢でパーソナライズされたWebエクスペリエンスを構築するのに役立ちます。
prefers-reduced-motion #
モーションを減らすためにオペレーティングシステム設定を設定しているユーザーは、一般的にコンピューターを使用するときに要求するアニメーションの数を減らしています。したがって、Webの使用中は、派手なイントロ画面、カードフリップアニメーション、複雑なローダー、またはその他の派手なアニメーションを好まない可能性があります。
prefers-reduced-motionを使用して、モーションを減らすことを念頭に置いてページをデザインし、このような設定をしていないユーザー向けにモーションが強化されたエクスペリエンスを作成できます。
このカードには両面に情報があります。ベースラインのモーションの少ないエクスペリエンスはその情報を表示するためのクロスフェードであり、モーションが強化されたエクスペリエンスはその反対側です。
オンラインで情報を伝達するにはモーションが非常に重要であるため、Preferred-reduced-motionは「モーションなし」を意味するものではありません。代わりに、不必要な動きをせずにユーザーを案内する堅実なベースラインエクスペリエンスを提供し、アクセシビリティのニーズや設定がなくても、ユーザーに合ったエクスペリエンスを段階的に強化します。
prefers-color-scheme #
もう1つの設定メディア機能はprefers-color-schemeです。この機能は、ユーザーが好むテーマに合わせてUIをカスタマイズするのに役立ちます。オペレーティングシステムでは、デスクトップでもモバイルでも、ユーザーは、時間帯に応じて変化する明るいテーマ、暗いテーマ、または自動テーマの設定を行うことができます。
CSSカスタムプロパティを使用してページを設定すると、色の値の交換が簡単になります。backgroundColorやtextOnPrimaryなどのカラーテーマ値をすばやく更新して、メディアクエリ内の新しいテーマに動的に調整できます。
これらの設定クエリの一部を簡単にテストできるようにするために、毎回システム設定を開くのではなく、エミュレーション目的でDevToolsを使用できます。
ダークテーマのデザイン #
ダークテーマ向けにデザインする場合、背景やテキストの色を反転したり、ダークスクロールバーを表示したりするだけではありません。気付かないかもしれませんが、いくつかの考慮事項があります。たとえば、視覚的な振動を減らすために、暗い背景の色の彩度を下げる必要がある場合があります。
影を使用して奥行きを作成し、要素を前方に描画するのではなく、要素の背景色に光を使用して要素を前方に描画することをお勧めします。これは、暗い背景では影がそれほど効果的ではないためです。
ダークテーマは、よりカスタマイズされたユーザーエクスペリエンスを提供するだけでなく、AMOLED画面のバッテリー寿命を大幅に改善することもできます。これらは、新しいハイエンド携帯電話で見られる画面であり、モバイルデバイス全体でますます人気が高まっています。
ダークテーマに関する2018年のAndroidの調査では、画面の明るさと全体的なユーザーインターフェースに応じて、最大60％の消費電力の節約が示されました。60％の統計は、アプリのUIにダークテーマとライトテーマを使用して、YouTubeの再生画面と100%の画面の明るさで一時停止した動画を比較した結果です。
可能な限り、常にダークテーマエクスペリエンスをユーザーに提供する必要があります
コンテナへの対応 #
CSSで最もエキサイティングな新しい分野の1つは、要素クエリとも呼ばれるコンテナクエリです。ページベースのレスポンシブデザインからコンテナベースのレスポンシブデザインへの移行が、デザインエコシステムの進化にどれほど貢献しているのかを十分に認識する必要があります。
コンテナクエリが提供する強力な機能の例を次に示します。リンクリスト、フォントサイズ、親コンテナに基づく全体的なレイアウトなど、カード要素の任意のスタイルを操作できます。
この例は、2つの異なるコンテナーサイズを持つ2つの同一のコンポーネントを示しています。どちらも、CSSグリッドを使用して作成されたレイアウトのスペースを占めています。各コンポーネントは、独自のスペース割り当てに適合し、それに応じてスタイルを設定します。
この程度の柔軟性は、メディアクエリだけでは不可能なことです。
コンテナクエリは、レスポンシブデザインへのきわめて動的なアプローチを提供します。つまり、このカードコンポーネントをサイドバーやヒーローのセクション、またはページ本体の内側のグリッド内に配置すると、コンポーネント自体が、ビューポートではなく、コンテナに応じたレスポンシブ情報とサイズを所有します。
これには@container at-ruleが必要です。これは@mediaを}使用したメディアクエリと同じように機能します。ただし、代わりに、@containerはビューポートとユーザーエージェントではなく親コンテナに情報を照会します。
.card {
container-type: inline-size;
}
@container (max-width: 850px) {
.links {
display: none;
}
.time {
font-size: 1.25rem;
}
/* ... */
}まず、親要素に包含を設定します。@containerクエリを記述し、min-widthまたはmax-widthを使用して、サイズに基づいてコンテナ内の要素のスタイルを設定します。
上記のコードはmax-widthを使用し、display:noneへのリンクを設定します。また、コンテナが850px未満の場合は時間フォントサイズを小さくします。
コンテナクエリカード #
このデモプラントのWebサイトでは、ヒーローのカード、最近表示したアイテムのサイドバー、製品グリッドなど、各製品カードはすべてまったく同じコンポーネントであり、同じマークアップが付いています。
このレイアウト全体を作成するために使用されるメディアクエリはなく、コンテナクエリのみです。これにより、各製品カードを適切なレイアウトにシフトして、そのスペースを埋めることができます。たとえば、グリッドはminmax列レイアウトを使用して要素をスペースに流し込み、スペースが圧縮されすぎた場合 (最小サイズに達した場合) にグリッドを再レイアウトします。
.product {
container-type: inline-size;
}
@container (min-width: 350px) {
.card-container {
padding: 0.5rem 0 0;
display: flex;
}
.card-container button {
/* ... */
}
}
350px以上のスペースがある場合、カードのレイアウトは、デフォルトのフレックス方向が「行」であるdisplay: flexに設定されているため、水平になります。
より少ないスペースで、製品カードが積み重ねられます。各製品カードはそれ自体をスタイルします。これは、グローバルスタイルだけでは不可能なことです。
コンテナクエリとメディアクエリの混合 #
コンテナクエリには非常に多くのユースケースがあります。1つはカレンダーコンポーネントです。コンテナクエリを使用して、親の使用可能な幅に基づいてカレンダーイベントやその他のセグメントを再レイアウトできます。
このデモコンテナは、カレンダーの日付と曜日のレイアウトとスタイルを変更するためにクエリを実行し、スケジュールされたイベントの余白とフォントサイズを調整して、スペースに合わせやすくします。
次に、メディアクエリを使用して、画面サイズを小さくするためにレイアウト全体をシフトします。この例は、メディアクエリ（グローバルスタイルまたはマクロスタイルの調整）とコンテナクエリ（コンテナの子とそのマイクロスタイルの調整）を組み合わせることがいかに強力であるかを示しています。
これで、同じUIコンポーネント内のマクロレイアウトとマイクロレイアウトを考えて、微妙なニュアンスのある設計上の決定を行うことができます。
コンテナクエリの使用 #
これらのデモは、Chrome Canaryのフラグの後ろで再生できるようになりました。 Canaryでabout://flagsに移動し、#enable-container-queriesフラグをオンにします。これにより、@container、contain、containのblock-size値、およびLayoutNGグリッドの実装のサポートが有効になります。
スコープスタイル #
コンテナクエリに基づいて構築するために、CSSワーキンググループは、コンポーネントの適切な名前空間と衝突回避に役立つスコープスタイルについても積極的に議論しています。
スコープスタイルを使用すると、パススルーおよびコンポーネント固有のスタイル設定で名前の衝突を回避できます。これは、CSSモジュールなどの多くのフレームワークやプラグインでフレームワーク内で実行できるようになっています。この仕様により、マークアップを調整することなく、読み取り可能なCSSを使用してコンポーネントのカプセル化されたスタイルをネイティブに記述できるようになります。
/* @scope (<root>#) [to (<boundary>#)]? { … } */
@scope (.tabs) to (.panel) {
:scope { /* targeting the scope root */ }
.light-theme :scope .tab { /* contextual styles */ }
}スコープを使用すると、「ドーナツ型」セレクターを作成できます。このセレクターでは、スタイルをカプセル化する場所と、スコープスタイルから抜け出してよりグローバルなスタイルを参照する場所を指定できます。
この例としては、タブでスコープスタイルを取得するタブパネルや、タブ内のパネルで親スタイルを取得する場合があります。
フォームファクターに対応 #
レスポンシブデザインの新時代についての会話の次のトピックは、フォームファクターの変化と、Webコミュニティとしてデザインする必要があるもの（形状変化画面や仮想現実など）の可能性の高まりです。
折りたたみ式またはフレキシブルスクリーン、およびスクリーンスパンの設計は、今日のフォームファクタの変化を確認できる一例です。そして、画面スパンは、これらの新しいフォームファクタとニーズに対応するために取り組んでいるさらに別の仕様です。
画面にまたがる実験的なメディアクエリはここでも役立ちます。現在、次のように動作します。@media (spanning: <type of fold>) 。デモでは、2つの列を持つグリッドレイアウトを設定します。1つは--sidebar-widthの幅で、デフォルトは5remで、もう1つは1frです。縦方向に折り目が1つあるデュアル画面でレイアウトを表示すると、--sidebar-width値が左の折り目の環境値で更新されます。
:root {
--sidebar-width: 5rem;
}
@media (spanning: single-fold-vertical) {
--sidebar-width: env(fold-left);
}
main {
display: grid;
grid-template-columns: var(--sidebar-width) 1fr;
}これにより、サイドバー（この場合はナビゲーション）が一方の折り目のスペースを埋め、アプリのUIがもう一方の折り目を埋めるレイアウトが可能になります。これにより、UIの「折り目」が防止されます。
Chrome DevToolsエミュレータで折りたたみ可能な画面をテストして、ブラウザーで直接画面にまたがるデバッグとプロトタイプ作成に役立てることができます。
まとめ #
フラットスクリーンを超えてUIデザインを探求することは、コンテナクエリとスコープスタイルが非常に重要であるもう1つの理由です。これらは、ページレイアウトとグローバルスタイル、およびユーザースタイルからコンポーネントスタイルをサイロ化する機会を提供し、より弾力性のあるレスポンシブデザインを可能にします。これは、画面にまたがるニュアンスを含む、ページベースのメディアクエリを使用してマクロレイアウトを設計できることを意味します。同時に、コンポーネントのコンテナクエリでマイクロレイアウトを使用し、ユーザー設定ベースのメディアクエリを追加して、固有の設定とニーズに基づいてユーザーエクスペリエンスをカスタマイズします。
これは新しいレスポンシブです。
マクロレイアウトとミクロレイアウトを組み合わせ、さらにユーザーのカスタマイズとフォームファクタを考慮に入れています。
これらの変更だけでも、Webのデザイン方法にかなりの変化が生じます。しかし、これらを組み合わせると、レスポンシブデザインの概念化さえも非常に大きく変化することを意味します。ビューポートサイズを超えたレスポンシブデザインについて考え、コンポーネントベースのカスタマイズされたエクスペリエンスを向上させるために、これらすべての新しい軸を検討し始めましょう。
レスポンシブデザインの次の時代はここにあり、すでにそれを自分で探求し始めることができます。
web.dev/learnCSS #
現時点では、CSSをレベルアップしたい場合、基本の一部を再検討したい場合は、新しい完全に無料のCSSコースとリファレンスがweb.devで提供されています。web.dev/learnCSSからアクセスできます。
レスポンシブデザインの次の時代とそれに伴ういくつかのプリミティブについてこの概要を楽しんでいただけたと思います。また、これがWebデザインの将来にとって何を意味するのかについて私と同じように興奮していることを願っています。
これは、UIコミュニティとして、コンポーネントベースのスタイル、新しいフォームファクターを採用し、ユーザーが応答するエクスペリエンスを作成するための大きな機会を開きます。