Figmaでぼかしをかける方法。写真にぼかしを入れたいとき。 / いがわ

.

Memo

Figmaで写真にぼかしをかける方法。

Figmaのエフェクト機能でぼかし。

Figmaには4種類のエフェクトがある。

Figmaにデフォルトで備わっているエフェクトは下記の4種類。

  • インナーシャドウ
  • ドロップシャドウ
  • レイヤーブラー
  • 背景のぼかし
  • 「ブラー(Blur)」は日本語で「ぼかし」の意味。)

この中の、「レイヤーブラー」と「背景のぼかし」で、写真にぼかしをかけることができる。

ぼかしは写真などのラスター(ビットマップ)画像に限らず、ベクター画像や、文字や図形にもかけられる。


レイヤーブラーでぼかし。

レイヤーブラー。

「画面右側のサイドバー」 > 「デザインタブ」 > 「エフェクト」 > 「レイヤーブラー」 > 「エフェクトの設定」。
レイヤーブラーでぼかす方法。
例)
  1. 画像を用意し、移動ツールで選択する。
  2. すると、画面右側のサイドバーに「エフェクト」が表示される。
  3. 「エフェクト」の中から「レイヤーブラー」を選択する。
  4. 「エフェクト」の中から「エフェクトの設定」をクリックする。
  5. ぼかしの範囲(Bの値)を数値で決める。
レイヤーブラーで実際にぼかした手順。

画像を用意し、移動ツールで選択する。

Figmaのぼかし。レイヤーブラー。

画面右側の「エフェクト」から、「レイヤーブラー」を選択し、左横の「エフェクトの設定」のアイコンをクリックする。

以下の例では、「B = 30」の値なので、30pxのぼかし(Blur)となる。

Figmaのぼかし。レイヤーブラー。

Photo by Bogdan Farca

同じ手順で、文字や図形にもぼかしをかけられる。

テキストツールで書いた文字をぼかした場合。

例)

Figmaのぼかし。レイヤーブラー。

シェイプツールで作った星形の図形をぼかした場合。

Figmaのぼかし。レイヤーブラー。

ぼかしがかからない場合は、「選択」されているかを確認する。それでもダメなら再起動をしてみると良い。


背景のぼかしで特定の箇所をぼかし。

背景のぼかし。

「画面右側のサイドバー」 > 「デザインタブ」 > 「エフェクト」 > 「背景のぼかし」 > 「エフェクトの設定」。
背景のぼかしでぼかす方法。
例)
  1. 画像を用意する。
  2. 上部のバーの中にある「シェイプツール」から「楕円」を選択する。
  3. 作った楕円を選択し、用意した画像のぼかしをかけたいところへ移動する。
  4. 画面右側のサイドバーの「エフェクト」から「背景のぼかし」を選択する。
  5. 「エフェクト」の中から「エフェクトの設定」をクリックする。
  6. ぼかしの範囲(Bの値)を数値で決める。
  7. 「塗り」の値を下げて、不透明度を下げる。
  8. 楕円の角度や不透明度などの調整をする。
背景のぼかしで実際にぼかした手順。

写真を2枚並べているのは、比較してわかりやすいようにするため。

背景でぼかしの手順。

楕円ツールで楕円を作成する。

背景でぼかしの手順。

楕円を、ぼかしをかけたいところへ移動する。

背景でぼかしの手順。

楕円を選択したまま、「エフェクト」から、「背景のぼかし」を選択し、左横の「エフェクトの設定」のアイコンをクリックする。

背景でぼかしの手順。

ぼかしの範囲を数値で決める。ひとまず「50」に。

背景でぼかしの手順。

「塗り」の値を下げて、不透明度を下げる。ひとまず10%に。

背景でぼかしの手順。

被写体へ合わせ、楕円の角度を調整する。

ぼかしの量が多く感じたので、「背景のぼかし」も、数値を「50」から「40」へ再調整。

背景でぼかしの手順。

完成。

背景でぼかしの手順。


Figmaのプラグインでぼかし。

Filter / effects

Figmaのプラグイン「Filter / effects」は、「ぼかし」だけでなく、たくさんのエフェクトや、プリセットがある。

現時点ではダークモードに対応していないため、目に問題を抱えている自分にはまだ使えない。)

Figmaのプラグイン、Filter / effectsの配布サイトの画像。

作者:Andreslav Kozlov
プラグインサイト:Filter / effects | Figma

Figmaでぼかしをかける方法を見つめる猫ちゃん。

以上、参考になれば幸いです。


Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。(元々はメモ書きでした。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真は主にUnsplashPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。

井川 宜久 / Norihisa Igawa
デザイナー、ディレクター、講師、コーチ / 井川宜久

Figma 関連メモ。

デザインツールFigmaのロゴ。

使い方 & プラグインなど。


免責事項について

  • 記事ページ(Memosのページ)は当初は文字通りメモ書きでした。その後、修正や更新をしております。
  • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ早急に対応いたします。
  • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。