【Photoshop】画像の境界線をぼかす方法

最近、WordPress案件でサイトに使用する画像の一部をぼかしてほしいというご依頼がありました。
最初はCSSで調整しようと思ったのですが、うまくいかず、結局画像そのものをPhotoshopでぼかしてからアップロードすることに。

今回はそのときの作業内容をメモとして残しておきます。

目次

参考にさせていただいた記事はこちらです。

CAD Lab
【2025】Photoshopで境界線をぼかすには?画像やテキストをぼかす方法を解説 | キャド研 Photoshopで画像や文字の境界線をぼかす機会は少なくありません。しかし、いざ行うとなると、どのような手順だったか忘れてしまっていたということもあるでしょう。本記事...
note(ノート)
画像にグラデーションマスクをかけてなじませる方法 【Photoshop初心者向け】|mame | webデザイナー はじめに Photoshopで写真素材を使ったクリエイティブを作りたい時などに、下記のようなことはありませんか? ・用意した素材が小さくて、上下・左右が足りない ・被写体の...

これらを参考に、マスクをかけてみたのですが・・・うまくいかず。
白くぼかしたいのに黒くなってしまったり、思った通りに仕上がりませんでした。

  • 背景の色の確認
    「もしかして背景の色が原因?」と気づき、カンバスカラーを透明から白に変更してみました。
  • 保存設定の確認
    それでも変わらず、次に保存時の設定を見直しました。
    「透明部分」のチェックを外すと……

無事に白く境界線がぼけるようになりました!

今回、作業に手こずってしまったので、失敗しないためのチェックリストを作りました。
チェックリスト付きの記事はこちら

あわせて読みたい
Photoshopで画像の境界線をぼかすときのチェックリスト 先日、WordPress案件で画像の境界線をぼかしてほしいという要望があり、Photoshopでのぼかしに少し苦戦しました。その経験をもとに、失敗しないためのチェックリストを...
目次