![見出し画像](https://assets.st-note.com/production/uploads/images/125187880/rectangle_large_type_2_27d9a046b290d25c5aa85a6333bdb938.jpeg?width=1200)
Progressive blur効果を用いたUI表現
Progressive blur(プログレッシブ・ブラー)というのは、少し前からにわかに流行り出しているUIのスタイリングに関する表現の一つです。Variable blur(可変ブラー)、Gradient blur(グラデーション・ブラー)と呼ぶこともあります。その見た目は通常のブラー効果(ぼかし、ガウスブラー)とは少し異なります。このアーティクルでは、UIにおけるProgressive blur(またはVariable blur)の概要とAppleプラットフォームでの技術検証を紹介しつつ、後半では簡単な経緯やデザインとしての考慮事項を解説します。
例えば次のイメージはProgressive blurの例です。通常のボカシ表現とどこが違うのかわかりますか?
![](https://assets.st-note.com/img/1702986513603-qX7ZDGuNkt.jpg?width=1200)
Gaussian blur vs. Progressive blur
わかりやすい比較用の画像を用意しました。まずは通常のGaussian blur(ガウスブラー)です。
![](https://assets.st-note.com/img/1702981180944-kpqp2U1UwW.jpg?width=1200)
Gaussian blurは一般的なブラー効果です。ご覧のように与えた一つの半径パラメータのみで均一にボカシ効果を施します。いわゆる磨りガラス効果(backdrop blur等)でも主にこのフィルタが用いられると思います。
続けて、Progressive blurの例を見てみましょう。
![](https://assets.st-note.com/img/1702981170342-WddbZTTFSy.jpg?width=1200)
Progressive blurでは座標に対してボカシの半径が徐々に変化するように可変的に描かれます。この例ではY軸に沿ってリニアに変化しています。仮にY軸下方向最小が0で上方向最大が100だとしたら、0から100に向かってボカシ半径が比例して大きくなっていくような見た目が得られます。ちょうど被写界深度を操作するような表現になります。
Progressive blurは特定の座標軸に対してリニアである制約はないので、二次元の複雑な濃淡マスクを使うこともできるでしょう。
ダイナミックなProgressive blurの実現方法
ここでいうダイナミックとは、UIのディスプレイ(描画結果)に対する動的なボカシ効果の適用を言います。静止画に施す方法(いわゆるプリレンダ)は除外します。
Core Imageフィルタとバックグラウンドフィルタの組み合わせ(macOS)
![](https://assets.st-note.com/img/1704444288394-UkCp60LA87.jpg?width=1200)
Core ImageのCIMaskedVariableBlurフィルタとCALayerのbackgroundFiltersプロパティを組み合わせることで、前景ビューの後ろに潜ったディスプレイ要素に対して動的にProgressive blurを施すことができます。Core Imageで描画されるのでパフォーマンスも悪くありません。macOSネイティブ環境においては、現時点で最もコスパよくProgressive blurを実装できる現実的な方法です。プライベートAPIでもないため、App Store対策も問題ないでしょう。
ちなみにiOSではCALayerのbackgroundFiltersが全く機能しないため、この方法は使えません。
CIMaskedVariableBlurは、マスクとしてグレースケールの画像を与える仕組みになっています。マスクのうち白に近い部分ほどブラーが強く適用されます。リニアなグラデーションはもちろん、二次元のグレースケールマスクを与えると、より複雑なProgressive blurも実現可能です。
![](https://assets.st-note.com/img/1704444655649-iudGwA1dDA.jpg?width=1200)
これらのデモ(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からパブリックになるのかもしれません。
btw SwiftUI already has the symbols for a variable blur modifier, they can be found at link time. you just need to add some stubs to the *.swiftinterface files and there you have it, a variable blur one-liner. pic.twitter.com/suY9BGIefI
— @samhenrigold@hachyderm.io (@samhenrigold) May 3, 2024
Also, as @alpennec pointed out, -[UIBlurEffect effectWithVariableBlurRadius:imageMask] was added to UIKitCore in 17.1
— Seb Vidal (@SebJVidal) May 3, 2024
Perhaps seeing these APIs exposed at WWDC is on the cards 👀 https://t.co/7HYm37T1dz
チルトシフトフィルタの応用
ミニチュア(ジオラマ)風の被写界深度の見た目を再現できるチルトシフトフィルタを使う方法があります。例えばPixelmator Proに備わっている「傾きシフト」のうち、半分を取り出せばProgressive blurとなります。
(ガウスブラーを使ったチルトシフト風フィルタではProgressive blurを再現できません。)
Core ImageのCIMaskedVariableBlurフィルタも用途の一つとしてチルトシフトの再現を想定していると思います。
![](https://assets.st-note.com/img/1704443735499-764AzC47bX.jpg?width=1200)
![](https://assets.st-note.com/img/1704443741376-sQTYF467tS.jpg?width=1200)
ガウスブラーフィルタを小刻みに並べる
この方法が最も簡単だと思いますが、描画パフォーマンスを気にする必要があるかもしれません。CSSによる実装例があります。
https://codepen.io/tehoko/pen/bGormeX
![](https://assets.st-note.com/img/1704442942603-gHBonAhAMg.jpg?width=1200)
Progressive blur with CSS & SVG
Progressive blurをCSSで実現するデモです。
アルファマスクを用いた擬似Progressive blur
ガウスぼかしのレイヤーに対してアルファマスクをグラデーションのように適用する方法があるのですが、これはボカシ半径の変化ではなく透過率の変化なので、正確なProgressive blurではありません。擬似的なもの、つまり偽物です。前のCSSの例にある「masked constant blur」が同仕組みによるものです。この擬似を「Gradient blur」と呼ぶこともあるようです。
A progressive blur means a progressively higher value of sigma per line up a gradient, not blending a layer with an alpha mask
— Sebastiaan de With (@sdw) November 16, 2023
UIデザインの勘所
磨りガラス効果の効能
iOS 7以降、ソフトウェアUIでいわゆる磨りガラス効果を用いることが流行り、macOSやWindowsではもちろん、WebでもブラーのついたUI表現をよく見かけるようになりました。
例えばmacOSのTerminalでは設定次第でウインドウの背景を磨りガラスのようにすることができます。
![](https://assets.st-note.com/img/1702982013055-2U4EcXEwcM.jpg?width=1200)
WebではブラウザがCSSのbackdrop-filterをサポートしていれば磨りガラス効果を享受することができます。
![](https://assets.st-note.com/img/1702982392390-UJK8VngnNC.jpg?width=1200)
このような表現は見た目がただ「かっこいい」というのもあるのですが、そのまま裏側のイメージを透けさせるよりも、裏側を透けさせながら前景の情報に注目してもらいやすくなるので、レイヤー感の演出と主要な情報への視線誘導が見込めます。
UIデザインにおける磨りガラス効果…
・UIで前後にコンテンツが重なるとき、裏側の情報をぼかすことで手前側の視認性を向上させられる
・今もっとも注目すべきコンテンツがどこであるかを視覚的に説明できる
(モーダルなど手前側の情報に注目させたい場面で効果的)
・裏側のコンテンツを完全に覆い隠さない(うっすらと色が透けて見える)ため、それが存在していることを示唆できる、状態遷移でコンテクストを維持できる
・その場面で裏側のコンテンツは重要ではないため、ぼかすことで情報の解像度や認知負荷を下げられる
・見た目がかっこいい、モダンなデザインに見える
・デザイン言語を統一できる(プラットフォームがそれを重視している場合)
特に画面の狭いモバイルでは手前—奥方向に情報をスタックしていくUI構造が多いので、磨りガラス効果が有効に働きます。iOSのコントロールセンターでは、覆い被さったビューが透けているのでそれが「一時的なモーダルビューである」と理解でき、注目すべきところはボカシの入っていない手前側の要素で、戻るべき場所(以前の場所)がどこにあるのかが視覚で理解しやすくなっています。
![](https://assets.st-note.com/img/1702984284817-knuBbe9NpA.jpg)
UIにおけるProgressive blurの効能
Progressive blurは、複数重なった要素のうち、手前側の背景を透過させつつその境界を目立たないようにするデザインに有効です。特に固定バー的な要素を画面に馴染むように浮遊させる場面で効果的です。浮遊要素の境界を目立たなくしつつ、重なった部分の視認性を向上させられます。iOSホーム画面の「アプリライブラリ」や、Mapsアプリがわかりやすい例です。バーの境界を目立たなくすことができるので、単に磨りガラス効果を適用した半透明のバーを手前に浮遊させるよりも視覚にうまく融け込むため、バーの「矩形感」が和らぎ、結果画面が広く感じられるようになります。
![](https://assets.st-note.com/img/1702985535499-s52sdxhr6B.jpg?width=1200)
![](https://assets.st-note.com/img/1702986532307-w33RWaBxPk.jpg?width=1200)
UIデザインにおけるProgressive blur効果…
一般的な磨りガラス効果を維持しながら、「浮遊要素の境界を目立たなくし、画面を広く見せられる」効果も期待できる。固定バーの背景などに特に有効。
オーバーレイ型ビューへの適用 (Play)
UIモック制作ツールのPlayのオンボーディングのウインドウではprogressive blurが使われています。下部の“Set up Play on iOS”と書かれているテキスト情報の部分は手前側から被さっていますが、背景の視認性を向上させるためにprogressive blurが使われています。このような場面では効果的です。
![](https://assets.st-note.com/img/1704451103489-ORbaLN0HaP.jpg?width=1200)
タブバー (X / Twitter) での検討
2024年1月現在のiOS版X (Twitter) のタブバー部分は、スクロールする方向に応じてタブバー全体が透過するようになっています。おそらくデザイン意図としては、タブバーの裏に潜る情報を隠さずなるべくユーザーに露出したいのだと思いますが、ユーザビリティを考えると視認性が低下するので、あまりイケている感じはしません。
一つはUIKitに備わる磨りガラス効果の入ったVisual Effect Viewにする方法が考えられますが、もしここでprogressive blurを合法的に活用できるのであれば、そちらの方が彼らのデザイン意図を汲みつつ、ユーザビリティ(視認性等)も向上させやすくなるように思います。そうなるとタブバーには明示的な境界線がなくなり、各タブが浮遊しているような見た目になるかもしれません。
![](https://assets.st-note.com/img/1704451403646-gIxGBpDG2n.jpg?width=1200)
UIにおけるProgressive blurが注目されるようになった経緯
UIにおけるProgressive blurは、iOS 14で導入されたアプリライブラリ(App Library)に採用されたのがきっかけで徐々に注目されるようになりました。ボカシ具合が通常のガウスブラーとは異なりグラデーションのように可変的に描画されることがこれまでに無いもので、特にiOS系の開発コミュニティではその再現方法について議論されていました。現状の結論としては、今のiOSでは3rdパーティが合法的※にそれを再現することは難しく、どうやらAppleしか使えないプライベートAPIで実装されているらしいとの見立てになっています。
(※App Store申請の際にリジェクトされない実装方法)
そのほかのProgressive blur関連の情報
UIモック制作ツールのPlayは、独自にProgressive blurを実現する機能を実装しています。
Progressive Blur is coming to Play. @sdw your wishes are granted! pic.twitter.com/i6fvIj42Tn
— Play (@createwithplay) November 10, 2023
Progressive Blur is now available in Play!@sdw let us know what you think of Progressive Blur once you try it out. You can also animate the values with panning and scroll triggers.
— Play (@createwithplay) December 12, 2023
› Try the prototype on your iPhone:https://t.co/rO79gdA5QH
› Download Play on macOS & iOS… pic.twitter.com/jwzz8wFkqa
Framerでいくつものバックドロップブラーのついたレイヤーを均等に並べることで、Progressive blurを表現する方法が検討されているようです。この方法は以前に紹介したCSSによる再現方法と基本的には同じです。
The component goes beyond just masking one background blur layer with a fixed blur value.
— Framer University (@learnframer) November 13, 2023
It dynamically calculates progressive blur values.
Here's what happens when you set a 64px blur: pic.twitter.com/cBCC4GL2OQ
Figma communityで見つかるこの作例は残念ながらProgressive blurではありません。
次の“VariableBlur”はSwiftUIでProgressive blurを実現できるようにする実装デモですが、プライベートAPIに触っているのでApp Storeに載せるアプリ(≒iOS appのほぼすべて)では実質使えないでしょう。
コードを読むと、まずCAFilterクラスをNSClassFromString()経由でアクセスして、フィルタ名“variableBlur“を文字列で指定して無理やりプライベートなフィルタオブジェクトを取り出しているようです。
この“VariableBlurView”もCAFilterのプライベートAPIに触れて実現しているiOS向け実装です。難読化テクニックによってApp Storeリジェクト対策も施しているようですが、自己責任で使用しましょう。
PhotoshopやAfter Effectsなど一部のAdobe製品には、「ぼかし(レンズ)」(Camera Lens Blur)という名前のブラーフィルタが備わっています。これを使うとProgressive blurと似たような効果を得られます。
![](https://assets.st-note.com/img/1714793167556-9YmszGZnGK.jpg?width=1200)
https://helpx.adobe.com/jp/photoshop/using/adjusting-image-sharpness-blur.html
GIMPには“Variable Blur”の名前で同等効果を得られるフィルタが備わっています。グラフィックデザイン等で静止画に適用するのであれば使えるかもしれません。
![](https://assets.st-note.com/img/1714792755485-4aT4wyMnNg.png?width=1200)
おわりに
Progressive blurは英語圏のUIデザイン界隈で注目されつつある新しい表現ですが、現状それをアプリケーションのUIで実装するには、まだ乗り越えられない技術的な障壁が存在しています。各プラットフォームでの現実的なAPIが揃っていないこと、デザインツールのサポートがまだ未熟であることが主な理由です。デザインツールの対応はiOSでパブリックAPIが実装されてからになるでしょう。
Progressive blurは見た目がかっこいいのですぐにでも自らのUIデザインに取り入れたくなるのですが、2024年1月現在、制約が多いのでまだ様子を見ておくのが無難と言えそうです。今後に期待しましょう。
この記事が気に入ったらサポートをしてみませんか?