Web制作をしていると、クライアントから「この画像を使ってください」と渡された素材の画質が悪くて困った経験はありませんか。
ロゴや商品画像が荒いままだと、どれだけコーディングが綺麗でもサイト全体が安っぽく見えてしまいます。
この記事では、FigmaのAI機能を使って画像を高画質化する方法を、実際の操作画面に沿って解説します。外部ツールや複雑なソフトを使わず、Figma上のワンクリックで背景の拡大・削除・高画質化まで完結できます。
解説は、Webコーディングをメインに400件以上の案件に関わってきたデイトラメンターのはにわまんが担当しています。
・FigmaのAI機能で低画質・小サイズ・背景ありの画像を解決できる理由
・背景画像を自然に拡大する「Expand」の使い方
・人物を一瞬で切り抜く「Remove Background」の使い方
・低画質画像をくっきりさせる「Boost Resolution」の使い方
・これらの機能を使う前に知っておきたい注意点（有料プラン）
公式LINEでは、デイトラ受講に関する個別のお悩み相談も承っております！
「デイトラは積極的に情報を開示し、ミスマッチをなくす」方針を取っているので、あなたの状況に合わせて、中立の立場から回答いたします。
低画質・小サイズ画像に悩むWeb制作者へ｜FigmaのAI機能とは
Web制作をしていると、クライアントから「この画像を使ってください」と素材を渡されることは多いはずです。
いざファイルを開いてみると、画質が悪くてどう使おうか悩んだ経験のある方もいるでしょう。
ロゴや商品の画像が荒いままサイトに使ってしまうと、どれだけコーディングが綺麗でもサイト全体が安っぽく見えてしまいます。
「もっといい画像はありませんか」と聞いても「これしかないです」と言われることは、Web制作の現場ではよくあることです。
かといってPhotoshopで複雑な加工をするのは時間がかかりますし、そもそも元画像が小さすぎると、従来の引き延ばし方ではどうしてもぼやけてしまいます。
こうした画質の悪さは、そのまま制作物の信頼低下につながってしまいます。
そこで役立つのが、今回紹介するFigmaのAI機能です。
外部のツールや複雑なソフトを使う必要はなく、Figmaの中でワンクリックするだけで、使い方に困っていた画像を使いやすい画像に変えられます。
解説者のはにわまん自身も、以前はいろいろなツールを使いながら画像編集をしていましたが、Figmaにこの機能が搭載されてからはFigmaだけで完結できるようになったと語っています。
今回は、実務でよく出てくる3つのステップを順番に紹介します。
- 背景画像の拡大
- 背景削除
- 画像の高画質化
Figmaは、Webサイトやアプリのデザインを作成できるブラウザベースのデザインツールです。近年はAIを活用した画像編集機能が搭載され、デザインだけでなく画像素材の加工までFigma内で行えるようになっています。
【手順①】背景画像の拡大｜Expandで縦長画像を自然に広げる
まず1つ目は、背景画像の拡大です。
ここで使う元画像は縦長の画像ですが、Webサイトの配置場所によっては縦長のままだと使いづらいことがあります。
「せっかくいい素材なのに使えない」というケースでも、背景画像の拡大機能を使えば、縦長画像の周りを拡張していけます。
Expandの操作手順
- 拡張したい画像を選択します。すると画面下にツールバーが表示され、画像に対する指定を加えられます。
- ツールバーの「モア」からExpandを選択します。
- どの方向にどれだけ拡大するかをドラッグで指定できるので、今回は左右に拡張します。
- サイズが良ければチェックのアイコンを押します。すると、Figmaの中でAIが動いて画像を拡張してくれます。
拡張後の画像を見ると、元々はここまでだった範囲を、AIが周りの状況を推測して自然に追加してくれていることが分かります。
かなり自然な画像として拡張されるので、「ちょっと小さくて使いづらいな」という画像は、この拡張機能で使えるようにならないか検討してみると良いでしょう。
Expandは、画像の周囲をAIが推測して描き足し、指定した方向へ拡張する機能です。縦長・小サイズなど、そのままでは配置しづらい画像を、レイアウトに合わせた比率へ広げたいときに使います。
【手順②】背景削除｜Remove Backgroundで人物を一瞬で切り抜く
続いて2つ目は、背景削除です。
元の画像は、人物が中央に配置され、周りが風景になっているものです。
この人物だけを切り抜いて使いたいというケースは多いはずです。
以前であれば、人物の周りのパスを取って周りの画像を消す作業が必要でした。
しかし、AIの背景削除機能を使えば、一瞬で背景を消すことができます。
Remove Backgroundの操作手順
- 画像を選択した状態で、下のツールバーのRemove Backgroundを選択します。
- 押すだけで、人物の周りの背景が消えます。
実際に処理すると、人物の周りの背景がしっかり消えていることが分かります。
複雑な髪の毛の部分も丁寧に切り取ってくれるので、そのまま使えるような品質になっています。
以前だったら大変だった作業も、Figmaの背景削除機能を使えば一瞬で終わるので、ぜひ押さえておいてください。
Remove Backgroundは、画像から被写体を自動で判別し、背景だけを透過（削除）する機能です。人物や商品を切り抜いてバナーやサイトに配置したいときに、パスを取る手作業を省けます。
【手順③】画像の高画質化｜Boost Resolutionで低画質をくっきりさせる
最後は、低画質の画像を高画質にする方法です。
対象とする画像はコーヒー豆の画像で、画質が低くてぼやけてしまっている表示になっています。
これもFigmaの機能を使って高画質にできます。
Boost Resolutionの操作手順
- 画像を選択した状態で、下のツールバーの「モア」からBoost Resolutionを選択します。
- これで画質が変わります。
処理後を見ると、元々はぼやけていた画像が、くっきりとした高画質な画像に変わっていることが分かります。
低画質で使いづらかった画像を高画質化することで、Webサイトに置きやすくなります。
この機能も使えるようにしておくと良いでしょう。
ここまで、背景拡大・背景削除・高画質化の3つを紹介してきました。
このように、もうFigmaのキャンバス上でさまざまな画像加工ができるようになっています。
画像をどう使おうか悩んでいる方は、まずは「Figmaの機能で何かできることはないか」と考えてみると、画像も使いやすくなってくるはずです。
Boost Resolutionは、低解像度でぼやけた画像をAIが補間し、解像度を引き上げてくっきりさせる機能です。小さく荒い素材しかないときに、Webサイトへ配置できる品質まで高めたい場面で役立ちます。
FigmaのAI画像機能を使う際の注意点（有料プラン）
便利なAI画像機能ですが、1点注意点があります。
今回紹介した機能は、Figmaの有料プランで使える機能です。
そのため、有料プランに契約している方だけが使えると認識しておいてください。
とはいえ、Figmaの有料プランでは、今回のような画像機能以外にも使える機能がたくさん増えます。
ご自身の業務の効率化と天秤にかけながら、契約するかどうかを判断すると良いでしょう。
これまで画像の拡大・切り抜き・高画質化は、PhotoshopやWeb上の変換ツールなど複数のソフトを行き来する必要がありました。Figmaの有料プランなら、デザインからコーディング用の素材加工まで1つのツール内で完結できるのが大きなメリットです。
Figmaの画像高画質化に関するよくある質問
Q. FigmaのAI画像機能（Expand・背景削除・高画質化）は無料で使えますか？
いいえ、今回紹介したExpand・Remove Background・Boost Resolutionは、Figmaの有料プランで使える機能です。無料プランでは利用できないため、有料プランの契約が前提になります。
Q. どんな画像でもきれいに拡大・高画質化できますか？
Expandは周囲の状況をAIが推測して自然に描き足し、Boost Resolutionは低画質の画像をくっきりさせてくれます。動画では縦長画像の左右拡張や、ぼやけたコーヒー豆画像の高画質化が自然に処理されていました。ただしAIによる推測処理のため、仕上がりは元画像や被写体によって変わる点は理解しておきましょう。
Q. Photoshopでの加工と比べて何がメリットですか？
Photoshopでの複雑な加工は時間がかかり、元画像が小さすぎると引き延ばしてもぼやけてしまいます。FigmaのAI機能なら、外部ツールを使わずFigma内のワンクリックで拡大・背景削除・高画質化ができるため、Web制作の作業効率が上がります。
Q. 背景削除は髪の毛のような複雑な部分もきれいに切り抜けますか？
はい。動画では、人物の複雑な髪の毛の部分もRemove Backgroundが丁寧に切り取り、そのまま使える品質になっていました。以前のようにパスを取って手作業で消す必要がなくなります。
FigmaのAI機能をさらに深く学ぶならデイトラ「Webデザインコース」
本記事で解説したFigmaのAI画像機能は、独学でも基礎を押さえることはできます。
ただし、実務で通用するレベルまでデザイン制作を体系的に習得するには、現役で活躍するメンターから添削を受けながら学べる環境が近道です。
デイトラの「Webデザインコース」は、実務レベルを想定したカリキュラムと、現役プロによる質問対応が特徴のオンラインスクールです。
広告費を最小限に抑え、口コミと品質で支持を得てきたからこそ、業界の数分の一という低価格で学べます。
Figmaを使いこなして、素材の質に左右されないクオリティの高い制作物を仕上げたい方は、ぜひ一度カリキュラムをチェックしてみてください。
「自分に合うか不安…」という方は公式LINEへ
「独学とスクール、どちらが自分に合っているか分からない」
「複数のコースのうち、どれを選ぶべきか相談したい」
そんな方は、デイトラ公式LINEに登録してみてください。
自分に合ったコースの診断や、無料の学習動画などの特典もプレゼント中です。
無理な勧誘は一切ありませんので、まずは情報収集として気軽に登録してみてくださいね。
はにわまん（@haniwa008）
Webコーディングをメインに400件以上の案件に関わってきたWebクリエイターでありデイトラWeb制作コースのメンター。技術ブログの運営など、Web制作の現場で役立つ実践的なノウハウを発信しています。本記事はご本人の解説動画をもとに構成しています。
