Progressive blur効果を用いたUI表現
Progressive blur(プログレッシブ・ブラー)というのは、少し前からにわかに流行り出しているUIのスタイリングに関する表現の一つです。Variable blur(可変ブラー)、Gradient blur(グラデーション・ブラー)と呼ぶこともあります。その見た目は通常のブラー効果(ぼかし、ガウスブラー)とは少し異なります。このアーティクルでは、UIにおけるProgressive blur(またはVariable blur)の概要とAppleプラットフォームでの技術検証を紹介しつつ、後半では簡単な経緯やデザインとしての考慮事項を解説します。
例えば次のイメージはProgressive blurの例です。通常のボカシ表現とどこが違うのかわかりますか?
Gaussian blur vs. Progressive blur
わかりやすい比較用の画像を用意しました。まずは通常のGaussian blur(ガウスブラー)です。
Gaussian blurは一般的なブラー効果です。ご覧のように与えた一つの半径パラメータのみで均一にボカシ効果を施します。いわゆる磨りガラス効果(backdrop blur等)でも主にこのフィルタが用いられると思います。
続けて、Progressive blurの例を見てみましょう。
Progressive blurでは座標に対してボカシの半径が徐々に変化するように可変的に描かれます。この例ではY軸に沿ってリニアに変化しています。仮にY軸下方向最小が0で上方向最大が100だとしたら、0から100に向かってボカシ半径が比例して大きくなっていくような見た目が得られます。ちょうど被写界深度を操作するような表現になります。
Progressive blurは特定の座標軸に対してリニアである制約はないので、二次元の複雑な濃淡マスクを使うこともできるでしょう。
ダイナミックなProgressive blurの実現方法
ここでいうダイナミックとは、UIのディスプレイ(描画結果)に対する動的なボカシ効果の適用を言います。静止画に施す方法(いわゆるプリレンダ)は除外します。
Core Imageフィルタとバックグラウンドフィルタの組み合わせ(macOS)
Core ImageのCIMaskedVariableBlurフィルタとCALayerのbackgroundFiltersプロパティを組み合わせることで、前景ビューの後ろに潜ったディスプレイ要素に対して動的にProgressive blurを施すことができます。Core Imageで描画されるのでパフォーマンスも悪くありません。macOSネイティブ環境においては、現時点で最もコスパよくProgressive blurを実装できる現実的な方法です。プライベートAPIでもないため、App Store対策も問題ないでしょう。
ちなみにiOSではCALayerのbackgroundFiltersが全く機能しないため、この方法は使えません。
CIMaskedVariableBlurは、マスクとしてグレースケールの画像を与える仕組みになっています。マスクのうち白に近い部分ほどブラーが強く適用されます。リニアなグラデーションはもちろん、二次元のグレースケールマスクを与えると、より複雑なProgressive blurも実現可能です。
これらのデモ(Xcodeプロジェクト / Swift)はGitHubに公開しています。
iOSネイティブで実用的な方法はまだない
記事執筆当初の時点では、調べた限りではiOSネイティブで動的なProgressive blurをUIに実装する良い方法は見つかっていませんでした。Appleの実装はどうやらプライベートAPIを利用しているらしいということと、前述したbackgroundFilters APIを用いる方法は、iOSでは利用不可能であるためです。(´・ω...:.;::..
追記:その後、SwiftUIとMetal shaderを使ったProgressive blurを実現するライブラリ“Glur”が登場しましたが、パフォーマンスにまだ課題があるようです。
iOSのApple製アプリで見られるProgressive blur表現は、ほぼAppleだけが使える仕組みによって実現されているのが現状です。しかし、かつての磨りガラス効果のように、プラットフォーマーがまず利用環境を整えてから一般にAPIを開放していく流れも十分に想定できるので、iOSネイティブ開発環境では一旦様子を見ておくのが良いと思います。
したがって、Progressive blurは流行りつつあるが、実装するための環境が十分に整っていないことから、現時点ではそれをUIの表現に取り入れることは時期尚早、ということになります。UIモック設計(デザイン)の現場ではその表現の実現技術をよく確認してから実現可能性を判断しましょう。
追記:SwiftUI / UIKitとプライベートAPI (iOS)
2024年5月現在、iOS 17.1上のSwiftUIとUIKitにプライベートAPIが発見され、これを呼び出すことでProgressive blurを実現できることがわかりました。UIKitではUIBlurEffectに備わっているようです。当然App Storeに載せるアプリでは使用できませんが、もしかしたらiOS 18からパブリックになるのかもしれません。
チルトシフトフィルタの応用
ミニチュア(ジオラマ)風の被写界深度の見た目を再現できるチルトシフトフィルタを使う方法があります。例えばPixelmator Proに備わっている「傾きシフト」のうち、半分を取り出せばProgressive blurとなります。
(ガウスブラーを使ったチルトシフト風フィルタではProgressive blurを再現できません。)
Core ImageのCIMaskedVariableBlurフィルタも用途の一つとしてチルトシフトの再現を想定していると思います。
ガウスブラーフィルタを小刻みに並べる
この方法が最も簡単だと思いますが、描画パフォーマンスを気にする必要があるかもしれません。CSSによる実装例があります。
https://codepen.io/tehoko/pen/bGormeX
Progressive blur with CSS & SVG
Progressive blurをCSSで実現するデモです。
アルファマスクを用いた擬似Progressive blur
ガウスぼかしのレイヤーに対してアルファマスクをグラデーションのように適用する方法があるのですが、これはボカシ半径の変化ではなく透過率の変化なので、正確なProgressive blurではありません。擬似的なもの、つまり偽物です。前のCSSの例にある「masked constant blur」が同仕組みによるものです。この擬似を「Gradient blur」と呼ぶこともあるようです。
磨りガラス効果のUIデザインとしての効能
iOS 7以降、ソフトウェアUIでいわゆる磨りガラス効果を用いることが流行り、macOSやWindowsではもちろん、WebサイトでもブラーのついたUI表現をよく見かけるようになりました。
例えばmacOSのTerminalでは設定によってウインドウ背景を磨りガラスのようにすることができます。WebではブラウザがCSSのbackdrop-filterをサポートしていればこの効果を享受することができます。
このような表現は見た目がただ「かっこいい」というのもあるのですが、そのまま裏側のイメージを透けさせるよりも、裏側を透けさせながら前景の情報に注目してもらいやすくなるので、レイヤー感の演出と主要な情報への視線誘導が見込めます。
特に画面の狭いモバイルでは手前—奥方向にビューをスタックしていくUI構造が多いので、磨りガラス効果が有効に働きます。iOSのコントロールセンターでは、覆い被さったビューが透けていることでそれが一時的なモーダルビューであると理解でき、注目すべき場所がボカシの入っていない手前側で、戻るべき場所(以前の場所)が裏側に存在し続けていると視覚で理解しやすくなっています。
Progressive blurの効能
Progressive blurは、特にフルスクリーン表示において手前側にバー的な要素を背景透過しつつ浮遊させたいような場面で有効です。コンテンツ部分をフルスクリーンで展開する際に、バー要素などの境界を隠しながら重なる部分の視認性を向上させられます。iOSのアプリライブラリやMapsがわかりやすい例です。
この効果によって明示的なバーの境界をなくすことができるので、単に磨りガラスの半透明バーを浮遊させるよりも画面にUIが溶け込むため、画面が広く感じられるようになります。
オーバーレイ型ビューへの適用例: Play
UIモック制作ツールのPlayのオンボーディングのウインドウではprogressive blurが使われています。下部の“Set up Play on iOS”と書かれているテキスト情報の部分は手前側から被さっていますが、背景の視認性を向上させるためにprogressive blurが使われています。このような場面では効果的です。
X (Twitter) のタブバーには効果的に使えそう
2024年1月現在のiOS版X (Twitter) のタブバー部分は、スクロールする方向に応じてタブバー全体が透過するようになっています。おそらくデザイン意図としては、タブバーの裏に潜る情報を隠さずなるべくユーザーに露出したいのだと思いますが、ユーザビリティを考えると視認性が低下するので、あまりイケている感じはしません。
一つはUIKitに備わる磨りガラス効果の入ったVisual Effect Viewにする方法が考えられますが、もしここでprogressive blurを合法的に活用できるのであれば、そちらの方が彼らのデザイン意図を汲みつつ、ユーザビリティ(視認性等)も向上させやすくなるように思います。そうなるとタブバーには明示的な境界線がなくなり、各タブが浮遊しているような見た目になるかもしれません。
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“を文字列で指定して無理やりプライベートなフィルタオブジェクトを取り出しているようです。
PhotoshopやAfter Effectsなど一部のAdobe製品には、「ぼかし(レンズ)」(Camera Lens Blur)という名前のブラーフィルタが備わっています。これを使うとProgressive blurと似たような効果を得られます。
https://helpx.adobe.com/jp/photoshop/using/adjusting-image-sharpness-blur.html
GIMPには“Variable Blur”の名前で同等効果を得られるフィルタが備わっています。グラフィックデザイン等で静止画に適用するのであれば使えるかもしれません。
おわりに
Progressive blurは英語圏のUIデザイン界隈で注目されつつある新しい表現ですが、現状それをアプリケーションのUIで実装するには、まだ乗り越えられない技術的な障壁が存在しています。デザインツールのサポートがまだ未熟であること、各種OSやプラットフォームでの現実的なAPIが揃っていないことが主な理由です。各種デザインツールの対応はiOSでパブリックAPIが実装されてからになるでしょう。
Progressive blurは見た目がかっこいいので自らのUIデザインにも取り入れたくなるのですが、2024年1月現在、まだ様子を見ておくのが無難と言えそうです。
この記事が気に入ったらサポートをしてみませんか?