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

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

Una Kravets

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

現在、「レスポンシブ デザイン」という用語を使用するときは、デザインをモバイルサイズからタブレット サイズ、パソコンサイズにサイズ変更する際に、メディアクエリを使用してレイアウトを変更することを考えているのではないでしょうか。

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

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

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

幸いなことに、エコシステムは絶えず変化しています。CSS は進化を続けており、レスポンシブ デザインの新時代が到来しようとしています。

この傾向は約 10 年に 1 回出現しています。10 年前の 2010 年から 2012 年ごろに モバイルとレスポンシブデザインに大きな変化が見られ CSS3 が登場しました

CSS スタイルのタイムライン
出典: ウェブデザイン ミュージアム。

このように、エコシステムは CSS に大きな変更が発生する準備が整っています。Chrome とウェブ プラットフォームのエンジニアは、次世代のレスポンシブ デザインに向けたプロトタイピングと仕様化を行い、実装を開始しています。

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

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

ユーザーへの対応

新しいユーザー設定のメディア機能を使用すると、ユーザー固有の好みやニーズに合わせてウェブ エクスペリエンスのスタイルを設定できます。つまり、優先メディア機能を使用すると、ユーザー エクスペリエンスをユーザーのエクスペリエンスに適応させることができます。

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

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

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

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

prefers-reduced-motion

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

prefers-reduced-motion を使用すると、動作を控えめにしてページをデザインし、このような好みを設定していないユーザーのために動作を拡張したエクスペリエンスを作成できます。

このカードには、両面に情報が表示されます。ベースラインの低モーション エクスペリエンスはその情報を表示するためのクロスフェードであるのに対し、モーション強化エクスペリエンスはカードフリップです。

モーションはオンラインで情報を伝えるうえで非常に重要であるため、低減する動きが「動きがない」という意味ではありません。代わりに、不必要な動作を起こさずにユーザーをガイドする強固なベースライン エクスペリエンスを提供し、そのようなユーザー補助の必要性や好みがなくても、段階的にそのエクスペリエンスを向上させます。

prefers-color-scheme

設定のもう一つのメディア機能は、prefers-color-scheme です。この機能により、ユーザーが希望するテーマに合わせて UI をカスタマイズできます。オペレーティング システムでは、パソコン、モバイルのいずれであるかにかかわらず、ユーザーはライトモード、ダークモード、自動モードのいずれかを設定できます。これらのモードは時間帯によって変化します。

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

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

ダークモードのデザイン

ダークモード用にデザインする際は、背景とテキストの色を反転させたり、スクロールバーを暗くしたりする必要はありません。気づかないこともあります。たとえば、視覚的なバイブレーションを低減するために、暗い背景では色の彩度を下げることが必要になる場合があります。

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

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

マテリアル デザインでは、ダークモードのデザインに関する優れたガイダンスを提供しています。

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

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

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

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

コンテナに応答する

CSS で最も注目されている分野の一つがコンテナクエリです（要素クエリとも呼ばれます）。ページベースのレスポンシブ デザインからコンテナベースのレスポンシブ デザインに移行することで、デザイン エコシステムがどのような進化を遂げるかは、いくら強調してもしきれません。

コンテナクエリの優れた機能の例を紹介します。親コンテナに基づいて、リンクリスト、フォントサイズ、全体的なレイアウトなど、カード要素のスタイルを操作できます。

Codepen のデモ（Canary のフラグの後ろ）をご覧ください。

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

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

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

これには @container at ルールが必要です。これは @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 に設定すると、カード レイアウトは水平方向になります。デフォルトのフレックス方向は「行」です。

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

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

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

Codepen のデモ（Canary のフラグの後ろ）をご覧ください。

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

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

マクロ レイアウトとマイクロ レイアウトを同じ UI コンポーネント内で考えることで、デザインに関する非常に微妙な決定を行えるようになります。

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

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

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

スコープのスタイル

CSS ワーキング グループは、コンテナクエリを基にして、コンポーネントの適切な名前空間と衝突回避に役立つスコープ スタイルについても積極的に議論しています。

スコープ スタイルの図
ミリアム スザンヌが当初設計した図。

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

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

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

スコープを設定すると、「ドーナツ型」のセレクタを作成できます。これにより、スタイルをカプセル化する場所と、そのスコープ設定されたスタイルから抜け出して、よりグローバルなスタイルに戻る場所を指定できます。

たとえば、タブパネルではスコープ付きスタイルを取得し、タブ内のパネルでは親スタイルを取得します。

フォーム ファクタに対応する

レスポンシブ デザインの新時代についての会話における次のトピックは、フォーム ファクタの変化と、ウェブ コミュニティとして設計する必要があるもの（形状シフト画面や仮想現実など）の可能性の高まりです。

スパン図
Microsoft Edge Explainers の図。

現在のフォーム ファクタの変化を示す一例として、折りたたみ式またはフレキシブルな画面、画面にまたがる設計などが挙げられます。これらの新しいフォーム ファクタとニーズに対応するために、画面間の広がりも開発が進められている別の仕様となっています。

この場合、画面スパンの試験運用版のメディアクエリが役立つ可能性があります。現在の動作: @media (spanning: <type of fold>)。このデモでは、2 つの列を持つグリッド レイアウトを設定しています。一方は「--sidebar-width」の幅（デフォルト: 5rem）で、もう一方は 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 ゲームをレベルアップしたい方や、基本を復習したい方のために、私のチームはまったく無料の CSS コースとリファレンスを新しくリリースします。ウェブ開発には web.dev/learnCSS からアクセスできます。

次世代のレスポンシブ デザインの概要と、それに伴うプリミティブのいくつかについて、この概要がお役に立ちましたら幸いです。また、ウェブ デザインの未来にどのような影響があるかについても、非常に楽しみにしていただければ幸いです。

これは、UI コミュニティにとって、コンポーネント ベースのスタイルや新しいフォーム ファクタを採用し、ユーザー レスポンシブなエクスペリエンスを実現する大きな機会をもたらします。