Product Development — Case Study / Experience Translation
Web Terminal — 木下スタジオ / 木下貴博（滋賀・琵琶湖）
01 — Problem Discovery
iPhoneだけを持って外出している。MacでClaudeが動いているのに、タスクの進捗が確認できない。ターミナルに追加コマンドを打ちたいが、手元にはiPhoneしかない——この状況が、繰り返し起きていた。
既存の解決策はある。SSHクライアントアプリ、VNC、TeamViewer。しかしどれも「設定の壁」がある。鍵の生成、known_hostsの管理、ファイアウォール設定。ひとつのターミナル操作のために、何十分もの準備が必要だった。
ズレの本質は「摩擦のコスト」だった。ツールへのアクセスコストが、ツールの価値を上回っていた。
— Pain 01
SSHの設定は複雑すぎる。鍵の生成・転送・パーミッション・ポート開放——一度設定しても、環境が変わるたびに再設定が必要になる。
— Pain 02
ターミナルとエディタが分断されている。モバイルでコードを見ながらターミナルを操作する手段がなく、画面を行き来する認知コストが高い。
— Pain 03
プロジェクト切り替えで文脈が消える。複数プロジェクトを並行するとき、ターミナルセッションを切り替えるたびに会話の流れが途切れる。
— Pain 04
タスクリストが見えない。AIが今何をしているか、どこまで進んだかをモバイルから確認する手段がなく、放置か割り込みかの二択しかない。
02 — Persona
Noaは「自分のために作った」プロダクトだ。ペルソナは仮説ではなく、実体験から直接定義された。外出中にiPhoneでClaudeを動かし続けたいという実需があり、それを解決するために設計が始まった。
開発者・デザイナー・スタジオオーナーが外出先でも作業を継続できること。MacとiPhoneの間の物理的な距離を、ソフトウェアで消すこと。これがNoaの設計命題だった。
外出→接続→操作→完了——すべてのステップで「摩擦の除去」が設計の核心にある。
03 — Experience Strategy
NoaのExperience Strategyは4つの軸で設計された——即時性(Immediacy)・視認性(Visibility)・分離性(Isolation)・拡張性(Extensibility)。これは「ターミナル」ではなく「思考の延長線上にある場所」を設計するための言語だ。
— 01
IMMEDIACY
URLとトークンだけで接続できる。鍵の設定も、アプリのインストールも不要。ブラウザのアドレスバーに打つだけで、Macのターミナルが目の前に現れる。
— 02
VISIBILITY
3カラムレイアウトで、ターミナル・エディタ・ファイルツリーを一画面に収める。目線の移動を最小化し、コンテキストスイッチングのコストを下げる。
— 03
ISOLATION
プロジェクトごとに独立したターミナルセッションを持つ。タブを切り替えるだけで、そのプロジェクトの文脈に戻れる。会話の流れが、切れない。
— 04
EXTENSIBILITY
PostToolUseフックでAIタスクリストをリアルタイム同期。モバイルではD-padが出現。機能は「見えない形」で拡張されていく。
— Experience Translation Map
「SSH設定の壁」を「URL一本で接続できる」に翻訳した。摩擦の除去こそが体験設計の核心だ。
04 — Solution Design
Noaの技術スタックはシンプルだ——Node.js + Express + WebSocket + node-pty。サーバーがPTYを生成し、WebSocket越しにブラウザのxterm.jsと接続する。しかし技術的な実装より、体験設計の判断の方が重要だった。
— Token Auth
認証はトークン一つ。URLのパラメーターに含めるだけで、自動ログインできる。iPhoneのSafariでブックマークしておけば、タップ一つでMacのターミナルが開く。摩擦をゼロにした結果、接続行為が意識から消えた。
— 3-Column Layout
ターミナル、Monacoエディタ、ファイルツリーを横並びに配置する。コードを書きながらターミナルを見て、ファイルを選んでエディタに開く——この流れが、画面遷移なしに完結する。認知コストを下げる設計だ。
— Project Sessions
プロジェクトごとに独立したPTYセッションを持つ。タブを切り替えるとターミナルが丸ごと入れ替わり、前の会話はそのまま保持される。BMBoardのセッションに戻れば、そこから続きが始まる。
— ⬡ Task Panel
PostToolUseフックを使い、Claude Codeが更新するタスクリストをNoaの⬡パネルに即座に反映する。Macから離れた状態でも、AIが今何をしているかが分かる。外出中の「放置か割り込みか」問題が解消される。
05 — Results
Noaを使い始めてから、外出中の作業の質が変わった。Macの前に座ることが必須ではなくなり、思考の流れを途切れさせずに作業を継続できるようになった。「道具へのアクセスコスト」が体験を壊していたことが、使って初めて分かった。
3— カラム数
ターミナル・エディタ・ファイルツリーを1画面に。目線の移動が最小化され、思考の流れが保たれる。
0— SSH設定の手間
鍵の生成もポート設定も不要。URLとトークンだけで接続できる。摩擦をゼロにした。
OSS— 公開形式
同じ課題を持つ開発者が、すぐに使い始められるようにOSSで公開。npxコマンド一発で起動できる。
— Studio Note
Noaは、木下スタジオが自分自身の課題から生まれたプロダクトです。「外出先でClaudeを動かし続けたい」という実需が出発点でした。
SSHより簡単に、でもSSHと同じことができる——その体験の翻訳がNoaです。OSSとして公開することで、同じ課題を持つ開発者の手に届くことを願っています。