# 図解ツール わからない言葉やしくみを AI に伝えるだけで、初めて聞く人にもわかるように噛み砕いた図解ページを自動で作ってくれるツールです。 検索してもよくわからなかったことが「なるほど」に変わります。 - **前提知識がなくても読める** — 専門用語は出てきた場所で必ずわかりやすく解説されます - **いきなり難しくならない** — まず全体像を見せてから、細かい話に入ります - **文字の壁にならない** — カード・ステップ図・比較表など、目で見てわかる構成です - **毎回きれいな図解ができる** — テンプレートと模範回答をもとに、安定した品質で生成されます - **スマホでも見やすい** — 画面サイズに合わせてレイアウトが自動で調整されます ## まず見てみる `output/sample/` フォルダにお手本の図解が 3 つ入っています。 どれかひとつをブラウザ（Chrome、Safari など）にドラッグ＆ドロップして開いてみてください。 完成品のイメージがわかります。 - **Gitの仕組み** — 開発の土台になるバージョン管理ツール - **LLM（大規模言語モデル）の仕組み** — AI 時代の中核技術 - **Cursorの仕組み** — まさにこの図解ツールを動かしているエディタ 気に入ったら、次のステップで自分だけの図解を作ってみましょう。 ## 使い方 3 ステップで図解が完成します。 ``` ① このフォルダを Cursor で開く ↓ ② チャット欄で「○○を図解して」と依頼 ↓ ③ ブラウザで確認（自動で開きます） ``` ### ステップ 1: このフォルダを Cursor で開く Cursor のメニューから「File → Open Folder」を選び、この「図解ツール」フォルダを開きます。 コードを書いたり、ファイルを編集したりする必要はありません。 フォルダを開くだけで準備完了です。 ### ステップ 2: チャット欄で図解を依頼する Cursor のチャット欄に、知りたいことを書いて送信します。 ``` APIについて図解して ``` これだけで OK です。AI が内容を読み取り、図解を自動で作ってくれます。 ### ステップ 3: 図解を確認する AI が図解を作り、`output/` フォルダに保存します。 完成すると自動でブラウザが開きます。 作った図解は上書きされず、`output/` フォルダにどんどん溜まっていきます。 ## 使い方の例 こんなときに使えます。 - **「API とは何か、図解して」** レストランの注文に例えて説明してくれるので、仕組みが腹落ちします - **「Git の rebase と merge の違いを図解して」** Before / After の比較図で、2 つの違いが一目でわかるようになります - **「クラウドとは何か、図解して」** 専門用語をひとつずつ噛み砕きながら、全体像が頭に入ります - **「HTML と CSS の関係を図解して」** 役割の違いと連携の仕組みが、具体例つきで理解できます 技術用語に限らず、どんなテーマでも図解にできます。 特に指定しなくても、初めて聞く人にわかるレベルで説明してくれます。 ## 図解を共有するには ### PDF で共有する（おすすめ・準備不要） 図解ページの下部にある「PDF でダウンロード」ボタンを押すと、印刷画面が開きます。 保存先を「PDF」にすれば、そのままファイルとして保存できます。 保存した PDF は、メール・Slack・LINE などで誰にでも送れます。 相手は特別なアプリもアカウントも不要で、すぐに読めます。 ### URL で共有する（上級者向け） URL を発行して他の人にも共有したい場合は、以下の 2 つが必要です。 - **Node.js** — パソコン上でプログラムを動かすための土台 - **Surge** — URL を発行してくれる無料の公開サービス どちらも、AI がチャット上でインストールと登録の手順を案内してくれます。 ``` 手元で見るだけ → 準備不要 output/ 内の HTML をブラウザで開くだけ URL で共有する → Node.js + Surge が必要 初回だけセットアップが必要（AI が案内します） ``` 公開した URL は `deploy-history.log` に自動で記録されます。 過去の URL を忘れた場合は、AIチャット欄で「公開した URL を教えて」と聞いてください。 ### 共有するときの注意 発行された URL は **Google などの検索結果には表示されません**。 検索しても見つからないので、知らない人の目に偶然触れることはありません。 ただし、**URL を知っている人は誰でもページを見ることができます**。 これは Google ドライブや Notion の「リンクを知っている人に共有」と同じ仕組みです。 ``` 検索エンジン → 見つからない ✅ URL を知らない人 → 見られない ✅ URL を知っている人 → 見られる ⚠️ ``` そのため、以下の点に気をつけてください。 - **社外秘や個人情報など、絶対に外に出てはいけない情報は図解の内容に含めない** - URL の共有先は、見せたい相手だけに限定する（SNS の公開投稿に貼らない、など） 社内の情報をどこまで図解に含めてよいかは、お勤め先のルールに従ってください。 迷ったときは、上長やチームに確認するのが確実です。 ### 初めて URL を発行するとき AI がチャット上で順番に案内してくれます。画面の指示に従うだけで完了します。 1. **Node.js のインストール** AI が「インストールしてよいですか？」と確認してから進めます。 Mac でも Windows でも対応しています。 2. **Surge の登録** 初回だけメールアドレスとパスワードの入力が必要です。 こちらも AI がその場で手順を教えてくれます。 Node.js は世界中の開発現場で使われている安全な道具です。 AI-Driven School 運営が動作確認済みですので、安心してください。 ## フォルダの中身 ``` 図解ツール/ ├── .claude/skills/creating-visual-explainers/ ← AI への指示書（通常は非表示） ├── README.md ← この説明書 └── output/ ← 図解の保存先 ├── sample/ ← お手本の図解（3つ） │ ├── cursor.html │ ├── git.html │ └── llm.html └── ○○.html ← 自分で作った図解（どんどん増える） ``` 「.claude」で始まるフォルダは通常は非表示です。表示されなくても問題ありません。 あなたが触る必要があるファイルはありません。 AI がすべて自動で処理します。 | ファイル / フォルダ | 説明 | 触る必要 | |---|---|---| | `output/` | 図解の保存先。`sample/` にお手本、自分で作った図解は直下に保存される | 見るだけ | | `output/sample/` | お手本の図解3つ（Git・LLM・Cursor） | 見るだけ | | `README.md` | この説明書 | 読むだけ | | `.claude/skills/` | AI への指示書とテンプレート。AI が自動で読み込みます（通常は非表示） | なし | ## Git で管理する場合 このフォルダを Git で管理する場合、`output/` 内の図解 HTML は `.gitignore` に追加することをおすすめします。 図解は手元で読むためのもので、リポジトリに含める必要はありません。 同梱の `.gitignore` で、自分が作成した図解と `deploy-history.log` はあらかじめ除外されています。 ## 困ったとき ### 「base.html が見つかりません」と言われた 「図解ツール」フォルダそのものを Cursor で開いているか確認してください。 フォルダの中の個別ファイルではなく、フォルダごと開く必要があります。 ### 図解がうまく生成されない チャット欄に「エラーが出ました」と伝えてください。 AI が原因を調べて、対処法を案内してくれます。 ### Node.js のインストールでつまずいた チャット欄で「Node.js のインストールがうまくいきません」と伝えてください。 Mac / Windows それぞれに合わせた手順を案内してくれます。 解決しない場合は、Cursor を一度終了してから開き直すと直ることがあります。 ### その他のトラブル 何が起きても、まずはチャット欄で AI に状況を伝えてください。 AI がエラーの内容を読み取り、次にやるべきことを教えてくれます。 ## 利用量の目安 > 以下は 2026 年 3 月時点の Cursor 料金をもとにした参考値です。 > 料金体系は変わることがあるため、最新の情報は [Cursor の料金ページ](https://cursor.com/pricing) で確認してください。 Cursor の Teams プラン（$40/ユーザー/月）には、月 **$20 ぶんの AI 利用枠** が含まれています。 Claude Sonnet 4.6 で図解を作った場合、1 回あたりの消費は図解のボリュームによって変わります。 ``` 1 回あたりのコスト目安（Sonnet 4.6 の場合） 小さめの図解（用語の簡潔な解説） → 約 $0.18（約 27 円） 標準的な図解（仕組みを丁寧に説明） → 約 $0.25（約 38 円） 大きめの図解（全体像を網羅的に） → 約 $0.35（約 53 円） ``` $20 の利用枠で作れる図解の数は、ボリュームにもよりますがおおむね以下の通りです。 ``` 図解だけに使った場合 → 約 60〜110 回 半分を他の作業に使った場合 → 約 30〜55 回 ``` 図解以外の作業（コードの質問、ファイル編集など）にも同じ利用枠を使います。 1 日 1〜2 回のペースなら、月の利用枠に十分収まります。 利用枠を超えた場合は、同じ料金で自動的に追加課金されます（チーム管理者が上限を設定可能）。 --- Mac / Windows どちらでも使えます。AI-Driven School 運営が動作確認済みです。