Claude Codeに図を「描かせる」のをやめて「一緒に描く」に変えたら、図解の意味が変わった
AIに図を描いてもらったことがある人なら、たぶん同じ場所で詰まっているはずです。相関図を頼むと、それっぽいものは返ってきます。でも「この箱をもう少し右に」「この矢印だけ引き直したい」となった瞬間、手が止まります。返ってきたのは画像です。一緒にいじれる図ではありません。
私は長いあいだ、これを「AIは図が苦手なのだろう」と受け取っていました。
違いました。苦手なのは出力ではありません。図を「納品物」として一度で受け取ろうとしていた、私の使い方のほうでした。
図を「生成物」から「共有メモ」へ
コードなら簡単です。AIが書いたものを私が書き換え、読ませ、続きを頼めます。往復が成立します。ところが図になると、これが消えます。私がスライドで直した修正は、AIには見えません。次に頼むと、私の手を無視した別の図が返ってきます。かみ合いません。同じ説明を、何度も繰り返すことになります。
問題は画像の質ではありません。図が一方通行なのです。それに尽きます。
AIから人間へ一度渡って、そこで止まる流れ。人間の手が入った図は、もうAIの視界にありません。これでは「一緒に考える」になりようがないのです。
そこで、発想を変えました。
図の価値は、きれいに出力されることにはありません。AIと人間が同じ一枚の上で考え続けられること。そこにあるはずだと考えました。だから、図解の扱いを変えました。最後に仕上げる清書という位置づけをやめて、考えている途中で開く共有メモにします。ゴールを、納品物からインターフェースへ移したわけです。
同じキャンバスを、AIも私も触る
具体的には、一枚のキャンバスを唯一の正とし、そこに複数の入口をつけました。Claude Code(MCP経由)、コマンドライン、そしてブラウザ。すべてが同じ生きたキャンバスに、リアルタイムでつながっています。土台は Excalidraw(MIT)と、それをMCP化した mcp_excalidraw です。
動かすとこうなります。まずClaudeに叩き台を生成させます。私はブラウザでその図を開き、箱をドラッグし、抜けている関係を足し、手描きでコメントを書き込みます。そのあとClaudeに「何を変えたか読み取って」と頼むと、差分を認識して次の提案を返してきます。生成、人間の手直し、読み戻し。この三つが同じ図の上でぐるぐる回ります。
試しに、休日に観たドラマの人物相関図を作ってみました。Claudeが12人の登場人物を並べ、私がGUIで配置を整えます。

次に、自分の運用そのものを描いた図も作りました。1枚のGPUを、複数のローカル生成ツールとGPU貸出サービスが奪い合う様子です。

どちらも、AIだけの図でも私だけの図でもありません。二人で一枚を仕上げました。しかも二枚目のアイコンは、その図が説明しているまさにそのGPUで刷ったものです。図が自分の出自を自分で描いた、と言えなくもありません。
成立させるのに要る三つの条件
この「一緒に描く」を成立させるのに、効いた条件が三つありました。方向性としては、ここが本題です。
一つ、双方向であること。AIもGUIも、同じ一枚を触ります。片方が編集用で片方が閲覧用だと、往復が切れます。単一のキャンバスを正とします。そこに入口を増やすのが要でした。
二つ、人間のGUI編集を一級市民に置くこと。AIが主でGUIがおまけという構えでは、人間の直しが軽く扱われます。だから手元で常駐させ、ブラウザから直接いじれるようにしておきます。所有していれば、人間の一手は消えません。ここが効きます。
三つ、画像も手元で賄うこと。アイコンを外部の生成APIに頼ると、著作権とコストの制約が毎回ついて回ります。今回のアイコンは、図の題材である手元のGPUで刷って、そのまま埋め込みました。制約が外れると、試す回数が変わります。回数が変われば、選べる幅も変わります。
ついでに、現実的な線引きも一つ。他者の作品で相関図を作るとき、俳優の顔写真は使いません。写真の著作権に加えて、肖像やパブリシティ権が乗るからです。白黒にしても回避になりません。代わりに役割アイコンを置けば、誰がどの陣営かは十分に伝わります。権利の問題も起きません。
事実である「役名」と「関係」だけで、図はちゃんと成立します。
エージェントと働くほど、この設計が効く
図を共有メモとして扱えるようになって、変わったのは図そのものではありませんでした。Claude Codeとの距離のほうです。これまで図は、考えがまとまった最後に清書するものでした。いまは、考えている途中で開く場所です。AIが下書きし、私が動かし、AIがまた読みます。そのあいだずっと、同じ一枚が二人の作業記憶として残り続けます。
テキストだけのやり取りだと、AIの理解と私の理解は、少しずつずれても気づきにくいものです。一枚の図に両方の手が入っていれば、ずれはその場で見えます。長く一緒に働くほど、この「同じ面の上で考える」設計は効いてきます。図解を、納品物から共同思考のインターフェースへ移すこと。それはたぶん、AIと働くこれからのやり方の、小さいけれど芯にある部分です。
作り方の具体的な手順は、手を動かす記事として別にまとめました。MCPの登録、キャンバスの常駐、相関図をコードで生成するレシピ、手元で作った画像の埋め込みまで、順を追って書いています。土台のコードは上記のGitHubにあります。まずはご自分の環境で、AIに一枚渡して、一緒に描き直してみてください。
関連書籍 実践Claude Code 毎日 Claude Code を使うエンジニアへ — CLAUDE.md・Plan Mode・チーム展開の実践ガイド 書籍ページを見る → この記事は役に立ちましたか?