CSSの進化がすごすぎる！新しいレスポンシブデザインの実装方法を解説

現在のレスポンシブデザインは、ビューポートにもとづいてレイアウトを最適化しています。しかし、新しいレスポンシブデザインでは、アニメーションが不要なユーザーには動きを少なくしたり（無くしたり）、親コンテナの幅にもとづいてコンポーネントを最適化したり、スコープ付きスタイルやフォームファクターなど、ユーザーの好みや環境に合わせて最適なコンテンツを提供できるようになります。

これらの新しいレスポンシブデザインのコンセプト・実装方法を紹介します。CSSがこれまで以上に進化します。

The new responsive: Web design in a component-driven world
by Una Kravets

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• レスポンシブデザインの現状
• ユーザーでレスポンシブ
• コンテナでレスポンシブ
• フォームファクターでレスポンシブ
• 終わりに

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

現在「レスポンシブデザイン」という用語を使用する際、スマホ・タブレット・デスクトップのサイズにデザインをサイズ変更するときにメディアクエリを使用してレイアウトを変更することを思い浮かべる人が多いと思います。

しかし、ページレイアウトにテーブルを使用するのと同様に、レスポンシブデザインに対するこのような認識は時代遅れのものになるかもしれません。

ビューポートベースのメディアクエリは強力なツールですが、精巧さに欠けます。ユーザーのニーズに対応する機能やコンポーネント自体にレスポンシブを適用する機能がありません。

注: この記事におけるコンポーネントとは、カードやサイドバーのように他の要素で構成されているものも含む要素を意味します。これらのコンポーネントがWebページを構成します。

グローバルなビューポート情報を使ってコンポーネントにスタイルを与えることはできますが、コンポーネントは自分のスタイルを持っていないので、デザインシステムがページベースではなくコンポーネントベースである場合には機能しません。

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

CSSの大きな変革はだいたい10年周期で発生しています。10年前の2010年頃にスマホやレスポンシブデザイン、そしてCSS3が登場しました。

ソース: Web Design Museum

上記のように、エコシステムはCSSにかなり大きな変化を起こす準備ができていることが分かります。ChromeをはじめとするWebプラットフォームのエンジニアは、次の時代のレスポンシブデザインに向けて、プロトタイプの作成・仕様の策定・実装に取り組んでいるのが現状です。

これらのアップデートには、ユーザープリファレンスに基づくメディア機能、コンテナクエリ、折り畳み式スクリーンなどの新しいタイプのスクリーン用のメディアクエリが含まれています。

次の時代のレスポンシブデザイン

ユーザーでレスポンシブ

新しいユーザープリファレンスのメディア機能により、ユーザー自身の設定やニーズに合わせて最適化されたWebエクスペリエンスのスタイルを提供することができます。つまり、プリファレンスのメディア機能を使用すると、ユーザーエクスペリエンスをあなた個人のユーザーエクスペリエンスに適合させることができます。

プリファレンスのメディア機能は下記の通りです。

• prefers-reduced-motion
• prefers-contrast
• prefers-reduced-transparency
• prefers-color-scheme
• inverted-colors
• 他にもあります。

プリファレンス機能はユーザーがOSで設定した環境設定を参照し、特にアクセシビリティを必要とするユーザーに対してより堅牢でパーソナライズされたWebエクスペリエンスを提供します。

環境設定から情報を参照

prefers-reduced-motion

OSの環境設定で動作（Motion）を減らすように設定しているユーザーは、一般的にコンピュータを使用する際により少ないアニメーションを求めています。そのため、Webを使用する際は派手なイントロ画面やカードフリップのアニメーションや複雑なローダーなど、派手なアニメーションを好まないと考えられます。

prefers-reduced-motionを使用すると、Webページの動作を抑えてデザインすることができ、この環境設定をしていない人には動作を強化したエクスペリエンスを提供できます。

上: 動作を減らしたUI、下: 動作を強化したUI

上記のカードには両面に情報があります。Baselineの動作を減らした方はクロスフェードで裏の情報を表示し、Added Motionの動作を強化した方はカードをめくることができます。

オンラインで情報を伝えるためには動作（Motion）が非常に重要であるため、prefers-reduced-motionは「動作なし）という意味ではありません。代わりに、不必要な動作をさせずにユーザーを誘導する基本的なエクスペリエンスを提供し、アクセシビリティのニーズや好みがなくても、ユーザーにそのエクスペリエンスを段階的に強化します。

prefers-color-scheme

プリファレンスメディアのもう一つの機能はprefers-color-schemeです。この機能は、ユーザーの好みのテーマに合わせてUIをカスタマイズするのに役立ちます。デスクトップでもスマホでもユーザーがOSに設定（ライト・ダークなど）を使用することができ、時間帯によって変化させることもできます。

CSSの変数（カスタムプロパティ）でページを設定すると、カラー値の変換が簡単になります。backgroundColorやtextOnPrimaryなどのカラーテーマ値を素早くアップデートして、メディアクエリ内で新しいテーマに合わせて動的に適用できます。

ライト・ダークをOSの設定から使用できる

これらのプリファレンスクエリは検証するためにシステムの環境設定を変更する代わりに、デベロッパーツールでエミュレーションできます。

デベロッパーツールで簡単に検証できる

ダークテーマのデザイン

ダークテーマ用にデザインする場合、背景色と文字色を反転させるだけでいいというわけではありません。意外と知られていない注意点があります。例えば、ダークテーマの背景では視覚的な振動を抑えるために暗い背景の色の彩度を下げる必要があります。

ダークテーマでは、暗い背景の色の彩度を下げる

シャドウで奥行きを出して要素を前に出すのではなく、要素の背景色にライトを使用して要素を前に出すことをお勧めします。なぜなら、暗い背景ではシャドウがそれほど効果的ではないからです。

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

ダークテーマは、よりカスタマイズされたユーザーエクスペリエンスを提供するだけでなく、AMOLEDスクリーンのバッテリー寿命を大幅に改善することもできます。AMOLEDスクリーンは最近のスマホに搭載されているスクリーンで、モバイルデバイス全体でますます普及しています。

ダークテーマは、スクリーンの寿命を大幅に改善する

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

可能な限り、ダークテーマのエクスペリエンスを提供する必要があります。

コンテナでレスポンシブ

CSSで現在最も注目されている分野の1つは、要素クエリとも呼ばれているコンテナクエリです。ページベースのレスポンシブデザインからコンテナのレスポンシブデザインへの移行が、デザインのエコシステムを進化させることを考えると、その効果は計り知れません。
参考: CSS コンテナクエリの基礎知識と便利な使い方を解説

コンテナクエリが提供する強力な機能を少し紹介します。例えばカードのUIコンポーネントで、親コンテナの幅に基づいて全体的なレイアウトやリンクリストやフォントサイズのスタイルを最適化できます。

デモページ: 親コンテナの幅に基づいて、スタイルが最適化される

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

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

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

コンテナクエリの実装には@containerが必要です。@mediaのメディアクエリと同じように機能しますが、コンテナクエリの@containerはビューポートやユーザーエージェントではなく、親コンテナの情報を参照します。

まず親要素にcontainプロパティを定義します。次に@containerクエリでmin-widthまたはmax-widthを使用して、サイズに基づいてコンテナ内の要素のスタイルを定義します。

上記のCSSではmax-widthを使用し、コンテナの幅が850px未満の場合は.linkを非表示に、.timeのフォントサイズを小さくしています。

コンテナクエリを使用したカード

下記のデモサイトでは、ヒーローに1つ、最近表示したアイテムのサイドバー、プロダクトのグリッドなど、それぞれのカードはすべて同じコンポーネントで、同じマークアップで実装されています。

デモページ: ヒーロー・サイドバー・グリッドのカードはすべて同じ

このレイアウトはメディアクエリではなく、コンテナクエリのみで実装されています。これにより、各カードは配置されるスペースに合わせて適切なレイアウトで表示されます。例えば、グリッドはminmaxカラムレイアウトを使用して要素をスペースに流し込み、スペースが小さい場合（つまり最小サイズの場合）はグリッドが再レイアウトします。

グリッドに350px以上のスペースがある場合、カードのレイアウトはdisplay: flex;に設定されることで水平配置になります。これはデフォルトがrowだからです。

スペースが少ない場合は、カードのレイアウトは積み重ねられます。グローバルスタイルだけでは不可能なことですが、各カードは自分でスタイルを設定しています。

コンテナクエリとメディアクエリのミックス

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

デモページ

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

さらに、メディアクエリを使って、小さな画面サイズに合わせてレイアウト全体を変化させます。このデモでは、メディアクエリ（グローバルスタイルやマクロスタイルの調整）とコンテナクエリ（コンテナの子やそのマイクロスタイルの調整）を組み合わせることで、いかに強力な効果を発揮するかを示しています。

このように、マクロとミクロのレイアウトを同じUIコンポーネントの中で考えることで、繊細なニュアンスのあるデザインの決定をおこなうことができます。

コンテナクエリを使用するには

コンテナクエリのデモは、Chrome Canaryのフラグで動作します。Canaryのアドレスバーに「chrome://flags」を入力し、#enable-container-queriesのフラグをオンにします。

オンにすると、@container, containプロパティのinline-sizeとblock-size値、およびLayoutNGグリッドの実装のサポートが有効になります。

スコープ付きスタイル

コンテナクエリをベースにCSSワーキンググループでは、コンポーネントの適切な名前空間と衝突回避を支援するためのスコープ付きスタイルについても積極的に議論されています。

図: Miriam Suzanne

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

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

例えば、タブでスコープスタイルを取得するタブパネルや、タブ内のパネルで親スタイルを取得する場合があります。

フォームファクターでレスポンシブ

レスポンシブデザインの新時代を語る上で次のテーマはフォームファクターの変化、Webコミュニティとしてデザインする必要があるもの（形状変化するスクリーンやバーチャルリアリティなど）の可能性の高まりです。

形状変化するスクリーン: Microsoft Edge Explainers

フォームファクターとは形状要因で、折りたたみ式やフレキシブルなスクリーン、2つのスクリーンを繋げたスクリーンスパニングなど、今日のフォームファクターの変化を確認できます。そして、screen-spanningはこれらの新しいフォームファクターをカバーするために取り組まれている新しい仕様です。

screen-spanningの実験的なメディアクエリの情報は、MSEdgeExplainersが役立ちます。現在は、@media (spanning: <type of fold>)で動作します。

デモでは、2つの列を持つグリッドレイアウトを設定しています。列の幅は1つは--sidebar-width（デフォルトは5rem）で、もう1つは1frです。このレイアウトを折りたたみ式のデュアルスクリーンで表示すると、--sidebar-widthの値は左の折り目のenv値になります。

これにより、サイドバー（ここではナビゲーション）が片方の折り目のスペースを埋め、アプリのUIがもう片方の折り目を埋めるレイアウトが可能になります。これにより、UIに折り目が発生することを防ぎます。

Chromeのデベロッパーツールで折りたたみ式スクリーンをエミュレーションでき、ブラウザ上で直接スクリーンスパニングのデバッグやプロトタイプを作成できます。

終わりに

フラットスクリーン以外のUIデザインを追求するためには、コンテナクエリとスコープ付きスタイルが非常に重要となります。

コンテナクエリは、コンポーネントのスタイルをページレイアウトやグルーバルスタイル・ユーザースタイルから分離する機会を与え、より弾力性のあるレスポンシブデザインを可能にします。つまり、ページベースのメディアクエリを使用して、スクリーン全体のニュアンスを含めたマクロレイアウトがデザインできるようになります。同時に、コンポーネントのコンテナクエリでマイクロレイアウトを使用したり、ユーザープリファレンスベースのメディアクエリを追加して、ユーザーの好みやニーズに応じてユーザーエクスペリエンスをカスタマイズすることもできます。

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

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

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

レスポンシブデザインの次の時代は、すでに始まっています。

web.dev/learnCSS

もしあなたがCSSのスキルをアップさせたい、知識を再確認したい場合、私のチームは完全に無料のCSSコースとリファレンスをweb.devで公開しました。
web.dev/learnCSSからアクセスできます。

レスポンシブデザインの次の時代とそれに伴って登場するプリミティブについて、お楽しみいただけましたでしょうか。また、これがWebデザインの将来にとってどのような意味を持つのか、私と同じようにワクワクしていることを願っています。

コンポーネントベースのスタイルや新しいフォームファクターを採用し、ユーザーの好みに対応するエクスペリエンスを生み出すことは、UIコミュニティに大きなチャンスを与えてくれます。