Procreateでドット絵を描く設定と手順

Procreateは、オーストラリアのSavage Interactiveが開発するiPad専用の汎用イラストアプリで、買い切り12.99ドルのまま追加課金なしで使える。
M系iPadなら最大16,384x16,384pxまで扱え、300種以上の標準ブラシを備える高機能アプリだが、ドット絵専用のモードは標準では用意されていない。
だからこそ、最初に設定を整えないまま32x32の作品をSNS用に拡大すると、Bilinearの補間でせっかくのドットが滲んでしまう。

しかし、ブラシ・キャンバス・書き出しの3点を押さえれば、手持ちのProcreateだけでドット絵は十分描けます。
ブラシは正方形シェイプとSpacing 100%、Streamlineなしで1ドットをくっきり出し、キャンバスは32x32pxや64x64pxを基準に組み立てるのが扱いやすい。
描画ガイドで位置を合わせながら輪郭→ベース塗り→陰影の順に進めれば、仕上がりは安定します。

書き出しでNearest Neighborに切り替え、2倍や4倍の整数倍で拡大すれば、ドットの角を保ったまま見せられるでしょう。
PNGで保存し、アニメーションが必要ならProcreate 5以降のアニメーションアシストも使えます。
Asepriteのような専用ツールへ移るかどうかは、スプライトシートの一括出力や厳密なパレット管理が必要になってからで遅くありません。

Procreateでドット絵は描ける？まず知っておくこと

Procreateはドット絵専用アプリではないが、設定を整えればピクセルの輪郭を保ったまま描ける。
標準ブラシのままだとアンチエイリアスが入り、線の縁がグレーににじんでレトロ感が崩れやすいので、まずはそこをどう抑えるかが出発点になる。
Asepriteを買うか迷っていた場面でも、手持ちのProcreateで試したところ設定だけで描けた、という流れは珍しくない。

Procreateに専用ドット絵モードはない

Procreateには、最初からピクセルアート向けに最適化された専用モードが標準搭載されていません。
普段のイラストと同じ感覚で描くと、ブラシのエッジにアンチエイリアスがかかり、拡大したときにドットの角が丸く見えてしまいます。
ここで必要なのは「描けない」と判断することではなく、どの設定を変えればドット絵らしさを保てるかを押さえることです。

実際には、自作のピクセルブラシ、32x32pxや64x64pxの小さなキャンバス、描画ガイドの3点を整えるだけで、かなり扱いやすくなります。
ブラシスタジオでシェイプを正方形にし、Spacingを100%、Streamlineを「なし」に寄せると、1ドット単位の線がぶれにくくなるためです。
さらに、アクション→キャンバス→描画ガイドをONにして2Dグリッドを出せば、配置の迷いが減り、アイソメトリック表現にもつなげやすくなります。

価格・対応端末

Procreateは買い切り12.99ドルで、2022年12月以降は価格が据え置かれています。
追加課金がなく、一度買えばアップデートも含めて使い続けられるので、専用ツールをいきなり増やすのをためらう初心者には入り口としてかなり軽い。
開発元はオーストラリアのSavage Interactiveで、2011年設立です。

対応端末はiPadのみで、iPhone版はProcreate Pocketという別アプリ、PC版はありません。
ここは使い分けの分岐点になります。
デスクトップで作業したい人や、スプライトシートを量産したい人は、後半でAsepriteとの違いを見比べると判断しやすいでしょう。

ドット絵に向いている人・専用ツールが向いている人

M系iPadではキャンバス最大16,384x16,384px、レイヤー200以上、標準ブラシ300種以上に対応します。
ドット絵では小キャンバスしか使わないため、この性能は余裕がありすぎるほどです。
むしろ普段使いのイラストと同じ環境のまま、試しにドット絵へ入れるのが強みになります。

最初に普段のブラシで線を引いたとき、拡大した画面で縁がグレーににじみ、思ったよりドット絵に見えなくて戸惑いました。
原因はすぐにアンチエイリアスだと分かり、そこから設定を詰める流れに切り替わりました。
Asepriteを買うか迷っていた段階でも、まず手持ちのProcreateで試す判断は有効です。
趣味やSNS用の作品なら十分にこなせますし、本格的にスプライト管理や厳密なパレット運用が必要になった時点で専用ツールへ進むのが自然でしょう。

準備①：ドット絵用のキャンバスを作る

Procreateでドット絵を始めるなら、最初にやるべきなのは小さなキャンバスをpx単位で切ることです。
ギャラリー右上の＋から「新規キャンバス」を開き、カスタムキャンバスで32x32px・64x64px・128x128pxのように直接入力すれば、1ドットの存在感を保ったまま描き進められます。
大きすぎるキャンバスは見た目が普通のイラストに寄りやすく、ドット絵らしい制約が薄れるので、サイズ選びが仕上がりを左右します。

新規キャンバスをpx指定で作る手順

ギャラリー右上の＋から「新規キャンバス」を開き、カスタムキャンバスで横幅と縦幅をpx単位で入力します。
ここで大切なのは、ドット絵を「あとで縮める絵」ではなく、最初から小さなマス目の集合として設計することです。
256x256のような大きすぎるキャンバスを選ぶと、1ドットの役割が相対的に小さくなり、線も面も滑らかに見えすぎてしまいます。
結果として、せっかくのピクセルの角ばりが薄れ、普通のデジタルイラストに近づいてしまうのです。
最初の設定で迷ったら、まず32x32を選んでみてください。

小さいキャンバスで描くと、どのドットを置くかの判断が早くなります。
32x32でアイコンを1個描き切ると、細部を盛るよりも配置を絞るほうが形になると実感しやすいでしょう。
ドット絵は情報を削るほど強くなる表現なので、サイズを小さくすること自体が練習になります。
後から「クロップ&サイズ変更」で拡大はできますが、描いている間は小さいまま進めるほうがコツをつかみやすいです。

32x32・64x64・128x128の使い分け

定番のキャンバスは32x32px・64x64px・128x128pxです。
32x32pxはキャラ1体やアイコン向けで、輪郭と色面を少ないドットで整理する練習に向いています。
64x64px以上になると、背景や情報量の多いモチーフにも対応しやすくなり、128x128pxでは装飾や陰影の段階を増やしやすくなります。
サイズが大きいほど表現の余地は広がりますが、学習段階では迷いも増えるため、初心者はまず32x32から始める流れが自然です。

32x32pxで1体を描き切ると、完成までの工数が少なく、達成感も得やすいです。
しかも小さいキャンバスほど、輪郭の1ドットや目の位置の1マスが全体印象を決めるので、配置の精度がそのまま上達につながります。
逆に大きなキャンバスでは、ドットの密度が下がって「何を練習しているのか」がぼやけがちです。
まず小さく、慣れたら大きく、という順番が扱いやすいでしょう。

DPIは印刷予定の有無で決める

DPIは画面表示だけなら低めで問題なく、印刷する予定があるなら300DPI以上を選びます。
ここで押さえたいのは、ドット絵の見た目を決めるのはDPIではなくpx数だという点です。
つまり、32x32pxの絵はDPIを変えてもピクセルの総数は変わらず、輪郭の細かさや情報量はキャンバス寸法で決まります。
画面向けの素材ならpxを優先し、印刷物に回す段階になったらDPIを整える、という考え方が無理のない流れです。

DPIを先に盛りすぎると、仕上がりがよくなると誤解しやすいものです。
しかしドット絵では、まずpxの格子をどう使うかが核心になります。
画面用のアイコンを作るのに高DPIへ気を取られる必要はありませんし、逆に印刷を想定するなら300DPI以上を前提にしておくと後工程が整います。
制作の段階ではpxを、用途の段階ではDPIを、という分け方で考えると迷いにくいでしょう。

準備②：にじまない自作ピクセルブラシを作る

Procreateでにじまないドット絵用ブラシを作るなら、最初に自作ブラシの土台を整え、次に形と間隔を固定する流れがいちばん確実です。
標準ブラシのままだと線がやわらかく見えやすく、1ドットずつ置きたい場面で輪郭が崩れます。
設定を一度まとめて固めてしまえば、以後は同じ感覚で描けるようになります。

ブラシスタジオで新規ブラシを作る

ブラシライブラリ右上の＋を押してブラシスタジオを開き、新規ブラシを作成します。
ここで土台を自分用にしておくと、以後の設定がすべてドット絵向けにそろい、描き始めから迷いません。
標準ブラシを流用するよりも、最初から用途を決めたほうが、あとで「なぜぼやけるのか」をひとつずつ追わずに済むのです。
名前を付けて保存しておけば、次回からも同じブラシを呼び出せます。

シェイプを正方形にしてアンチエイリアスを切る

次にブラシスタジオの「シェイプ」で、初期の丸い形を正方形に変えます。
丸のままではスタンプの縁がなめらかに落ち、1打ごとの輪郭がわずかにぼけますが、正方形にすると1ストロークが四角いドットとして置かれ、角の立った見た目になります。
実際、丸いまま描くと小さな点が灰色がかった粒に見えやすいのに、正方形へ切り替えた瞬間にピクセルらしい硬さが出ました。
アンチエイリアスを実質的に切る入口は、ここだと考えておくと整理しやすいでしょう。

間隔100%・手ブレ補正なし・サイズ固定の設定

仕上げの要は「ストロークパス」の間隔（Spacing）を100%にすることです。
初期値のまま描くとドットがつながって線になり、グレーににじんだように見えましたが、100%にした瞬間、1ドットずつくっきり置かれる感覚に変わります。
各点が独立するので、隣の点と混ざらず、ドット絵で嫌われるにじみを避けやすいのです。
ここは見た目の変化が最も分かりやすい設定だと言えます。

手ブレ補正（Streamline）は「なし」にし、ブラシの最大サイズ・最小サイズもどちらも「なし」にします。
補正が残っていると、狙ったマスから少し流れて別の位置に置かれやすく、細かなグリッド作業でテンポが崩れます。
実際に補正を切らずに描いたときは、意図した場所よりわずかにずれてしまいましたが、「なし」にした途端、狙ったマスへ正確に置けるようになりました。
サイズ変動も止めておけば、筆圧や速度に左右されず、どこを描いても均一なドットサイズが保てます。
おすすめです。

準備③：描画ガイドでグリッドを表示する

描画ガイドを使うと、ドットの置き位置を目で追いやすくなり、左右対称のずれや斜め線のブレを抑えやすくなります。
とくに2Dグリッドは、マス目とドットの対応をはっきりさせたい場面で頼りになる設定です。
描画ガイドのモードを使い分ければ、平面のキャラから斜め見下ろしの背景まで、作業の迷いを減らして進められます。

描画ガイドをONにする手順

描画ガイドは、アクションのレンチアイコンからキャンバスを開き、『描画ガイド』をONにすると使えます。
さらに下の『描画ガイドを編集』をタップすれば設定画面に入れるので、作業前に表示方法を整えやすい流れです。
グリッドが見えているだけで、どのマスにドットを置いているかが一目でわかり、輪郭の確認や左右の位置合わせがぐっと楽になります。
グリッドなしで描くと感覚頼みになりやすく、細い顔パーツや中央線のあるモチーフではズレが積み重なりやすいからです。

描画ガイドには2Dグリッド、アイソメトリック、遠近法、対称の4モードがあります。
ドット絵の基本は2Dグリッドで、まずは補助線を出してから描くほうが安定しやすいでしょう。
書き出した画像にグリッドは表示されないため、画面上では思いきり活用して問題ありません。

2Dグリッドのサイズをドットに合わせる

2Dグリッドの『グリッドサイズ』を1ドット幅に合わせると、マス目とドットがぴたりと一致します。
これが効くのは、見た目の確認ではなく数の管理ができるようになるからです。
たとえば左右対称のキャラで目の位置がずれたときも、グリッドがあれば左右のドット数を数えて揃えられます。
実際、グリッドなしでは「見た目は合っているつもり」でも片側だけ1ドットずれていた、という場面が起こりやすいものです。

太線が数ドットごとに入る設定にしておくのもおすすめです。
細かな1マス単位の配置を見失いにくいうえ、シンメトリーや等間隔の模様を組むときに基準線として働きます。
さらにスナップを活用すれば、線の始点や角をマス目に沿わせやすくなり、微妙なズレをその場で抑えられるでしょう。
ドットを打つ作業は小さいほど誤差が目立つので、こうした補助は地味でも効きます。

アイソメトリックモードで斜め視点のドット絵にも対応

斜め見下ろし視点、つまりクォータービューのマップチップやアイテムを描くなら、アイソメトリック描画ガイドへの切り替えが役立ちます。
平面の2Dグリッドでは取りにくい斜めのアタリ線を出せるため、立体物の輪郭を先に決めやすくなるからです。
平面では難しかった立体的なブロックも、斜めの線に沿ってドットを起こすと形が追いやすく、奥行きのある背景づくりに向いています。

この使い分けは、RPG風のドット背景を作りたいときにとくにおすすめです。
床面だけでなく段差や箱型オブジェクトの見え方が整理されるので、後から陰影を足す工程にも入りやすくなります。
まず2Dグリッドで基礎を固め、必要な場面だけアイソメトリックに切り替える。
そんな運用にしておくと、作業の迷いが減って描画が安定します。

実践：ドット絵を描く基本の流れ

まず輪郭で全体のシルエットを決めてからベース色、影、ハイライトへ進むと、形がぶれにくくなります。
ベースを先に塗ってから輪郭を探すやり方だと、線の置き場が揺れて描き直しが増えやすいからです。
小さなキャンバスほど順番が効くので、工程を分けて落ち着いて進めましょう。

輪郭線をペンシルツールで置く

輪郭は自作ピクセルブラシのペンシルで、1ドットずつ置いていくのが基本です。
32x32のような小キャンバスでは、2本指でピンチして拡大し、ドット単位で形を確認しながら描くと、肩の位置や輪郭の角度がずれにくくなります。
最初に外形を固めておくと、中を塗る段階で迷いが減り、後から大きく直す手戻りも抑えられます。
ジャギが気になる場所は、無理に消しすぎないほうがドット絵らしい味になります。

ベース色を流し込む

ベース色はProcreateのカラードロップでも流し込めますが、小さい領域や隙間のある形では塗り残しやはみ出しが起きやすいです。
とくに32x32では、バケツで一気に埋めるより、手で1領域ずつ塗ったほうが確実な場面が多くなります。
輪郭が先にあると塗る範囲が明確になり、色面のズレもすぐ見つかるので、配色の確認も同時に進めやすいでしょう。
ここで色をきっちり敷くと、後の陰影が効きやすくなります。

中間色で影とハイライトを足す

立体感は、中間色を1段足すだけで大きく変わります。
濃い色と薄い色の境界にカラーランプを置くと、急な段差がやわらいで丸みが出るため、2色だけでは平面的に見えたキャラでも表情がつきやすいです。
光源を1方向に決め、影は反対側、ハイライトは光源側へ寄せると、色の役割が整理されて統一感も生まれます。
輪郭・ベース・影をレイヤーで分けておけば、後から色だけ差し替えたり影だけ調整したりしやすく、Procreateの小キャンバスでも制作の自由度を残せます。

ぼやけさせずに拡大・書き出しする方法

ドット絵を拡大してもぼやけないかどうかは、最初にどの補間を使うかでほぼ決まります。
初期値のBilinearは周囲の色を混ぜて滑らかにするため、ドットの角が中間色ににじみやすいです。
Nearest Neighborに切り替えれば、元のピクセルをそのまま増やすので輪郭がくっきり残ります。

Nearest NeighborとBilinearの違い

Bilinearは、拡大時に周囲のピクセルを参照して色を平均化する方式です。
写真のような画像なら滑らかさが利点になりますが、ドット絵ではその滑らかさが逆に働き、1ドットの角や境界が灰色っぽく崩れて見えます。
Bilinearのまま8倍に拡大したとき、縁だけが薄くにじんでしまったことがありますが、見た目の差は想像以上でした。
Nearest Neighborは各ピクセルを単純に複製するので、元の輪郭を壊さずに拡大できるのが強みです。

体感としても、切り替え前後の違いは一発で分かります。
Nearest Neighborに変えて同じ画像を拡大し直したところ、にじんでいた灰色の縁が消え、ドットの角がそのまま立ち上がりました。
つまり、拡大の良し悪しは描き込み量より先に補間設定で決まる、ということです。

変形ツールで整数倍に拡大する手順

拡大は、まず変形ツールを選び、画面下部に出る補間の切り替えでNearest Neighborを指定してから行います。
ここで設定を先に変えておくと、変形中に色が混ざらず、細い線や斜めのエッジも崩れにくくなります。
次に倍率を2倍、4倍、8倍のような整数倍にそろえます。
3倍のような割り切れない倍率だと、1ドットの幅が均等にならず、ところどころ太さが変わって見えるからです。

整数倍にこだわる理由は、ドット絵の「1マス感」を守るためです。
たとえば32x32を8倍にすれば256x256pxになり、各ピクセルが同じ大きさで積み上がるので、輪郭が安定します。
アクション→キャンバス→『クロップ&サイズ変更』を使う場合も、先に『リサンプル』をオフにしてからサイズを変えましょう。
リサンプルをオンにしたままだと再補間が入るため、せっかくのドットが再びぼやけます。

PNGで書き出す

書き出し形式はPNGが最も扱いやすいです。
透過に対応していて、圧縮で色が崩れることもないので、拡大後の輪郭をそのまま保ちやすくなります。
ドット絵では余計な圧縮ノイズが入るだけで印象が変わるため、保存形式の選び方は軽く見ないほうがいいでしょう。
JPEGは圧縮の過程で色がにじみ、細部の境界が甘くなるので避けるのが基本です。

アニメーションが必要なら、次のセクションで扱うGIFやAPNGを使い分ける流れになります。
静止画はPNG、動きがあるものは別形式、と考えるとです。
まずはPNGでくっきりした1枚を作り、そのあと用途に応じて形式を選びましょう。

ドット絵アニメーションとProcreateの限界

Procreate 5以降のアニメーションアシストを使えば、ドット絵の短い動きは十分に扱えます。
アクションからキャンバスへ進んでアニメーションアシストをオンにすると、画面下部にタイムラインが現れ、レイヤーをフレームとして再生できる仕組みです。
趣味のアニメやSNS向けのループ表現なら、まずはここから始めるのが扱いやすいでしょう。

アニメーションアシストで動かす

Procreateのアニメーションアシストは、1レイヤーを1フレームとして扱えるので、ドット絵の静止画を少しずつずらしながら動かす工程と相性がいいです。
レイヤーを順番に並べて再生すると、手描きのコマ送りがそのまま見えるため、複雑な設定を覚えなくてもアニメの流れを確認できます。
まずは短いループから試してみてください。

オニオンスキンとFPSの設定

オニオンスキンは前後のフレームを薄く重ねて見せる機能で、前後最大12フレームまで参照できます。
歩行アニメをオニオンスキンなしで描くと、足の着地位置が毎回ぶれてガタつきやすいのですが、前のコマを透かして見られるようにすると、中割りの位置がつかみやすくなります。
動きの軸が見えるので、滑らかさが一気に上がるのです。
再生速度はFPSで調整し、完成後はGIF、APNG、MP4で書き出せます。
とくにAPNGはGIFより高画質で透過も保てるため、ドット絵の質感を残したい保存先として。

専用ツール（Aseprite等）に移るべき判断軸

ただし、Procreateは汎用イラストアプリなので、ゲーム制作で必要になる機能は詰め切れていません。
本格的なスプライトシートの一括出力や厳密なパレット管理、タイル単位の編集を回したい場面では、Aseprite等の専用ツールが優位になります。
趣味のアニメはProcreateで完結できても、ゲーム用にまとめて書き出す段階で、作業の重心が一気に変わるはずです。

実際、短いループや個人制作のイラストはProcreateで十分でしたが、スプライトシートを量産しようとした瞬間に、管理のしやすさが決定打になりました。
どのレイヤーがどのフレームか、どの色を共通パレットで揃えるか、どこまでを一括で処理するか。
こうした整理が必要になったら、専用ツールへ移る合図です。
SNS用のドット絵や短いアニメまではProcreateで試し、制作規模が広がったらAseprite等へ進みましょう。