動くドット絵を作りたいけれど、タイムラインやコマ打ちまでは必要ない。そんな小さな作品なら、WigglyPaintで線を描くだけで手描き風の揺れを付けられます。最後に範囲を整え、GIFとして書き出します。
向いているのは、SNSアイコン、配信用の小さなマスコット、チャットのリアクション画像などです。写真を自動変換するサービスでも、ゲーム用スプライトを編集するソフトでもありません。「自分で描いた線を、すぐ少しだけ動かしたい」ときの道具です。
動くドット絵はアイコンの大きさから逆算する
最初から全身キャラクターを描くと、縮小時に表情が消えやすくなります。顔、食べ物、植物、記号など、一つのシルエットで伝わる題材を選びましょう。
色はまず三、四色に絞ります。輪郭を描いた段階でブラウザを縮小し、アイコンサイズでも何の絵か分かるか確認します。
同じ形でブラシの揺れ方を比べる
ブラシによって動きの強さが違います。丸や星を同じ大きさで並べて描くと、完成前に相性を判断できます。
元気なリアクションには強めの揺れ、長く使うプロフィール画像には穏やかな揺れが合わせやすいでしょう。飾りを増やすより、輪郭と一つの表情を優先します。
明るい画面と暗い画面の両方を想像する
SNSやチャットにはライトモードとダークモードがあります。背景とキャラクターの明るさが近いと、せっかくの輪郭が沈みます。
トリミングはスタンプの余白を意識する
線が動くため、ぴったり切りすぎると端にぶつかって見えます。上下左右に少し余白を残し、中心がずれていないか確認します。
GIFを書き出して実際の表示サイズで確認する
仕上がったらGIFを保存します。書き出した後にアイコンと同じ大きさで開き、表情、背景、余白をもう一度見ます。
作例：SNS用の「おつかれ」アイコンを作る
丸い顔に少し下がったまぶたと湯気を描き、横に小さなマグカップを置きます。「おつかれ」と文章で書かなくても、眠そうな顔と温かい飲み物で意味が伝わる構成です。
顔の輪郭は穏やかなブラシ、湯気は少し大きく揺れるブラシにすると、動きの中心が分かれません。色は顔、カップ、背景、輪郭の四系統に絞ります。XやDiscordなど表示先が変わっても使いやすいよう、細い文字は入れず、正方形に収まる配置にします。
GIFを書き出したら、プロフィール欄とタイムラインの小さな表示を想定して確認します。湯気しか見えない場合はカップを大きくするのではなく、湯気の本数を減らして顔に視線を戻します。
動くドット絵が見づらいときの直し方
- 線がちらつく： 細い線を減らし、外形のブラシを一段太くします。
- 何を描いたか分からない： 装飾を消し、単色のシルエットで確認します。
- 背景に沈む： 色相より明るさの差を大きくします。
- 端が窮屈： 揺れる方向を見て、その側の余白を少し広げます。
アイコンは動きを弱め、チャットのリアクションは表情を強く、投稿に添えるGIFは背景まで含めるなど、用途によって情報量を変えると使いやすくなります。
コマ打ちのドット絵アニメとは役割が違う
WigglyPaintはブラシの揺れを自動で作ります。歩行サイクル、フレームごとのポーズ、スプライトシートが必要なら、ドット絵アニメーションの基本ガイドを参照してください。
よくある質問
スマートフォンでも作れますか？
ブラウザで描けます。画面が小さい場合は、複雑なキャラクターより顔アイコンや一文字のリアクションから始めると操作しやすくなります。
写真をドット絵に変換する機能ですか？
画像変換ではありません。キャンバスに自分で描いた線へ、ブラシが動きを付けます。
GIFがにじんで見えるのはなぜですか？
細い線や小さな模様が多すぎる可能性があります。輪郭を太くし、色数を絞ってから再度書き出してください。
動くドット絵には何色くらい必要ですか？
最初は三〜五色で十分です。輪郭と表情が読める状態を作ってから、影やアクセント色を一つずつ追加します。
文字を入れても大丈夫ですか？
短い一文字や記号なら使いやすいですが、細い日本語を長く入れると縮小時に潰れます。文字なしで感情が伝わる構図を先に試してください。