For teams building with AI agents
「それ、AIが作ったって聞いたけど、ちゃんと動いてるの?」——チームにそう聞かれる前に、画面を見せればいい。

NOT A MOCKUP
この記事内のスクリーンショットは、実際に動いているアプリをそのまま撮っています。合成も演出もしていません。今なら、導入第一号のチームとして一緒に育てていただけます。
WHY PIXEL ART
知らない技術の説明は聞き流されるけど、机に座っているキャラクターの絵は、誰でも一瞬で意味が分かる。AIに詳しくない人に見せるための、意図的な選択です。
The doubt
「AIって、結局何してるの?」
その一言に、答えられなかった。
AIでの開発が増えるほど、まわりは置いていかれる。進捗も稼働状況も、作った本人の頭の中にしかない。
01 / WHO & WHAT
部署ごとにAI社員が座席に立ち、今の作業内容が吹き出しとネームプレートで表示される。役割分担を、説明せずに見せられる。

02 / STATUS
待機・作業中・集中作業中・確認待ち・完了 — 5つの状態を色分け。止まっているのか、確認待ちなのかが、画面の色だけで判断できる。

03 / GO DEEPER
座席をクリックすると、件数サマリーと最近の動きまで確認できる詳細ページへ。報告の粒度を、見る側が自分で選べる。

04 / IT'S REAL
Claude Codeのセッションフックと直接つながる。エージェントが実際に何かを実行するたびに状態が更新される。デモ用に用意した数字ではない。
curl -X POST https://your-office/api/session \
-H "X-Office-Token: ****" \
-d '{
"sessionId": "sess_8f2a",
"event": "PreToolUse",
"project": "billing-api",
"task": "請求書PDF生成のバグ修正"
}'
How it connects
APIひとつ、またはClaude Codeのフックから、状態と作業内容を送るだけ。
SSEで即座に画面へ反映。座席の位置・色・吹き出しがリアルタイムに動く。
ブラウザで開くだけ。ログインも、AIの知識も、専門用語も要らない。
How to get it
自分の手で動かしてから決めるか、要件を伝えて任せるか。関わり方に合わせて選べる。
01 / TRY IT YOURSELF
依存パッケージゼロ・Node標準のみ。ソース一式をダウンロードして、自分の手元で動かしてみる。導入するかどうかは、動かしてから決めればいい。
※ 決済リンクを準備中です。下の「先に質問する」から連絡いただければ、準備でき次第すぐにご案内します。
02 / BUILT FOR YOUR TEAM
部署構成、キャラクター、連携先システム。要件を聞いたうえで設計・実装し、社内に定着するところまで伴走する。
Get in touch
下記フォームを送信すると、内容を記載したメールが開きます。そのまま送信してください。