spookies_chururi https://blog.hatena.ne.jp/spookies_chururi/ スプーキーズのちょっとTech。 https://labs.spookies.co.jp/ こんにちは。ちゅるりです。 今回は、段階的にぼかしていく UI 表現の一例として Progressive Blur（プログレッシブ・ブラー）をご紹介しつつ、実装から実際のデザインへの組み込みまでを包括的に述べていこうと思います。 Progressive Blur とは 概要 タイトルなどでも既に述べてしまっていますが、ひと口で言えば「徐々にぼかし半径が変わっていくぼかし」です。ぼかしのグラデーションとも言えるでしょう。 百聞は一見にしかず、例をご覧いただけるとわかりやすいかと思います。次の図は、Progressive Blur を用いたカード実装の一例です。 Progressive Blur … 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Flabs.spookies.co.jp%2Fentry%2F20251125" title="段階的にぼかす UI 表現 〜Web における Progressive Blur の実装と活用〜 - スプーキーズのちょっとTech。" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/s/spookies_chururi/20251106/20251106110208.png Hatena Blog https://hatena.blog 2025-11-25 13:39:46 rich https://labs.spookies.co.jp/entry/20251125 1.0 100%