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

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

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-reduced-motion は「モーションなし」を意味するものではありません。モーションは、オンラインで情報を伝えるために非常に重要です。代わりに、不要な動きを排除してユーザーを誘導する、しっかりとしたベースライン エクスペリエンスを提供し、ユーザー補助のニーズや設定がないユーザー向けに、そのエクスペリエンスをプログレッシブ エンハンスメントします。

prefers-color-scheme

もう 1 つのプリファレンス メディア機能は prefers-color-scheme です。この機能を使用すると、ユーザーが好むテーマに合わせて UI をカスタマイズできます。ユーザーは、パソコンでもモバイルでも、オペレーティング システムでライトモード、ダークモード、自動テーマ（時間帯に応じて変化）を設定できます。

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

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

ダークモードの設計

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

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

シャドウを使用して奥行きを作り、要素を前面に引き出す代わりに、要素の背景色にライトを使用して前面に引き出すこともできます。これは、暗い背景ではシャドウの効果が薄れるためです。

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

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

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

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

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

コンテナにレスポンシブ

CSS で最も注目されている新しい分野の一つが、コンテナクエリ（要素クエリとも呼ばれます）です。ページベースのレスポンシブ デザインからコンテナベースのレスポンシブ デザインへの移行が、デザイン エコシステムの進化にどのような影響を与えるかを過小評価することは困難です。

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

Codepen でデモを見る（Canary のフラグの背後）。

この例では、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;
  }

  /* ... */
}

まず、親要素にコンテインメントを設定します。次に、min-width または max-width を使用して、コンテナ内の要素のサイズに基づいてスタイルを設定する @container クエリを作成します。

上記のコードでは、max-width を使用して、リンクを display:none に設定しています。また、コンテナの幅が 850px 未満の場合に、時刻のフォントサイズを小さくしています。

コンテナクエリ カード

このデモの植物ウェブサイトでは、ヒーロー、最近閲覧したアイテムのサイドバー、商品グリッドなど、各商品カードはすべて同じマークアップを持つまったく同じコンポーネントです。

Codepen でデモを見る（Canary のフラグの背後）。

このレイアウト全体を作成するために使用されているメディアクエリはありません。コンテナクエリのみです。これにより、各商品カードが適切なレイアウトにシフトしてスペースを埋めることができます。たとえば、グリッドは 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 でデモを見る（Canary のフラグの背後）。

このデモでは、コンテナクエリを使用して、カレンダーの日付と曜日のレイアウトとスタイルを変更し、予定されたイベントの余白とフォントサイズを調整して、スペースに収まるようにしています。

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

これにより、同じ UI コンポーネント内でマクロ レイアウトとミクロ レイアウトを考慮して、非常に優れたニュアンスのあるデザインを決定できます。

コンテナクエリを今すぐ使用する

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

このフラグを有効にすると、対応する 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 Explainers の図。

折りたたみ式またはフレキシブルな画面、および画面スパンを考慮した設計は、今日のフォーム ファクタのシフトが見られる一例です。また、画面スパンは、これらの新しいフォーム ファクタとニーズに対応するために開発中のもう 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 デザインを検討することも、コンテナクエリとスコープ付きスタイルが非常に重要であるもう一つの理由です。コンポーネント スタイルをページ レイアウト、グローバル スタイル、ユーザー スタイルから分離できるため、より柔軟なレスポンシブ デザインを実現できます。つまり、画面をまたぐニュアンスなど、ページベースのメディアクエリを使用してマクロ レイアウトを設計できるようになりました。同時に、コンポーネントでコンテナクエリを使用してマイクロ レイアウトを使用し、ユーザー設定ベースのメディアクエリを追加して、ユーザー独自の好みやニーズに基づいてユーザー エクスペリエンスをカスタマイズします。

新しいレスポンシブ

これが新しいレスポンシブです。

マクロ レイアウトとミクロ レイアウトを組み合わせ、さらにユーザーのカスタマイズとフォーム ファクタを考慮しています。

これらの変更は、いずれもウェブのデザイン方法に大きな変化をもたらします。しかし、これらを組み合わせることで、レスポンシブ デザインの概念化方法が大きく変化します。ビューポート サイズを超えたレスポンシブ デザインを検討し、コンポーネント ベースのカスタマイズされたエクスペリエンスを向上させるために、これらの新しい軸をすべて検討する必要があります。

レスポンシブ デザインの次の時代が到来しています。すでに自分で試すことができます。

web.dev/learnCSS

CSS のスキルを向上させたい場合や、基本を復習したい場合は、私のチームが web.dev で提供している、完全に無料の新しい CSS コースとリファレンスをご利用ください。web.dev/learnCSS からアクセスできます。

レスポンシブ デザインの次の時代と、それに伴うプリミティブの概要について、お楽しみいただけたでしょうか。また、ウェブデザインの未来にとってこれが何を意味するのか、私と同じようにワクワクしていただければ幸いです。

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