もうコードは書かない。だったら、開発画面も作り直そう。
── 優秀なAIたちと、いちばん手のかかる僕のための「AgentDeck」開発記 こんにちは、Kayです。 ここ数ヶ月、AntigravityとClaude Codeを使って、いろいろなものを開発してきました。 仕事で使 …
目次15 items
── 優秀なAIたちと、いちばん手のかかる僕のための「AgentDeck」開発記
こんにちは、Kayです。
ここ数ヶ月、AntigravityとClaude Codeを使って、いろいろなものを開発してきました。
仕事で使う業務システム、ブログまわり、趣味や学習のアプリからゲームまで。極めつけは、毎日使うメールソフトまで自分で作り始めました笑（こちらは後日公開します）。以前なら「こんなのがあったら便利だろうな」で終わっていたものが、今は実際に動くところまで持っていけます。これは何度やっても面白いです。
作りたいものを伝えると、AIがコードを書いてくれる。だったら、こちらを作っている間にあちらも進めてもらえばいい。さらにもうひとつ頼めば、もっと捗るのでは……？
このあたりから、だいたい様子がおかしくなります。
AIは仕事をしている。僕は、そのAIがどこにいるか探している。
こちらのウィンドウでは開発中。あちらでは確認待ち。別のプロジェクトは、いつの間にか僕の返事を待って止まっている。気づけば10個以上のプロジェクトが同時進行です。
便利になったはずなのに、画面の前でやっていることは、ウィンドウの巡回です。警備員かな？
最先端のAIを使い、複数のプロジェクトを同時に進める僕。字面だけなら、なかなか仕事ができそうです。
実際の僕は「あれ、さっきのやつ、どこ行った？」。
AIで開発を始めてから、こんなふうに感じたことはありませんか？
そこで、ふと思いました。
去年、AI駆動開発を始めたときに「もう自分ではコードを書かない」と決めた。それなのに、なぜ僕は今も、コードを書くための画面を中心に仕事をしているんだろう。
僕が見やすくすべきなのは、コードではなくエージェントの状況ではないか。
というわけで、作ってしまいました。非エンジニアの僕が、複数のAIエージェントと開発するためのダッシュボード。名前はAgentDeckです。
先に結論を書いておくと、これが、めちゃくちゃ使いやすいです！！
開発を楽にするために、開発するものをもうひとつ増やす。冷静に考えると怪しい解決策ですが、今回はちゃんと効果がありました。ここは強く言っておきたい。
AgentDeckのMac画面。上にプロジェクト、右にエージェント。把握したいものを、ひと目で見渡せる場所に集めました。
優秀なAIを揃えた結果、僕のポンコツ具合が可視化された#
これまでは、AntigravityにClaude Codeを入れて開発していました。
ひとつのプロジェクト、ひとつの会話なら、それで十分です。指示を出して、返事を読んで、動かして確かめる。気になるところがあれば、また伝える。
ところが、複数のプロジェクトを並行して動かし、ひとつのプロジェクトでも複数のエージェントを使うようになると、こちらが覚えておくことが一気に増えます。
誰に何を頼んだか。どこまで進んだか。今、僕の返事が必要なのは誰か。
あるウィンドウでは、Claudeが許可を待っている。僕は別の作業に集中していて、気づくのは30分後。しかもその間、「まだ終わらないのかな」とAIを待っているつもりでいる。
……止めていたのは、お前だ。
AIに感情があったら、そろそろ僕の評価面談が始まっていたと思います。
極めつけは、別のプロジェクトのエージェントに指示を送ってしまったことです。
似た画面がいくつも開いていると、人間はちゃんと間違えます。僕も、ちゃんと間違えました。
AIの理解力を心配している場合ではありません。まず発注先が合っていない。
AIを増やせば、その分だけ開発が進む。そう思いがちですが、人間が把握できる範囲を超えると、今度はこちらが進行を止めてしまいます。
コードを書く手は増やせても、僕の目と頭はひとつ分しかありません。
増員すべきはAIだと思っていたのに、先に立て直すべきは僕の段取りでした。なんとも夢のない結論です。
「もうコードは書かない」と決めた人間が、コードの前に陣取る矛盾#
自分ではコードを書かないと決めたからといって、開発で何も考えなくなったわけではありません。
何を作るか。どう動いてほしいか。この画面は使いやすいか。出来上がったものは、頼んだとおりになっているか。
決めたり確かめたりすることは、いくらでもあります。
「ここ、もうちょっと見やすくならない？」「使ってみたけど、なんか違う」
コードは書かないのに、注文は多い。開発担当からすると面倒な相手だと思います。担当がAIでよかった。
むしろ、AIが形にするのが速くなった分、こちらも次々に判断しなければなりません。そのたびに会話の場所を探したり、前に頼んだ内容を思い出したりする時間が、どうにももったいない。
僕に必要なのは、今動いている仕事を見渡して、必要な相手にすぐ話しかけられる画面でした。
だからAgentDeckでは、コードや設計メモを表示する場所を閲覧専用にしています。読みたいときには読める。変えたいところがあれば、エージェントに伝える。
この割り切りは、かなり気に入っています。自分では触らないと宣言した以上、そこだけ妙に潔い。
最先端のAI開発、出発点はエクセルの落書き#
最初はClaudeに、もっと使いやすいやり方がないか相談しました。
いくつか方法を教えてもらいましたが、欲しい感じとは少し違う。それならと、エクセルを開いて、欲しい画面を描いてみました。
上にはプロジェクトを並べる。返事を待っているものには赤い印を付ける。
プロジェクトを選ぶと、下にその作業場が出る。左にファイルの一覧、真ん中にコードやメモを見る場所、右にエージェントとの会話を並べる。
頭の中にあったのは、それくらいです。
最初に描いた画面のイメージ。エクセルは表計算もできますが、こういうときの方眼紙としても優秀です。
立派な仕様書でも、専門のデザインツールで作った画面でもありません。エクセルに枠を置いて、ここにはこれ、と書いただけです。
AIだ、マルチエージェントだと言っている人間が、最後に頼るのはエクセルの方眼紙。未来に来たつもりが、足元だけ妙に馴染み深い。
それを見せて相談したところ、作れるという話になりました。
条件として伝えたのは3つです。
- いつものClaudeのサブスクリプションで動かすこと
- 別途APIキーを使う形にはしないこと
- 自分ではコードを書かないこと
欲しいものはある。条件もある。実装はよろしく。
我ながら、発注者としての態度だけは一人前です。
そこからやり取りを重ねるうちに、落書きの間取りが、Macアプリとして動き始めました。
「こんな画面があったらいいな」が、自分のパソコンで実際に使えるようになる。AIでいろいろ作っていても、この瞬間はやはり楽しいです。
しかも今回は、その後の開発を毎日楽にしてくれる道具です。自分の仕事場を、自分好みに改装しているような感覚でした。
作れば作るほど、その後の開発が楽になる。だったら、これは寄り道ではなく先行投資。先行投資なら、もう少し凝っても問題ないはず……。
こういうときに自分を納得させる能力だけは、AIの助けを借りなくても十分にあります。
……で、本当に便利なの？ これが、めちゃくちゃ便利でした#
AgentDeckの中で動いているのは、いつものClaude Codeです。AIそのものを作り直したわけではなく、Claude Codeとやり取りするための画面を、自分向けに作りました。
それだけで、使い心地が別物になりました。
ここまで散々ふざけてきましたが、この章は真面目に伝えたい。見た目が自分好みになった満足感だけでなく、毎日の操作が本当に楽になっています。
返事が必要な場所が、向こうから目に入る#
上段にはプロジェクトのカードが並びます。作業の進み具合やGitの状態（ブランチ、未コミットの数、今日のコミット数など）に加えて、返事待ちがあると赤く光るようにしました。
以前は、ウィンドウを順番に開いて、止まっていないか確かめていました。今は、赤いところを開けばいい。それだけです。
説明すると地味です。でも、1日に何十回も繰り返す操作なので、実際に使うとめちゃくちゃ効きます。
「どこかで誰かが待っているかも」と気にして巡回する必要がなくなり、今開いている作業に集中できるようになりました。
Macの通知やDockのバッジでも知らせてくれるので、別のアプリで作業している間も見落としません。
番号だけだったエージェントに、担当が見える#
ひとつのプロジェクトで、複数のエージェントとの会話を横に並べられます。
ただ、並べただけでは足りません。「Agent 1」「Agent 2」「Agent 3」と書いてあっても、しばらくすると誰に何を頼んだか分からなくなるからです。
自分で仕事を振っておいて、担当者を忘れる。上司にしたくないタイプですね。僕です。
そこで、会話の内容に応じたタイトルを、それぞれの欄に表示するようにしました。「デザイン担当」「記事テンプレ」といった具合です。
これが、思った以上に効きました。
番号から記憶をたどる必要がなくなり、見出しを見て「この作業の続きだ」と選べる。別のプロジェクトから戻ってきたときも、話の続きをすぐ始められます。
小さな見出しひとつですが、頭の中で管理していたことを、画面が肩代わりしてくれるようになりました。
AIの記憶力をどうするか考える前に、まず自分の記憶力を補う。順番として、こちらが先だったようです。
読んで、判断して、その場で返せる#
会話は文章として読みやすく整形し、操作の許可を求められたら、ボタンで答えられるようにしました。
「許可」「今後も許可」「拒否」の3つに加えて、拒否するときは理由や代わりの指示をその場で書き込めます。変更内容も差分で表示されるので、何をしようとしているのかを読んでから返事ができます。
ファイルや設計メモも同じ画面で見られるので、会話の途中で確認したいことがあっても、別の場所へ探しに行く必要がありません。
ひとつひとつは小さなことです。でも、その小さな引っかかりが減ると、開発全体がずいぶん軽く感じます。
使いやすくなった実感の正体は、「次の指示を出すまでの面倒」が減ったことだと思います。
コードは書かない。でも、色とフォントには口を出す#
毎日開く画面なので、見た目も自分好みにしました。
濃紺を基調にしたMidnight、ITIBlue、明るいSandの3つのテーマ。日本語と英数字で書体がばらばらにならないよう、チャットのフォントも揃えています。
ITIBlueとSand。毎日使う道具なので、見やすさと好みには遠慮なく注文を付けました。
こういう部分は、「動けばいい」で済ませようと思えば済ませられます。
ただ、僕の「動けばいい」は、動くまでの期間限定です。動いた瞬間から、色や余白が気になり始める。実に勝手なものです。
でも、自分専用に作っているのですから、遠慮する理由もありません。読みにくければ直す。気になる色は変える。よく使う操作は押しやすいところに置く。
欲しいと思った調整が、そのまま次の改善になる。この近さも、自作ならではの面白さでした。
司令室を作ったら、今度は司令室で事件が起きた#
ここまで読むと、落書きを渡したら全部うまくいったように見えるかもしれません。
実際には、使っては直し、使っては直し、の繰り返しです。
例えば、2つのチャットが同じ内容で動き始め、エージェントが役割を取り違えたことがありました。調べてもらうと、同じ会話を2つのClaudeが同時に動かしていた。
僕の混乱を減らすために作った道具で、今度はAI側が混乱している。
司令室を作れば、指揮系統が整う。そう思っていた時期が僕にもありました。
この問題には、終了時の後始末と、起動時に同じ会話を動かしているプロセスがないか確認する仕組みを入れて対処しました。
また、Claudeが考え中のときにリモート操作の切り替えボタンを押したら、チャットが消えてしまったこともあります。
「切り替えたかったのは操作する場所であって、会話の存在ではない！！」
原因は、動作中のClaudeを途中で止めて開き直していたこと。作業の区切りを待ってから切り替えるように修正しました。
ほかにも、「今後も許可」を押したのに拒否扱いになる。ファイルを隣のエージェントに渡したつもりが、なぜか毎回いちばん左の欄に入る。そんな、使って初めて分かる問題もありました。
後者に至っては、最初のエージェントにだけ仕事が集中する仕組みです。僕の段取りの悪さを、アプリ側で再現する必要はありません。
こういうとき僕がやるのは、起きたことと、どうなってほしいかを伝えることです。
どこを押したら何が起きたか。どの画面で困ったか。スクリーンショットを見せながら説明し、原因を調べてもらい、直ったものをまた使う。
コードを書かなくても、使いにくさは分かります。
そこは僕がいちばん詳しい。毎日その道具を使っている本人ですから。
原因は説明できなくても、どこで困ったかは説明できる。なので、遠慮なく伝えます。注文の多さが、ここではちゃんと役に立ちます。
できることが分かると、こだわりが止まりません#
いつものことですが、「これもできるんだ」と分かった瞬間から、僕のこだわりは止まらなくなります。
最初はウィンドウを整理したかっただけ。でも一度動き出すと、「ここも、もうひと押しできるのでは？」が次々に湧いてきます。
リモートコントロールを、ボタンひとつに#
Claude Codeには /remote-control というコマンドがあります。Macで動いている会話を、スマホのClaudeアプリから続けられる機能です。
ちょっと席を外すときに、これがかなり便利です。ただ、毎回コマンドを打つのは地味に面倒でした。しかも、どの会話でオンにしたかを忘れる。ええ、ここでも僕の記憶力が足を引っ張ります。
そこで、エージェントの欄ごとにボタンを付けて、ワンタッチで切り替えられるようにしました。
そうです。前の章で「考え中に押したらチャットが消えた」事件を起こした、あのボタンです。今はちゃんと、作業の区切りを待ってから切り替わります。
許可ルールを、エージェントごとにプルダウンで#
もうひとつ気に入っているのが、許可のルールをエージェントごとに選べるようにしたことです。
ファイルの編集やコマンドの実行のたびに確認してほしい作業もあれば、ある程度は任せて進めてほしい作業もあります。それを、各欄の下にあるプルダウンで「毎回確認」などから切り替えられるようにしました。
大事なテーマファイルを触るデザイン担当は「毎回確認」でしっかり見張る。調べものの担当には、少し任せる。
人間のチームでも、相手と仕事内容によって任せ方を変えますよね。それを、プルダウンひとつでできるようになりました。
Macで満足するはずが、スマホとiPadにまで広がった#
リモートコントロールをボタン化して、しばらく使っているうちに、ふと思いました。
スマホから続けられるのは、オンにしたひとつの会話だけ。でも僕が外から知りたいのは、「今どのプロジェクトで、誰が返事を待っているか」のほうです。
Claude Code自体はMacで動いているんだから、Macさえ起きていれば、AgentDeckの画面ごとスマホで見られたらもっと便利なのでは……？
人間、便利になると感謝するより先に、次の不便を見つけるものです。少なくとも僕は、そちらのタイプでした。
ダメ元で聞いてみました。
僕：AgentDeckのiPhone／iPad版のUIも作れますか？
Claude：はい、できます。Tailscaleを使いましょう！
キタキタキタ〜！！
普段からNASまわりで使っているTailscaleの名前が出た瞬間、僕のテンションは最高潮です。外に公開せず、自分の端末同士だけを安全につなぐ。まさに、こういうときのための道具です。
というわけで、スマホやiPadからも使えるようにしました。
Claude CodeはMacで動いたまま。スマホやiPadから、その状況を見たり、会話を続けたり、必要な許可を出したりできます。
iPhoneでは全体の状況を確認し、必要なエージェントとの会話へ。小さな画面でも、確認と返事ができるようにしました。
iPhoneでは、「対応待ち」がいちばん上にまとまり、プロジェクトとエージェントの状況を一覧で確認できます。タップすれば、そのまま会話へ。iPadでは画面の広さを活かして、Macに近い配置でファイルと複数の会話を並べられます。
iPadでは、ファイルの確認とエージェントとのやり取りを同じ画面で。Macから離れても、作業の全体像をつかめます。
気に入っているのは、複数の仕事を見渡したうえで、返事が必要な相手にすっと入っていけること。Macの画面をそのまま小さくするより、外でやりたいことにぴったり合っています。
最初はMacのウィンドウを整理したかっただけなのに、気づけばスマホとiPadにも作業場ができていました。
便利にして余裕を作るつもりが、開発に関われる場所を増やしている。方向性が少し怪しい気もしますが、便利なので、今は深く考えないことにします（笑）。
AgentDeckで楽になったこと#
- 返事待ちのエージェントが赤く光り、通知とDockのバッジでも分かるので、ウィンドウの巡回がなくなった
- 会話ごとに内容のタイトルが付き、「誰に何を頼んだか」を覚えておかなくてよくなった
- 許可・拒否・代わりの指示を、差分を見ながらその場で返せるようになった
- ファイルや設計メモを同じ画面で読めるので、確認のために別の場所へ行かなくてよくなった
- iPhoneやiPadからも状況確認と返事ができ、Macの前に縛られなくなった
いちばん改良が必要だったのは、僕の作業環境だった#
今回、AIがコードを書くことには、もうすっかり慣れている自分に気づきました。
そのうえで困っていたのは、複数の仕事をどう見渡すか、どこで自分が判断するか、どうすれば気持ちよく続けられるか、ということでした。
これまでは、開発ツールの画面は、用意されたものに自分が慣れるものだと思っていました。
でも、自分が何をしたいか分かっているなら、そこに合わせて道具を作ることもできる。AgentDeckは、それを実感する体験になりました。
誰にでもこの画面が最適だとは思いません。僕はコードを書かず、複数のエージェントに指示を出し、出来上がったものを確認する。その働き方に合わせて作ったから、これほど使いやすく感じるのだと思います。
AIがどれほど賢くなっても、僕が返事待ちを見落としたり、指示する相手を間違えたりしていたら、そこで止まってしまう。
AgentDeckで、その手間や取りこぼしが減りました。今どの仕事を見ればいいのかが分かり、確認して、次を頼める。そうやって開発が進んでいく感覚が、単純に楽しいのです。
大げさな構想から始めたわけではありません。
あのウィンドウはどこへ行った。誰が返事を待っているんだっけ。もう少し見やすくできないのか。
そういう小さな不満を、エクセルの枠に置いてみただけでした。
AIとの開発で同じような「迷子」になっている方は、まず自分が何を見たいのか、紙やエクセルに描いてみるところから始めてみてください。案外、そこが一番の近道かもしれません。
去年、自分ではもうコードを書かないと決めました。
今年は、その自分が使う開発画面まで作ってしまいました。
そして今、開発が楽になったおかげで、また別のものを作りたくなっています。
……おかしい。楽をするために始めたはずなのに、仕事が増えている。
でもまあ、今度はそれを見渡す司令室があります。
あとひとつくらい、いけるでしょう。
たぶん、最初も同じことを言っていた気がします。