Web制作の現場でクライアントから素材をもらったとき、「画質が悪くてそのままでは使いづらい…」と感じた経験はないでしょうか。
ロゴや商品画像の解像度が低いままサイトに掲載してしまうと、どれだけコーディングが綺麗でも制作物全体の印象が安っぽくなってしまいます。
本記事では、Figmaに搭載されているAI機能を使って、低画質画像を一瞬で高画質化したり、背景を拡大・削除したりする3つの方法を、実演形式で解説します。
解説するのは、Web制作400件以上の現場経験を持ち、デイトラのマネージャーも務めるはにわまんさんです。読み終えた頃には、Photoshopなどの外部ツールを開かずとも、Figma1つでクライアント素材を実務レベルまで仕上げられるようになります。
・FigmaのAI機能でできる3つの画像加工（拡大・削除・高画質化）
・各機能の具体的な操作手順とユースケース
・FigmaのAI機能を使う際の注意点（有料プラン）
低画質な画像はWeb制作物の信頼を下げる
Web制作をしていると、クライアントから「この画像を使ってください」と素材を渡されるケースは非常に多いです。ところが、いざファイルを開いてみると画質が悪く、そのままサイトに掲載するのが難しい状態になっていることがよくあります。
ロゴや商品の画像が荒いままサイトに使われてしまうと、どれだけコーディングが綺麗でも、サイト全体がどうしても安っぽく見えてしまいます。クライアントに「もっといい画像はありませんか？」と聞いても、「これしかないです」と返ってくることも、Web制作の現場ではよくある話です。
かといってPhotoshopで複雑な加工を行うのも時間がかかりますし、そもそも元画像が小さすぎる場合は、従来の引き延ばし方ではどうしてもぼやけてしまいます。こうした画質の悪さは、そのまま制作物全体の信頼低下につながってしまうのです。
しかし、これから紹介するFigmaのAI機能を使えば、こうした悩みは1発で解決できます。外部のツールや複雑なソフトを使う必要もなく、Figmaの中でワンクリックするだけで、扱いに困っていた画像が使いやすい素材に変わります。
ブラウザ上で動作するUI/UXデザインツール。Web制作・アプリデザイン・プロトタイピングの定番として広く使われており、近年はAI機能の搭載が急速に進んでいます。
FigmaのAI機能でできる画像加工は3つ
今回紹介するFigmaのAI画像機能は、大きく3つのステップに分けられます。どれもWeb制作の現場で出番が多い機能なので、順番に押さえていきましょう。
- 背景画像の拡大（Expand）
- 背景の削除（Remove Background）
- 画像の高画質化（Boost Resolution）
これまではPhotoshopや別の画像編集ツールを使い分けて行っていた作業が、Figmaの中だけで完結するようになりました。ここからは、それぞれの機能を実際の画面操作とともに見ていきます。
【機能1】背景画像をAIで自然に拡大する方法（Expand）
最初に紹介するのは、背景画像の拡大機能です。
たとえば縦長の画像をクライアントから渡されたものの、Webサイトの配置場所によっては縦長のままだと使いづらい、というケースはよくあるはずです。せっかくいい素材なのに使えない、という状況を防げるのがこの機能です。
背景画像の拡大の操作手順
- 対象の画像を選択する
- 画像下に表示されるツールバーから「More」を開く
- 「Expand」を選択する
- どの方向にどれだけ拡張するかをドラッグで指定する（例: 左右に拡張）
- サイズが決まったらチェックのアイコンを押す
チェックを押すと、Figma内部でAIが動き、元画像の周囲の状況を推測しながら自然に画像を拡張してくれます。動画内では縦長の画像を左右方向に広げており、もともとの絵柄を壊すことなく、違和感のない形で背景が追加されていく様子が確認できます。
「ちょっと小さくて使いづらい」と感じた画像は、まずこのExpand機能で使える形に変換できないか検討してみるのがおすすめです。
画像の周囲をAIが推測して描き足し、構図を拡張する機能。背景の続きを生成してくれるため、縦横比の調整やトリミング位置の自由度を上げる用途に向いています。
【機能2】背景をワンクリックで削除する方法（Remove Background）
続いては背景削除の機能です。
人物が中央に配置され、周りに風景が写っている画像から、人物だけを切り抜いて使いたいというケースは多いはずです。これまでは人物の周りにパスを取って背景を1つずつ削っていく必要がありましたが、AIの背景削除を使えば一瞬で完了します。
背景削除の操作手順
- 対象の画像を選択する
- 下のツールバーから「Remove Background」を選択する
これだけで、人物の周りの背景が一瞬で消えます。
動画内では、従来パス取りが大変だった「複雑な髪の毛の部分」も丁寧に切り取られていることが確認できます。そのまま素材として使えるレベルの仕上がりになるため、切り抜き後の細かい修正もほぼ不要です。
以前であれば手間のかかっていた背景削除作業が、Figmaの機能だけでワンクリックで完結します。人物切り抜きはWeb制作の現場で頻出する作業なので、必ず押さえておきたい機能です。
画像から被写体を自動検出し、背景部分を透過処理する機能。髪の毛や輪郭の細かい部分もAIが識別するため、従来のパス取り作業を大幅に短縮できます。
【機能3】低画質な画像を高画質化する方法（Boost Resolution）
最後に紹介するのが、低画質画像を高画質化する機能です。
対象とする画像は、ぼやけた状態のコーヒー豆の画像です。画質が低くて細部が潰れてしまっており、そのままではサイトに置きづらい状態の素材です。
画像の高画質化の操作手順
- 対象の画像を選択する
- 下のツールバーから「More」を開く
- 「Boost Resolution」を選択する
ボタンを押すと、もともとぼやけていた画像が、はっきりとした高画質な画像に変換されます。動画内のコーヒー豆の画像も、適用前と適用後で輪郭の鮮明さが明らかに変わっていることが確認できます。
低画質で使いづらかった素材を高画質化することで、Webサイトに置きやすい状態に持っていけます。ぜひこの機能も使えるようにしておきましょう。
画像の解像度をAIで引き上げ、ぼやけや粗さを補正する機能。元画像の情報量が少なくても、AIが細部を補完して鮮明な画像に変換してくれます。
FigmaのAI画像機能を使う際の注意点
ここまで、FigmaのAI画像機能として背景拡大・背景削除・高画質化の3つを紹介してきました。これらの機能を使えば、Figmaのキャンバス上で画像加工をひと通り完結できるようになっています。画像をどう使おうか悩んでいる方は、まずFigmaの機能で何ができるかを起点に考えると、素材の活用幅がぐっと広がります。
ただし、1点だけ注意点があります。今回紹介した3つの機能は、いずれもFigmaの有料プラン契約者のみ利用可能です。
Figmaの有料版では、これ以外にも実務で役立つ機能が多数追加されていきます。ご自身の業務効率化と費用を天秤にかけて、契約を判断するとよいでしょう。
Figmaの画像高画質化に関するよくある質問
Q. FigmaのAI画像機能は無料プランでも使えますか？
動画内で紹介されている背景拡大・背景削除・高画質化の3機能は、いずれもFigmaの有料プランでのみ利用できます。無料プランでは利用できない点に注意してください。
Q. Photoshopで画像を加工する場合と何が違いますか？
Photoshopでは複雑な加工に時間がかかるうえ、元画像が小さすぎると従来の引き延ばし方ではぼやけてしまいます。FigmaのAI機能はワンクリックで完結し、AIが画像の不足部分を推測して補完するため、低画質素材の救済に特に向いています。
Q. 背景拡大（Expand）はどんな画像に向いていますか？
縦長や横長など、Webサイトの配置場所と縦横比が合わない画像に特に有効です。AIが周囲の状況を推測して自然に背景を描き足してくれるため、トリミング位置の自由度を上げたいときに重宝します。
Q. 背景削除（Remove Background）の精度はどのくらいですか？
動画内の実演では、従来パス取りが大変だった髪の毛の細部まで丁寧に切り抜かれていることが確認できます。そのまま素材として使えるレベルに仕上がるため、後から手作業で整えるコストはほぼ不要です。
Q. 高画質化（Boost Resolution）はどんな画像に効果がありますか？
動画内ではぼやけたコーヒー豆の画像が対象として使われており、適用後は輪郭がはっきりとした高画質な画像に変換されています。クライアントから渡された解像度の低い素材をWebサイトに置きやすい状態に整えたいときに役立ちます。
FigmaとWeb制作スキルを本格的に学ぶならデイトラ「Web制作コース」
本記事で紹介したFigmaのAI機能は、Web制作の現場で素材の質に左右されないアウトプットを生むための、強力な武器になります。
ただし、ツールの操作だけを覚えても、実務レベルで通用するWeb制作者になるには、コーディング技術や案件対応力を含めた総合的な学びが必要です。
デイトラの「Web制作コース」は、未経験からでも実務レベルのプロを目指せるカリキュラムを提供しているオンラインスクールです。
広告費を最小限に抑え、口コミと品質で支持を得てきたからこそ、業界の数分の一という低価格で、本気で身につけたい方に応えるカリキュラムを用意できています。
ツールの操作だけではなく、実務で通用するコーディング技術を本気で身につけたい方は、ぜひ一度カリキュラムをチェックしてみてください。
「自分に合うか不安…」という方は公式LINEへ
「独学とスクール、どちらが自分に合っているか分からない」
「複数のコースのうち、どれを選ぶべきか相談したい」
そんな方は、デイトラ公式LINEに登録してみてください。
自分に合ったコースの診断や、無料の学習動画などの特典もプレゼント中です。
無理な勧誘は一切ありませんので、まずは情報収集として気軽に登録してみてくださいね。
はにわまん（@haniwa008）
Web制作400件以上の現場経験を持つコーダー。オンラインスクール「デイトラ」のマネージャーとして、未経験者がプロを目指すための学習サポートにも携わっている。Web制作現場で役立つ実践的なノウハウをYouTubeで発信中。
