← ishizakahiroshi.com
設計判断 2026-06-16

会話アプリじゃなくて、ダッシュボードだった。many-ai-cli のスマホを v0.4.0 で作り直す話

many-ai-cli のスマホ UI 設計判断、吹き出しチャットからダッシュボード型へ作り直す転換点

スマホ向けの困りごとが 8 件溜まっていた。1 件ずつ直そうとして手が止まり、Claude アプリ風の吹き出し UI で全部吸収できそうだとモックまで作って、最後にもう一度問い直したら「これは会話アプリではなくダッシュボードだった」と分かった。v0.3.2 はそのまま出して、v0.4.0 を別レーンで作り直すと決めるまでの設計判断の記録。

note で読む →

困りごと 8 件は、個別バグではなく方針のサインだった

many-ai-cli は、Claude Code・Codex・GitHub Copilot CLI・Cursor Agent CLI といった AI コーディング CLI を並列で走らせたときに、ブラウザの 1 画面で承認待ちを束ねるためのツールとして作っている。直近の v0.3.2 でスマホ対応もかなり盛った。

盛ったあとで、提案メモが 8 件ほど溜まっていた。改行ボタンの位置、ヘッダーの整理、承認カードの見せ方、キーボードに被るチャット入力欄、ターミナル点滅、保留中の気づきにくさ。1 つずつ手当てしようとすると別の議論で止まる、というのを 8 回繰り返している状態だった。

同じ領域で困りごとが束になっているとき、それは個別バグではなく「方針の問題」のサインだった、と振り返って気づいた。1 件ずつ直すと、同じ画面を 8 回作り直すことになる。

Claude アプリ風で全部吸収できそうだった、けれど止まった

8 件を見渡して、いちばん筋がよさそうだったのは「Claude のスマホアプリの UI を完全に踏襲する」案だった。吹き出しチャット UI で、入力欄は最下部に控えめ。承認はチャットの流れに inline で差し込む。スマホ入力欄まわりの 4 件はこれで全部吸収できる。HTML のモックも作って、それなりに見栄えはした。

そこで止まった。many-ai-cli は AI と長話するツールだったか。違う。複数の AI を並列で走らせて「どれが承認待ちで止まっているか」を見張るツールだったはず。

吹き出しは会話アプリの言語だ。LINE、Slack、Claude スマホアプリ、ChatGPT スマホアプリ。腰を据えて 1 対 1 で話す前提の UI。一方、自分がスマホからこのツールを触るときにやりたいのは、承認ボタンを押す、いま何が動いているか眺める、短い指示を 1 行出す、の 3 つしかない。腰を据えて長話したいときは、たいてい PC に戻る。

スマホでの本当の主用途は会話ではなく監視だった。器が違う。

選択肢を箇条書きで強引に並べて、答えを選び直した

頭の中で結論を出すと自分に都合よく曲げてしまうので、選択肢を 3 軸で並べて、わざと選び直した。

スマホでの主用途は何か

ゴールは何か

UI メタファは何か

選び直した結果は「承認・監視中心」「スマホ単独で完結」「ダッシュボード型」だった。Claude アプリ風ではなかった。並べた瞬間に「A 以外を選びたい理由」も湧いてくる、というのが今回いちばん効いた手筋だった。

v0.3.2 と v0.4.0 の違いを 1 画面で並べる

言葉だけだとピンとこないので、現行 v0.3.2 と作り直す v0.4.0 のスマホ画面構造を整理しておく。

v0.3.2 — ターミナルが主役

慣れている人には読める。ターミナル中心のスマホ UI にも需要はあるし、急に消すと現に使っている人が困る。v0.3.2 はこの形のまま出す。

v0.4.0 — 起動した瞬間にダッシュボード

ホーム画面そのものが「監視盤」になる。Slack でサーバー一覧を眺める感覚に近い、と言うとイメージしやすいかもしれない。重力をダッシュボード側に寄せる、という言い方が一番しっくりくる。

リリースのレーンを 2 本に分ける

そんなわけで、リリースのレーンを 2 本に分けることにした。

決め切れていない部分も残っている。サイドメニューに何を置くか、カードを長押ししたときに何を出すか、承認待ちが 10 件溜まったときに上部固定セクションがどこまで伸びるか。このあたりは v0.4.0 の実装に入ってから、もう一度モックを並べて選び直すと思う。

今回の振り返り