もはやWeb制作やアプリ制作の現場では、なくてはならなくなったデザインツール「Figma」。
私もこのブログで使用する画像の編集・加工などはFigmaで行うことが増えてきました。
その際、いつもやり方を忘れてしまうのが、画像のぼかし方。
PhotoshopやIllustratorでいう、「ぼかし（ガウス）」ですね。
自分の備忘録を兼ねてまとめておきます。
なお、この記事での「ぼかし」の扱いは、デザインに深みを出すためのぼかしではなく、個人情報などの見せたくないものを隠す意味でのモザイクとしてのぼかしです。
画像の一部をぼかしたいとき
ぼかしたい画像の前面（レイヤーでいうと上）に、ぼかしたい範囲のオブジェクトを置きます。
ここでいう「オブジェクト」は、長方形や丸などのシェイプツールだけでなく、フレーム・グループ・コンポーネントなどでもOKです。
あずま当記事内では、わかりやすいようにオブジェクトに色をつけていますが、オブジェクトの色（塗り）を、画像の色に近づけておくとぼかした時に馴染みます。（※後述）
オブジェクトの「塗り」の不透明度を下げます。
こちらは、1％〜15％くらいの間がいい感じです。
あずま不透明度は「外見」の不透明度ではなく、「塗り」の不透明度なので、ご注意ください。
オブジェクトを選択した状態で、左側のメニューから「エフェクト」→「背景のぼかし」を選択。
「エフェクトの設定」ボタンから、ぼかしの数値を調整します。
あずまぼかしの具合にもよりますが、数値はあまり大きくしすぎず1桁台くらいがいい感じ。
「エフェクトの設定」と「塗りの不透明度」の数値を調整したら、完成！
グループやフレームで囲っている場合は、中のオブジェクトの塗りの不透明度を変えないと、エフェクトは効きません。
画像全体をぼかしたいとき
画像の一部ではなく、画像全体をぼかしたいときのエフェクトは、「レイヤーブラー」です。
ぼかしたい画像を選択した状態で、左側のメニューから「エフェクト」→「レイヤーブラー」を選択。
こちらも「エフェクトの設定」ボタンから、ぼかしの数値を調整します。
あずま同じく、数値は1桁くらいがしっくりきます。
「エフェクトの設定」で「プログレッシブ」を選択すると、開始位置・終了位置・角度とぼかす範囲を変更できるようです。
グラデーションに近い設定ですね。
ぼかす範囲が広い場合は、こちらのやり方でもいいのかも。
まとめ
デザインツール「Figma」で画像の一部をぼかす方法と画像全体をぼかす方法をまとめました。
Figmaはアップデートで機能の名前が変わってしまうこともあるので、どの機能だったか忘れてしまったり、調整する不透明度を毎回迷ってしまうので、自分のために記録しておきます。
なお、当記事で使用しているFigmaの画面は、2025年7月時点のものです。