不透明な UI を好むユーザー向けに最適化と調整を行います。
Chrome 118 以降では、CSS Media Queries 5 の新しいメディアクエリ機能 prefers-reduced-transparency を使用できます。不透明でないインターフェースは、頭痛の原因となったり、さまざまな視覚障がいを抱えていたりする場合があり、目の不便さを感じることがあります。このため、Windows、macOS、iOS にはシステム設定があり、UI の透明度を低減したり削除したりできます。
CSS では、ブラウザでこの新しいメディアクエリを使用して、透明性の低下を求めるユーザーに合わせてインターフェースを調整できます。
.example {
--opacity: .5;
background: hsl(200 100% 50% / var(--opacity));
@media (prefers-reduced-transparency: reduce) {
--opacity: .95;
}
}
上記のコードサンプルでは、CSS 変数が 50% の不透明度値を保持しています。この値が HSL で使用され、半透明の青色の背景が作成されます。ネストされたメディアクエリは、透明度を下げるためのユーザー設定を確認し、true の場合、不透明度変数を 95%（ほぼ不透明な不透明度の値）に調整します。
このメディアクエリは他の優先メディアクエリとも調和するため、デザイナーやデベロッパーはユーザーに合わせて調整しながら、創造力を発揮できます。こうしたメディアクエリは、ユーザーに合わせて位置を自動的に調整する車椅子のようなものと考えることができます。ユーザーがウェブサイトにアクセスすると、質問なしで自動的に調整されます。クール。
透明性を下げるユースケース
以降のセクションでは、透明性を有意義に低下させる機会と機会について説明します。
半透明な画像のキャプション
半透明のキャプションまたは概要を画像や動画のサムネイルに重ねるのが一般的です。次の例は、透明度を下げる設定を処理する 1 つの方法を示しています。オーバーレイは完全に削除され、同じ字幕コンテンツがオーバーレイではなく画像の下に表示されます。
透明なモーダル、通知、ポップオーバー
UI 要素がコンテンツに重なるもう 1 つの方法は、モーダル、通知、ポップオーバーを使用することです。これは多くの場合、不透明度の要素が存在することを意味します。この場合、不透明度を上げることで、ユーザーの好みを尊重しながら、オーバーレイの背後のわずかな色を目立たせることができます。
.card {
background: hsl(none none 100% / 20%);
@media (prefers-reduced-transparency: reduce) {
background: hsl(none none 0% / 80%);
}
}
アダプティブ フロストガラス
もう 1 つの一般的なイメージ オーバーレイ スタイルは、フロストガラスです。次の例では、キャプションの後ろにある画像は商品画像を鏡像に反射したものです。これには 2 つの利点があります。画像が切り抜かれることがなく、最終結果で明るい色と暗い色の設定が多少生じます。
.adaptive-glass {
--glass-lightness: 100%;
--glass-alpha: 50%;
background: hsl(0 0% var(--glass-lightness) / var(--glass-alpha));
backdrop-filter: blur(40px);
@media (prefers-color-scheme: dark) {
--glass-lightness: 0%;
}
@media (prefers-reduced-transparency: reduce) {
--glass-alpha: 85%;
}
}
ヒーロー ヘッダー
共通のホームページ要素では、ループ再生する動画やアニメーション画像の上に太字のメッセージが重ねられている。次の例では、カラフルな半透明のグラデーション オーバーレイと、無限にアニメーション表示される背景画像があります。多くの人の目を引く可能性がありますが、透明度とのコントラストが低く、制御できない動きがあるため、多くの人にとって問題となります。
この問題は、2 つの CSS メディアクエリ prefers-reduced-motion と refers-reduced-transparency で修正できます。モーションを軽減したメディアクエリ内では、ユーザーがモーションを低減するための「好みなし」を選択した場合にのみ無限アニメーションを適用できます。これにより、このユーザーにモーションがあっても問題ないことをコードに通知できます。
さらに、透明度を下げるメディアクエリを使用すると、不透明度を下げてオーバーレイの色をほぼ 100% にできます。動きの妨げやコントラストの問題もなく メッセージを簡単に読み取れるようになりました
これらを組み合わせることで、クリエイティブな UI のデザインをデプロイし、ターゲット ユーザーがそれを読んでメッセージを理解できるようになります。
.Hero img {
@media (prefers-reduced-motion: no-preference) {
animation: zoom 30s ease infinite;
}
}
.Hero .overlay {
background: hsl(none none 0% / 95%);
@media (prefers-reduced-transparency: no-preference) {
background: linear-gradient(
to top right in oklab,
oklch(40% 0.3 340 / 70%),
oklch(40% 0.4 200 / 70%)
);
}
}
ユーザーの好みに対する加法的な視点と引き算的な視点
上記の例では、ユーザー設定の縮小については確認していませんが、設定を確認していません。
@media (prefers-reduced-transparency: no-preference) {
…
}
デベロッパーやデザイナーは、こうした好みに基づいて、減算的な考え方でユーザー エクスペリエンスを「フォールバック」することがよくあります。これは、UI から何かが削除される「リデュース」のチェックとしてメディアクエリに現れます。この例は付加的な考え方を示しており、ユーザーが納得できる場合にモーションと透明度が追加されます。
このアプローチは、それだけでは安定した健全なベースライン エクスペリエンスについて考えるのに役立ちます。その後、ユーザーの問題がなければ、エクスペリエンスに追加します。
DevTools
Chrome DevTools の [Rendering] タブで、この設定をエミュレートして透明度を下げるなどの処理を行うことができます。次の動画では、Preferreds-color-scheme と preferreds-reduced-transparency のメディアクエリを切り替えて、フロストガラスカードのライト、ダーク、透明、透明度低減のバリエーションを表示する方法を確認できます。