ドット絵用語集

ドット絵制作でよく使われる専門用語をわかりやすく解説します。

ドット絵の作品例

基本用語

ピクセルアート / ドット絵

Pixel Art

1ピクセル(画面上の最小単位の点)を意識して配置するデジタルアートの手法。日本では「ドット絵」とも呼ばれます。ファミコンやゲームボーイ時代のゲームグラフィックが代表例ですが、現在もインディーゲームやSNSアイコンなどで広く使われています。

ピクセル

Pixel (Picture Element)

画面を構成する最小単位の点。「picture element(画像要素)」の略。ドット絵ではこの1つ1つのピクセルを意図的に配置して絵を描きます。

キャンバス

Canvas

ドット絵を描く作業領域。「16x16」「32x32」などのサイズで表されます。キャンバスサイズが小さいほど制約が多くなりますが、その制約の中で表現する工夫がドット絵の醍醐味です。

解像度

Resolution

画像の縦横のピクセル数。ドット絵では意図的に低解像度(8x8〜64x64など)で制作し、表示時に拡大するのが一般的です。

透過 / 透明

Transparency

ピクセルに色を割り当てず、背景が透けて見える状態。PNG形式で保存することで透過情報を保持でき、ゲーム素材やアイコンとしてそのまま利用できます。市松模様(チェッカーボード)で透過部分を示すのが一般的です。

レイヤー

Layer

透明なシートを重ねるように、絵の要素を分けて描くための仕組み。背景・キャラクター・エフェクトなどをレイヤーごとに分けることで、一部分だけ修正したり、表示/非表示を切り替えたりできます。Pixnote Editor Liteはマルチレイヤーに対応しています。

ズーム

Zoom

キャンバスの表示倍率を拡大・縮小する機能。ドット絵は低解像度のため、制作時は数倍〜数十倍に拡大して1ピクセルずつ編集します。全体のバランス確認のために縮小表示(等倍表示)も重要です。

グリッド

Grid

キャンバス上に表示される格子線。1ピクセルごとの境界がわかりやすくなり、正確な配置の助けになります。タイルマップ制作では、タイル境界を示す大きなグリッドも便利です。

対称(シンメトリー)

Symmetry

左右や上下が鏡像になっている状態。対称ツールを使うと、片側を描くだけで反対側も自動的に描画されます。キャラクターの正面顔やUI要素、アイコンなど左右対称のモチーフを効率よく描けます。

スケーリング

Scaling

画像の拡大・縮小のこと。ドット絵では通常の補間方式(バイリニアなど)を使うとぼやけてしまうため、ニアレストネイバー補間で整数倍に拡大するのが鉄則です。ゲームエンジンやCSSで正しい設定を行うことで、シャープなドット感を保ったまま表示できます。

ハートのドット絵

色とパレット

パレット / カラーパレット

Color Palette

作品で使用する色の組み合わせ。ドット絵では限られた色数(4〜16色程度)でパレットを構成するのが特徴です。統一感のあるパレットを選ぶことで、作品全体にまとまりが生まれます。

色相

Hue

赤・青・黄などの「色味」のこと。色相環上での位置で表されます。ドット絵のパレット設計では、使用する色相の数を絞ることで統一感が出ます。

明度

Value (Brightness)

色の明るさの度合い。ドット絵では明度のコントラストが最も重要な要素のひとつで、明度差がはっきりしていると小さいサイズでも形がわかりやすくなります。

彩度

Saturation

色の鮮やかさの度合い。彩度が高いと鮮やかで目立つ色になり、低いとくすんだ落ち着いた色になります。ドット絵では全体の彩度を揃えるとまとまりが出ます。

ヒューシフト

Hue Shifting

影や光を描く際に、単純に暗くしたり明るくしたりするのではなく、色相も一緒にずらすテクニック。たとえば赤い物体の影を赤の暗い色ではなく紫寄りにすることで、より豊かで自然な色彩表現になります。プロのドット絵でよく使われる重要なテクニックです。

ディザリング

Dithering

2色のピクセルを市松模様のように交互に配置して、中間色やグラデーションを表現する技法。使える色数が少ないときに特に有効で、レトロゲーム風の表現にも使われます。

カラーランプ

Color Ramp

同じ色相で明度を段階的に変えた色の並び。ドット絵のパレットを作る基本的な方法のひとつで、1つの色に対して明・中・暗の3段階を用意するのが一般的です。

インデックスカラー

Indexed Color

画像が使用する色をパレット(色テーブル)として管理し、各ピクセルがパレットの番号(インデックス)で色を参照する方式。ファイルサイズが小さくなり、パレットの色を変えるだけで画像全体の色を一括変更できます。GIFやレトロゲームで採用されています。

色深度(ビット深度)

Color Depth / Bit Depth

1ピクセルあたりに使えるビット数で、表現可能な色数を決定します。1ビット=2色(白黒)、4ビット=16色、8ビット=256色。レトロゲーム機はこのビット深度で色数が制限されており、ドット絵の制約付き表現のルーツとなっています。

グラデーション

Gradient

色が段階的に変化する表現。ドット絵ではピクセル数が限られるため、滑らかなグラデーションは難しいですが、ディザリングやカラーランプを活用して段階的な色変化を表現します。空や水面の表現によく使われます。

カラーサイクリング

Color Cycling

インデックスカラーのパレット内の色を順番に入れ替えることで、画像自体を変更せずにアニメーション効果を生み出す技法。水の流れ、溶岩の動き、光の点滅などをごく少ないデータ量で表現でき、レトロゲームやデモシーンで多用されました。

パレットスワップ

Palette Swap

スプライトのパレットを別の色セットに差し替えることで、同じ形状のキャラクターに異なる配色を適用する技法。格闘ゲームのプレイヤー1・プレイヤー2の色違いや、敵キャラクターのバリエーション作成に広く使われます。

猫のドット絵

描画テクニック

アンチエイリアス

Anti-aliasing (AA)

斜めの線や曲線のギザギザ(ジャギー)を目立たなくするために、境界部分に中間色のピクセルを配置する技法。ドット絵では意図的にアンチエイリアスを使う場合と、あえて使わずシャープさを保つ場合があります。

ジャギー

Jaggies

斜め線や曲線に現れる階段状のギザギザ。ドット絵では避けられないものですが、ピクセルの配置パターンを工夫することで自然に見せることができます。

アウトライン

Outline

オブジェクトの輪郭線。ドット絵では1ピクセル幅の黒い線で描くことが多いですが、色付きアウトライン(セルアウト)を使うとより柔らかい印象になります。

セルアウト(色付きアウトライン)

Selective Outlining (Sel-out)

アウトラインの色を黒一色ではなく、隣接する塗りの色に合わせて変える技法。光が当たる部分のアウトラインを明るくすることで、より自然で立体的な表現になります。

ニアレストネイバー補間

Nearest-Neighbor Interpolation

画像を拡大するときに、各ピクセルをそのまま拡大する方式。ぼやけずにシャープなまま拡大できるため、ドット絵の拡大表示に必須の設定です。ゲームエンジンやブラウザのCSS(image-rendering: pixelated)で指定できます。

サブピクセル

Sub-pixel Animation/Rendering

実際にはピクセル単位以下の動きを、色の変化で表現するテクニック。アニメーションで滑らかな微小移動を表現するときに使われます。

ミップマップ

Mipmap

表示サイズに応じて事前に複数の解像度で用意された画像のセット。3Dゲームなどで遠くのテクスチャを効率よく描画するために使われます。ドット絵ではニアレストネイバー補間が前提のため、ミップマップを使うとぼやけてしまう場合があり、設定に注意が必要です。

ノイズ

Noise

不要なピクセルがばらついて散らばっている状態。写真からの変換や不慣れな描画で発生しやすく、ドット絵では読みやすさを損なうため避けるべきとされています。ピクセルを意図的にまとめてクラスターにすることで、ノイズのないクリーンな仕上がりになります。

バンディング

Banding

異なる明度の色が帯状に平行して並んでしまう、ドット絵でよくあるミス。輪郭線に沿って同じ幅で色が並ぶと不自然に見えます。ディザリングやクラスターを使って色の境界を崩すことで解消できます。

ピローシェーディング

Pillow Shading

光源を意識せず、オブジェクトの輪郭から中心に向かって均一に明るくする初心者に多い陰影のつけ方。枕(ピロー)のように見えることからこの名前がつきました。光の方向を決めて影を落とすことで、より立体的で自然な表現になります。

クラスター

Cluster

同じ色のピクセルがまとまって配置された塊のこと。ドット絵では、孤立した1ピクセルを減らし、同色のピクセルをクラスターとしてまとめることで読みやすく美しい仕上がりになります。バンディング対策としても重要な概念です。

可読性(リーダビリティ)

Readability

ドット絵がひと目で何を描いているか判別できる度合い。特に小さいサイズ(16x16など)では限られたピクセルで形を伝える必要があり、明度のコントラストやシルエットの工夫が重要になります。ゲーム素材では特に重視されるポイントです。

シルエットテスト

Silhouette Test

スプライトを単色で塗りつぶし、シルエットだけで何を描いているか判別できるか確認するテスト。シルエットで判別できれば、小さなサイズやアクションの激しいゲーム中でもキャラクターが認識しやすくなります。ゲームキャラクターのデザインで重要な手法です。

キャラクタースプライト

アニメーション

スプライト

Sprite

ゲームで使われる2Dのキャラクターやオブジェクトの画像。元々はハードウェアで直接描画される小さな画像を指す用語でしたが、現在ではドット絵のキャラクター画像全般を指して使われます。

スプライトシート

Sprite Sheet

複数のアニメーションフレームやキャラクターポーズを1枚の画像にグリッド状に並べたもの。ゲームエンジンに読み込ませて使います。行ごとにアクション(待機・歩行・攻撃)を分けて整理するのが一般的です。

フレームレート(FPS)

Frames Per Second (FPS)

1秒間に表示するフレーム(静止画)の数。ドット絵アニメーションでは6〜12FPSが一般的です。フレーム数を増やすほど滑らかになりますが、制作コストも上がります。

歩行サイクル

Walk Cycle

キャラクターが歩く動作を1サイクル分のフレームで表現したアニメーション。通常4〜8フレームで構成され、接地→通過→接地→通過のパターンで作ります。ゲームキャラクターの基本動作です。

スクワッシュ&ストレッチ

Squash & Stretch

ディズニーのアニメーション12原則のひとつ。オブジェクトが衝撃で潰れたり(スクワッシュ)、動きに合わせて伸びたり(ストレッチ)する表現。バウンドするボールなどで使われ、ドット絵でも1〜2ピクセルの変形で効果的に表現できます。

オニオンスキニング

Onion Skinning

アニメーション制作時に、前後のフレームを半透明で重ねて表示する機能。玉ねぎの皮のように前後のフレームが薄く見えることからこの名前がつきました。動きの流れやポーズの変化を確認しながら作業でき、滑らかなアニメーション作りに欠かせない機能です。

キーフレーム

Keyframe

アニメーションの動きの中で、主要なポーズや状態を定義するフレーム。キーフレーム間の中間フレームを描くことでアニメーションが完成します。ドット絵アニメーションでは、まずキーフレームを決めてから間を埋めていくワークフローが効率的です。

トゥイーニング(中割り)

Tweening / In-betweening

キーフレーム間の中間フレームを作成する作業またはその自動処理。「in-between」の略でトゥイーンとも呼ばれます。手描きアニメーションでは手動で中割りを行いますが、一部のツールでは自動補間機能もあります。ドット絵では手動の中割りが一般的です。

ピンポンループ

Ping-pong Loop

アニメーションを最後のフレームまで再生した後、逆順に再生して最初に戻るループ方式。通常ループ(1→2→3→1→2→3…)に対し、ピンポンループは(1→2→3→2→1→2→3…)のように往復します。呼吸や揺れなどの自然な反復動作に適しています。

雪だるまのドット絵

ゲーム開発

タイルマップ

Tilemap

同じサイズの小さなタイル画像をグリッド状に並べてゲームのマップを構成する仕組み。RPGのフィールドやプラットフォーマーのステージなどに使われます。

タイル / マップチップ

Tile / Map Chip

タイルマップを構成する1つ1つの画像パーツ。地面、壁、水面、草などの種類があり、隣接するタイルとシームレスにつながるよう設計します。日本では「マップチップ」とも呼ばれます。

9スライス

9-Slice / 9-Patch

UI要素(ダイアログ、ボタンなど)を9つの領域に分割し、角はそのまま、辺と中央を引き伸ばすことで、任意のサイズに拡大できるようにする技法。ドット絵のUI制作では必須のテクニックです。

タイルセット

Tileset

タイルマップで使用するタイル画像をまとめた画像集。地面・壁・水・装飾などのバリエーションを1枚のシートに整理して格納します。ゲームエンジンではタイルセットを読み込み、マップエディタでタイルを配置してステージを構築します。

アイソメトリック

Isometric

斜め上から見下ろすような擬似3D視点のこと。2Dのドット絵でありながら立体的な空間表現ができるため、シミュレーションゲームやRPGで多用されます。アイソメトリックのタイルは菱形(ダイヤモンド型)で描かれ、通常のグリッドとは異なる配置ルールが必要です。

Pixnoteキャラクター

ファイル形式

PNG

Portable Network Graphics

ドット絵の保存に最適な画像形式。可逆圧縮のため画質が劣化せず、透過(透明背景)にも対応しています。ゲームエンジンでの利用やSNSでの共有に最適です。Pixnoteのエクスポート形式でもあります。

GIF

Graphics Interchange Format

アニメーション対応の画像形式。最大256色まで対応。ドット絵アニメーションの共有によく使われますが、色数制限があるため複雑な作品には向きません。

APNG

Animated Portable Network Graphics

PNG形式を拡張してアニメーションに対応させたファイル形式。GIFと違い256色の制限がなく、フルカラー(24ビット)とアルファ透過を維持したままアニメーションを表現できます。主要ブラウザすべてで対応済みで、高品質なドット絵アニメーションの共有に適しています。非対応環境では最初のフレームが静止画として表示されます。

WebP

WebP Image Format

Googleが開発した画像形式。可逆圧縮と非可逆圧縮の両方に対応し、透過やアニメーションもサポートしています。PNGより小さいファイルサイズで同等の画質を保てるため、Webサイトでのドット絵表示に適しています。主要ブラウザすべてで対応済みです。

Aseprite形式(.ase / .aseprite)

Aseprite Format (.ase / .aseprite)

ドット絵制作ソフト「Aseprite」の専用ファイル形式。レイヤー、フレーム、パレット、タグなどの編集情報をすべて保持できるプロジェクトファイルです。多くのゲームエンジン(Unity、Godotなど)がインポートに対応しており、ドット絵のアニメーション制作におけるデファクトスタンダードのひとつです。

ドット絵を作ってみよう

用語がわかったら、実際に描いてみましょう。

Editor Lite を開く →

関連ガイド