← ishizakahiroshi.com
設計判断
2026-06-16
会話アプリじゃなくて、ダッシュボードだった。many-ai-cli のスマホを v0.4.0 で作り直す話
スマホ向けの困りごとが 8 件溜まっていた。1 件ずつ直そうとして手が止まり、Claude アプリ風の吹き出し UI で全部吸収できそうだとモックまで作って、最後にもう一度問い直したら「これは会話アプリではなくダッシュボードだった」と分かった。v0.3.2 はそのまま出して、v0.4.0 を別レーンで作り直すと決めるまでの設計判断の記録。
困りごと 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 軸で並べて、わざと選び直した。
スマホでの主用途は何か
- 承認・監視中心(外出先で承認、たまに短い指示)
- 会話中心(腰を据えて対話、Claude アプリ風が妥当)
- 監督中心(複数セッションを横断的に「どれが要対応」と把握)
- 完全ミラー(PC と同じ操作を全部やる)
ゴールは何か
- 外出先承認だけできればよい
- スマホ単独で完結する作業環境
- 閲覧と最小限の操作だけ
UI メタファは何か
- ダッシュボード型(セッションカード一覧+inline 承認)
- Claude アプリ風吹き出し
- 通知センター型
- ターミナル維持(現状)
選び直した結果は「承認・監視中心」「スマホ単独で完結」「ダッシュボード型」だった。Claude アプリ風ではなかった。並べた瞬間に「A 以外を選びたい理由」も湧いてくる、というのが今回いちばん効いた手筋だった。
v0.3.2 と v0.4.0 の違いを 1 画面で並べる
言葉だけだとピンとこないので、現行 v0.3.2 と作り直す v0.4.0 のスマホ画面構造を整理しておく。
v0.3.2 — ターミナルが主役
- PC 版を素直に縮めた構造。画面の大半はターミナル(PTY 出力の生テキスト)
- 入力欄が下にあって、承認待ちが発生すると入力欄の上にバーが出る
- 他のセッションが承認待ちになっても、ハンバーガーから一覧を開かないと気づけない
- 「いま誰が止まってる?」の答えが、出力の最後の行を目で追う作業になっている
慣れている人には読める。ターミナル中心のスマホ UI にも需要はあるし、急に消すと現に使っている人が困る。v0.3.2 はこの形のまま出す。
v0.4.0 — 起動した瞬間にダッシュボード
- 起動した瞬間にセッション一覧が出る。カードが縦に並んで、それぞれが 1 セッション
- 状態で色分け(承認待ち=赤、実行中=黄、入力待ち=緑)
- 承認待ちカードは画面上部に集約され、カードの中に YES/NO や選択肢のボタンがそのまま入る。タップで完結、ターミナルを開かない
- ターミナル表示は残すが、1 セッションを開いた先のタブに格下げ。デフォルトのタブは「承認」
ホーム画面そのものが「監視盤」になる。Slack でサーバー一覧を眺める感覚に近い、と言うとイメージしやすいかもしれない。重力をダッシュボード側に寄せる、という言い方が一番しっくりくる。
リリースのレーンを 2 本に分ける
そんなわけで、リリースのレーンを 2 本に分けることにした。
- v0.3.2: 現行スマホ UI のまま、近いうちに出す。承認まわりの小さな改善や、Codex の進捗表示の点滅修正など地味なやつを混ぜて
- v0.4.0: スマホをダッシュボード型に作り直す回。承認カードの全文展開・セッション一覧のホーム化・タブ既定値の見直しをまとめて入れる。破壊的に変わるので、バージョンも 0.3.x の延長ではなく 0.4.0 で区切る
決め切れていない部分も残っている。サイドメニューに何を置くか、カードを長押ししたときに何を出すか、承認待ちが 10 件溜まったときに上部固定セクションがどこまで伸びるか。このあたりは v0.4.0 の実装に入ってから、もう一度モックを並べて選び直すと思う。
今回の振り返り
- 同じ領域で困りごとが束になっているときは、個別バグではなく方針の問題のサイン。1 件ずつ直すと同じ画面を 8 回作り直す
- 「人気サービスの UI を真似る」は、自分のツールの本質に合っていれば強力だが、合っていなければ毒。Claude アプリ風はそれ自体は綺麗で、モックを作っているときは正解に見えてしまった
- 設計判断は、選択肢を箇条書きで強引に並べたほうが正直になれる。頭の中で「A がよさそう」と思っているときに、わざと B・C・D も並べる
- モックまで作って捨てる決断を 1 日でできたのは、今回の小さな成果だった。捨てるのに時間をかけない、を習慣にしていきたい