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

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

Una Kravets

今日のレスポンシブ デザイン

今日、「レスポンシブ デザイン」という用語を使用する場合、モバイルサイズからタブレットサイズ、デスクトップサイズまでデザインのサイズを変更する際に、メディアクエリを使用してレイアウトを変更することを考えるでしょう。

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

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

グローバル ビューポート情報を使用してコンポーネントのスタイルを設定できますが、コンポーネントは依然としてスタイルを所有しておらず、デザイン システムがページベースではなくコンポーネント ベースの場合には機能しません。

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

このような現象は 10 年に 1 回程度発生します。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 を使用できます。

ダークモードに対応した設計

ダークテーマを設計する際は、背景色とテキストの色を反転させたり、暗いスクロールバーを使用したりするだけではありません。ここでは、あまり知られていない考慮事項をいくつかご紹介します。たとえば、視覚的な振動を軽減するために、暗い背景の色の彩度を下げる必要がある場合があります。

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

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

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

ダークテーマは、ユーザー エクスペリエンスをカスタマイズできるだけでなく、AMOLED 画面ではバッテリー寿命を大幅に改善できます。これらは、新しいハイエンド スマートフォンで採用されている画面であり、モバイル デバイス全体でますます普及しています。

このグラフィックが最初に表示されたトークのスクリーンショット

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

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

コンテナに対応

CSS で最もエキサイティングな新興分野の 1 つは、コンテナクエリです。これは要素クエリとも呼ばれます。ページベースのレスポンシブ デザインからコンテナベースのレスポンシブ デザインへの移行が、デザイン エコシステムをどのように進化させるかについては、過小評価することはできません。

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

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

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

このような柔軟性は、メディアクエリだけでは実現できません。

コンテナクエリを使用すると、レスポンシブ デザインに動的なアプローチを適用できます。つまり、このカード コンポーネントをサイドバーやヒーロー セクション、またはページのメイン本文内のグリッドに配置した場合、コンポーネント自体がレスポンシブ情報を所有し、ビューポートではなくコンテナに応じてサイズが調整されます。

これには @container アットルールが必要です。これは @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 に設定されて水平方向に配置されます。display: flex のデフォルトの flex-direction は「row」です。

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

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

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

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

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

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

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

現在のコンテナ クエリの使用

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

このフラグは、対応する 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 つです。画面をまたぐ機能は、これらの新しいフォーム ファクタとニーズに対応するために取り組んでいるもう 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;
}

これにより、サイドバー（この場合はナビゲーション）が 1 つの折りたたみスペースを埋め、アプリ UI がもう 1 つの折りたたみスペースを埋めるレイアウトが可能になります。これにより、UI の「折り目」を防ぐことができます。

Chrome DevTools エミュレータで折りたたみ式スクリーンをテストして、ブラウザで直接スクリーン スパンをデバッグし、プロトタイプを作成できます。

まとめ

フラットな画面を超えた UI デザインを検討することも、コンテナ クエリとスコープ付きスタイルが重要な理由の一つです。コンポーネントのスタイルをページ レイアウト、グローバル スタイル、ユーザー スタイルから分離できるため、より柔軟なレスポンシブ デザインが可能になります。つまり、画面全体に及ぶニュアンスを含め、ページベースのメディアクエリを使用してマクロ レイアウトを設計できるようになりました。同時に、コンポーネントでコンテナクエリを使用してマイクロ レイアウトを使用し、ユーザー設定ベースのメディアクエリを追加して、ユーザーの独自の好みやニーズに基づいてユーザー エクスペリエンスをカスタマイズします。

新しいレスポンシブの円

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

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

これらの変更のいずれか 1 つだけでも、ウェブの設計方法に大きな変化をもたらすでしょう。しかし、これらを組み合わせると、レスポンシブ デザインの概念そのものが大きく変化していることがわかります。ビューポートのサイズを超えてレスポンシブ デザインを考え、コンポーネント ベースのカスタマイズされたエクスペリエンスを向上させるために、これらの新しい軸をすべて考慮する時期が来ています。

レスポンシブ デザインの次の時代が到来しました。ぜひご自身で試してみてください。

web.dev/learnCSS

CSS のスキルアップや基本の復習をしたい方のために、私のチームは web.dev でまったく新しい無料の CSS コースとリファレンスをリリースしました。web.dev/learnCSS からアクセスできます。

レスポンシブ デザインの次の時代と、それに伴うプリミティブについてご紹介しました。ウェブ デザインの未来について、皆様も私と同じようにワクワクしていただければ幸いです。

UI コミュニティにとって、コンポーネント ベースのスタイルや新しいフォーム ファクタを採用し、ユーザーの操作に応じたエクスペリエンスを作成する大きなチャンスとなります。