新しいレスポンシブ: コンポーネント ドリブンな世界におけるウェブデザイン

レスポンシブ ウェブデザインの新しい時代におけるマクロ レイアウトとマイクロ レイアウトの制御。

Una Kravets

レスポンシブ デザインの現在

現在、レスポンシブ デザインという用語は、メディアクエリを使用してデザインのサイズをモバイルサイズからタブレットサイズ、パソコンサイズに変更するレイアウト変更を指す場合がほとんどです。

しかし、まもなく、このレスポンシブ デザインの認識は、ページ レイアウトにテーブルを使用するのと同じくらい時代遅れと見なされる可能性があります。

ビューポート ベースのメディアクエリは強力なツールですが、細かい調整ができません。ユーザーのニーズに応える機能や、コンポーネント自体にレスポンシブ スタイルを挿入する機能がありません。

グローバル ビューポート情報を使用してコンポーネントにスタイルを適用できますが、コンポーネントにスタイルが適用されるわけではありません。これは、デザイン システムがページベースではなくコンポーネント ベースの場合に機能しません。

幸いなことに、エコシステムは変化しており、急速に変化しています。CSS は進化しており、レスポンシブ デザインの新しい時代がすぐそこまで来ています。

これは 10 年ごとに発生しています。10 年前の 2010 ～ 2012 年頃、モバイルとレスポンシブ デザインの大きな変化と CSS3 の登場がありました。

CSS スタイルのタイムライン
出典: Web Design Museum。

そのため、エコシステムは CSS に大きな変更が加えられることに備えています。Chrome とウェブ プラットフォームのエンジニアは、レスポンシブ デザインの次世代に向けたプロトタイピング、仕様策定、実装を開始しています。

これらの更新には、ユーザー設定ベースのメディア機能、コンテナ クエリ、折りたたみ式画面などの新しい画面タイプのメディアクエリが含まれます。

ユーザー、コンテナ、フォーム ファクタに応答する

ユーザーに対応する

新しいユーザー設定メディア機能を使用すると、ユーザーの特定の設定やニーズに合わせてウェブ エクスペリエンスをスタイル設定できます。つまり、ユーザー エクスペリエンスの設定機能を使用すると、ユーザー エクスペリエンスをユーザーの経験に合わせて調整できます。

ユーザー設定のメディア機能には、次のものがあります。

  • prefers-reduced-motion
  • prefers-contrast
  • prefers-reduced-transparency
  • prefers-color-scheme
  • inverted-colors
  • その他

設定機能は、ユーザーがオペレーティング システムで設定した設定を取得し、特にユーザー補助が必要なユーザー向けに、より堅牢でパーソナライズされたウェブ エクスペリエンスを構築するのに役立ちます。

オペレーティング システムでユーザー補助設定を有効にする

prefers-reduced-motion

オペレーティング システムの設定でモーションの低減を設定しているユーザーは、パソコンの使用時にアニメーションを減らすことをリクエストしています。そのため、ウェブの使用中に派手な導入画面、カードフリップ アニメーション、複雑なローダー、その他の派手なアニメーションを好まない可能性があります。

prefers-reduced-motion を使用すると、モーションの少ないページを設計し、この設定を設定していないユーザー向けにモーション強化されたエクスペリエンスを作成できます。

このカードには両面に情報が記載されています。ベースラインのモーション低減エクスペリエンスでは、その情報を表示するためにクロスフェードが使用されますが、モーション強化エクスペリエンスではカードの切り替えが使用されます。

モーション抑制を優先する設定は、オンラインで情報を伝達するうえでモーションはとても重要であるため、「モーションなし」を意味するものではありません。代わりに、不要な移動を必要とせずにユーザーをガイドする堅実なベースライン エクスペリエンスを提供します。また、ユーザーのアクセシビリティのニーズや設定に応じて、そのエクスペリエンスを段階的に強化します。

prefers-color-scheme

別の設定メディア機能は prefers-color-scheme です。この機能を使用すると、ユーザーが好むテーマに合わせて UI をカスタマイズできます。ユーザーは、デスクトップまたはモバイルのオペレーティング システムで、ライトモード、ダークモード、自動モードの設定を指定できます。これらのモードは、時間帯に応じて変化します。

CSS カスタム プロパティを使用してページを設定している場合は、色値の入れ替えが簡単になります。backgroundColor や textOnPrimary などのカラーテーマ値をすばやく更新して、メディアクエリ内の新しいテーマに動的に調整できます。

これらの設定クエリの一部を簡単にテストするには、毎回システム設定を開くのではなく、エミュレーション用の DevTools を使用します。

ダークモード向けのデザイン

ダークモード向けにデザインする場合は、背景とテキストの色を反転したり、ダークなスクロールバーを使用したりするだけではありません。気付いていない考慮事項がいくつかあります。たとえば、視覚的な振動を軽減するために、暗い背景の色の彩度を下げる必要がある場合があります。

ダークモードで鮮やかで彩度の高い色を使用しないでください

シャドウを使用して奥行きを作り、要素を前に描画する代わりに、要素の背景色で光を使用して前に描画することもできます。これは、暗い背景では影の効果が弱くなるためです。

マテリアル デザインには、ダークモード向けのデザインに関する優れたガイダンスが用意されています。

ダークモードは、よりカスタマイズされたユーザー エクスペリエンスを提供するだけでなく、AMOLED 画面のバッテリー駆動時間を大幅に改善できます。このような画面は、新しいハイエンド スマートフォンに搭載されており、モバイル デバイス全体でますます普及しています。

このグラフィックを最初に示した講演のスクリーンショット

ダークモードに関する 2018 年の Android の調査では、画面の明るさと全体的なユーザー インターフェースに応じて、最大 60% の消費電力を節約できることが示されています。60% という統計情報は、アプリ UI のダークモードとライトモードで、画面の明るさを 100% にして一時停止した動画と YouTube の再生画面を比較した結果です。

可能な限り、ユーザーにダークモードのエクスペリエンスを常に提供する必要があります。

コンテナに応答する

CSS で最も注目を集めている新しい分野の 1 つがコンテナクエリです。コンテナクエリは、要素クエリとも呼ばれます。ページベースのレスポンシブ デザインからコンテナベースのレスポンシブ デザインへの移行が、デザイン エコシステムの進化に与える影響は計り知れません。

コンテナクエリが提供する強力な機能の例を次に示します。親コンテナに基づいて、リンクリスト、フォントサイズ、全体的なレイアウトなど、カード要素のスタイルを操作できます。

Codepen でデモを確認する（カナリア版ではフラグの後ろにあります）。

この例は、2 つの異なるコンテナサイズを持つ 2 つの同じコンポーネントを示しています。どちらも CSS グリッドを使用して作成されたレイアウトのスペースを占有しています。各コンポーネントは独自のスペース割り当てに収まり、それに応じてスタイルを設定します。

メディアクエリだけでは実現できない柔軟性です。

コンテナクエリは、レスポンシブ デザインに対してよりダイナミックなアプローチを提供します。つまり、このカード コンポーネントをサイドバーやヒーロー セクション、またはページのメインコンテンツ内のグリッド内に配置した場合、コンポーネント自体がビューポートではなくコンテナに応じたレスポンシブ情報とサイズを保持します。

これには @container アットルールが必要です。これは @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 未満の場合、時刻のフォントサイズを小さくしています。

コンテナクエリカード

このデモプラントのウェブサイトでは、ヘッダーの商品カード、最近閲覧したアイテムのサイドバー、商品グリッドなど、各商品カードはすべて同じコンポーネントで、同じマークアップを使用しています。

Codepen でデモを確認する（カナリア版ではフラグの後ろ）。

このレイアウト全体の作成に使用されているメディアクエリはなく、コンテナクエリのみが使用されています。これにより、各商品カードが適切なレイアウトに移動してスペースを埋めることができます。たとえば、グリッドは 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 に設定され、水平方向になります。デフォルトの flex-direction は「row」です。

スペースが不足すると、商品カードが積み重ねられます。各商品カードは独自のスタイルを設定します。これは、グローバル スタイルだけでは不可能です。

コンテナクエリとメディアクエリを組み合わせる

コンテナクエリには多くのユースケースがあります。カレンダー コンポーネントもその一つです。コンテナクエリを使用すると、親の使用可能な幅に基づいて、カレンダーの予定やその他のセグメントのレイアウトを変更できます。

Codepen でデモを確認する（カナリア版ではフラグの後ろ）。

このデモ コンテナは、クエリを実行してカレンダーの日付と曜日のレイアウトとスタイルを変更し、スケジュールされた予定の余白とフォントサイズを調整して、スペースに適合させます。

次に、メディアクエリを使用して、小さい画面サイズに合わせてレイアウト全体をシフトします。この例は、メディアクエリ（グローバル スタイルまたはマクロ スタイルの調整）とコンテナクエリ（コンテナの子要素とそのマイクロ スタイルの調整）を組み合わせることの強力さを示しています。

つまり、同じ UI コンポーネント内でマクロ レイアウトとマイクロ レイアウトを検討し、きめ細かいデザイン上の意思決定を行うことができます。

コンテナクエリの使用

これらのデモは、Chrome Canary でフラグを有効にして試すことができます。Canary の about://flags に移動し、#enable-container-queries フラグをオンにします。これにより、contain プロパティの @container、inline-size、block-size の値と、LayoutNG グリッドの実装がサポートされます。

このフラグは、対応する Chrome DevTools 機能を有効にします。DevTools でコンテナクエリを検査してデバッグする方法を学習する。

スコープ設定されたスタイル

コンテナクエリを構築するには、@scope を使用したスコープ設定スタイルを使用して、セレクタの範囲を制限します。

スコープ設定されたスタイルの図
図は、Miriam Suzanne によって最初にデザインされました。

スコープ付きスタイルを使用すると、コンポーネント固有のスタイル設定が可能になり、名前の競合を回避できます。これは、多くのフレームワークやプラグイン（CSS モジュールなど）ですでにフレームワーク内で行われていることです。スコープ設定されたスタイルを使用すると、マークアップを調整することなく、読み取り可能な CSS を使用してコンポーネントにカプセル化されたスタイルをネイティブに記述できます。

/* @scope (<root>#) [to (<boundary>#)]? { … } */

@scope (.tabs) to (.panel) {
  :scope { /* targeting the scope root */ }
  .light-theme :scope .tab { /* contextual styles */ }
}

スコープを使用すると、「ドーナツ型」のセレクタを作成できます。このセレクタでは、上限と下限を指定できます。@scope ルールに含まれるセレクタは、これらの制限内で照合されます。

たとえば、タブパネルでは、タブにスコープ設定されたスタイルを適用し、タブ内のパネルにはスコープ設定されたスタイルの影響を与えないようにします。

フォーム ファクタに応じたレスポンシブ

レスポンシブ デザインの新しい時代に関する次のトピックは、フォーム ファクタの変化と、ウェブ コミュニティとして設計する必要のある可能性の拡大（形状変化する画面やバーチャル リアリティなど）です。

スパニング図
Microsoft Edge の説明の図

折りたたみ式またはフレキシブルな画面、画面の拡大に対応した設計は、今日のフォーム ファクタの変化の例の 1 つです。また、画面の拡大は、これらの新しいフォーム ファクタとニーズに対応するために現在開発中の別の仕様です。

画面全体にわたる試験運用版のメディア クエリが役に立ちます。現在は、@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.dev/learnCSS

現時点では、CSS のレベルアップや基本事項の復習を希望される方のために、私のチームが web.dev でまったく新しい無料の CSS コースとリファレンスをリリースします。web.dev/learnCSS からアクセスできます。

レスポンシブ デザインの次の時代と、それに伴うプリミティブの概要についてお伝えしました。ウェブデザインの未来に、私と同じようにワクワクしていただけたでしょうか。

これは、UI コミュニティにとって、コンポーネントベースのスタイルや新しいフォーム ファクタを採用し、ユーザー対応型のエクスペリエンスを構築する大きな機会となります。