ピクセルアートの鋭い輪郭を保ってベクター化する方法
四角いグリッドを保つSVG変換と、意図して滑らかな輪郭にするトレースの違いを解説します。工程、制約、確認項目を紹介します。
目次
ピクセルアートはベクター化できますが、まず四角いピクセルを見えるまま残すか決めます。元の見た目を保つなら、グリッドやオブジェクトモザイクとして再構築します。滑らかなイラストにするなら輪郭のベクター化を使います。結果は異なり、一般的なトレースが適切な選択を代わりにすることはできません。
Scratchでゲームのスプライトを編集する場合、Convert to Vectorボタンは編集モードを変えますがビットマップをトレースしません。Scratchのコスチューム編集の確認で、ピクセルを残す、部分を描き直す、トレースSVGを読み込む方法を選び、置き換えたコスチュームの中心を元と比べます。
目的がウェブやゲームで鮮明に表示するだけなら、SVGは不要かもしれません。適切なサイズのPNGを最近傍方式で拡大するほうが、軽く忠実な場合が多いものです。ウェブではimage-renderingプロパティのcrisp-edgesやpixelatedで、硬い輪郭を保つ表示ができます。
ツールより先に結果を選ぶ
- サイズが適切で、鮮明なラスター表示だけが必要ならPNGを使います。
- 四角や階段状の輪郭がデザインの一部ならグリッドSVGを作ります。
- 滑らかなシルエットと編集可能な曲線が欲しい場合は輪郭をベクター化します。
- 滑らかにした結果を「ピクセルアートを保った」とは呼びません。ベクターによる再解釈です。
3つの用途に3つの出力
| 出力 | ピクセルの変化 | 適した用途 | 主な制約 |
|---|---|---|---|
| 最近傍で拡大するPNG | ラスターグリッドを変更しない | ゲーム、ウェブアイコン、スプライト、画面表示 | ラスターで、ピクセルグリッドに依存 |
| グリッド・モザイクSVG | 各セルをベクタータイルや結合した長方形にする | 大きな表示、プロット、色のグリッド編集 | オブジェクトが増えファイルが大きくなる場合がある |
| 滑らかな輪郭SVG | 色領域を通常の曲線や形にする | ロゴ、ステッカー、印刷、簡略化したイラスト | 四角いピクセルの個性が変わる |
形式の優劣より、四角が何を意味するかが重要です。ピクセルアートの階段状の輪郭は意図的な場合が多く、滑らかにすると、線画をぼかすのと同じくらい絵を損なう場合があります。
方法1：ピクセルグリッドを正確に保つ
最も直接的な変換は、ラスターのセルをベクターの長方形にすることです。赤いピクセルは赤い四角になります。隣接する赤いピクセルは別々の四角のままでも、シルエットが変わらなければ大きな長方形に結合しても構いません。
始める前に本来のグリッド寸法を調べます。800×800ピクセルで表示されるスプライトも、元は32×32を最近傍で拡大したものかもしれません。再現するのは拡大後の表示寸法ではなく、32×32の構造です。
Illustratorのオブジェクトモザイク
Adobeは埋め込みビットマップをモザイクにする機能を説明しています。
- 元の画像を配置して埋め込みます。
- 選択し、**Object > Create Object Mosaic（オブジェクトモザイクを作成）**を選びます。
- わかる場合は元のグリッドにタイル数を合わせます。
- 正方形タイルとカラー出力を使います。
- 確認するまで元のラスターを残し、その後削除または非表示にします。
- 大きく拡大して外形、内部の隙間、配色を元と比べます。
Adobeのオブジェクトモザイクの説明は、コマンド、正方形、カラー、元ラスターの扱いを説明しています。ピクセルアートはその機能の実用的な用途です。
構造が忠実でも非効率になる場合があります。64×64のスプライトは、結合前に4,096セルあります。完全に透明なセルを削除し、可能なら同じ色の隣接長方形を結合し、見えないオブジェクトを最終SVGに残しません。
方法2：IllustratorなしでグリッドSVGを作る
ピクセル対応のスクリプトや専用ツールでも同様のファイルを作れます。アプリより原則が重要です。
- 本来のグリッドサイズで元画像を読みます。
- 透明でない各ピクセルを正確なベクター長方形にします。
- アンチエイリアスを加えず配色の値を保ちます。
- 見えるグリッドが同じ場合だけ隣接セルを結合します。
- 本来のグリッド寸法に合うSVGの
viewBoxで出力します。 - 整数と非整数の表示サイズで試します。
オープンソースのvectorize-pixelartは専用変換の一例です。同時に、大きく複雑なグリッドは重いSVGになるという限界も示します。古いツールはまず調査用として扱い、実運用の工程に加える前にコードと保守状態を確認します。
SVGを扱えるなら、小さなスプライトは<rect>で手作業でも作れます。12×12のアイコンには妥当ですが、詳細な場面には現実的ではありません。
方法3：意図して形を滑らかにする
ピクセルが個性ではなく下書きの場合もあります。キャラクター、花、アイコンを、丸い輪郭のステッカー、印刷画像、ロゴにしたいことがあります。
意図して滑らかにするなら、PerfectVectorは輪郭の方法に適しています。手元の最近傍で拡大した最大の版をアップロードし、新しいイラストとして評価します。
- 先にアンチエイリアスを除きます。 柔らかい外周のピクセルは余分な色と小さな形になります。
- 配色を管理します。 元が8色なら、圧縮やぼけで何十色も増やすべきではありません。
- 階段状の斜線を確認します。 直線にするものと曲線にするものを決めます。
- 穴と1ピクセルの隙間を見ます。 隣接領域の簡略化で小さな開口が閉じる場合があります。
- ノード数を見ます。 各四角の角を複数の小さな曲線にするのが目的ではありません。
- 使用サイズで試します。 ポスターでは良い曲線も、アイコンでは顔や手を消す場合があります。
この方法は絵を変えます。正確な保存版と誤解されないよう、SVGと元PNGを一緒に保存します。
どの方法にも悪影響のある準備の問題
滑らかに拡大した元画像。 本来のスプライトに戻るか、最近傍で拡大し直します。混ざった輪郭の色が焼き込まれると、元グリッドを戻しにくくなります。
JPGである。 圧縮は硬いピクセル境界に色のブロックやにじみを作ります。可能なら元PNGを使います。
透明背景が白になった。 白背景は何千もの不要セルや、大きなトレース形状になる場合があります。先に透明度を戻し、対照的なキャンバスで確認します。透明SVG背景のガイドで説明しています。
半透明の効果がある。 光彩、影、部分的な不透明度は従来のピクセルセルではありません。ラスター効果として残す、単色に量子化する、ベクター用に設計し直すかを決めます。
ウェブサイトにベクターは必要か
必須ではありません。ゲームのスプライトやUIアイコンならPNGが正しい原本の場合があります。本来のサイズを使い、可能なら整数倍で拡大し、ブラウザーや描画エンジンをピクセル化または最近傍の補間に設定します。
配色をオブジェクトとして編集する、大きく印刷する、納品先がベクターを指定する場合はグリッドSVGが役立ちます。小さな画面素材が自動的に軽くなるわけではありません。各セルをベクターオブジェクトにすると、コンパクトなPNGより重くなる場合があります。
「SVGはどこまでも拡大できる」は正しくても不十分な例です。拡大できても、保存、編集、描画の負担が増える場合があります。PNGとSVGのガイドで形式全体の選択を、画像のベクター化とはで通常のトレースがグリッドより形を重視する理由を説明しています。
最終確認
納品前に、本来のサイズと使用サイズで元と比較します。
- グリッド寸法が元と一致する。
- アンチエイリアスの外周色が追加されていない。
- 透明セルが透明のまま。
- 保持方式では階段状のシルエットが残る。
- 輪郭方式では滑らかな輪郭が意図的である。
- 1ピクセルの隙間、目、明部、内部の穴が正しく見える。
- 同じ色のセルは見た目が完全に同じ場合だけ簡略化する。
- 元ラスターを誤って埋め込んでいない。含まれると拡張子に関係なくピクセル化して見える場合がある。
何を変えるか明示するのが最も整理された工程です。ピクセル自体が作品ならグリッドを保ち、新しい解釈が欲しければ輪郭を滑らかにし、ベクターに有用な操作がなければPNGを使います。
参考資料
- Adobe Illustrator：スケッチとモザイクの作成 — モザイク、正方形タイル、カラー出力、埋め込みラスターの要件を説明しています。
- MDN：CSSの
image-rendering— ウェブのピクセルアートを最近傍方式で表示する方法です。 - W3C：PNG仕様、第3版 — 可逆ラスターとアルファチャンネルの動作です。
- W3C：SVGの基本図形 — グリッドセルのSVGに使う長方形の形状です。
- W3C：SVG座標系と
viewBox— 元グリッドの座標系をビューポートに対応させる方法です。
グリッド保持ではなく滑らかな輪郭が欲しいなら、PerfectVectorにかけ、使用前にシルエット、1ピクセルの隙間、小さい細部をピクセル原本と比べます。
