ドット絵メーカー

ブラウザで使える無料のドット絵メーカー

このオンラインドット絵エディターで、レトロゲームのスプライト、絵文字、アイコン、アバター、小さなアニメーションを作ろう。必要なものはすべてあって、不要なものはありません。16×16から128×128までのくっきりしたグリッド、昔の8ビットゲーム機にインスパイアされたパレット、塗りつぶし、左右対称のキャラクターのためのミラーモード、アニメーション用のフレーム列。できあがったら、くっきりしたPNG、アニメーションGIF、ゲームですぐ使えるスプライトシートをダウンロードしよう。アカウントもウォーターマークもなし。

ドット絵の描き方

1. キャンバスのサイズを選ぼう。16×16はアイコンやアイテムに、32×32はキャラクターに、64×64以上は風景にぴったり。
2. 暗い色で輪郭を描こう。線は1ピクセルの太さに保ち、「二重」の角は避けよう。
3. 塗りつぶしで形を塗り、片側に暗い影、反対側に明るい色を足して立体感を出そう。
4. 顔、キャラクター、宇宙船にはミラーをオンに：左半分を描けば右半分が自動で現れます。
5. フレームを複製（⧉）していくつかのピクセルを変え、再生を押してアニメーションさせよう。オニオンスキンが前のフレームをうっすら表示するので、位置を合わせられます。
6. 今のフレームのPNG、アニメーション全体のループGIF、スプライトシートをダウンロードしよう。

ドット絵のコツ

• 色数を減らそう。すばらしいドット絵は4〜8色しか使わないことがよくあります。限られたパレットの方がすっきりして「レトロ」に見えます。
• 光の向きを決めよう。光がどこから来るか（たいてい左上）を決めて、どの物も同じように影をつけよう。
• ピロー・シェーディングは避けよう。どのふちも均等に暗くすると、物がのっぺりとふくらんで見えます。光から離れた側に影をつけよう。
• ギザギザを整えよう。カーブでは段の並びを規則正しく（3-1-2ではなく3-2-1）すると、線がなめらかに見えます。
• 小さなアニメーションでも効果大。6fpsで2フレームのまばたきや4フレームの弾みだけでも、生き生きと感じられます。

初めてのドット絵のアイデア

• 16×16グリッドにハートやコイン：定番の最初のスプライトで、5分で完成。
• ミラーをオンにして32×32に自分のアバター：顔の半分を描けば、左右対称のキャラクターのできあがり。
• まばたきするネコ：目を開けたのと閉じたのの2フレームを4fpsで再生。
• 回る星：少しずつ回転させた4フレームを、チャットやSNS用にGIFで書き出そう。
• ゲームのタイルセット：草、水、石のタイルを並べて、スプライトシートで書き出そう。

PNG、GIF、スプライトシート：どれをダウンロードすればいい？

PNGは見ているフレームを、くっきりしたふちと透明な背景で拡大して保存します。プロフィール画像、ステッカー、印刷に最適です。GIFはアニメーション全体を、メッセージアプリやWebサイトなどほぼどこでも再生できるループ画像として保存します。最大255色まで使えて、ドット絵で普通に使う色数よりはるかに多いです。スプライトシートはすべてのフレームを1列に並べた1枚のPNGで、Godot、Unity、GameMaker、Phaserなどのゲームエンジンがスプライトアニメーションに使う形式です。

キーボードショートカット

Bで鉛筆、Eで消しゴム、Gで塗りつぶし、Iでスポイト、Mでミラー、スペースで再生・一時停止、Ctrl+Zで取り消し、Ctrl+Yでやり直し。マウスでは、どのツールを使っていても右ボタンで消せるので、間違いをすぐに直せます。

ほかのクリエイティブツール

なめらかなブラシの線がいい？無料のオンラインお絵かきボードを使ったり、曼荼羅メーカーで対称なアートを作ったりしよう。チャレンジなら、完璧な円を描こうでどれだけ正確か試そう。