Web開発者にフォーカスしたPolypaneブラウザを開発したKilian Valkhof氏は、HalfStackカンファレンスで、Web開発者とデザイナがレスポンシブデザインから一歩進むことによって、さらに優れたユーザエクスペリエンスの提供を可能にする、新たな方法について講演した。Webの標準化過程にある最新のブラウザ機能を用いることで、ユーザの嗜好や環境、ネットワーク条件、デバイス機能に適応することが可能になるのだ。
登場から10年を経たレスポンシブWebデザインは、ビューポートのサイズにレイアウトを適応させるというアイデアを導入しているため、有効スペースを満たすためのコンテンツの移動と再配置を行う。これによってデザイナと開発者は、かつてないほど多くのデバイスフォームファクタや入力モード、そしてブラウザに対応することが可能になった。このパラダイムの産物として生まれたCSSメディアクエリは2012年、Web標準として追加されている。CSSメディアクエリには13のメディア機能が含まれており、主として解像度やサイズ、方向、画面やデバイスのレシオといった問題を解決する。
Valkhof氏は、ユーザの嗜好や環境、ネットワーク条件、デバイス機能によるユーザエクスペリエンスのカスタマイズを包含するコンセプトを導入し、これを暫定的にレスポンシブWebサイトと呼んだ。氏の説明によれば、
レスポンシブWebサイトでは、単にビューポートのサイズに反応するだけではなく、ユーザの嗜好を積極的に適用します。
[…]
私たちは通常、デバイスの能力を判断することはしますが、本当に必要なのはユーザやユーザの環境、ユーザの好みに対応することなのです。デバイスはその代役に過ぎません。
最新のCSS Media Queries (レベル5)仕様ではUser Preferenceメディアフィーチャが、既存の標準(レベル3)と、間もなく登場する候補推奨(レベル4)に対して追加されている。CSS Media Queriesレベル5は、現在はまだW3C標準化プロセスにおけるワーキングドラフトの段階にあるため、すべてのブラウザが定義されたメディアフィーチャを実装するには至っていない。
Valkhof氏は講演の中で、特にprefers-color-scheme, prefers-reduced-motion, -prefers-reduced-transparency, prefers-contrast, inverted-colors, force-colorsの各メディアフィーチャを取り上げ、それぞれを使用する根拠について説明した。
例えばprefers-color-schemeでは、以下のようにダークモードを簡単に実装することができる。
@media (prefers-color-scheme: dark) {
:root {
background: #111;
filter: invert(1) hue-rotate(180deg)
}
img, video {
filter: invert(1) hue-rotate(180deg)
}
}
@media (prefers-color-scheme: light) {...}
@media (prefers-color-scheme: no-preference) {...}
ダークモードは低視力ユーザへのアクセシビリティ手段として、あるいはAMOLED画面の省電力機能(最大60パーセントの消費電力低減)として使用することができる。
prefers-reduced-motionは、前庭運動障害を持つユーザによる、不快感を引き起こす動画ベースのアニメーション系の削除あるいは置き換えを希望するという、システムへの指示を反映するものだ。あるいは、Valkhof氏の言うように、単にアニメーションが終了するのを待ちたくない場合もある。
Valkhof氏は次のようなコンフィギュレーション例を紹介した。
@media (prefers-reduced-motion: reduce) {
body *,
body *::before,
body*::after {
animation: none !important;
transition: none !important;
transition-duration: none !important;
}
}
ビデオの自動再生についても、次のようにユーザの希望を反映することが可能である。
const autoPlayVideo = window.matchMedia('(prefers-reduced-motion: no-preference)').matches;
prefers-reduced-dataとnavigator.connection(Safariには実装されていない)は、いずれも現時点ではまだ幅広いブラウザサポートを獲得していないが、開発者がネットワークの状態に合わせてユーザエクスペリエンスを調整できるようにしようというものだ。
最後に、ユーザエクスペリエンスをデバイス機能に適応させることができる。Valkhof氏は、入力デバイスに合わせて開発者がWebサイトをカスタマイズできるCSS Interaction Media Queries(最新ブラウザで広範にサポートされている)について論じた。
マウスはもちろん現在でも存在するが、その他にスタイラスなどのタッチコントローラ、Wiiリモートなどの外部コントローラ、さらにはARの手検出(hand detection)のような入力デバイスもある。小さなターゲットの選択やホバリングなど、マウスで行うのは簡単でも、タッチデバイスでは難しい、あるいは不可能な操作もあるが、インタラクションメディアフィーチャを使えば、これらの入力デバイスによって賢い方法で対処することができる。
ホバリング機能のないタッチデバイスでは、ホバリング時に現れるフィーチャは可視化しておくか、あるいは明示的なトグルで可視化できる必要がある。ポインタの解像度が低いデバイスでは、タップ対象を拡大する必要があるかも知れない。
Interaction Media Queriesは、例えば次のように設定できる。
/* smartphones, touch screens */
@media (hover: none) and (pointers: coarse) {...}
/* devices with stylus */
@media (hover: none) and (pointers: fine) {...}
/* wii/kinect */
@media (hover: hover) and (pointers: coarse) {...}
/* mouse */
@media (hover: hover) and (pointers: fine) {...}
レベル5で追加されたメディアフィーチャへのブラウザ対応状況は、オンラインで確認することができる。
講演の全容はオンラインで公開されており、多くの付加的情報や技術的なサンプルが含まれている。HalfStackはUI指向の単日単トラックのカンファレンスで、JavaScriptやWebエコシステムの可能性に重点が置かれている。2020年はCovid-19の影響により、5月にオンラインで開催された。