【無料中心】Web制作者が知っておきたいラスター → ベクター変換、WebP化、軽量化ツール７選
AI先生があなたの学習をやさしくサポートします。今までは有料ユーザーにのみ開放していましたが、今なら無料でWeb/AI制作7講座が受講できます。 この機会にAIつきの学習を体験してみてください。
（無料、限定100名、10月5日まで）
» 今すぐ無料講座をチェックする
Webに掲載する画像は、見た目のきれいさとファイルサイズを釣り合った状態にすることが重要です。
今回はそのために必要なラスター画像とベクター画像の使い分け、変換、画像サイズ圧縮に役立つツールをご紹介します。使い方もしっかり解説。WebP変換に役立つ、無料なのに優秀すぎるツールもありますのでぜひ試してみてください！
書き出した画像が重い・汚く見える…Web制作の「あるある」です
見た目は同じように見えても、Webに使う画像は「軽くてきれい」な状態に整える必要があります。
あまり意識されていないクライアントさんもいらっしゃいますが…実は適切な画像を使用するのはとても大事なこと。
ファイル容量の大きい画像を使ったWebページはページの表示速度に悪影響が出たり、ユーザー体験を損ねたりします。最近はCore Web Vitalsの観点からも、画像の最適化はWebサイト品質に直結する可能性大。ページに掲載するファイルの容量を出来るだけ少なく（軽く）最適化するのは、Webデザイン/Webコーディング特有かつ重要課題。
WebデザインやWeb制作について学んでいると、ユーザービリティやSEOなど各項目で「画像は軽量に！」みたいな話を聞きますよね。
しかし、実践しようとすると、こんな困りごとに遭遇しませんか？
- デザインデータから画像を書き出したけど、Web用にしては容量が大きい
- クライアントから渡された素材は画像1枚で2MB以上、そのままではページが重い
- 圧縮して軽くしようとしたら、今度は画像がぼやけて汚くなってしまった
- 渡されたアイコンやイラストを小さくしたら、線がガタついて汚く見える
これらは、実際のお仕事でもよくあるWeb制作の「あるある」問題。
プロの人たちも「どのくらいの解像度で、どのくらいの品質の画像をアップロードしようか」ということを日々意識しています。
小さい画像を拡大表示したら荒れるのは分かるんですけど、アイコンとか実際のサイズより小さく表示しても汚く見えるのは理不尽な気がします。もうどうして良いかわかりません。。
あやのさん
吉田先生
そういう場合は画像形式から見直したほうが良いかもしれないですね。今回はWebに携わる人が知っておくべき画像の種類と、Webで使用するために画像最適化を助けてくれるツールを紹介するよ。
ラスター形式とベクター形式を使い分けよう
画像には大きく分けて 「ラスター形式」 と 「ベクター形式」 の2種類があります。
Web制作ではどちらもよく使うので、まずは違いを押さえておきましょう。
ラスター形式（JPEG / PNG / GIF など）
スマホで撮った写真、デザインデータから書き出したJPEG、PNG画像など、一般的に目にする機会の多い画像はラスター形式です。ビットマップ画像と呼ばれることもあります。
- 無数の小さな点（ピクセル）を大量に並べる、複雑な画像を表現する
- 表示できる色数が多く、写真やグラデーションのある画像など精緻な表現向き
- 拡大すると「ぼやける」「ギザギザになる」
- 縮小すると潰れて線画荒れてしまう
ベクター形式（SVG など）
対してベクター形式はIllustratorで作ったロゴ、Webでよく見るアイコンなどに使われています。代表的な拡張子は.svgですね。
- 点（アンカー）の位置とそれを繋ぐ線、色、カーブなどを数値データとして記憶・再現する
- シンプルなイラストやアイコン、ロゴなど図形的な表現向き
- 拡大・縮小に強く、画質劣化がない
- ファイル容量はラスターよりも軽くなることが多い
吉田先生
ロゴやアイコンなどの図形的な画像は、ベクター形式が適しています。ファイル容量も少ないし、「_sp」や「_pc」みたいにサイズ違いの画像を沢山用意しなくても済みますよ。
でも先生、私がもらったのはPNG画像です。クライアントさんも、デザインデータは持っていないみたいですし…。
あやのさん
吉田先生
そんなときに便利なのがラスター画像をベクター形式に変換できるツール。画像にもよりますが、簡単にPNGからVGに変換できますよ。
ラスター画像→ベクター変換ツール・サービス5選
ベクター変換に使用できるソフト・ツールをご紹介していきます。 一つ目のAdobe Illustrator以外は、すべて無料で使用できるブラウザツールです。
以下では見本として、シンプルなホームアイコン、色数が多くやや複雑なイラストとしてSkillhubキャラクターの２つを使い、使い方・変換結果をご紹介していきます。
1. Adobe Illustrator
無料ツールではありませんが、Adobe Creative Cloud（Pro / Standard）を契約中の方なら使えるAdobe Illustrator。
ベクター変換を行うのに、良く用いられているツールでもあります。
Adobe Illustratorで画像を手軽にベクター化にする方法としては「画像トレース」機能があります。
画像選択するとコンテキストタスクバーに表示されるほか、トップメニュのオブジェクト項目内からも選択可能です。
画像トレースのパネルを使って、元画像と見比べながら調整します。
「拡張」をクリックするとアンカーが作成され、ベクター画像としてトレースされます。
複雑めなイラストの場合は、最初にプリセットで「写真（高精度）」を選ぶと、元画像に近い状態でトレースされやすいです。
自分で一切パスを触らず、Adobe Illustratorではここまでトレースできます。
全く同じというわけではありませんが、まぁ許容範囲内ではないでしょうか。
2. Recraft AI
Recraft AIはロゴ・アイコン生成などベクターデータの扱いに強いAIツールで、ベクター変換機能もあります。
利用にはサインアップが必要、日本語対応していないことがネックですが、かなり精度の高い変換ラスター→ベクター変換が使えます。
以下で無料登録方法とラスター→ベクター変換方法をご紹介しますので、ベクター化にお悩みの方はぜひ試してみてください。
Recraft 無料会員登録方法
上部メニューから使用したい機能、もしくは右上の「Start Now Free」をクリック。
サインイン or サインアップ画面が開きます。
メールアドレスで登録するか、Googleアカウントなどと連携してください。
進んでいくと、以下のようなアンケート画面が開きます。
当てはまるものを選んで Continue ボタンで進めていってください。
最後にプランの選択画面が表示されます。Freeをクリック。
以下のような、デモ画像が挿入されたEdit画面が開きます。
デモ画像は要らないので、クリックして選択→Deleteキーで削除しちゃってOKです。
Recraftでのラスター画像→ベクター変換
では、Recraftでベクター変換を行ってみましょう。
薄グレー色のキャンバス部分をクリックして、何も選択していない状態にします。
左側のCREATE NEWのパネルから、Import imageを選択。
ベクター化したい画像ファイルをアップロードすると、キャンバスに自動的に配置されます。
クリックして選択状態にして、上部メニューから「Vectorize」をクリック。
↓
かなり忠実に変換されているのでわかりにくいですが、左パネルの表記が「VECTOR」になっていれば変換されています。
右上にある Export からファイルをダウンロードすれば終了です。
キャラクター画像の方も変換してみました。
こちらは残念ながら、鼻筋部分が消えてしまっています。。
似通った色を上手く拾ってくれないのが、 現時点でのRecraftの弱点と言えるかもしれません。
今回の素材で試した限り、カーブの滑らかさなどはAdobe Illustratorよりも上でした。
3. Vectorizer
登録不要・無料で手軽にベクター変換が行えるWebサービスとしては Vectorizer が挙げられます。
操作画面は極めてシンプル。
変換したい画像を、赤い線で囲ったボックスにドラッグ・アンド・ドロップするだけです。
特にこちらで行う設定はなく、ドラッグ・アンド・ドロップすると自動的に変換が行われます。
変換が終わったら、ファイルをダウンロードするだけ。
そして、問題のクオリティ。
小さめのサイズで見る分には問題ないレベルです。
拡大すると色が変わっていたり、カクツキが多少見られはします。
Recraftは近い色を拾えず、Vectorizerはラスター画像のノイズまで拾いすぎたイメージ。
4 Autotracer.org
Autotracer.orgも録不要・無料で使えるラスター画像→ベクター変換サービスです。
画像をアップロードして、変換したいファイル形式を選ぶだけのシンプルなUI。
- Upload a file → 画像をアップロード
- Select output format → 変換するファイル形式
- Number of colors → 色数の指定（基本的にはNo reductionでOK）
こちらも、拡大するとかなり粗が目立ちます。
ラスター画像で拡大すると出てしまうノイズを、そのまま拾ってパス化してしまったような印象です。
そのままは使うのは、ちょっと躊躇うクオリティですね。
5. SVG Converter
もう一つ、登録不要・無料で使えるラスター画像→ベクター変換サービスにSVG Converterもあります。
ただ、デモ画像で試した限りあまり上手く行きませんでした。以下、簡単に使い方だけご紹介します。
「Try Free Now」をクリックすると、変換アプリの画面が開きます。
画像をアップロードして、右側の設定パネルで設定→Vectorizeをクリック というシンプル操作です。
ただ…結構、線がヨレてしまっていますね。
キャラクター画像の方は、使えないレベルの仕上がりでした。
正直、元画像のまま使ったほうが良い仕上がりです。
まとめ
結論として、Adobe Illustratorを使えるのならIllustratorで変換するのが最も無難です。
次点としてRecraft、Vectorizerを使って「良かったほうを採用」という感じでしょうか。
なお、Recraftは無料版だと1日の画像アップロード数や、ファイルを非公開にできないなどの制限がありますが、変換以外だけではなく「プロンプトからベクター生成」などの機能もあります。オリジナルのアイコンを作らなきゃいけない機会が多い…などの場合は結構役立つのではないでしょうか。月額$10（≒1500円）の有料版に入ると制限も解除されるので、検討してみても良いかもしれません。
個人的にはAdobe FireflyやIllustratorのテキスト生成より、Web向きな画像を生成してくれるように思います。
ちなみに…
有料サービスでにはなりますが、ベクター化ソフトとして有名な Vectorizer.AI と Vector Magic。
こちらでもベクター化が難しいほうのキャラクター画像を使用して、ラスター画像→ベクター変換を試してみました（プレビューまでは無料でできます）。
使用画像や、各サービスのアップデートのタイミング等でも精度は変わってきますが、今回の画像だとVector Magicの方が精度は良かったです。
Vector Magicの結果
Vectorizer.AIの結果
WebP変換・画像軽量化おすすめ2大ツール
ベクター変換ではなく、ラスター画像のままで良いけど画像を最適化したい、というケースも結構あります。
「この画像のファイルサイズを小さくしたい」や「pngではなくWebPにしたほうが良いんじゃない？」という場面で役立つ、ブラウザツールをご紹介します。とりあえず、以下の2サイトをブックマークしておけば大抵のことは何とかなります。
デモではpexelsで公開されている、以下の画像を使用させていただきました。 「大 1920x2432 」 で約837KB、そのまま使うにはちょっと重いかな…というファイルサイズです。
最強ツール「Squoosh」
Squooshは、Googleが提供するブラウザベースの画像変換・圧縮ツール。
ファイル形式、画質とファイルサイズを、リアルタイムプレビューを確認しながら細かく調整できることが最大の特徴。画像形式の変換と圧縮が一気にできます。
使い方
真ん中のDrop OR Paste と書かれているところに画像ファイルを入れます。
クリックしてエクスプローラーから選択もできます。
↓
画像を追加すると、上記のような画面に切り替わります。
ファイル形式を変更したいときは Compress の下にあるプルダウンで変換したい形式を選びます。
下部にあるEffort（圧縮率）は基本的にそのままでOK。
Quality（画質）を、劣化感が目立たない程度にまで下げていきます。その下、折りたたまれている「Advanced settings」部分ではさらに細かい設定ができますが、基本的には使わなくて大丈夫です。
上図の場合は元ファイルから50%以上のサイズダウンに成功しました。
「ちょうどいい落としどころ」を見つけたら、最下部にあるダウンロードアイコン（）から変換されたファイルをダウンロードすれば終了です。
ちなみにEditパネルの上部にあるResizeをONにすると、画像のリサイズも同時にできます。
便利ですし、個人的にはPhotoshopなどの「Web用に書き出し」よりもきれいに軽量に仕上がる気がしています。
サルワカ道具箱
Web制作学習時にお世話になった方も多いであろうサルワカさん。
実は素晴らしくありがたい、Webツール集も提供してくださっています。
こちらは画像のリサイズ、PNG→JPG変換、WebP変換と項目ごとにツールが分かれています。 どれも、複数の画像をまとめて一括処理できることが特徴。 設定はあまり細かくなく、ほぼお任せです。
WebP変換（画像をWebPに変換）ならこんな感じ。
「とりあえずこの画像一式、軽量化したいんです」みたいな場面でとても便利です。
デモ画像（上図、左端）のように「もうちょっと、なんとか…！」というものは、改めてSquooshで圧縮しても良いですしね。
まとめ
ラスター→ベクター変換、WebP変換、画像圧縮に役立つツールをご紹介させていただきました。 費用負担がない無料ツールでも、作業時間を短縮する・Webページの表示クオリティアップに役立つツールはたくさんあります。
また、こちらの記事で紹介したChatGPTやGoogle Geminiにアイコンやイラストを作成してもらう → ベクター変換を行うなどすると、イメージ画像や図表制作なども楽になり、オリジナリティも出ます。
色々なサービス、ツールを活用して「自分の負担を減らしながら、制作物のクオリティを上げる」方法を編み出していましょう！
まずは無料で7講座から始めましょう！
募集人数には制限があります。サインアップはお早めに。
10月5日まで