ここは仕組みから学ぶ「詳しい版」です。設定を終わらせたいだけなら 全10ステップの手順書 が近道です。

図解ツールを手に入れる

手順

1. 作業フォルダに移動する

cd ~/dev

2. ツールを手元にコピーする

git clone https://github.com/Icchaso/zukai-tool.git

git clone は、GitHubにあるものを丸ごと手元に複製するコマンドです。5-5でやった git push の逆向きの操作です。 zukai-tool というフォルダができます。

3. そのフォルダを開く

VS Codeのメニューから「ファイル」→「フォルダーを開く」で、zukai-tool を選びます。

ターミナルで進めたい場合は、こちらでも構いません。

cd zukai-tool

4. Claude Codeを起動して話しかける

claude

起動したら、まず挨拶してみてください。

ツールの側から、できることの説明が返ってきます。

初回は、あなたの自己紹介ページを作る流れになっています。 名前・何をしている人か・できること・これまで・連絡先が、まとめて聞かれます。答えられるものだけ答えてください。

6-2でSurgeにログイン済みなら、アカウント登録の案内は飛ばされます。 ツールが npx surge whoami であなたのログイン状態を確認するためです。前のページでやったことが、そのまま効いています。

Node.jsが必要ですが、これも2-6で入れ終わっています。

5. 内容を確認して公開する

公開の前に、この内容で出していいかと、連絡先を載せたままでいいかを聞かれます。 電話番号や住所は載せないことをおすすめします。外したいものは、その場で伝えれば直してくれます。

確認が済むと、そのままSurgeへ公開されます。 最後に https://diagram-〜.surge.sh のURLが表示されます。

6. 2回目からは、何でも図解できます

自己紹介が終われば、あとは作りたいものを伝えるだけです。

• 「インスタントコーヒーの美味しい入れ方を図解して」
• 「この資料を、お客さんに見せる提案用に図解して」（ファイルを渡してもOK）

7. 消したくなったら

公開したURLを取り下げてくれます。

知っておいてほしいこと

⚠️ 図解のURLは推測されにくいランダムな文字列が付き、検索エンジンにも載らない設定になっています。ただし6-2と同じで、URLを知っている人は誰でも見られます。お客さんの情報や、社外に出せない資料は載せないでください。

作った図解は、手元の output フォルダにも残ります。ブラウザで開けばそのまま読めますし、印刷してPDFにもできます。

ツールが更新されたときは、zukai-tool フォルダでこれを実行すると最新になります。

git pull

これで詳しい版は終わりです

Phase 0から歩いてきて、あなたはここまで到達しました。

• ターミナルが開けて、コマンドが打てる
• Claude Codeに自分のルールを覚えさせられる
• 壊しても戻せる状態を作れる
• 作ったものをURLで世界に公開できる
• 話しかけるだけで図解を作って共有できる

ここから先は、同じ流れを自分の題材で回すだけです。応用のページに、次にできることをまとめてあります。

詳しい版はここで完了です。応用の紹介（読むだけ）に進むか、自分の作りたいものに取りかかりましょう。