新しいレスポンシブ。駆動型コンポーネントでのウェブデザイン（翻訳）
著者：Una Kravets
Twitter
GitHub
Blog
新しいレスポンシブ。駆動型コンポーネントでのウェブデザイン
レスポンシブWebデザインの新時代における、マクロとミクロのレイアウトをコントロールする。
https://www.youtube.com/watch?v=jUQ2-C5ZNRc&t=13s
レスポンシブデザインの現状
今日、「レスポンシブ・デザイン」という言葉を使うとき "レスポンシブデザイン」というと、モバイルサイズからタブレットサイズ、デスクトップサイズへとデザインのサイズを変更する際に、メディアクエリを使ってレイアウトを変更することを思い浮かべる人が多いでしょう。
しかし、レスポンシブデザインに対するこの認識は、ページレイアウトにテーブルを使用するのと同様に、すぐに時代遅れのものとみなされるかもしれません。
ビューポートベースのメディアクエリは、強力なツールではありますが、繊細さに欠けます。ユーザーのニーズに対応する機能や、コンポーネント自体にレスポンシブスタイルを注入する機能もありません。
ここでいうコンポーネントとは、カードやサイドバーのように他の要素で構成されているものも含めて、要素を意味します。これらのコンポーネントがWebページを構成しています。
新しいレスポンシブ。コンポーネント・ドリブンな世界でのウェブデザイン
グローバルなビューポート情報を使ってコンポーネントにスタイルを与えることはできますが、コンポーネントは自分のスタイルを持っていないので、デザインシステムがページベースではなくコンポーネントベースである場合にはうまくいきません。
しかし、エコシステムは急速に変化しています。CSSは進化しており、レスポンシブデザインの新しい時代がすぐそこまで来ています。
これは約10年に一度の割合で起こる現象です。10年前の2010年から2012年にかけては、モバイルとレスポンシブデザイン、そしてCSS3の登場で大きな変化がありました。
これでまた、エコシステムがCSSにかなり大きな変化を起こす準備が整ったことになります。Chromeをはじめとするウェブプラットフォームのエンジニアは、次の時代のレスポンシブデザインに向けて、プロトタイプの作成、仕様の策定、実装に取り組んでいます。
これらのアップデートには、ユーザープリファレンスベースのメディア機能、コンテナクエリ、折り畳み式スクリーンなどの新しいスクリーンタイプ用のメディアクエリが含まれます。
ユーザーへの対応力 #
新しいユーザー・プリファレンス・メディア機能により、ユーザー自身の特定の好みやニーズに沿ったウェブ体験をスタイリングすることができます。つまり、プリファレンス・メディア機能を使えば、ユーザーの体験に合わせてユーザー体験を調整することができるのです
これらのユーザープリファレンスメディア機能には以下のものがあります。
・縮小された動きを好む
・コントラストを好む
・透明度を下げてほしい
・カラースキームを好む
・色の反転
・その他
環境設定機能は、ユーザーがオペレーティングシステムで設定した環境設定を拾い上げ、より堅牢でパーソナライズされたウェブ体験を構築するのに役立ち、特にアクセシビリティを必要とするユーザーに適しています。
prefers-reduced-motion
OSの環境設定で動きを抑えるように設定しているユーザーは、一般的にコンピュータを使用する際に、より少ないアニメーションを求めています。したがって、ウェブ利用時の派手なイントロ画面、カードフリップアニメーション、複雑なローダ、その他の派手なアニメーションを好まないと考えられます。
prefers-reduced-motionを使えば、動きの少ないページを念頭に置いてデザインすることができ、このプリファレンスセットを持っていない人のために動きを強調した体験を作り出すことができます。
このカードには両面に情報が書かれています。ベースラインの動きを抑えた体験では、その情報をクロスフェードで表示し、動きを強調した体験では、カードをめくることができます。
動きはオンラインで情報を伝えるために非常に重要であるため、Preferences-reduced-motionは「動きがない」という意味ではありません。むしろ、不必要な動きをせずにユーザーを誘導する、しっかりとしたベースラインのエクスペリエンスを提供し、アクセシビリティのニーズや好みを持たないユーザーのために、そのエクスペリエンスを徐々に強化していきましょう。
prefers-color-scheme
プリファレンスメディアのもう一つの機能は「prefers-color-scheme」です。この機能は、ユーザーの好みのテーマに合わせてUIをカスタマイズするのに役立ちます。デスクトップでもモバイルでも、ユーザーはオペレーティングシステムにおいて、ライトテーマ、ダークテーマ、オートテーマなどの好みを設定することができ、時間帯によっても変化します。
CSSのカスタムプロパティを使ってページを設定すれば、色の値を入れ替えることが簡単にできます。backgroundColorやtextOnPrimaryなどのカラーテーマの値を素早く更新し、メディアクエリ内で新しいテーマに動的に合わせることができます。
これらの環境設定クエリの一部を簡単にテストするために、毎回システム環境設定を開く代わりに、DevToolsを使用してエミュレーションを行うことができます。
Designing for dark theme
ダークテーマのデザインでは、背景色と文字色を反転させたり、スクロールバーを暗くしたりするだけではありません。意外と知られていない注意点があります。例えば、暗い背景では、視覚的な振動を抑えるために、色を脱色する必要があるかもしれません。
影を使って奥行きを出して要素を前に出すのではなく、要素の背景色に光を使って要素を前に出すのがよいでしょう。暗い背景では影の効果が薄れるからです。
[動画]
マテリアルデザインには、ダークテーマのデザインに関する素晴らしい指針があります。
ダークテーマは、よりカスタマイズされたユーザー体験を提供するだけでなく、AMOLEDスクリーンのバッテリー駆動時間を大幅に改善することができます。AMOLEDスクリーンは、最近のハイエンド携帯電話に搭載されているスクリーンで、モバイル機器全体でますます普及しています。
[動画]
ダークテーマに関する2018年のAndroidの調査では、画面の明るさや全体的なユーザーインターフェースに応じて、最大60％の電力消費の削減が見られました。この60％という統計は、アプリのUIにダークテーマを使用した場合とライトテーマを使用した場合で、画面の明るさ100％で動画を一時停止したYoutubeの再生画面を比較したものです。
可能な限り、ユーザーには常にダークテーマでの体験を提供すべきです。
Responsive to the container
CSSで最も注目されている分野の1つがコンテナクエリで、エレメントクエリとも呼ばれています。ページベースのレスポンシブデザインからコンテナベースのレスポンシブデザインへの移行が、デザインエコシステムを進化させることを考えると、その効果は計り知れません。
コンテナクエリが提供する強力な機能の一例をご紹介します。親コンテナに基づいて、リンクリスト、フォントサイズ、全体のレイアウトなど、card要素のあらゆるスタイルを操作することができます。
Codepenのデモをご覧ください（Canaryの旗の後ろ）。
この例では、2つの異なるコンテナサイズを持つ2つの同じコンポーネントが、CSS Gridを用いて作成されたレイアウトの中でスペースを占有しています。それぞれのコンポーネントは、固有のスペース割り当てに適合し、それに応じてスタイルを変更します。
このような柔軟性は、メディアクエリだけでは実現できません。
コンテナクエリは、レスポンシブデザインに、よりダイナミックなアプローチをもたらします。つまり、このカードコンポーネントをサイドバーやヒーローセクション、あるいはページ本体内のグリッドに配置した場合、コンポーネント自体がレスポンシブ情報を所有し、ビューポートではなくコンテナに合わせてサイズを調整することができます。
これには @container という at-rule が必要です。これは @media を使ったメディアクエリと同じように動作しますが、代わりに @container はビューポートやユーザーエージェントではなく、親コンテナに情報を問い合わせます。
.card {
contain: size layout;
}
@container (max-width: 850px) {
.links {
display: none;
}
.time {
font-size: 1.25rem;
}
/* ... */
}まず、親要素に containment を設定します。次に、@containerクエリを記述して、コンテナ内のすべての要素のスタイルを、min-widthまたはmax-widthを使用して、そのサイズに基づいて設定します。
上のコードでは、max-widthを使用し、コンテナの幅が850px未満の場合は、リンクをdisplay:noneに設定し、時間のフォントサイズを小さくしています。
Container query cards
この植物のデモサイトでは、ヒーローの商品カード、最近見た商品のサイドバー、商品グリッドなど、それぞれの商品カードがすべて同じコンポーネントで、同じマークアップがされています。
このレイアウト全体の作成には、メディアクエリは使用せず、コンテナクエリのみを使用しています。これにより、各製品カードがスペースに合わせて適切なレイアウトに移行することができます。例えば、グリッドはminmaxカラムレイアウトを使用して、要素がそのスペースに流れ込むようにし、そのスペースが圧縮されすぎた場合（つまり、最小サイズに達した場合）、グリッドを再レイアウトします。
.product {
contain: layout inline-size;
}
@container (min-width: 350px) {
.card-container {
padding: 0.5rem 0 0;
display: flex;
}
.card-container button {
/* ... */
}
}グリッドに350px以上のスペースがある場合、カードレイアウトはdisplay: flexに設定され、デフォルトのフレックス方向が「row」となるため、水平になります。
スペースが少ない場合は、商品カードを重ねて表示します。各商品カードは、グローバルスタイルだけでは不可能な、独自のスタイルを持っています。
Mixing Container Queries with Media Queries
コンテナクエリには非常に多くの使用例があり、その一つがカレンダーコンポーネントです。コンテナクエリを使うと、カレンダーのイベントやその他のセグメントを、親の利用可能な幅に応じて再配置することができます。
このデモでは、コンテナクエリを使用して、カレンダーの日付と曜日のレイアウトとスタイルを変更し、予定されているイベントの余白とフォントサイズを調整して、スペースに合わせて表示しています。
さらに、メディアクエリを使って、小さな画面サイズに合わせてレイアウト全体を移動させます。この例では、メディアクエリ（グローバルスタイルやマクロスタイルの調整）とコンテナクエリ（コンテナの子やそのマイクロスタイルの調整）を組み合わせることで、いかに強力な効果を発揮するかを示しています。
このように、マクロとミクロのレイアウトを同じUIコンポーネントの中で考えることで、微妙なデザインの決定が可能になります。
今時なコンテナクエリの使い方
これらのデモは、Chrome Canaryでフラグを立てて遊べるようになりました。Canaryのabout://flagsにアクセスし、 #enable -container-queriesフラグをオンにします。これにより、@containerのサポート、containプロパティのinline-sizeとblock-sizeの値、LayoutNG Gridの実装が有効になります。
Scoped styles
コンテナクエリに加えて、CSS ワーキンググループでは、コンポーネントの適切な名前付けと衝突回避を支援するためのスコープ付きスタイルについても積極的に議論しています。
図はMiriam Suzanne氏によるオリジナルデザインです。
スコープされたスタイルは、名前の衝突を避けるためにパススルーやコンポーネント固有のスタイリングを可能にします。これは、多くのフレームワークや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 つの列を持つグリッドレイアウトを設定しています。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に開設しました。web.dev/learnCSSからアクセスできます。
次の時代のレスポンシブデザインの概要と、それに伴って登場するプリミティブのいくつかをお楽しみいただけましたら幸いです。また、このことがウェブデザインの未来にとってどのような意味を持つのか、私と同じようにワクワクしていただけましたら幸いです。
コンポーネントベースのスタイルや新しいフォームファクターを採用し、ユーザーに反応する体験を生み出すことは、私たちUIコミュニティに大きなチャンスを与えてくれます。