2021年7月9日 進化し続けるレスポンシブWebデザイン

ミツエーテックラジオの#17「新技術から見る次世代のレスポンシブWebデザイン」は、既にお聞きに（ないし、全文書き起こしをお読みに）なったでしょうか？5月に催されたイベント、Google I/Oのいちセッション「コンポーネント駆動型環境における新しいレスポンシブ ウェブデザイン」を紹介した回です。

ビューポート、つまりWebブラウザのコンテンツ表示領域に応じてページのレイアウトを変化させるという、従来のレスポンシブWebデザインに対する認識は、遠からずテーブルレイアウトのように時代遅れになるかもしれない、とUna Kravets氏は語ります。

何もレスポンシブWebデザインという考え方、アプローチが消えてなくなるとか、そういうわけではありません。従来、各モジュール（Webページを構成するUI部品のこと、上述の「コンポーネント」と同義）の表示は、そのバリエーションをビューポート幅によってのみ規定するのが一般的でした。

今後、CSSの進化（Container QueriesやScope & Encapsulation）に伴い、個別かつ柔軟にモジュール単位で表示を制御できるようになります。これはあくまでCSS設計における開発しやすさの変化ですから、どちらかというとUser Experience（UX）よりDeveloper Experience（DX）にフォーカスしたお話です。

UX視点において、レスポンシブWebデザインに今後もたらされるであろう変化としてKravets氏が論じているのが、より多様なフォームファクターへの対応、そしてユーザーの嗜好に基づく対応の2つです。

前者については、複数の表示画面を有するようなデバイス、具体的にはMicrosoftのSurface Duoのような折り畳みデバイスへの対応が挙げられます。同様のハードウェアの選択肢は市場にまだ多くありませんが、対応に必要な仕様（Web Platform Primitives for Enlightened Experiences on Foldable Devices）は検討が進んでおり、将来が楽しみです。

後者については、いわゆるダークモード対応を含め、より先進的なCSSメディアクエリーを活用することになります。その点については、実は昨年書いたコラム「レスポンシブWebデザイン、生誕10周年」のなかで私自身、主張していたことです：

デザインがユーザーの閲覧環境に応答できる対象は、既に表示スクリーンのサイズだけではなくなっています。昨今話題になることの多いダークモード対応（OSのカラースキームにWebページのそれを適応させる対応）ですとか、アニメーションなどの動きの最小化ニーズに応えるためのprefers-reduced-motionの活用も、拡大解釈をすればレスポンシブWebデザインの範疇と私は考えます。

CSSメディアクエリーで今後、どのようなものが利用できるようになるかは、まだ草案段階であることに注意いただきつつ、Media Queries Level 5（有志の方による日本語訳：Media Queries Level 5 （日本語訳））を眺めておくと良いでしょう。

かくしてレスポンシブWebデザインは、ユーザーの閲覧環境なり閲覧行為における嗜好に対し、ますます寄り添うことができるよう進化し続けていると言えます。まだどのブラウザでも一律に利用できる状況にありませんが、Network Information APIのような技術がこの進化に加わることで、ネットワークへの接続状況を踏まえたコンテンツのカスタマイズも可能になると思います。

もとより紙媒体と異なり、Webコンテンツの表示は一律ではなく、むしろ変幻自在。コンテンツをどう表示させるか、その決定権が圧倒的にユーザーに委ねられているのがWebの特徴であり、同時にWebらしさの極みでもあると私は思います。

その前提に立ったとき、Webコミュニケーションの効率や効果を最大化する目的において、どこまで・どうコンテンツの表示はユーザーに寄り添うべきでしょうか？上述のとおり、技術的にはかなりの部分が実現可能になってきているのは確かですが、当然ながら運用コストとのバランスを踏まえた検討は欠かせません。

進化のスピードに後れをとることなく、お客様それぞれに最適なレスポンシブWebデザインをご提供できるよう、引き続き調査・研究を続けたいと思います。