こんにちは。ちゅるりです。
今回は、段階的にぼかしていく UI 表現の一例として Progressive Blur（プログレッシブ・ブラー）をご紹介しつつ、実装から実際のデザインへの組み込みまでを包括的に述べていこうと思います。
Progressive Blur とは
概要
タイトルなどでも既に述べてしまっていますが、ひと口で言えば「徐々にぼかし半径が変わっていくぼかし」です。ぼかしのグラデーションとも言えるでしょう。
百聞は一見にしかず、例をご覧いただけるとわかりやすいかと思います。次の図は、Progressive Blur を用いたカード実装の一例です。
このように Progressive Blur は 2 つ以上重なった要素の境界においてその真価を発揮します。例えば iOS18 のコントロールセンターにおいて、ドロワーの引張具合によって背景のぼかし度合いが変化していく部分に Progressive Blur を見ることができます。Progressive Blur は磨りガラスのような、シックでモダンな印象を与えたい場合に有効であることがわかります。
現に海外の UI デザイナーコミュニティで最近まで盛り上がっていた印象があります。 確かに海外のモダンな LP で多用されているイメージがありますね。
Gaussian Blur との違い
Progressive Blur よりも広く使われているぼかし表現の一つに、Gaussian Blur（ガウシアン・ブラー）があります。いわゆる単なるぼかしで、ぼかした要素とそうでない要素との境界面がはっきりする点が特徴です。こちらも例を見てみましょう。
先ほどの例とは異なり、ヘッダと背景部分との境界が明確に表れていることが見て取れるかと思います。
Progressive Blur は実際には Gaussian Blur をベースに実装していくのですが、段階的な変化の有無でここまで印象が変わるのは驚きですね。
擬似的 Progressive Blur の実装
構造
本節では、特に Web 上で Progressive Blur を実現する際の構造について述べていきます。
早速構造の説明に入っていきたいところですが、ここで突然「擬似的」というワードが入ってきたことにお気づきになられた方もいらっしゃるかもしれません。先ほど、Progressive Blur とは「段階的にぼかし半径が変わっていくぼかし表現」と述べましたが、実際には Web 上でこれを直接的に表現する手段はありません。したがって、別の代替的手段を用いて擬似的に Progressive Blur を表現していくアプローチを取ります。これを念頭にここからの説明をお読みいただければと思います。
Web 上で Progressive Blur を擬似的に表現するには、Gaussian Blur と透明度のある背景色、そしてグラデーションのあるマスクの 3 つを利用します。次の図は Progressive Blur の構造を示した模式図です。
上図に示した二つの表現を重ね合わせる（合成）することによって Progressive Blur は実現されます。イメージ的には、単調な Gaussian Blur をグラデーションのあるマスクによって間引いていくことによって、擬似的にぼかしに穴を開けていくような形です。
実装
さて、ここまで Progressive Blur の概要から構造までを述べてきました。本節では先に示した構造をもとに、Web 上での Progressive Blur の実装方法について解説していきます。
前節では、擬似的な Progressive Blur は Gaussian Blur、透明度のある背景色、およびグラデーションのあるマスクの 3 要素によって構成されることを述べましたが、これらは CSS のプロパティにおおよそ一対一で対応します。
- Gaussian Blur
backdrop-filter: blur(16px);
- 透明度のある背景色
background: #ffffff77
- グラデーションのあるマスク
mask-image: linear-gradient(to bottom, transparent, #ffffff 100%);mask-composite: intersect
Progressive Blur は、これらの CSS を全て合わせることによって実装できます。次のコードは Progressive Blur の実装例を示しています。ただし、最小構成を示すためにあえて div などを用いていますが、実際にはセマンティクスに準じた実装をすることを推奨します。
HTML
<div class="card"> <img class="img" src="./test.jpg"> <div class="content"> <p>hoge</p> </div> </div>
CSS
.card { width: 320px; height: 180px; position: relative; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } .img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .content { width: 100%; height: 100%; backdrop-filter: blur(16px); background-color: #ffffff77; mask-image: linear-gradient(to bottom, transparent, #ffffff 100%); mask-composite: intersect; }
これを表示すると次の画像が示すような形となります。
上記の実装では、.img が適用された画像の上に .content がオーバーレイしています。画像の上に下向きに濃くなっていくマスクを適用したレイヤを重ねることで、擬似的に Progressive Blur を実現できていることがわかります。
懸念
想像にも難くないですが、backdrop-filter: blur や mask-* はそれなりに負荷の高い処理になります。それゆえ、多用するとパフォーマンスが劣化する可能性がある点に留意が必要です。
応用
例えば背景色を暗めにしつつ文字を重ねると、透明感のある仕上がりになります。
mask-image が適用されている要素の上に別の要素を置くと、それらにもマスクがかかってしまうため少々薄くなってしまいます。上記の例はその影響で文字が薄くなってしまっています。これを回避するために、さらに別のレイヤを重ねてあげると良いでしょう。
またエラー用のトーストにも使用できます。
まとめ
Progressive Blur は、簡単にモダンなデザインが実現できる面白い UI 表現技法です。こんなデザインも実装できるのか、と新しい発見をしていただけたのであれば幸いです。
最後に、弊社はまだデザインこそしておりませんが「Beyond the Imagination by Software - ソフトウェアで想像を超えろ」をスローガンに、多様なバックグラウンド・技術・属性を持つエンジニアが活躍しています。もし本記事や他の記事を見て弊社にご興味をお持ちいただければ、まずはご連絡ください！
エンジニアリングにご興味のあるあなたを、我々一同お待ちしております！
