Claude Designで2Dドット絵キャラをつくる

毎朝4時に起きて、2時間だけ小説を書く。

そんな習慣を自分に課すために、ぼくはアプリをつくり始めました。

名前は「HabitBird」。

もともと習慣アプリとして作っていた「HabitBird」を、今回新しい機能を加えて作り直しています。

習慣をこなすと鳥が生まれて、ある数を超えると進化する——そういうストーリーを仕込んだやつです。

で、そこで必要になるのがキャラクター。

そして、ゲームみたいなアニメーション。

これらがないと、感情が動かないんですよね。感情が動かないと、習慣も続かないじゃないか。そこで、キャラクターアニメーションの世界に沼ったわけです。

んで、そこで出会ったのが Claude Design でした。

失敗から学んだ「参照画像」の重要性

ドット絵専門のAIソフトウェアといえば、業界では「PixelLab」っていうツールが大手。

どんな絵でも、8方向のピクセルアートにすることができます。

でも、「Claude Designでドット絵ってできるのかな」とふと思ったのがきっかけで、ちょっと試してみたんです。

最初、何も考えずにプロンプトだけ打ち込んでみました。

「かわいい鳥のドット絵キャラをつくって」

そしたらですね、出てきたものが——しょ、しょぼすぎる。。。

いや、AIが悪いわけじゃないんです。ぼくの指示が曖昧すぎた。

ここで気づいたことがあります。

Claude Designは「完成形に近い参照画像がある」と、一気にクオリティが跳ね上がる、ということ。

参照画像なしだと、AIは「平均的なドット絵」を返してきます。でも参照画像ありだと、塗り方・サイズ感・タッチ、全部それに引っ張られる。

要するに「こういう雰囲気のやつ！」って見せるほうが、言葉で説明するより100倍伝わるんです。

ポイントをまとめると、こんな感じ。

・完成形に近い参照画像を1枚用意する
・デザインスタイル（線なし・色数・形の方向性）を言語化する
・サイズ感（24×24ピクセル、など）を明記する

これだけで、全然ちがうものが出てきます。

デザインスタイルの言語化は、参照画像を普通のAIに添付して、「添付画像にあるキャラクターのデザインスタイルをできる限り言語化してみて」って尋ねればOK。

ちょっと修正が必要かもしれませんが、ゼロから自分で言語化するよりも、すでにあるものを削ったり修正するほうが楽です。

実際に使ったプロンプト

ぼくが使ったのはこちら。

ちなみに、せっかくFable 5（Claude Designの上位モデル）が無料で使えたので試してみましたが、たぶん普通のSonnetでも同じように動くはず。

このプロンプトにピクセル数など情報を入れて、参照画像を添付するだけ。

それで出てきたやつが、ちゃんとキャラっぽいんです。

アニメーションは以下で見ることができます。

「これ、PixelLabいらないのでは？」

って思った瞬間でした。

Claude Designがドット絵に向いている理由

なんで Claude Design がドット絵に強いのか、ちょっと考えてみました。

たぶんですけど、ドット絵って「制約が多い」んですよね。サイズが小さい、使える色が少ない、フレーム数が少ない。

そういう制約の多い世界って、じつはAIが得意。

自由度が高いイラストだと「どんなスタイルにするか」で迷いが生まれる。

でも制約が多いと「この条件の中で最善を出す」だけでいい。参照画像があればさらに絞れる。

それが、Claude Designでドット絵が意外とうまくいく理由だと思います。

HTMLへの書き出しもできるので、アプリへの移植も楽でした。

ちなみに、普通の画像生成だと、Geminiの画像生成（Nano Banana 2）のほうが優秀だと思います。アプリの背景の作成にはGeminiを使用してます。

完成したドット絵キャラをHabitBirdに組み込んで、キャラクターアニメーションが流れたとき——自分でも「おっ」ってなりました。

毎日その「おっ」を体験するために、今日もアプリをつくります。