Figmaで背景をぼかす方法 – 背景効果のクイックガイド
Figmaで背景ぼかしとレイヤー効果を使って背景をぼかす方法を学びましょう。UIデザインや洗練されたオーバーレイに最適です。
このガイドでは、デザインメニューを使用して Figma のフレームにぼかし効果を適用する方法を学びます。
デザインプロジェクト内の要素を希望どおりにぼかすための詳細な手順に従ってください。
Figma の背景ぼかし効果を使うと、デザインにすりガラスのような外観を与えます。これはモーダル、カード、オーバーレイでよく使用されます。
ステップ 1: ぼかし用レイヤーを準備する
図形を作成する
ぼかし効果を表示したい長方形、または任意の図形/フレームを使用します。塗りを追加する
単色（例: 白やグレー）で塗りつぶします。不透明度を下げる
レイヤーの不透明度を下げます（通常 10～40% 程度）。この手順は必須のぼかしであり、透明度がないと表示されません。
ステップ 2: 背景ぼかしを適用する
レイヤーを選択する
先ほど作成した図形をクリックします。エフェクトパネルに移動する
右側のサイドバーで、Effects の横にある「+」をクリックし、ドロップダウンから Background Blur を選択します。ぼかしの値を調整する
効果の横にある設定アイコンをクリックし、スライダーを使って背景のぼけ具合を調整します。
オプション: 微調整
背景ぼかしをドロップシャドウと組み合わせることで、奥行きを加えられます。
不透明度とぼかしを組み合わせて、やわらかいすりガラス風にも、強めのガラスのような見た目にもできます。
ステップごとのガイド: Figma で背景をぼかす方法
ステップ 1
Figma でぼかし効果の適用を始めるには、まずぼかしたいフレームを選択します。
インターフェース右側にあるデザインメニューに移動します。このメニュー内でエフェクトセクションを見つけてクリックします。
エフェクトセクションで、「+」記号をクリックして「新しいエフェクトを追加」を選択します。
ステップ 2
新しいエフェクトが追加されると、ドロップダウンメニューが表示されます。このメニューをクリックして「レイヤーブラー」を選択します。これで、選択したフレームにぼかし効果が正常に適用されました。
Figma で背景をぼかすためのプロのコツ
オブジェクトにブラーを適用する:
ぼかしたいオブジェクト（画像、図形、またはフレーム）を選択します。右側サイドバーのエフェクトセクションで + アイコンをクリックし、ドロップダウンから Background Blur または Layer Blur を選択します。ぼかしの強さを調整する:
ぼかしを適用したら、スライダーを使ってぼかしの強さを調整します。ぼかしの量を増減して、狙いどおりの効果を得られます。より細かく制御したい場合は Gaussian Blur を使う:
ぼかし効果をより正確に制御したい場合は、Gaussian Blur を使用します。より滑らかで徐々にかかるぼかしになります。画像やフレームをぼかす:
画像やフレームをぼかすときは、画像が選択されていることを確認してください。ほかのデザイン要素に影響を与えずに画像だけをぼかせます。レイヤーごとに複数のぼかしを使う:
異なるレイヤーに複数のぼかし効果を適用できます。たとえば、背景をぼかして文字はくっきり見せたい場合は、ぼかしを背景レイヤーのみに適用します。
Figma で背景をぼかすときによくある落とし穴
間違ったレイヤーをぼかしてしまう:
対処法: ぼかしを適用する前に、選択したレイヤーを再確認してください。レイヤーパネルを使って、正しいレイヤーを編集していることを確認します。ぼかし効果の使いすぎ:
対処法: テキストやロゴなどの重要な要素に強すぎるぼかしをかけないでください。可読性が下がる可能性があります。デザインを強調したいときは、ぼかしは控えめに使いましょう。ぼかし後に意図しない鮮明さが残る:
対処法: 画像にぼかしを適用しても、思ったようにぼけない場合は、ぼかしの量を調整し、Gaussian Blur など別の効果も試して、望みどおりの見た目に近づけます。エクスポート時にぼかしが表示されない:
対処法: エクスポート時にぼかし効果が表示されない場合は、高解像度（PNG または SVG）で書き出して、より高品質にしてください。
Figma で背景をぼかす際によくある FAQ
Figma でテキストをぼかせますか？
ベクター図形や画像にはぼかしを適用できますが、Figma ではテキストに直接ぼかしを適用することはできません。ただし、テキストをラスター化して図形に変換し、その後ぼかし効果を適用できます。デザインの背景をぼかすにはどうすればよいですか？
背景レイヤーまたは画像を選択し、レイヤーブラー効果を適用して、強さを調整します。これにより、前景要素に注目を集めるのに最適です。ぼかしの方向を調整できますか？
Figma のぼかし効果は均一に適用されます。方向性のあるぼかし（モーションブラーのようなもの）が必要な場合は、画像を再び Figma に取り込む前に、Photoshop や Illustrator などの外部画像編集ツールを使用する必要があります。デザインを書き出した後もぼかし効果は残りますか？
はい、ファイルが PNG や JPG などの対応形式で保存されていれば、書き出したデザインにもぼかし効果は保持されます。画像の一部分だけをぼかす方法はありますか？
はい、Figma ではマスクを使って画像の特定の領域を切り出し、その部分にだけぼかし効果を適用できます。Mac で画面録画するには？
Mac で画面録画するには、Trupeer AI を使用できます。画面全体をキャプチャでき、AI アバターの追加、ナレーションの追加、動画内でのズームイン／ズームアウトなどの AI 機能を備えています。trupeer の AI 動画翻訳機能を使えば、動画を 30 以上の言語に翻訳できます。画面録画に AI アバターを追加するには？
画面録画に AI アバターを追加するには、AI 画面録画ツールを使用する必要があります。Trupeer AI は AI 画面録画ツールで、複数のアバターを使った動画の作成を支援し、動画用の自分専用アバターの作成にも役立ちます。Windows で画面録画するには？
Windows で画面録画するには、内蔵の Game Bar（Windows + G）や、AI アバター、ナレーション、翻訳などの高度な機能を備えた Trupeer AI のような高度な AI ツールを使用できます。動画にナレーションを追加するには？
動画にナレーションを追加するには、Trupeer AI の Chrome 拡張機能をダウンロードしてください。サインアップ後、音声付きの動画をアップロードし、Trupeer から希望のナレーションを選んで、編集済みの動画を書き出します。画面録画でズームインするにはどうすればよいですか？
画面録画中にズームインするには、Trupeer AI のズーム効果を使います。特定のタイミングでズームイン・ズームアウトでき、動画コンテンツの視覚的なインパクトを高められます。
関連する質問
関連チュートリアル
