この記事でわかること
- AIバーチャルオフィスとは何か（複数AIをドット絵で可視化）
- スマホ連携で外出先から自宅Macを操作する方法
- 失敗しない作り方のコツ（ハーネス→ループ）
- おすすめのモデル運用とキャラ画像の作り方
「僕が実際に、自宅Macで動く約10個のAIプロジェクトをドット絵オフィスに並べ、外出先のスマホから動かしてみたら、黒いターミナルを眺めていた頃より断然ラクになりました」
Claude CodeやCodexで複数のプロジェクトを同時に走らせていると、黒いターミナルとエディタが開きまくって、どれが承認待ちで止まっているのか分からなくなってきます。この見えないストレスに心当たりがある人は多いはずです。
こんにちは、ルーティンラボ（@rutinelabo）です。今回はSNSでも話題のAIバーチャルオフィス（AIオフィス）について、僕自身が自作したものを見せながら、何が便利で、どう作るのかを正直に解説します。
そもそもの複数プロジェクトの視認性問題は、HTMLダッシュボードでも解決を試みています。あわせてどうぞ：Claude CodeはHTMLで視認性UP｜進捗ダッシュボードで多数プロジェクトを一望
-
-
Claude CodeはHTMLで視認性UP｜進捗ダッシュボードで多数プロジェクトを一望
続きを見る
プロンプト配布中
LINE公式アカウントを友達追加していただければ、本記事やYouTubeで使用した使用したプロンプトを配布いたします。メンバーシップ登録で優先サポートも実施中です。
AIバーチャルオフィスとは｜複数のAIをドット絵の"社員"にする
AIバーチャルオフィスとは、ローカル環境で動いているプロジェクトを可視化する仕組みです。ターミナルで動くAIエージェントを、一枚のドット絵オフィスに社員として並べ、それぞれが今どんな作業をしているかをキャラクターの動きで表します。
僕自身が7月8日にこの仕組みのポストをしたところ、かなり多くの反応をいただきました。要は、擬人化することで開発が楽しくなるという遊び心の部分に共感が集まったのだと思います。仕組みの中身はシンプルで、各プロジェクトのログを読み取り、その状態をアバターに紐付けているだけです。
なぜ流行っている？ 複数AI運用の「認知負荷」問題
背景にあるのは、ターミナル運用の負荷です。Claude CodeのFable 5やCodexの5.6が相次いでリリースされ、ローカルで複数プロジェクトを走らせる人が増えました。高スペックのMacを持っていれば、いくつものプロジェクトを同時に立ち上げられます。
ところが実際の画面は、黒いターミナルやエディタが開きまくった状態です。どこにメッセージが来て、どこが承認待ちで止まっているのか。プロジェクトが増えるほど、人間側の認知負荷が一気に膨らみます。この負荷を下げつつ、開発を楽しくできないかと考えて作ったのがAIバーチャルオフィスでした。
| 観点 | ターミナルだけの運用 | AIオフィスで可視化 |
|---|---|---|
| 状態の把握 | ウィンドウを1枚ずつ確認 | キャラの様子で一目で判断 |
| 承認待ちの発見 | 見落としやすい | 該当キャラが知らせてくれる |
| 気分 | 黒い画面で単調 | 社員が働く様子で楽しい |
自作AIオフィスでできること（状態表示・クリック操作）
まず基本は、各アバターが実行中・調査中・待機中のどれなのかを一目で示すことです。今は一気に約10個のプロジェクトを表示していて、机がないほど忙しい様子もあえて見せています。4×4の机レイアウトも可能ですが、僕は9席にしています。
理由は負荷です。64GBメモリのMacでも、9つ以上のプロジェクトに重いエディタが重なると動作が重くなります。そこで9席を目安にして、Mac自体の状態を可視化する仕組みとしても使っています。
キャラをクリックすると、そのセッションの詳細が開きます。プッシュ通知の内容を確認したり、その場で承認・停止・報告依頼を送ったり、自由記述のテキストで指示を出したりできます。ターミナルに戻らずに操作できるのが便利なポイントです。
- 各プロジェクトの状態（実行中／調査中／待機中）を色と動きで表示
- クリックでセッション詳細・プッシュ通知を確認、承認や停止も可能
- クレジット消費を可視化するリソース項目も追加中（Codexバーを参考）
クレジット消費については、Codexバーと呼ばれる可視化ツールを参考に、リソースという項目で組み込んでいる途中です。Claude CodeやCodexでローカル開発を続けるうえで、あとどれくらい回せるのかは重要な情報になります。
スマホ連携で自宅Macを外から遠隔操作する
今回いちばん便利だったのがスマホ連携です。スマホの画面からメッセージを送り、自宅のMacに指示を出したり承認したりできます。外出先から、自分の端末で動いているプロジェクトをそのまま遠隔操作できる感覚です。
正直な課題も書いておくと、現状はMacBookを閉じると中継が切れてしまいます。そこは常時稼働させているMac miniのOpenClaw環境と連携させれば解決できるので、今まさに組んでいるところです。スマホからAIを動かす発想自体は、以下の記事でも扱っています。
スマホからAIエージェントを動かす例：OpenClaw×Discord連携ガイド｜5分で設定完了
正直な話｜これは"自分が発明した"ものではない
ここは誤解のないように書いておきます。AIエージェントの可視化は以前から存在していました。代表例が、VS Code拡張のPixel Agentsです。AIコーディングエージェントをドット絵オフィスの社員として動かす、無料かつオープンソースの拡張機能で、ログを読んでキャラの状態を更新する仕組みも同じです。
仕様はPixel Agents（VS Code Marketplace）を参照しました（2026年7月時点）。僕もこうした先行ツールをいろいろ参考にして作っています。
いま本当に差がつくところ
今は一番最初に作っても、構成や外観はすぐ真似されます。だからこそ差がつくのは、UX・UIの作り込みと、ついつい使いたくなる人間味です。同じ機能でも、自分が毎日使いたくなる形に寄せられるかが勝負になります。
作り方のコツ｜一気に作らせず、ハーネス→ループで育てる
作り方の注意点はひとつだけ。いきなり全部作らせないことです。AIオフィスを作ってと一気に投げると、仕上がりがかなり雑になります。プロンプトエンジニアリングと同じで、どう作ってほしいかを一つずつ丁寧に指示していきます。
僕の進め方は、まずリサーチをかけ、Claude Codeでハーネス（AIエージェントを動かす土台の仕組み）を作り、そのうえでループを回して少しずつ改善する流れです。ハーネスの考え方はこちらで詳しく解説しています。
参考：ハーネスエンジニアリングとは？AIに任せきる開発の新常識を実演解説
step
1まずはスターター用のプロンプトを1つ投げる
最初は、このMacで動いている複数のAIを一枚のドット絵オフィスに社員として表示するローカルツールを作ってほしい、という指示から始めます。実際に使っているプロンプトの入り口はこちらです。
# スターター用プロンプト（入り口）
今このMacで動いている複数のAIを、一枚のドット絵の
オフィスに社員として表示するローカルツールを作ってください。
まずは1つのダミーデータで動く最小構成から始めてください。
step
2ダミーデータ1つで最小構成を動かす
いきなり全プロジェクトを接続すると不具合が一気に出ます。まずはダミーデータを1つだけ連携させて土台を作り、それが動いてから本番環境と同じ形に広げていきます。
step
3吹き出しやクリック詳細を1機能ずつ追加
作業中や休憩中を吹き出しで表す、社員をクリックしたらセッション詳細を出す、といった要望を1つずつプロンプトで足していきます。順番に投げていくと、それっぽいAIオフィスが仕上がっていきます。
step
4見た目は参考画像を貼って整える
ポイントは仕上げです。オフィスらしく整えてとテキストだけ投げても、なかなかイメージ通りになりません。ネットにある参考画像やスクショを貼ると、狙った雰囲気にグッと近づきます。ゲームボーイ風のレトロなレイアウトも、この方法で作り込みました。
なお、今回のスターター用プロンプトと解説資料は、公式LINEで「AIオフィス」とメッセージをいただくとそのまま届く形で配布しています。手を動かして試したい方は、記事末尾のLINEからどうぞ。
おすすめのモデル運用｜Fable 5で設計→Codexで回す
作るときのモデル運用も紹介します。僕はハーネスの設計やリサーチなど重い工程をFable 5＋ultracodeで回し、実装のループはCodexのGPT-5.6（Sol）に切り替えるのが好相性だと感じています。設計は強いモデルで、繰り返しは安いモデルで、という分担です。
この切り替えはCLAUDE.mdに書いておくと自動でタスクを割り振れます。設定の詳しいやり方はこちら：Claude Fable 5の使い方・設定方法｜CLAUDE.mdでモデル自動切替＆トークン節約
-
-
Claude Fable 5の使い方・設定方法｜CLAUDE.mdでモデル自動切替＆トークン節約
続きを見る
もうひとつ、キャラ画像の作り方です。SVGで手描きするより、Codex内のGPT Image 2.0で生成した方が品質が高く仕上がります。GPTのサブスクプランに入っていれば、追加のAPI課金なしでキャラクターを量産できるのでおすすめです。Claude CodeとCodexの併用は以下でも解説しています。
参考：Claude Code×Codex実務活用｜APIキー0本で画像生成する使い方
まとめ｜AIオフィスは"認知負荷を下げつつ楽しむ"仕組み
AIバーチャルオフィスは、増えすぎたAIプロジェクトの状態を可視化し、開発そのものを楽しくする仕組みです。スマホ連携まで足せば、外出先から自宅Macを動かす環境も意外と簡単に作れます。
- 複数AIの状態をドット絵オフィスで可視化し、認知負荷を下げられる
- 約10個を同時表示。スマホ連携で外出先から遠隔操作もできた
- Pixel Agentsなどの先行例あり。差がつくのはUX・人間味の作り込み
- 作り方はハーネス→ループで少しずつ。一気に作らせないのがコツ
今後はこのツールをより高品質にプロダクト化してリリース予定です。作ってみたAIオフィスは、XやYouTubeのコメントでぜひ教えてください。より賢いモデルの使い分けが気になる方は、Fable 5の検証記事もあわせてどうぞ：Claude Fable 5徹底検証｜Opus 4.8と段違いのゲーム生成能力
今回の記事が参考になった方は、YouTubeチャンネルの登録もあわせてよろしくお願いします。それではまた次の記事でお会いしましょう。
プロンプト配布中
LINE公式アカウントを友達追加していただければ、本記事やYouTubeで使用した使用したプロンプトを配布いたします。メンバーシップ登録で優先サポートも実施中です。
YouTubeメンバーシップ登録について
より実践的なAI活用法については、メンバーシップ限定コンテンツで深掘りしていますので、興味がある方はぜひご参加ください。
YouTube内で使用したプロンプトやより実践的なAIno活用方法を発信しています！メンバー限定の特典もありますので、以下のリンクから登録お願いましす。
YouTubeメンバーシップ登録について
Game & AI のルーティンラボ。AIと人間の共同制作で生まれたブラウザゲームを、ぜんぶ無料でインストール不要、開いたら即プレイ可能です！
こちらの動画もおすすめ
おすすめAIツール
DomoAI無料体験こちら
10%OFFクーポンコード：7VVTQQZ5
年間プランが最大40％OFF
本ブログ「ルーティンラボ」では、他の記事で様々なAIやI Tに関するツールについて紹介しています。
他にもITスキルを高めてキャリアアップや副業の役立つ情報の発信もしています。ぜひチェックしてみてください。
