ピクセルアートをぼかさず拡大する方法

通常のリサイズでピクセルアートがぼける理由

ブラウザー内蔵のもの、OSのサムネイルビューアー、Photoshopのデフォルト、ウェブフレームワークの自動画像最適化の大半など、汎用の画像リサイズはすべて何らかの補間を使います。最も一般的なのは バイリニア、そして、より計算量の多いバイキュービックやLanczosも、同じ考え方を改良したものです。新しいピクセルを計算する際、元画像の近隣のピクセルを参照し、距離に応じて混ぜ合わせます。

写真にはそれが正しい方法です。写真の輪郭はピクセル単位では実際には硬くありません。頬のグラデーションやぼけた背景は滑らかに見えるべきで、隣接サンプルを混ぜることで、より高解像度で撮影した場合に近いものを復元します。この計算は、画像が連続した場面をサンプリングしたものだと仮定しています。

ピクセルアートは標本化した写真ではありません。各ピクセルは、このセルにこの色を置き、隣に鋭い境界を持たせるという、制作者の意図的で離散的な判断です。バイリニアで拡大すると、境界が意図的だと知らず、混ぜるはずのない色の間にグラデーションのピクセルを作ります。結果はよくある柔らかいぼけで、鋭い黒の輪郭は灰色の縁になり、単色領域には元にない微妙なグラデーションが加わります。

最近傍：基本の修正

最近傍 拡大縮小では別の問いを立てます。出力の各ピクセルで何も混ぜず、最も近い元ピクセル1つの色をコピーします。16×16を64×64へ最近傍で拡大すると、元の各ピクセルは同色の4×4ブロックになります。新色は作らず、縁もぼかしません。拡大後もピクセルアートらしく見せる最低条件です。

最近傍は写真でブロック状のギザギザを生むため、大半のツールはデフォルトでなく、明示的なオプションにしています。使うには自分で選ぶ必要があります。

• Photoshop / GIMP： 拡大縮小前に再サンプリングを「Nearest Neighbor」（Photoshop）または「None」（GIMP）にします。
• ImageMagick： -filter point 前に -resize.
• Canvas API（ブラウザー/JS）： ctx.imageSmoothingEnabled = false 拡大縮小画像を描く前に。
• Python / Pillow： Image.resize(size, Image.NEAREST).

倍率が整数でなければならない理由

最近傍だけでは不十分です。2つ目の要件は、倍率が2x、3x、4xの整数であることです。1.5xや、きれいな倍数の間にたまたま入る任意の目標幅ではいけません。

整数倍率では、元の各ピクセルが同じ大きさの出力ピクセルのブロックに対応します。3xなら、各ピクセルはきれいな3×3の正方形になります。グリッドは均一で、元のすべてのピクセルが等しく一貫した形で表されます。

1.5xのような整数でない倍率では、サンプリングのグリッドを均等に割れないため、一部の元ピクセルは出力の2×2のブロックになり、他は1×1や片寄った2×1になります。技術的には「最近傍」なので色は混ざりませんが、画像内のピクセルサイズが目に見えて不揃いになります。一部のブロックが他より太く見え、元画像の真っすぐな斜線に、以前はなかった不均一な段差が付きます。きれいな拡大ではなく、微妙で理由を特定しにくい違和感として見えます。

実用上は、固定の目標ピクセル数からではなく、元寸法の整数倍から逆算してサイズを選びます。48×48を約150pxで表示したいなら、正確に150pxを要求せず、3x（144px）か4x（192px）を使い、差はCSSやレイアウトで吸収してください。

CSSでも鮮明に保つ

ウェブではファイル自体の拡大縮小は問題の半分です。最近傍PNGも、描画時にブラウザーがデフォルトの平滑化で再リサイズすると、またぼけます。修正は、表示する次の要素にCSSプロパティを適用します <img> またはcanvas要素：

image-rendering: pixelated;

表示のため画像をリサイズするとき、ブラウザーに最近傍サンプリングを使わせます。ユーザーのページズームや、画面幅に応じて変わるレスポンシブな容器など、直接制御できない場合も含みます。現在の主要ブラウザーはすべて対応しています。古く、対応が安定しない代替は image-rendering: crisp-edges;、一部のブラウザーでは同じ扱いになり、他のブラウザーでは少し異なる鮮鋭化アルゴリズムとして扱われます。特にピクセルアートでは、 pixelated の方が予測しやすい選択です。

ゲームエンジンのポイントフィルタリング

ゲームエンジンは、1つ下の層で同じ問題を持ちます。スプライトは書き出し時に1回だけでなく、実行時にカメラのズーム、画面解像度、pixels-per-unitの設定で拡大縮小されるためです。どのエンジンにもテクスチャフィルターの設定があり、ピクセルアートに安全な選択は一貫して「point」や「nearest」に相当する名前です。

• Unity： テクスチャの取り込み設定でFilter ModeをPoint (no filter)に設定します。詳しくは当サイトの次で説明しています Unityスプライトインポートガイド.
• Godot： テクスチャのフィルターをNearestにします。個別テクスチャ、または2Dピクセルアート用プロジェクト全体の標準として設定できます。
• Unreal： スプライトテクスチャのTexture GroupまたはFilterをNearest Neighborに設定。

元画像のファイルが鮮明なのに、エンジン内でピクセルアートのゲームがぼやける最もよくある原因は、デフォルトのバイリニア/リニアフィルターを有効なままにすることです。

ピクセルアート専用の拡大縮小アルゴリズム

最近傍は忠実ですがブロック状で、大きく拡大すると、元画像の斜線や曲線に階段が見えます。線の概念がなく、個別のピクセルしか扱わないためです。ピクセルアート専用の一群のアルゴリズムは、各ピクセルを単独でなく局所的なパターンとして考え、ぼけを加えず階段を滑らかにしようとします。

• Scale2x / Scale3x（AdvMAME2x/3xとも呼ばれます）： この系統で最も簡単です。各ピクセルの上下左右を見て、斜めの縁パターンを検出すると拡大ピクセルを分割し、段差でなく斜めに見せます。高速で、きれいな輪郭の単純なスプライトには適切な標準です。
• EPX / hqx（hq2x、hq3x、hq4x）： 隣接ピクセルのパターンをより多く調べ、パターンごとに多くの出力形状を使うことで、同じ考え方を拡張し、丸みと曲線のある結果を作ります。手描きスプライトの輪郭には適しますが、ディザやノイズの多い絵では偽の縁を拾うため苦手です。
• xBRZ： 同じ系統の、より新しく一般に高品質な派生です。細部の多いスプライトで乱れを減らし、斜線・曲線を滑らかにするよう調整されています。多くのエミュレーターフロントエンドの拡大フィルターで使うアルゴリズムです。

3つとも同じ制限があります。局所的なピクセルのパターンから輪郭を推測するため、明確で意図的な輪郭の画像には適していますが、様式化したディザ、ノイズ、交互のピクセルで作ったグラデーションには苦手です。古いピクセルアートでよく使われるこれらの技法を、アルゴリズムが滑らかにすべき輪郭と誤認する場合があります。大半のスプライト作業では、単純な整数倍率の最近傍拡大のほうが安全で予測しやすい選択です。曲線の階段状の輪郭が目に見えて気になり、ディザ部分で結果を確認した場合にだけ、hqxやxBRZを使ってください。

AI拡大ツールが通常は不適切な理由

ぼやけた写真に写真らしい細部を加えるよう訓練された汎用のAI拡大ツールは、ピクセルアートに必要なものと反対の問題を解くために作られています。入力が縮小や圧縮で細部を失い、モデルの仕事はそれを推測して戻すことだと仮定し、低解像度入力から、肌の質感、布の織り、木の葉といった、もっともらしい細部を作るよう訓練されています。

ピクセルアートは細部を失っていません。すべてのピクセルは、制作者が意図した解像度で正確に選んだものです。失われた質感を作るモデルへ入れると、予想どおり端が滑らかになり、グラデーションが作られ、1ピクセルのハイライトや意図した硬い色境界などの小さな表現が消えるか、元に似ない絵画的なものへ置き換わります。一部の拡大ツールには、制約した最近傍と修正に近い専用の「ピクセルアート」「アニメ」モードがあり、個別に試す価値はあります。しかし写真向けの一般的なデフォルトは、保持よりぼかすことがほぼ確実です。

真のピクセルアートとして描いたのではなく、最初からAI画像生成ツールから出たスプライトなら、きれいなピクセルグリッドにない可能性が高く、どの拡大縮小方法でも直せません。当サイトの次をご覧ください AIスプライトプロンプトのガイド 最初からきれいな原本を得るため。

実用的なチェックリスト

1. 元画像が柔らかい端を持つラスター書き出しではなく、一貫したグリッド上の本当のピクセルアートか確認してください。
2. 目標サイズに基づいて整数倍率（2x、3x、4x）を選び、逆の選び方はしないでください。
3. デフォルトのバイリニアやバイキュービックでなく、最近傍 / ポイントサンプリングを使ってください。
4. 適用 image-rendering: pixelated 画像を再リサイズする可能性のあるすべてのウェブ要素へ。
5. 書き出し倍率とは別に、ゲームエンジンのテクスチャフィルターをPoint／Nearestに設定します。
6. 単純な最近傍の階段が目に見えて気になるときだけhqx/xBRZを使い、先にディザ部分の結果を確認してください。

これらを手で設定したくない場合は、当サイトの ピクセルアート拡大 最初の3手順を行います。2x〜32xの整数倍率を選ぶと最近傍で全ピクセルを複製し、何も混ぜずPNGを書き出します。

よくある質問