ツール

dotpictの使い方|スマホでドット絵を描く手順

更新: 森川 レイ
ツール

dotpictの使い方|スマホでドット絵を描く手順

dotpictは、2014年10月に「スマホでドット絵を手軽に描ける」ことを目指して生まれた、iOSとAndroid向けのドット絵専用アプリです。累計400万ダウンロードを突破しており、PCの高機能ソフトに慣れていない初心者でも、タッチ操作だけで最初の1作品までたどり着きやすい入口になっています。

dotpictは、2014年10月に「スマホでドット絵を手軽に描ける」ことを目指して生まれた、iOSとAndroid向けのドット絵専用アプリです。
累計400万ダウンロードを突破しており、PCの高機能ソフトに慣れていない初心者でも、タッチ操作だけで最初の1作品までたどり着きやすい入口になっています。
このアプリの核は、画面下部のpushボタンを押しながら鉛筆マークのドットカーソルを動かす二点操作にあります。
描いたドットが指で隠れにくく、押し続ければ線も引けるので、スマホでドット絵を描くときのあの窮屈さがぐっと減ります。
実際にdotpictを開いて32x32のキャンバスを新規作成すると、「マイキャンバス」から「あたらしく作る」に進み、サイズとパレットを選んで作業を始めます。
保存時には拡大倍率も選べるため、x4〜x8倍で書き出せばSNS投稿でも見やすさを保ちやすく、完成から共有までをひと続きで進められるでしょう。
さらに、レイヤーは3枚まで使え、最大24色パレットやバケツ、スポイト、縁取り、メッシュペン、アニメーションGIF作成まで備わっています。
新規キャンバス作成から描画、ツール活用、保存、投稿までを順番にたどれば、初心者でもそのまま手を動かして作品づくりを進められます。

dotpictとは|累計400万DLのスマホ特化ドット絵アプリ

dotpictは、2014年10月に「スマホでドット絵を手軽に描ける」ことを目指して登場した、スマホ特化のドット絵アプリです。
2026年6月時点の公称値で累計400万ダウンロードを突破しており、利用者が多いぶん作例や情報を見つけやすいのが強みです。
App StoreとGoogle Playの両方で配信され、基本無料で始められるので、まず費用をかけずにドット絵を触ってみたい人に向いています。

スマホ・タブレットで描けるドット絵専用ツール

dotpictの特徴は、汎用のお絵描きアプリではなく、最初からドット絵専用に設計されている点にあります。
画面下部のpushボタンを押しながら鉛筆マークを動かしてドットを置く二点操作は、指でキャンバスを隠しにくく、スマホでも線を引く感覚を保ちやすい構造です。
初めてApp StoreやGoogle Playで「dotpict」と検索して入れると、起動直後にチュートリアルが出て、マイキャンバスから新規作成へ進む流れが自然に理解できます。

新規作成ではキャンバスサイズやパレットを選んで始められ、初心者なら32x32が扱いやすい設計です。
ペン、バケツ、スポイト、縁取り、メッシュペンといった主要機能の大半が無料で使えるため、ドット絵の基本操作を一通り試しながら覚えられます。
汎用アプリだと1ドット単位の調整や細い輪郭づくりで迷いやすいですが、dotpictはその迷いを減らす方向に寄っているので、最初の一歩が軽いでしょう。

アニメーションGIFまで作れる無料機能

dotpictがスマホ向けエディタの中で目立つのは、静止画だけで終わらずアニメーション作成まで視野に入ることです。
複数コマを連続再生してGIFアニメを作れるため、歩く動きや点滅の表現まで1つのアプリでまとめやすくなります。
ドット絵は1枚絵でも成立しますが、動きが加わるとキャラクターや小物の印象が一気に生きるので、表現の幅を広げたい人にはかなり相性がよい機能です。

しかも、この差別化が特別な上位版に閉じていないのが使いやすさにつながります。
無料の範囲で主要機能を触りながら、静止画制作からアニメまで段階的に試せるので、学習コストを抑えたまま制作体験を広げられます。
保存時には拡大倍率も扱えるため、SNSで見せる用途を想定した仕上げに進めやすい点も見逃せません。
まずは短いGIFを1本作ってみると、dotpictの向き不向きがすぐに見えてきます。

毎日2000件以上が投稿されるコミュニティ

dotpictには、毎日2000件以上の作品が投稿されるコミュニティが内包されています。
描いて終わりではなく、作品を見てもらい、反応を受け取りながら続けられる導線があるのは大きいです。
毎日更新のお題にも参加できるので、何を描くかで手が止まりやすい人でも、テーマに沿って練習を続けやすくなっています。

他アプリで描いた作品を投稿できる余地や、自分で企画を立てられる柔軟さも、継続のしやすさを支えています。
ドット絵制作は孤独になりやすい作業ですが、コミュニティがあると完成までのモチベーションが切れにくいものです。
作る場と見せる場が近いからこそ、初心者でも「次も描いてみよう」と思いやすい設計だと言えるでしょう。

最初の準備|キャンバスサイズとパレットを決める

dotpictで新規作成を始めるときは、「マイキャンバス」から「あたらしく作る」を選び、最初にキャンバスサイズとパレットを決めます。
この2つは後から描き味を左右しやすく、完成のしやすさまで変えてしまう要素です。
だからこそ、最初の画面で迷いすぎず、用途に合う条件を先に固めておく流れが向いています。

マイキャンバスから新規作成する手順

画面を開いたら、「マイキャンバス」の中から「あたらしく作る」をタップし、サイズとパレットを順に指定します。
選択画面では、数値を決めた時点で作品の器がほぼ定まり、あとはその枠にどう描くかへ意識を移せます。
dotpictは制作中の操作が軽く、最初の設定さえ整えば、描き始めまでの手順は思ったより短いものです。

実際の流れをたどると、「あたらしく作る」を押したあとにキャンバスサイズの候補が並び、そのあとにプリセットパレットを選ぶ画面が続きます。
ここで32x32と1つのパレットを選べば、キャンバスが開いてそのまま描画に入れる。
最初に画面上の条件を固定することで、途中で迷って手が止まる時間を減らせるわけです。

初めてなら32x32から始める理由

初心者が最初に描くなら、32x32は扱いやすい目安になります。
64x64のように広いと、空白を埋めるだけで疲れやすく、形が見えてくる前に集中が切れやすい。
逆に小さすぎると、顔の向きや輪郭の差をつける余地が少なく、描きたいものが崩れやすくなります。
だからまずは32x32で1作品を完成させる成功体験を優先すると進めやすいのです。

たとえば最初に64x64で始めると、情報量の多さに押されて途中で止まりやすい場面があります。
ところが32x32に下げると、必要な線だけで形をまとめやすくなり、完成までの見通しが立つ。
アイコンやキャラの顔を描くならこのサイズ感が合いやすく、風景のように広がりを見せたい題材なら、もう少し余白のあるサイズを選ぶ考え方がしっくりきます。

プリセットパレットと2〜24色の決め方

dotpictのパレットは2〜24色の範囲で設定でき、あらかじめ用意されたプリセットパレットから選べます。
色数を絞るほど画面に統一感が出て、輪郭や陰影の役割が明確になり、ドット絵らしい見え方に寄ります。
最初から色を増やしすぎると、どの色を使うべきか迷いが増えるため、8〜16色程度から始めるとバランスを取りやすいでしょう。

色数とサイズは、どちらも描き始めてから大きく変えると全体の設計が崩れやすい項目です。
だから、描きたいモチーフに合わせて先に決めてしまうのが扱いやすい。
アイコンやキャラの顔なら32x32と少なめの色数、風景なら広めのサイズというように用途で分けて考えると、完成形がぶれにくくなります。
プリセットパレットを選べば配色の初速も上がるので、まずはそのまま使ってみてください。

基本操作|pushボタンとドットカーソルで描く

dotpictの基本操作は、画面下部のpushボタンを押しながら、画面上の鉛筆マークのドットカーソルを動かして描く二点操作です。
利き手でカーソルを動かし、もう一方の指でpushを押すので、描いている場所を指先でふさがずにすみます。
タップで1ドットずつ置くやり方よりも、線や面を思った形で追いやすい設計だと感じます。

pushボタン+ドットカーソルの二点操作

最初に覚えるべきなのは、pushを押しながらドットカーソルを動かすだけでドットが置かれる、という単純な手順です。
画面下部の『push』ボタンを押したまま、上の鉛筆マークをなぞると連続して描画されるため、点を一つずつ打つよりも流れを保ったまま作業できます。
階段状の斜め線を引くときも、この連続描画のまま位置を少しずつずらしていけば、形の変化を見ながら進められます。

指でドットが隠れない設計の理由

この方式の最大の強みは、描いたドットが指で隠れないことです。
一般的なお絵描きアプリでは、指先がそのまま描画地点に重なってしまい、いま置いた線や境界を確認しにくい場面が出ます。
dotpictはカーソル操作とpush操作を分けることで、その見えにくさを構造的に避けているわけです。
実際に斜め方向へカーソルを動かしていると、階段状の線がどこに伸びているかを指に邪魔されず確認でき、修正の判断もしやすくなります。

間違えたらundo/redoで戻す

描き始めはタップで1ドットずつ置こうとして手間取りましたが、pushを押しっぱなしにして連続描画に切り替えると、一気に速くなりました。
線を引く速度が上がるだけでなく、面を埋める作業も途切れにくくなるので、狙った形に近づけるまでの往復が短くなります。
さらに、間違えたらundoで取り消し、redoでやり直しができるので、少し大胆に試してみても戻しやすいのが助かります。
制作中はオートセーブも働くため、保存し忘れで作業が消える不安がありません。
試行錯誤を重ねながら進めやすい、安心感のある操作体系です。

便利ツール|バケツ・スポイト・縁取り・メッシュペンを使い分ける

バケツ、スポイト、縁取り、メッシュペンは、ドット絵の作業を速くするだけでなく、仕上がりの迷いも減らしてくれる道具です。
広い面を先に埋め、色を拾って補修し、輪郭を立て、細部を描き込む流れがつながると、作業は驚くほど整理されます。
しかも、主要機能の大半が無料で使えるため、まず試して手応えを確かめやすいのも魅力でしょう。

バケツとスポイトで塗りを効率化

バケツツールは、閉じた範囲を一気に塗りつぶせるので、広い面を1pxずつ埋める時間を削れます。
下塗りの段階で使うと、色面の当たりを早く付けられるうえ、後から形を整える余裕も生まれるのが強みです。
実際の流れとしては、まずバケツでベース色を流し込み、そのあとスポイトで同じ色を拾って細部を塗り足すと、パレットを探し直す手間が消えます。
色数の少ないドット絵ほど、この往復が効きます。
塗り漏れの修正や影の差し替えも、同じ色をすぐ呼び出せるからこそ正確に進むのです。

縁取り機能でモチーフを際立たせる

縁取り機能は、描いたモチーフの輪郭に自動で縁を付け、背景との境目をはっきりさせます。
小さなキャンバスでは、形が少し崩れただけで輪郭が埋もれやすいものですが、縁取りをオンにすると、線の切れ目を補うように輪郭が立ち上がって見えます。
背景色がにぎやかでも埋もれにくくなるため、サムネイルのように一目で印象を決めたい場面でも扱いやすいでしょう。
縁取りなしではぼんやりしていたモチーフが、切り替えた瞬間にくっきり見えたとき、この機能の役割はとても分かりやすくなります。
見やすさは、そのまま伝わりやすさになるのです。

メッシュペンの細かい描き込み

メッシュペンは、細部を詰めたい場面で力を発揮します。
大きな面を塗る道具ではなく、目立たないところに少しずつ情報を足していくためのツールだと考えると使いやすいでしょう。
たとえば、縁取りで形を整えたあとにメッシュペンで点や短い線を足すと、表面の質感や輪郭のニュアンスが出しやすくなります。
さらに、メッシュペン・縁取り・プレビューを含む主要機能の大半が無料で使えるので、まずは無料範囲で一通り触ってみる価値があります。
自分が速さを優先するのか、輪郭の強さを優先するのかを見極めるには、実際に使ってみるのが近道です。

レイヤーとグリッド|3レイヤーで描き分ける

レイヤーとグリッドを使い分けると、ピクセル単位で描くときの迷いが減り、直しやすさも上がります。
上級者設定でレイヤー表示をオンにしておけば、線画、ベース塗り、影やハイライトを分けて扱えるため、あとから手を入れても土台を崩しにくいです。
グリッドも同じで、格子を見たいときだけ出し、不要なら消す使い方ができるので、描きやすさと確認のしやすさを両立できます。

上級者設定でレイヤーを表示する

レイヤー機能は初期状態では隠れており、『上級者設定』で『レイヤーを表示』をオンにして初めて使えるようになります。
最初から必須ではありませんが、描き直しの自由度を上げたい段階に入ったら有効化する価値があります。
単に機能を増やすというより、線を描く作業と色を置く作業を分けて考えられるようになるのが利点です。

実際、ベース塗りを別レイヤーに分けておくと、上のレイヤーで影を何度描き直しても下地が崩れません。
何度でも試せるので、影の境界を少し硬くするか、ハイライトを細く入れるかといった調整を落ち着いて進められます。
修正を重ねるほど差が出るため、使い始めると手放しにくい設定だと言えるでしょう。

3レイヤーの基本的な分け方

使えるレイヤーは3つまでで、既定値では変更できません。
この制限は窮屈に見えますが、役割を絞ることでかえって整理しやすくなります。
たとえば1枚目を線画、2枚目をベース塗り、3枚目を影とハイライトに割り当てると、どこを直すべきかがはっきりします。

レイヤー役割直しやすさ
1枚目線画形の修正に向く
2枚目ベース塗り色面を保ったまま調整しやすい
3枚目影/ハイライト明暗だけを試しやすい

この分け方の強みは、1つを消さずに別の部分だけ描き直せることです。
線画を残したまま影だけ変えれば輪郭の破綻を防げますし、ベース塗りを保持したまま色味の印象を試せます。
3レイヤーしかなくても、順番を決めて運用すれば十分に扱いやすい構成になります。

グリッドと中心線でバランスを取る

グリッドツールでは格子の表示と非表示を切り替えられるので、ドットの位置を正確に確認したい場面だけ呼び出せます。
邪魔に感じるときは消して、詰めの確認をしたいときだけ出す。
この切り替えができるだけで、細部を追い込みながらも画面の圧迫感を抑えやすくなります。

さらに中心線を濃く表示できるので、キャラの顔や左右対称のモチーフを整えるときに役立ちます。
中心線を基準に目や口の位置をそろえると、グリッドなしで描いたときよりも面の傾きが見えやすくなりました。
シンメトリーを意識したい場面では、まず中心を決めてから左右を合わせるのが近道です。

アニメーションGIFの作り方|コマを並べて動かす

dotpictのアニメーション機能は、スマホ向けエディタとしては珍しく、静止画を描く流れのまま動きのある作品まで作れるのが強みです。
まず1枚を完成させてから別アプリに移る必要がなく、同じ画面の中でコマを重ねてGIF化まで進められるので、試作のハードルが下がります。
動きの作り方は難しく見えても、実際は少ないコマから始めるほど手応えをつかみやすいでしょう。

アニメーション機能の始め方

dotpictでアニメを始めるときは、まず静止画と同じ感覚で1コマ目を描き、そこから2コマ目、3コマ目へと少しずつ変化を足していきます。
アニメーションは複数のコマを連続再生して成立するため、1枚ごとの違いが小さいほど動きは自然に見えます。
最初から大きく動かそうとせず、どこを変えると何が揺れて見えるのかを確かめるところから入ると、手順がぐっと整理しやすくなります。

この段階で便利なのが、前のコマを薄く表示しながら次のコマを描ける見え方です。
輪郭のズレや位置関係を目で追いやすくなるので、星のような小さなモチーフでも、どこを何ピクセル動かすかを決めやすい。
実際、点灯した星を1コマ目に置き、2コマ目で消灯しただけの2コマを作ったら、それだけで点滅アニメになりました。
最小構成でも「動いた」と感じられるのが、アニメ制作の面白さです。

コマを増やして動きを付ける

初心者には、点滅や上下の小さな揺れのような2〜3コマの動きが向いています。
歩行アニメのようにコマ数が増えやすい題材へいきなり進むと、姿勢差や重心の移動まで考える必要が出て、途中で手が止まりやすいからです。
少ないコマで成立する動きを先に作ると、フレームごとの差分をどう作るかが見えてきて、次の表現へ自然につなげられます。

コマを増やす作業は、単に枚数を増やすことではありません。
1コマ目から2コマ目へ、2コマ目から3コマ目へと、変化量を小さく刻むことで初めて滑らかさが生まれます。
揺れの中心を少しだけずらしたり、光る位置を1ピクセルだけ動かしたりするだけでも印象は変わります。
まずは短いループを作って再生し、動きが見えたら少しずつコマを足してみてください。

GIFとして書き出す

完成したアニメーションはGIFとして書き出せるので、SNSやコミュニティでそのまま動く作品として共有できます。
静止画では伝わりにくい光り方や呼吸のような細かな表現も、GIFなら再生した瞬間に目に入る。
dotpictの中で描いた動きを、そのまま見せ場に変えられるのが魅力です。
静止画の延長で始めた制作が、いきなり表現の幅を広げる入口になるでしょう。

共有を意識すると、コマ作りの考え方も少し変わります。
再生したときにどの変化が一番伝わるかを意識すると、無駄な動きを省きやすくなり、短いループでも印象が残る。
GIF化は仕上げの操作であると同時に、作品の見せ方を決める工程でもあります。
おすすめです。
まずは小さなアニメを作って、実際に動かしてみてください。

保存と投稿|拡大保存とコミュニティへの共有

保存の段階で拡大倍率を選べるなら、まず等倍のまま残すより、SNSで見たときの見え方を先に考えたほうが仕上がりは安定します。
32x32のような小さなドット絵は、x4〜x8倍で保存しておくと輪郭が読み取りやすくなり、細い線や目のハイライトまで伝わりやすくなります。
完成した32x32の作品をx8倍で保存したとき、等倍では潰れて見えなかったディテールがSNS上でもくっきり残り、画面越しの印象がまるで変わった体験がありました。

x4〜x8倍で拡大保存する

ドット絵は小さいままでは魅力が伝わりにくく、タイムライン上ではさらに縮小されてしまいます。
そこで保存時に倍率を選び、x4〜x8倍まで引き上げるのが扱いやすいです。
ピクセルの境界をそのまま保ったまま拡大できるので、ぼけたイラストではなく、狙った形のまま見せられます。
特に32x32の作品は、x8倍にすると情報量が整理され、投稿一覧の中でも目を止めてもらいやすくなります。

SNS映えする背景・縁取りの付け方

拡大保存だけでなく、背景色や縁取りを足すと作品の輪郭がさらに安定します。
透過PNGのままでも便利ですが、白い画面に置かれたときに淡い色が埋もれやすいので、背景色を敷いてから外周に縁取りを加えると、輪郭がきれいに立ちます。
小さなドット絵ほど外枠の有無で見え方が変わるので、作品として成立するかどうかを最後に整える工程だと考えるとよいでしょう。
背景と縁取りがあるだけで、投稿先の一覧でも一枚の絵として認識されやすくなります。

お題とコミュニティに投稿して続ける

dotpictで描いた作品はもちろん、他アプリで描いたドット絵も投稿できます。
毎日2000件以上が投稿される場なら、初心者の作品でも流れの中に埋もれにくく、コメントやいいねをもらうきっかけが生まれます。
その日のお題に初めて投稿したときに反応が付くと、次も出してみようという気持ちが自然に続きます。
『りんご』『アザラシ』『時計』のような毎日更新のお題は、何を描くか迷う時間を減らし、同じテーマの作品から描き方を学ぶ入口にもなります。
自分で企画を立てて参加者を募る流れまで見えると、制作と投稿がひとつの習慣になるでしょう。

シェア

森川 レイ

デジタルアート系メディアでツールレビューを5年以上執筆。ドット絵制作ツールからゲームエンジンまで、クリエイター向けツールの実用的なワークフロー提案を専門とする。

関連記事

ツール

ドット絵アプリAndroidの使い方|無料3本の始め方

Androidスマホだけでドット絵を無料で描くなら、8bit Painter、dotpict、Pixel Studioの3本が実用の起点になります。筆者もAndroid端末で各アプリを実際に触り、指タッチでアイコンを描いて透過PNG保存まで通したところ、

ツール

Piskel 使い方完全ガイド|無料ブラウザで始めるドット絵・アニメーション入門

Piskelは、Julian Descottes が制作したブラウザ完結型のドット絵エディタで、Apache License Version 2.0 のもとで公開されているオープンソースツールです。

ツール

Pixilart 使い方|ブラウザ無料でドット絵を描いてSNSで共有する方法

Pixilartは、2013年にBryan Wareが個人で立ち上げ、2018年7月にベータ公開されたブラウザ型のドット絵制作ツール兼SNSプラットフォームです。ツールとコミュニティが一体化しており、描く・投稿する・反応を得る流れが1つにつながっています。

ツール

ドット絵ソフトおすすめ10選|無料・有料・環境別比較

ドット絵ツール選びは、PC・スマホ・ブラウザのどれで描くかに加えて、無料か有料か、静止画かアニメか、ゲーム開発まで見据えるかで最適解が変わります。初心者ならまず無料のdotpictPiskelPixeloramaのいずれかで16x16か32x32を1作仕上げるのが近道で、