ドット絵をClaude Codeに描かせている
YouTube Shorts用に、ドット絵のキャラクターが喋る動画を作っています。「やさしいIT」という初心者向けの解説シリーズで、イエティ君というキャラクターがパスワードやWi-Fiの話をする、40秒くらいのやつです。
問題は、動画1本につきドット絵が十数個要ることでした。鍵、錠前、雲、封筒、釣り針、キーキャップ。使い回せるものもありますが、テーマが変われば新しいものが要ります。
これを全部Aseprite（=ドット絵専用のお絵かきソフト）で1ドットずつ打つのは、正直しんどい。
そこでClaude Code（=ターミナルで動くAIのプログラミング相棒）に描かせることにしました。
先に結論を言っておきます。1枚の絵が欲しいだけなら、画像生成AIに描かせたほうが圧倒的に速いし、圧倒的に上手いです。 それでもコードで描いています。理由は最後まで読んでもらえれば分かります。
🎨 まず誤解を潰しておく：画像生成の話ではありません
「AIにドット絵を描かせる」と聞くと、たぶん多くの人がこれを想像します。
プロンプトを打つ → 絵が出てくる
やっているのはそれではありません。 AIに書かせているのは絵ではなく、絵を描くPythonのコードです。
出てきたコードを実行すると、絵になります。つまり手元に残るのは画像ファイルではなく、画像を生み出すプログラムのほうです。
この違いが、記事の最後で効いてきます。
🧱 仕組み：ドット絵は「描く」んじゃなくて「座標を置く」
ドット絵をAIに頼めるのは、単純な図形の組み合わせに分解できるからです。うまいかどうかは別として、頼む形にはしやすい。
手順は3つだけです。
- 32×28マスくらいの小さいキャンバスに、四角や丸を数個置く
- それを
NEAREST（=拡大するとき、色を混ぜずにドットをそのまま大きくする方式）で8倍にする - 塗った部分の外周1マスを、輪郭として塗る
3つ目の輪郭は毎回やるので、_pixel()という共通の関数にまとめてあります。下のコードの最後の行がそれです。
これだけでドット絵になります。実際のコードがこれです。
@lru_cache(maxsize=None)
def _pc(scale=8, cracked=False):
def fn(d):
d.rectangle([2,2,30,20], fill=WHITE) # モニタの外枠
d.rectangle([5,5,27,17], fill=SCR) # 画面
d.rectangle([13,21,19,23],fill=WHITE) # 支柱
d.rectangle([6,24,26,26], fill=WHITE) # 台座
if cracked: # ヒビを入れる場合だけ
d.line([(18,5),(13,10),(17,11),(11,17)], fill=RED, width=2)
return _pixel(fn, 32, 28, scale)
やっていることは、四角を4つ置いて、cracked=Trueのときだけ赤い線を1本足す、それだけです。rectangle([2,2,30,20])は「左上(2,2)から右下(30,20)まで四角を塗る」という意味で、絵を描く技術というより、どこに四角を置くかの指定になっています。
位置が言葉で書ける以上、AIに頼みやすい仕事です。ただし簡単なのは、この四角4つで済むレベルの形だけという条件が付きます（後で嫌というほど分かります）。
こうして描き溜まったのが、これ。
雲、ドライブ、封筒、フィルム、写真、鍵、錠前、スマホ、モニタ。全部この方式です。
描き溜まってくると、これが効いてきます。台本29本に対してカードのファイルは28個ありますが、そのうち10個は共通の土台を読み込むだけで済んでいて、1本あたり19行しかありません。新しい回のたびに絵を用意し直しているわけではない、ということです。
ちなみに一番右は「釣り針」のつもりで描かせたものです。どう見ても下向き矢印ですね。この話も後でします。
🔑 コードで持つと何が嬉しいのか
画像ファイルではなくコードで持つと、こうなります。
左から順に説明します。
| 呼び出し | 出てくる絵 |
|---|---|
_pc() |
普通のモニタ |
_pc(cracked=True) |
画面にヒビが入ったモニタ |
_lock() |
閉じた錠前（黄色） |
_lock(opened=True) |
開いた錠前（赤くなる） |
_lock(4) |
小さい錠前 |
_lock(12) |
3倍の錠前（ドットが潰れない） |
新しく描き足したものは1枚もありません。 モニタは_pc()、錠前は_lock()という関数がそれぞれ1つあるだけで、渡す値を変えているだけです。
これを画像ファイルとして持っていると、ヒビ入り用に1枚、開いた錠前用に1枚、サイズ違いにさらに数枚、と別ファイルが増えていきます。しかも拡大するとドットがぼやけます。
さらに効くのがアニメーションです。「1秒後に錠前が開く」「ゲージがだんだん溢れる」「キーが沈む」といった動きは、時間tを受け取って絵を返す関数を1個足すだけで作れます。
def card_at(screen, t): # t = そのシーンに入ってからの経過秒
...
動画は結局、1秒間に何十枚も絵を差し替えているだけなので、絵が関数になっていれば、動きは「時間に応じて数字を変える」だけで書けます。 もちろんタイミング調整や書き出しの手間は別にかかりますが、動きのために新しい素材を用意する必要はありません。
そして地味に大きいのが、HTMLにそのまま埋められること。コードで描ける絵は、動画にもWebアプリにも同じ考え方で持っていけます。用途ごとに素材を作り直す必要がありません。
念のため補足すると、ここで比べているのはAIが吐き出したPNG画像1枚とコードの差です。Asepriteのファイルやレイヤー付きのデータを自分で管理しているなら、そちらでもある程度は使い回せます。
😇 で、実際どこまで下手なのか
このイエティ君、完成形はもう出来ています。ただ、それを一切見せない状態でClaude（＝この記事を一緒に書いているAI）に「イエティを描いて」と頼んだら何が出てくるのか、試してみました。5パターンです。
1匹もイエティに見えません。
共通してやらかしているのが3つあります。
- 毛が無い。イエティは毛むくじゃらのはずなのに、全部つるつるの丸
- 赤い口が鼻に見える。位置が中央すぎる
- 影を入れると服の帯に見える
つまりAIは「32×28に四角を置く」ことはできても、イエティらしさを知らないわけです。
🔁 フィードバックを1回返すとどうなるか
そこで完成形を見せて、直すべき点を6つ伝えました。
- 顔と体を色で分ける（顔は薄い青、体は白）
- 輪郭をギザギザにして毛を出す
- 体の内側に陰影のドットを散らす
- シルエットを台形・山型にする
- 手足は細い線を数本にして指に見せる
- 頬にピンクを置く
出てきたのがこれです。
だいぶ生き物になりました。 顔と体が分かれ、頬にピンクが乗り、目が濃紺の四角になりました。
でも今度は富士山になりました。
- シルエットが三角すぎる（本物はもっともこもこした台形）
- 底が直線で塞がっている
- ギザギザが階段状で機械的
- 顔が大きすぎて六角形っぽい
- 手が体の白に埋もれて見えない
1回のフィードバックでは、まだこの距離です。
📏 一発目 → 1回直す → 完成形
3段階を並べるとこうなります。左が一発目の5種、真ん中がフィードバック1回後、右が完成形です。
右端との差が、そのままかかる手間です。
実際に完成形まで持っていったときは、こうでした。
- 参考画像を渡した（言葉だけでは越えられない壁がある）
- かなりの数の往復をした
- てこずったのは特定の部分ではなく全部
「AIに頼んだら一瞬でできました」ではありません。そこそこ粘る作業です。
⚖️ で、どっちを選ぶべきか
| 画像生成AI | コードで描く | |
|---|---|---|
| 速さ | ⭕️ 圧倒的に速い | ❌ 何往復もする |
| 上手さ | ⭕️ 上手い | ❌ 下手 |
| 状態違い | ❌ 作り直し | ⭕️ 引数ひとつ |
| サイズ変更 | ❌ ぼやける | ⭕️ 潰れない |
| アニメ | ❌ 別で作る | ⭕️ 関数を1つ足すだけ |
| 埋め込み | 画像として貼る | ⭕️ HTML・動画・アプリに同じ形で |
| 修正 | 作り直し | ⭕️ 数字を1つ書き換える |
上2行を見れば、画像生成の圧勝です。速いし上手い。1枚ぽっきり必要なだけなら、迷わずそっちを使うべきです。
コードで描く価値は下5行にあります。一度コードになると、その後の汎用性が上がる。同じ絵を色違い・サイズ違い・状態違い・動きつきで何十回も使う場合、最初の遅さを回収できます。
ぼくの場合は、動画を1本作るたびに同じアイコンを別サイズ・別状態で何度も使うので、後者を選んでいます。遅くて下手なほうを選んでいるのは、後で楽をするためです。
🛠 やってみたい人向けのメモ
必要なのはPythonとPillow（=Pythonで画像を扱うライブラリ）だけです。
pip install pillow
Claude Codeに頼むときのコツは3つでした。
- キャンバスサイズを先に決めて伝える（「32×28で」）。サイズを言わないと妙に大きい絵を描こうとして崩れます
- 色を先に定義しておく。パレットを渡さないと、絵ごとに色がバラバラになって統一感が消えます
- 一発で完成を狙わない。出てきたものを見て、具体的に何が違うかを言葉で返すほうが速いです。「もっとかわいく」ではなく「輪郭をギザギザにして」
そして繰り返しますが、参考画像は早めに渡したほうがいいです。言葉だけで形を伝えるのは、思っているよりずっと難しい。
まとめ
- ドット絵は「絵を描く」のではなく「小さいマス目に座標を置く」作業なので、AIがコードとして書ける
- ただし画像生成のほうが速いし上手い。1枚だけ欲しいならそっちを使うべき
- それでもコードで持つと、引数ひとつで状態・サイズが変わり、アニメも作れて、HTMLにも動画にもアプリにも埋め込める
- 実際にやると参考画像が要るし、かなりの往復が必要。一瞬では終わらない
速さを買うなら画像生成。使い回しを買うならコード。それだけの話でした。