figma-how-to-use-blur-effect
公開日: 2021.06.25  | 更新日: 2021.10.09

Figmaでオブジェクトや画像にぼかしを入れる方法

今回は、Figmaでオブジェクトや画像をぼかす「Layer blur」機能を使って、グラフィック作成に活用できる便利なテクニックをいくつかご紹介します。プラグインと組み合わせると、Photoshopを使ったような高度なグラフィックも制作できますので、覚えておいて損はないです。

ぼかしを適用することで、以下のような効果が期待できます。

  • 写っている人物やPCの画面にモザイクを入れる(情報を隠す)

  • 風景やシチュエーションを抽象化する(ディテールの消去)

  • 背景をぼかして注目させたいオブジェクトを際立たせる(強調)

この記事のターゲット

  • Figmaの初心者

  • Figmaでぼかし(Blur)の使い方が知りたい方

  • FigmaでGlassmorphismを試してみたい方


オブジェクトや画像全体を均一にぼかす方法

Figmaでは、画像や図形にぼかし(Layer blur)の効果を適用することができます。

「Layer blur」の手順は以下の通りです。

  1. ぼかしたい図形や画像を選択する

  2. 右プロパティの「Effect」で「+」をクリック

  3. 追加されたEffectのレイヤーの「Drop shadow」を「Layer blur」に変更

  4. Layer blurの左側の「☀️」をクリックしてぼかしの強さを調節する

figma-effect-layerblur

「Layer blur」で設定できるオプションは以下の通りです。

  • Blur:ぼかしの強さを数値指定する。「0」が全く適用されていない状態として、数値が大きくなるほどぼかしが強くなる。

layer-blur-values

Effectは画像だけでなく、テキストやベクターオブジェクトにも適用できますので、奥行きを表現したり、変形させたドロップシャドウとして使うなど、色々応用が効きます。

layer-blur-shadow

画像やオブジェクトを部分的にぼかす方法

Figmaでは、レイヤーの背面にある要素を透過越しにぼかす「Background Blur」という機能があります。

この機能を使うことで、任意の形の領域を部分的にぼかすこともできます。

「Background blur」の手順は以下の通りです。

  1. ぼかしたい図形や画像(ベース)と、ぼかしたい領域の形のオブジェクト(フィルター)を用意し、ベースの前面にフィルターを重ねる

  2. フィルターのオブジェクトを選択する

  3. 右プロパティの「Fill」で透過度を「0.1~99.99%」の値になるようにする

  4. 右プロパティの「Effect」で「+」をクリック

  5. 追加されたEffectのレイヤーの「Drop shadow」を「Background blur」に変更

  6. Background blurの左側の「☀️」をクリックしてぼかしの強さを調節する

add-background-blur

巷で流行った擦りガラスのようなエフェクト「Glassmorphism」もこの機能の応用で実現できます。

create-glassmorphism
glassmorphism

すりガラス越しに文字を置けば、なんとなくリッチな印象になりますね。

写真の背景だけをぼかす方法

最後に、プラグインを応用して背景をぼかす方法です。

使うプラグインは「Remove BG」です。以下の記事で使い方を詳しく紹介しています。

Figmaで写真やイラストの背景を簡単に切り抜き・透過する方法

今回は、Figmaで画像から背景を簡単に切り抜いてくれるプラグイン「Remove BG」の紹介です。画像を組み合わせてコラージュ画像を作りたい時や、写真から人物を抜き出したい時などに便利なプラグインです。 ... 続きを読む

figma-remove-bg-plugin

やり方は以下の通りです。

  1. 背景用と人物用の同じ画像を2枚用意する

  2. 人物用の画像に「Remove BG」を適用して人物を切り抜く

  3. 背景用の画像に「Layer Blur」を適用する

  4. 背景用画像の前面に切り抜いた人物の画像を重ねる

add-two-pictures

出来上がった画像はこちらです。

remove-bg-blur

周りの風景がぼかされているので、人物が浮き上がって見えます。

ちなみに画像は「Unsplash」というプラグインでランダムに出てきたものを使いました。


いかがでしょうか。ぼかしを使った表現ができるようになると、グラフィックのパターン出しにも幅が出てくるので、ぜひ活用してみてください。

以下はこの記事を見た方におすすめの記事です。よかったら覗いてみてください。

Figmaで簡単にスマホやPCのモックアップに画像をはめ込む方法

今回は、Figmaのプラグイン「Mockup」を使って、スマートフォンやPCなどのデバイスの画面に、スクリーンショットなどの画像を簡単にはめ込む方法を紹介します。 はめ込みたいデバイスの画面が斜めになっている場合でも対応できますので、サービス紹介用の素材作りにおすすめです。 ... 続きを読む

figma-mobile-and-destop-mockup

Figmaで画像をドット絵のようなモザイクに変換する方法

今回は画像をモザイク化し、ピクセルドットを個別に分解したベクターデータに変換できるプラグイン「Pixels」を紹介します。画像を8bitドットアート風に変換したり、プライバシーに配慮したような画像を作成でき、どんな画像でも簡単にモザイク加工できるので、ぜひ試してみてください。 ... 続きを読む

figma-pixels-plugin

Figmaで画像の色をセピアや単色のモノクロに変換する方法

今回は、SNSやブログなどで使用するバナー画像にすぐ使える、モノクロ画像をFigmaで簡単に作成する方法をまとめました。 ... 続きを読む

figma-brend-mode-luminosity

最新の記事はこちら
広告
この記事を書いた人
うえんつ

うえんつ

Twitter
SaaS・アプリ開発などWEB領域での課題解決が得意なデザイナーで、このブログのオーナーです。
今の関心事
Figma・UI/UX・空間設計・QOL・料理
広告