ドット絵の解像度ガイド
用途に合った解像度の選び方
ドット絵制作で最初に直面する問題が「どのサイズで描くか?」です。解像度の選び方から正しい拡大方法、プラットフォーム別の推奨サイズまで、わかりやすく解説します。
同じドット絵でも解像度やスケーリングで見え方が変わります
なぜ解像度が重要なのか?
ドット絵の解像度(キャンバスサイズ)は、作品の方向性を決定する最も基本的な要素です。解像度が小さいほど1ドットの価値が高く、抽象的でシンボリックな表現になります。逆に大きいほど細部を描き込めるため、リアルに近い表現が可能です。
適切な解像度を選ぶことで、制作時間の短縮、統一感のある作品づくり、目的に合った表現が実現できます。逆に、解像度選びを間違えると、途中で挫折したり、意図しない仕上がりになることも。
用途別おすすめ解像度一覧
以下の表で、各解像度の特徴と向いている用途を確認しましょう。
| 解像度 | 用途・特徴 | レベル |
|---|---|---|
| 8x8 | アイコン、絵文字、ミニマルアートチャレンジ。64ピクセルで表現する究極の制約アート。SNSの絵文字やUIの小さなアイコンに最適。 | 初級 |
| 16x16 | クラシックなゲームスプライト、初心者の標準サイズ。ファミコン風のキャラクターやアイテムに最適。最も広く使われるドット絵サイズ。 | 初級 |
| 32x32 | 詳細なキャラクター、RPGスプライト。表情や装備などのディテールを描き込める。スーファミ風のゲームグラフィックに近いサイズ。 | 中級 |
| 48x48 | ポートレート、詳細なアイテム。キャラクターの顔や複雑なオブジェクトを描くのに適したサイズ。装備の描き分けが可能。 | 中級 |
| 64x64 | 複雑なシーン、背景、詳細アート。風景や建物など、大きな構図を描くのに向いている。1つの作品に多くの要素を盛り込める。 | 中級 |
| 128x128+ | 大判イラスト、ポスター風アート。ドット絵でありながら絵画のような表現力。制作時間は長くなるが、完成度の高い作品が作れる。 | 上級 |
解像度によるグリッドサイズの違い(実際のピクセル数の比較)
迷ったら 16x16 から始めましょう。小さいので短時間で完成でき、ドット絵の基本テクニック(色数の制限、1ドットの重要性)を自然に学べます。慣れてきたら 32x32 にステップアップするのがおすすめです。
ドット絵の正しい拡大方法
ドット絵を大きく表示する際、拡大方法を間違えると、せっかくのシャープなドット感が台無しになってしまいます。ここでは正しい拡大方法と、よくある失敗について解説します。
ニアレストネイバー法 vs バイリニア補間
画像の拡大アルゴリズムには主に2種類あります。ドット絵には「ニアレストネイバー法(最近傍補間)」を使うのが鉄則です。
ピクセルの境界がくっきり。ドット絵らしいシャープな見た目を維持。
ピクセル間が補間されてぼやける。写真には良いが、ドット絵には不向き。
拡大は必ず整数倍(2倍、3倍、4倍...)で行いましょう。1.5倍や2.7倍などの非整数倍で拡大すると、ピクセルのサイズが不均一になり、見た目がガタガタになります。
CSS での設定方法
Webサイトでドット絵を表示する場合、CSSで以下のプロパティを設定します。
.pixel-art {
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
-ms-interpolation-mode: nearest-neighbor;
}
ゲームエンジンでの設定
ゲームエンジンを使う場合も、テクスチャフィルタリングの設定が必要です。
- Unity — テクスチャのFilter ModeをPoint (no filter)に設定
- Godot — テクスチャのImport設定でFilterをオフ
- RPG Maker — デフォルトでニアレストネイバー。特別な設定は不要
- GameMaker — スプライトのInterpolation Colorsをオフに設定
プラットフォーム別の推奨サイズ
作ったドット絵をどこで使うかによって、最終的な出力サイズが異なります。元のドット絵を整数倍に拡大して、各プラットフォームの推奨サイズに合わせましょう。
SNSアイコン
- Twitter/X: 400x400px推奨 → 16x16を25倍 or 32x32を12倍
- Discord: 128x128px推奨 → 16x16を8倍 or 32x32を4倍
- YouTube: 800x800px推奨 → 32x32を25倍
ゲームアセット
- 2Dアクション: 16x16 or 32x32がスプライトの基本
- RPG: 16x16(マップチップ)、32x32〜48x48(キャラクター)
- タワーディフェンス: 16x16〜32x32(ユニット)
- 背景: 256x144〜320x180が一般的
デジタルアート・NFT
- NFTコレクション: 24x24〜32x32が主流(CryptoPunks風)
- 1/1アート: 64x64〜128x128で制作し、大きく拡大して出力
- 最終出力: 1000x1000px以上を推奨
SNSに投稿する際は、PNG形式で保存しましょう。JPEG形式で保存すると圧縮によってドットがぼやけてしまいます。Pixnote Editor Liteなら、描いたドット絵をそのままPNGでエクスポートできます。
よくある失敗と対策
初心者が128x128や256x256から始めると、塗る面積が膨大で挫折しやすくなります。ピクセル数は辺の長さの2乗で増えるため、32x32(1,024px)と128x128(16,384px)では作業量に16倍の差があります。
→ 対策: 16x16 または 32x32 から始めて、慣れたらサイズアップ
ゲームアセットで16x16のキャラクターと64x64の背景を混在させると、ピクセルの粒度が合わず違和感が生まれます。同じシーン内では解像度(ピクセルの密度)を統一しましょう。
→ 対策: プロジェクト開始時に基本解像度を決め、すべてのアセットで統一する
画像編集ソフトやWebブラウザのデフォルト設定はバイリニア補間(写真向き)のため、そのまま拡大するとドット絵がぼやけてしまいます。
→ 対策: 必ずニアレストネイバー法で拡大。CSSなら image-rendering: pixelated を指定
3倍ではなく2.5倍で拡大すると、一部のピクセルだけサイズが大きくなり、グリッドの整合性が崩れてガタガタに見えます。
→ 対策: 拡大は必ず整数倍(2x, 3x, 4x, 5x...)で行う
解像度選びのチェックリスト
解像度を決める前に、以下のポイントを確認しましょう。
- 何を描くか? — アイコンなら小さく、シーンなら大きく
- どこで使うか? — SNS、ゲーム、印刷物など用途を確認
- 自分のスキルレベルは? — 初心者なら小さめから始める
- 制作時間はどれくらい? — 大きいほど時間がかかる
- 他のアセットとの統一性は? — プロジェクト全体で揃える
ドット絵の解像度に「正解」はありません。大切なのは、目的に合ったサイズを選び、正しい方法で拡大表示すること。まずは小さなキャンバスから始めて、少しずつ大きなサイズに挑戦していきましょう。