ChatGPTでAIアプリ向けの遊び心あるカスタムマスコットをデザイン・アニメーション化する

私の考えでは、多くのエージェント型（Agentic）AIアプリは個性に欠け、無機質でロボットのように感じられます。CodexやClaude Codeのようなエンタープライズツールや生産性アプリであれば、そのほうが好まれるかもしれません。しかし、たとえば数分でゲームを作れるアプリのようなクリエイティブなエージェントアプリでは、遊び心のあるカスタムマスコットが大きな価値を生み、他との差別化につながります。

優れたマスコットの条件とは？

• 表現豊かでシンプル： 視覚的なノイズがなく、さまざまな感情を明快に伝えられるシンプルな造形。
• ステート駆動： 最初から複数の動作や感情状態に合わせてスムーズに動かせる設計。
• ブランドとの調和： プロダクトの個性（私の場合はゲーム作りのクリエイティブな混沌さ）を体現していること。
• 汎用性： 48pxの小さなUIアバターでも、高解像度のマーケティング画像でも一目で認識できること。

なぜエージェント型アプリにマスコットが必要なのか？

多くのAIアプリは、無機質なテキストストリームや一般的なローディングスピナーに頼っています。マスコットを取り入れることで、そのUXは劇的に変化します。

• 待ち時間を楽しみに変える： AIが推論やビルドを行っている間、退屈なローダーの代わりにマスコットがコミカルなアクションを見せてくれます。
• エージェントの状態を可視化： AIが今「計画中（Planning）」なのか、「アセット生成中（Building）」なのか、「バグ修正中（Debugging）」なのかが一目で分かります。
• エラー時のストレスを和らげる： エージェントが再試行したり失敗したりしても、マスコットがお茶目にリアクションすることで、単なるバグではなく親しみやすいハプニングとして受け止められます。
• 共創パートナーを生み出す： 単なる一方的なプロンプト入力欄から、一緒にゲームを作る楽しい相棒のような感覚へシフトします。

マスコットをどのようにデザインしたか

アプリのブランドアイデンティティはすでにあったため、ゲーム作りのクリエイティブな混沌を表現する波打つような浮遊形状で、親しみやすく遊び心のある表情にしたいと考えていました。また、感情やアクションに応じた複数の状態を持たせたいとも思っていました。たとえば、計画中は落ち着いて集中し、制作中はワクワクしてエネルギッシュになるようなイメージです。

そこで、ブランドロゴと要望をもとに、ChatGPT（Web版）に以下のプロンプトを入力してマスコットのアイデアを出してもらいました。

💬 プロンプト: "This is the logo of the app that lets anyone build games with simple prompts. after prompting, the AI agent will use it's tools and everything to build a functioning game. I want you to build me a personality for the AI agent that users will interact with, while building the game. like prompting, asking for fixing issues, and all. I want to add micro interactions/movements for things like working, working hard, planning, painting assets, etc. As for the design, it should be minimal enough to be simply drawable in svg formats later. I want it to be vibrant, and utilize the blue side of the logo more than the red/orange sides. Still not a full guideline, let's brainstorm on this."

💡 注記: さまざまなアイデアを自由に広げられるよう、プロンプトはあえて自由度を残したオープンエンドな内容にしました。

ChatGPTからは非常に良い提案が返ってきました。要約すると、以下の3つの方向性です。

• A — キュートなビルダー（Cute Builder）： 表情豊かな目、弾むような動き、遊び心があり少しカオス。
• B — クリエイティブ・スピリット（Creative Spirit）： 抽象的で浮遊感のある青い生物。上品な動きで、いかにもな「マスコット感」が控えめ。
• C — ゲーム開発グレムリン（Game Dev Gremlin）： 視覚的にはミニマルながら強烈な個性。バグで慌てたり、絵を描いたり、テストしたり、喜んだり、疲れたりする、非常に記憶に残りやすいキャラクター。

私は、強い個性を持たせつつも抽象的で洗練された印象にしたかったため、BとCを組み合わせることにしました。その後、同じチャットセッションでマスコットのデザインポスターを生成してもらったところ、以下の画像が得られました。

一目で気に入り、迷わずこのデザインを採用することに決めました。

デザイン案から動くアニメーションマスコットへ

当初はDuolingoのような滑らかなアニメーションのキャラクターを作りたいと考えていました。しかし、生成されたラスター画像を実際に動くアニメーションキャラクターに変換するのは、想像以上に困難でした。滑らかなアニメーションにはラスター画像ではなく簡略化されたベクター画像が必要であり、手作業でベクター化（トレース）するには多くの時間と高い技術が必要になります。

ChatGPTにベクター風デザインの生成を依頼してみましたが、以下のようにうまくいきませんでした。

キャラクターの立体感やダイナミックな輪郭、魅力が削ぎ落とされ、単なるフラットなグラフィックになってしまったのです。

そこで考えた結果、各ステートにつき4フレームで構成する低FPSのパラパラ漫画風アニメーションを採用することにしました。この手法で最も重要なのは、生成画像が背景透過であること、全フレームが同一のアスペクト比とサイズであること、そしてフレームごとの動きがランダムではなく同じ方向に連続していることです。

驚いたことに、これはChatGPTで簡単に実現できました。新しいチャットセッションを開き、次のようにプロンプトを入力しました。

💬 プロンプト: "for this idea, i want you to build me frames for idle/floating state (1), with transparent backgrounds. generate 4 frames and make sure they progress in the same direction. Also the frames should be with same aspect ratio and size."

すると、このように連続する4フレームが生成されました。

アプリ内でのフレームの活用

マスコット導入前は、エージェントのビルド処理に汎用のRiveアニメーションを使用していました。そこで、Riveアニメーションをこれらのマスコットフレームに置き換えました。また、以前と異なり、idle（待機）、planning（計画）、building（制作）、working hard（奮闘）、painting assets（アセット描画）、debugging/testing（デバッグ・テスト）といった複数のステートを用意しました。ChatGPTからフレームをダウンロードし、サブフォルダに整理しました。

重いGIF画像や実行時スプライトシートを使う代わりに、Flutter内で軽量な4フレームPNGのパラパラ漫画（フリップブック）として実装しています。

わずか4枚の画像から自然で滑らかなループを作るため、端のフレームで少し停止を挟む8ステップのピンポンシーケンス（1 → 1 → 2 → 3 → 4 → 4 → 3 → 2）を採用しています。繰り返しのAnimationControllerでクロックを動かし、Image.assetでアクティブフレームを描画します。その際、フレーム切り替え時のちらつきを防ぐためにgaplessPlayback: trueと事前画像キャッシュ（pre-warming）を使用しています。

// 4フレームに対する8ステップのピンポンシーケンス: 1 -> 1 -> 2 -> 3 -> 4 -> 4 -> 3 -> 2
static const _frameSequence = <int>[0, 0, 1, 2, 3, 3, 2, 1];

void _onTick() {
  final nextIndex =
      (_controller.value * _frameSequence.length).floor() %
      _frameSequence.length;
  if (nextIndex != _sequenceIndex && mounted) {
    setState(() => _sequenceIndex = nextIndex);
  }
}

@override
Widget build(BuildContext context) {
  final frameIndex = _frameSequence[_sequenceIndex];
  final path = 'assets/images/avatar/${_pose.name}/${frameIndex + 1}.png';

  return Image.asset(
    path,
    fit: BoxFit.contain,
    gaplessPlayback: true, // フレーム切り替え時の白いちらつきを防止
  );
}

実装結果

曖昧なプロンプトから新しいゲームを生成する際の、Skyloopマスコットの実際の動作です。

AIでマスコットを生成する際の限界と課題

私はプロのデザイナーではありませんが、今回のプロセスは非常に手軽かつスピーディーに進めることができました。しかし、この方法がすべての人に向いているとは限りません。特に既存のブランドがある場合は、ガイドラインやアセットに合わせてプロのデザイナーやアニメーターが作り直す必要があるかもしれません。AIの出力には当たり外れがあります。

また、アニメーションフレームに関しても、デザインによってはAIが同一方向への動きや一貫性を維持したフレームを生成できない場合があります。そのような場合は、手作業での補正や高度なアニメーション技術が必要になります。今回のデザインでも、特に待機（idle）ステートでマスコットの周囲を回転する螺旋のラインなど、完全に同一方向へ動いていない部分がありました。プロンプトで修正を試みましたが、AIはそうした細かい連続性の調整にはかなり苦戦していました。

マーケティングでの活用の可能性

マスコットが最も真価を発揮するのはマーケティング分野です。アプリ内のアセットとは異なり、マーケティングコンテンツはリアルタイムでの対話性を必要としないため、最新の画像・動画生成モデルを活用して、さまざまなシチュエーションや感情を表現した高品質・高FPSのアニメーションを生成できます。これはSNSマーケティングにおいて非常に強力なフックになります。

まとめ

自分のアプリのためのマスコットデザインは、とても楽しく充実した経験でした。プロセスは比較的シンプルで、自由なクリエイティビティを発揮できました。将来的にはAIを活用してマーケティング用の高品質アニメーションを制作できる点も大きなメリットです。結果にはとても満足しており、プロダクトにマスコットを取り入れたいと考えているすべての人におすすめしたいアプローチです。