AIの稼働状況をドット絵オフィスにした話と、4つのつまずき

AIの稼働状況を、ドット絵のオフィスとして画面に映す道具を自作しました。Claude Code が書き出しているログを読み取って、いま誰が動いているのかをキャラクターの光り方で見せるだけの、自分のパソコンの中だけで動く小さなアプリです。

同じようにAIを使ってみたいと考えている方に向けて、使った材料・作った順番・先に転んだ場所を、そのまま書きます。

先に3つ、正直に書いておきます。1つ、コードは非公開なので、この記事は作り方の流れの話です。2つ、文中に出てくる「麻耶」「架純」といった名前は、AIへの指示を役割ごとに分けて付けた呼び名で、人間のスタッフはいません。指示を出しているのは私ひとりです。3つ、この記事自体も、構成と下書きはAIに任せて、私が読んで直しました。あとで出てくるスクリーンショットに「記事の構成設計」「記事1周目の執筆」と写っているのが、その作業です。

AIの稼働状況を、ドット絵のオフィスにしてみた

オフィスの背景の上に、12体のキャラクターが並んでいます。奥に5人、手前に6人、そして右上の一段高いところに1人。この1人が、私の指示を最初に受け取る司令塔の役です。

作業中のキャラクターだけ、まわりが緑に光って点滅します。黄色く光っていれば待機中、灰色のままなら状態が分からない、という3色の決めごとにしました。この画面にも、右上の1人が緑、ほとんどが黄色、手前の左寄りの1人だけが灰色と、3色がそのまま写っています。

同じ画面には、もう1つの表示があります。こちらはカード表示で、部署ごとに枠で囲まれた「部屋」になっていて、部署名の右の「作業中 0・全12件」が、いま動いている数と、その部屋の通算です。カード1枚が1セッションで、担当の名前・待機中か作業中か・いま何をしているかが、開かなくてもそのまま読めます。終わった分は畳まれるので、カードが1枚も出ていない部屋もあります。

どちらか片方に寄せなかったのは、眺めて楽しいのはイラスト、件数や中身を確かめるのに向いているのはカードと、用途が別だったからです。

作ってみて変わったことは、誰が動いているかが一目で分かるようになった、という1点です。効率が何%上がったかは測っていません。

材料は3つだけ。5段階で積み上げた

使った材料は3つです。

1つめは、Claude Code が自動で書き足していく作業日誌のようなファイル（セッションログ）です。C:\Users\<Windowsのユーザー名>\.claude\projects\ の中に、プロジェクトごとに置かれています（<Windowsのユーザー名> はご自身のものに読み替えてください。拡張子は .jsonl）。

2つめは、Python の FastAPI と uvicorn。小さなWebサーバーを立てる道具で、インターネットには公開せず、自分のパソコンの中だけでブラウザから開くアプリ（ローカルWebアプリ）にしました。

3つめは、ローカルのComfyUI。自分のPCのグラフィックボードで絵を作る無料ソフトで、キャラクターと背景のドット絵はこれで作りました。有料サービスを新しく契約していないので、追加費用はゼロです。

作った順番は5段階です。①ダミーの社員を1人だけ表示する→②実際のログにつなぐ→③状態を色分けする→④部署ごとのレイアウトにする→⑤イラストに差し替える。細かく刻んだのは、一気に全部お願いした時に、AIが要件を勝手に間引いて簡略版になったからです。1段階ずつ動くものを確かめてから次へ進むほうが、やり直しが少なくて済みました。時間を計ってはいないので、早かったかどうかは分かりません。

画面の一番下にはリソースモニターがあり、5時間の枠と1週間の枠を、それぞれ何%使ったか・次にいつリセットされるかが横棒で出ます。ここだけはAIのログではなく、利用量のAPIから数字を取っています。Claude Code が保存しているOAuthトークン（ログイン済みであることの証明書のようなファイル）を、読み取りだけで使っています。外に出すと危ないものなので、それ以外はしていません。

ドット絵オフィスという発想自体は、私が思いついたものではありません。先行するnote記事、VS Codeの拡張機能、そしてMacで同じものを自作した方の解説記事という3つを参考にさせてもらいました。上に書いた5段階の刻み方も、私が考えたものではなく、その解説記事で公開されている手順をほぼそのままなぞったものです。ただし有料で販売されているプロンプト集は買っていないので、指示の中身は自分で組み直しています。

実機で開くまで分からなかった、4つのつまずき

4件とも、画面を開くまで気づけませんでした。

1つめ。「最後の発言が人間なら待機中」という当初の決め方が、実際のログでは通用しませんでした。ログの中で user と記録されている行を1件ずつ見たところ、その大半は人間が打った文章ではなく、ツールの実行結果だったからです。そこで「AIの文章で終わっていたら待機」「15分書き込みが無ければ待機に落とす」という決め方に変えました。

2つめ。全案件の指示文が、そのまま画面に出ていました。他の案件の名前も混ざる状態です。既定を「要約だけ表示」に変え、案件ごと丸ごと画面から隠す設定も足しました。この記事の画像も、その設定を使って撮っています。同じようにログを読む道具を作る方は、最初は「全部そのまま出る」前提で作って、あとから隠す、の順になると思っておいたほうが安全です。

3つめ。イラスト表示にすると、誰が動いているのか全く分かりませんでした。実際に画面を開くまで、私自身がまったく気づいていませんでした。色を変える指示を付ける場所が1階層ズレていて、状態を示す丸が常に灰色のままになっていました。

4つめ。キャラクターが重なって、顔が隠れていました。これも画面を開いて分かったことです。絵ごとに余白の比率が違い、同じ幅を指定しても見た目の大きさがバラついていたのが原因でした。位置の指定方法を統一し、重なりがゼロになることを計算で確かめてから並べ直しました。

もう1つ、小さな失敗も書いておきます。絵の背景を切り抜いて透明にする処理は、四隅の色を目印にする仕組みです。そのため縁取り・丸い角・グラデーションがあると目印が合わず、12体のうち4体で切り抜きに失敗しました。

できていないこと、そして気になること

できていないことから書きます。これはWindowsのパソコンで、私1人が使っている道具です。監視しているのもこの1台の中だけで、携帯など他の端末から見る仕組みはありません。私が参考にした事例はMacで作られたものなので、Macでも同じものは作れます。

気になることもあります。キャラクターを作り込んでいないので、大きさの見え方にいまいち統一感がありません。12体の画風も揃っていません。1人は指定した髪型と違うまま（ツインテールのつもりがポニーテール）です。1度作り直しを試したところ、別の不具合が出たので元に戻しました。

まとめ

作って、転んで、まだ気になるところも残っている。それが今の状態です。それでも、AIが動いている様子が目に見えるようになったのは、思っていたより気分のいいことでした。

何か作ってみたいものがあれば、お問い合わせからどうぞ。運営者本人が読んで返信します。