見出し画像

Progressive blur効果を用いたUI表現

usagimaru

Progressive blur（プログレッシブ・ブラー）というのは、少し前からにわかに流行り出しているUIのスタイリングに関する表現の一つです。Variable blur（可変ブラー）、Gradient blur（グラデーション・ブラー）と呼ぶこともあります。通常のブラー効果（ぼかし、ガウスブラー）とは様相が少し異なります。

例えば次のイメージはProgressive blurの例です。通常のボカシ表現とどこが違うのかわかりますか？

Progressive blur（プログレッシブ・ブラー）の例

Gaussian blur vs. Progressive blur

わかりやすい比較用の画像を用意しました。まずは通常のGaussian blur（ガウスブラー）です。

Gaussian blur

Gaussian blurは一般的なブラー効果です。ご覧のように与えた一つの半径パラメータのみで均一にボカシ効果を施します。いわゆる磨りガラス効果（backdrop blur等）でも主にこのフィルタが用いられると思います。

続けて、Progressive blurの例を見てみましょう。

Progressive blur

Progressive blurでは座標に対してボカシの半径が徐々に変化するように描画されます。この例ではY軸に沿ってリニアに変化しています。仮にY軸下方向最小が0で上方向最大が100だとしたら、0から100に向かってボカシ半径が比例して大きくなっていくような見た目が得られます。

Progressive blurは特定の座標軸に対してリニアである制約はないので、二次元のマスクを使って半径値を変化させるようなこともできます。

ダイナミックなprogressive blurの実現方法

ここでいうダイナミックとは、UIのディスプレイ（描画結果）に対する動的なボカシ効果の適用を言います。静止画に施す方法は除外します。

macOS: Core Imageフィルタとバックグラウンドフィルタの組み合わせで実現可能

macOSネイティブに動作する、ダイナミックなprogressive blurのデモ。

Core ImageのCIMaskedVariableBlurフィルタとCALayerのbackgroundFiltersプロパティを組み合わせることで、前景ビューの後ろに潜ったディスプレイ要素に対して動的にprogressive blurを施すことができます。Core Imageで描画されるのでパフォーマンスも悪くありません。macOSネイティブ環境においては、現時点で最もコスパよくprogressive blurを実装できる現実的な方法です。プライベートAPIでもないため、App Store対策も問題ないでしょう。

ちなみにiOSではCALayerのbackgroundFiltersが全く機能しないため、この方法は使えません。

CIMaskedVariableBlurは、マスクとしてグレースケールの画像を与える仕組みになっています。マスクのうち白に近い部分ほどブラーが強く適用されます。リニアなグラデーションはもちろん、二次元のグレースケールマスクを与えると、より複雑なprogressive blurも実現可能です。

https://developer.apple.com/documentation/coreimage/cifilter/3228355-maskedvariableblurfilter

これらのデモ（Xcodeプロジェクト / Swift）はGitHubに公開しています。

iOS: ネイティブで実用的な実装方法はまだ少ない

記事執筆当初の時点では、調べた限りではiOSネイティブで動的なprogressive blurをUIに実装する良い方法は見つかっていませんでした。Appleの実装はどうやらプライベートAPIを利用しているらしいということと、前述したbackgroundFilters APIを用いる方法は、iOSでは利用不可能であるためです。（´・ω...:.;::..

しかしその後、SwiftUIとMetal shaderを使ったprogressive blurを実現するライブラリ“Glur”が登場し、これによってiOSネイティブで実用的な実装への道が開けたかもしれません。

iOSのApple製アプリで見られるprogressive blur表現は、ほぼAppleだけが使える仕組みによって実現されているのが現状です。しかし、かつての磨りガラス効果のように、プラットフォーマーがまず利用環境を整えてから一般にAPIを開放していく流れも十分に想定できるので、iOSネイティブ開発環境では一旦様子を見ておくのが良いと思います。

したがって、progressive blurは流行りつつあるが、実装するための環境が十分に整っていないことから、現時点ではそれをUIの表現に取り入れることは時期尚早、ということになります。UIモック設計（デザイン）の現場ではその表現の実現技術をよく確認してから実現可能性を判断しましょう。

チルトシフトフィルタの応用

ミニチュア（ジオラマ）風の被写界深度の見た目を再現できるチルトシフトフィルタを使う方法があります。例えばPixelmator Proに備わっている「傾きシフト」のうち、半分を取り出せばprogressive blurとなります。
（ガウスブラーを使ったチルトシフト風フィルタではprogressive blurを再現できません。）

Core ImageのCIMaskedVariableBlurフィルタも用途の一つとしてチルトシフトの再現を想定していると思います。

Pixelmator Proの「傾きシフト」
Pixelmator Proの「傾きシフト」

ガウスブラーフィルタを小刻みに並べる

この方法が最も簡単だと思いますが、描画パフォーマンスを気にする必要があるかもしれません。CSSによる実装例があります。

https://codepen.io/tehoko/pen/bGormeX

アルファマスクによる擬似progressive blur

アルファマスクをグラデーションのようにかける方法があるのですが、これはボカシ半径に適用されるのではなく透過率の変化なので、正確なprogressive blurではなく擬似的なものになります。つまり偽物です。前のCSSの例にある1つ目のもの（masked constant blur）が同じ仕組みによるものです。

磨りガラス効果のUIデザインとしての効能

iOS 7以降、ソフトウェアUIでいわゆる磨りガラス効果を用いることが流行り、macOSやWindowsではもちろん、WebサイトでもブラーのついたUI表現をよく見かけるようになりました。

例えばmacOSのTerminalでは設定によってウインドウ背景を磨りガラスのようにすることができます。WebではブラウザがCSSのbackdrop-filterをサポートしていればこの効果を享受することができます。

macOS “Terminal” のぼかし背景
apple.com/jp ナビゲーションバーのぼかし効果（CSS）、Safariウインドウのベゼル部分（ネイティブ）

このような表現は見た目がただ「かっこいい」というのもあるのですが、そのまま裏側のイメージを透けさせるよりも、裏側を透けさせながら前景の情報に注目してもらいやすくなるので、レイヤー感の演出と主要な情報への視線誘導が見込めます。

一般的な磨りガラス効果は…
・レイヤー表現で、特に手前側に注目させたい場面で効果的
・裏側のレイヤーを完全に覆い隠さない（うっすらと色が見える）ため、それが存在していることをうまく示唆できる
・裏側のレイヤーの詳細情報は重要でないため、ぼかすことで解像度を下げられる（＝存在感だけ感知できるので邪魔になりづらい）
・注目すべきレイヤーがどこであるかを視覚的に説明できる
・前後にコンテンツが重なる場合、裏側をぼかすことで手前側の視認性を向上させられる
・見た目がかっこいい、モダン

特に画面の狭いモバイルでは手前—奥方向にビューをスタックしていくUI構造が多いので、磨りガラス効果が有効に働きます。iOSのコントロールセンターでは、覆い被さったビューが透けていることでそれが一時的なモーダルビューであると理解でき、注目すべき場所がボカシの入っていない手前側で、戻るべき場所（以前の場所）が裏側に存在し続けていると視覚で理解しやすくなっています。

iOSのコントロールセンター

Progressive blurの効能

Progressive blurは、特にフルスクリーン表示において手前側にバー的な要素を背景透過しつつ浮遊させたいような場面で有効です。コンテンツ部分をフルスクリーンで展開する際に、バー要素などの境界を隠しながら重なる部分の視認性を向上させられます。iOSのアプリライブラリやMapsがわかりやすい例です。

この効果によって明示的なバーの境界をなくすことができるので、単に磨りガラスの半透明バーを浮遊させるよりも画面にUIが溶け込むため、画面が広く感じられるようになります。

アプリライブラリの上部バー部分にprogressive blurが適用されている。
Mapsのステータスバーにprogressive blurが適用されている。ステータスバーの境界が目立たない。

オーバーレイ型ビューへの適用例: Play

UIモック制作ツールのPlayのオンボーディングのウインドウではprogressive blurが使われています。下部の“Set up Play on iOS”と書かれているテキスト情報の部分は手前側から被さっていますが、背景の視認性を向上させるためにprogressive blurが使われています。このような場面では効果的です。

Playのオンボーディングウインドウ

X (Twitter) のタブバーには効果的に使えそう

2024年1月現在のiOS版X (Twitter) のタブバー部分は、スクロールする方向に応じてタブバー全体が透過するようになっています。おそらくデザイン意図としては、タブバーの裏に潜る情報を隠さずなるべくユーザーに露出したいのだと思いますが、ユーザビリティを考えると視認性が低下するので、あまりイケている感じはしません。

一つはUIKitに備わる磨りガラス効果の入ったVisual Effect Viewにする方法が考えられますが、もしここでprogressive blurを合法的に活用できるのであれば、そちらの方が彼らのデザイン意図を汲みつつ、ユーザビリティ（視認性等）も向上させやすくなるように思います。そうなるとタブバーには明示的な境界線がなくなり、各タブが浮遊しているような見た目になるかもしれません。

X (Twitter) iOS版のタブバー（2024.01）

Progressive blurが注目されるようになった経緯など

Progressive blurは、iOS 14で導入されたアプリライブラリ（App Library）に採用されたのがきっかけで徐々に注目されるようになりました。ボカシ具合が通常のガウスブラーとは異なりグラデーションのように可変的に描画されることがこれまでに無いもので、特にiOS系の開発コミュニティではその再現方法について議論されていました。現状の結論としては、今のiOSでは3rdパーティが合法的※にそれを再現することは難しく、どうやらAppleしか使えないプライベートAPIで実装されているらしいとの見立てになっています。

（※App Store申請の際にリジェクトされない実装方法）

そのほかのprogressive blur関連の情報

UIモック制作ツールのPlayは、独自にprogressive blurを実現する機能を実装しています。

Framerでいくつものバックドロップブラーのついたレイヤーを均等に並べることで、progressive blurを表現する方法が検討されているようです。この方法は以前に紹介したCSSによる再現方法と基本的には同じです。

Figma communityで見つかるこの作例は残念ながらprogressive blurではありません。

次の“VariableBlur”はSwiftUIでprogressive blurを実現できるようにする実装デモですが、プライベートAPIに触っているのでApp Storeに載せるアプリ（≒iOS appのほぼすべて）では実質使えないでしょう。

コードを読むと、まずCAFilterクラスをNSClassFromString()経由でアクセスして、フィルタ名“variableBlur“を文字列で指定して無理やりプライベートなフィルタオブジェクトを取り出しているようです。

おわりに

Progressive blurは英語圏のUIデザイン界隈で注目されつつある新しい表現ですが、現状それをアプリケーションのUIで実装するには、まだ乗り越えられない技術的な障壁が存在しています。デザインツールのサポートがまだ未熟であること、各種OSやプラットフォームでの現実的なAPIが揃っていないことが主な理由です。各種デザインツールの対応はiOSでパブリックAPIが実装されてからになるでしょう。

Progressive blurは見た目がかっこいいので自らのUIデザインにも取り入れたくなるのですが、2024年1月現在、まだ様子を見ておくのが無難と言えそうです。

この記事が気に入ったらサポートをしてみませんか？