#17「新技術から見る次世代のレスポンシブWebデザイン」

画面幅に応じてレイアウトが変化するビューポートベースのレスポンシブWebデザインが提唱されてから10年以上が経った今、技術が進歩したことでその考え方が変わろうとしています。今回はレスポンシブWebデザインの新しい考え方を、User Preference Media Features、Container Queriesなどの技術を通して紹介します。

※ オフラインのため、音声ファイルを再生できません。ネットワーク状況をご確認の上、再度アクセスしてください。

古川
みなさんこんにちは！
橋本
こんにちは！
古川
ミツエーテックラジオは株式会社ミツエーリンクスのスタッフがWebデザイン、 WebフロントエンドなどのWeb技術に関するニュースや、ツールなどをシェアしたりするためのポッドキャストです。
本日の司会は古川が務めさせていただきます。ゲストは設計チームの橋本くんです。よろしくお願いします！
橋本
よろしくお願いします！
古川
今回のテーマの「新技術から見る次世代のレスポンシブWebデザイン」なんですが、橋本くんは先月開催されたGoogle I/Oの「コンポーネント駆動型環境における新しいレスポンシブ ウェブデザイン」っていうセッションは見ましたか？
橋本
はい、自分はアーカイブで見ました！今まで「レスポンシブデザイン」っていうと、画面幅に対してMedia Queriesでレイアウトを切り替えるデザインのことだけを指していたのが、技術の進歩によって、ユーザーの設定だとかVRなどの多様なデバイスにも対応できつつあるっていうお話でしたね。
古川
うんうん、「マルチデバイス対応」の意味が変わりつつあるってことだと自分は思いました。ビューポートベースではないレスポンシブデザインを、動画では3つの要素で表現してたじゃないですか。
橋本
あー、ユーザーと、コンテナと、フォームファクターですか？
古川
それです。具体的な技術としては、ユーザーについては、prefers-reduced-motionなどのユーザー設定ベースのMedia Queriesが挙げられていて、コンテナについては、Container QueriesとScoped Stylesが挙げられてて、フォームファクターについては、VRデバイスとか形状が変化するスクリーンとかの新たなデバイスへの対応を想定したMedia Queriesっていうのが紹介されていました。
橋本
はい、すでに実装されているものから、仕様段階の技術まで幅広く紹介されていましたね。
古川
Container Queriesなんかは、ちょっと前にフロントエンド界隈で話題になってた印象があります。それでは、それぞれ3つの要素について深掘りしていきたいと思います！
橋本
はい。まずユーザー設定ベースのMedia Queriesについてですけど、ユーザー個別の設定に応じてスタイルを提供できるMedia Queriesです。これは分かりやすい例でいうとダークモード対応ですね。
古川
ダークモードっていうと、Google検索も最近ダークモード対応してましたね。
橋本
はい、かっこいいですよね。ダークモード対応は、CSSのMedia Queriesのprefers-color-schemeを指定することで、ユーザーのOSの設定に応じてライトかダークかデザインを切り替えられるものなんですけど、確か古川さんは当社のWebサイトでダークモード対応してましたよね。
古川
そうですね。2019年ごろに当社のWebサイトリニューアルのプロジェクトがスタートしたんですけど、当時はprefers-color-schemeに各ブラウザが対応しはじめた頃合いで、ダークモードの利点を考えたらやらないわけないよね、みたいな感じで要件に取り入れられたのだと思います。
橋本
あー、なるほど。ちょうど波に乗れるタイミングだったわけですね。ダークモードは個人的にデザインがクールな感じで好きなんですけど、最近だとエコの観点からもダークモードは効果があるんじゃないかとも言われています。古川さんは有機ELってご存じですか？
古川
iPhone Xとか最近のスマホの画面に導入されてきているアレですか？
橋本
それです！有機ELディスプレイだと画面を構成するピクセルが個別に発光する仕組みになっていて、画面を黒にするとその部分の発光がオフになって、その分電力消費が減るんですよ。
古川
へぇ～、あれってそんな仕組みだったんですね！
橋本
はい。なので、有機ELディスプレイを内蔵したスマホでダークモード対応していると、かなりバッテリー消費を抑えることができるので、個人的な感想にはなっちゃうんですけど最近のユーザーはダークモードで見ている人が多いんじゃないかな～と思いますね。
古川
そうですね～。目に優しい感じもしますし、さらにバッテリー消費も抑えられるってなるとダークモード対応のニーズって大きそうですね。
橋本
そうですよね。そのほかダークモード以外にもCSSをユーザー側の要求によって切り替えられるものとしては、画面上のコントラストを高くしたい、低くしたいといったときに使うprefers-contrastと、ページのアニメーションなどの動きを少なくしたいっていうときに使うprefers-reduced-motionなどがあります。prefers-contrastの方はまだどのモダンブラウザでも使えないんですけど、弱視の方などに対してコントラストが高い状態で画面を表示させるなどといった一定のニーズはあると思うので、サポートされたらこちらも積極的に採用していきたいですね。
古川
当社のアクセシビリティBlogに、ハイコントラスト対応についての記事が掲載されていますので、よければそちらもご覧ください。
それでは続いてフォームファクターに対するレスポンシブ対応についてお話ししたいと思うんですけど、こちらはさまざまな形状のデバイスに備えた技術ってことでしたね。
橋本
そうですね。セッションでは、MicrosoftのSurface Duoのように画面に折り目があるフォルダブルデバイスへの対応が取り上げられていました。広く捉えるなら、以前から検討されている円形ディスプレイへの対応も同じカテゴリに含まれると思います。
古川
円形ディスプレイっていうと、スマートウォッチなどのデバイスを指してるんですか？
橋本
そうですね。まだ実装が存在しないらしいんですけど、草案段階の仕様によると、shapeというMedia Queriesによってディスプレイが円形かどうかっていうのを判断できるみたいです。
古川
へぇ～、なるほどです。
橋本
またフォルダブルデバイスについては、ディスプレイが分割されているのが特徴で、2つのディスプレイに渡って1つの画面を表示するといったときに真ん中の区切られた部分を考慮してスタイルを指定できるように、Media QueriesにSpanningっていうのが追加されるようです。で、このSpanningに指定できる値としては、「single-fold-vertical」と「single-fold-horizontal」の2つがあって、それぞれディスプレイが横並び、縦並びの時の指定になります。
古川
いままでお話ししたデバイスってかなり特殊なデバイスの対応だよな～って一瞬思ったんですけど、折りたたみはもちろんなんですが、VRデバイスとか、形状変化するスクリーンとか、従来のフラットスクリーンではないデバイスってもう現実に存在してるので、実はそう遠くない未来を先取りした技術なんじゃないかなと思いました。
橋本
はい、わくわくする仕様ですよね。
さきほど指定できる値が2つって言ったんですけど、この仕様にはMedia Queriesの値以外に、CSSプロパティに使えるenv()という環境変数が用意されています。で、この環境変数は、折りたたまれている山折りの横幅だったり、折りたたみが開始される起点などの取得ができます。
古川
その環境変数ってどんな風に使うんですか？
橋本
たとえば、fold-leftという環境変数の値は左画面の左端から折り目に入るまでの幅のことを指しているので、2カラムレイアウトの時に片方のカラムのwidthにfold-leftを指定して片方のディスプレイをそのカラムで埋めるといったような使い方ができます。また、fold-widthという環境変数の値は画面の折り目部分の幅を指すので、calcを用いてfold-leftとfold-widthを足して右画面の折り目の起点位置を割り出す、といったような使い方もできます。
古川
なるほど、便利そうですね！まだ事例も少なくて、今後もいろんなフォームファクターが登場してくると思うんですけど、それに対応できるようなMedia Queriesっていうのがちゃんと想定されているんで、対応にあんまり困らなさそうな感じがします。
橋本
そうですね。
古川
はい。最後はScoped StylesとContainer Queriesについて見ていきたいと思います。この2つは限られた、ある特定の範囲内にスタイルを適用させることができる技術ですよね。
橋本
はい。Scoped Stylesに関しては、Vue.jsでのScoped CSSがイメージ的に近いかもしれません。
古川
Scoped Stylesをざっくり説明すると、まずスコープのルートとなる要素を@scopeで指定して、その中に子孫セレクタへのスタイルを記載します。そうすると、ルート要素の内側だけにスタイルが適用されて、ルート要素外からのスタイルの影響を受けないようになるっていうものです。
橋本
Vue.jsの時はカスタムデータ属性を用いてコンポーネント単位に影響範囲を閉じてScopeされた状態っていうのを実現していたんですけど、同じ要領でScoped CSSを使ってコンポーネントベースの設計ができそうですね。 あと、もう1つのContainer Queriesについては、これまで画面のビューポート幅によってレイアウトを切り替えていたMedia Queriesとは違って、親コンテナのサイズに基づいてコンポーネントのレイアウトを切り替えることができるものです。
古川
少し前からちょいちょい話題にはなってたんですけど、今後のレスポンシブ対応でかなり重要になってきそうな仕様だと思います。
橋本
そうですね。現状のMedia Queriesだけだとできなかったことや、複雑になってしまっていた構造を、Container Queriesで解決できることっていうのは結構多い気がしてます。この名前にもなっているコンテナっていうのが、他の要素を含むラッパー要素のことを指していて、同じコンポーネントでも、親要素のサイズによってレイアウトのバリエーションを変えたりだとか、たとえばサイドバーがある2カラムデザインがあったときに、ビューポートではなくて、サイドバーの親コンテナの伸縮に合わせてサイドバーのレイアウトを変える、といったようなことができたりします。
古川
今まではビューポート幅に依存してレイアウトが一括で切り替わる感覚だったんですけど、今度はそれぞれのコンポーネントの親コンテナの幅に依存してデザインが切り替わるようになるので、結構ここの違いがこの技術の利点でもあって、扱いが難しいなと感じるポイントだと思いました。Container QueriesをうまくWebサイトのデザインに活用するには、デザイナーさんの理解が必須になりそうですね。
橋本
そうですね。デザインの段階でしっかりルール化されているかどうかが重要になってきそうなので、デザイナーの方と共に連携して取り組むことで、より新しいレスポンシブデザインが発展していくような気がします！
古川
はい、ここまで新しいレスポンシブデザインのための技術を見てきたんですけど、いかがでしたしょうか。新技術って聞いてしまうと、そっちのほうが優れてると思いがちなんですが、従来のビューポートベースのレスポンシブが時代遅れっていう意味ではなくて、今までの技術と新しい技術を組み合わせるっていうことが今後のレスポンシブデザインの考え方のようです。
橋本
ページの要素にビューポートで一元的にスタイルを設定するのではなくて、コンポーネントごとに独立してスタイルが設定できるようになると、Webサイトの要素同士の結合度を下げることができるので、開発者的にはその点はかなり嬉しいなと思います。
古川
うん、そうですね。一方で、疎結合になったことによってデザイナーさんが意図しないコンポーネントの組み合わせができやすくなってしまったりもするので、そのあたりはルール作りやデザイナーさんとの認識合わせをしっかりするなどで気をつけたいですね。
橋本
そうですね。今日お話しした技術はChromeにはすでに実装されているものもあるので、どういうメリット・デメリットがあるのかっていうところをきちんと把握しておくためにも、ぜひ試してみてください。
古川
はい。ということで、最後に、ミツエーリンクスではスマートなコミュニケーションをデザインしたいUIデザイナー、UI開発者を募集しています。採用サイトではオンライン説明会やオンライン面接なども行っていますので、ぜひチェックしてみてください。
また、このPodcastはApple Podcast、 Google Podcast、Spotify、YouTubeで配信をしていますので、お好みのプラットフォームでフォローいただけると、最新のエピソードをすぐに視聴できます！こちらもぜひご活用ください。
それでは今日はこの辺で！ありがとうございました！
橋本
ありがとうございました！