図解ツール

わからない言葉やしくみを 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 への指示書（通常は非表示）
├── .cursor/                          ← Cursor の設定ファイル（自動生成）
├── output/                           ← 図解の保存先
│   ├── sample/                       ← お手本の図解（3つ）
│   │   ├── cursor.html
│   │   ├── git.html
│   │   └── llm.html
│   └── ○○.html                      ← 自分で作った図解（どんどん増える）
├── .gitignore                        ← 内部の設定ファイル
├── deploy-history.log                ← 公開履歴の記録
└── README.md                         ← この説明書

「.claude」で始まるフォルダは通常は非表示です。表示されなくても問題ありません。 あなたが触る必要があるファイルはありません。 AI がすべて自動で処理します。

ファイル / フォルダ	説明	触る必要
output/	図解の保存先。sample/ にお手本、自分で作った図解は直下に保存される	見るだけ
output/sample/	お手本の図解3つ（Git・LLM・Cursor）	見るだけ
README.md	この説明書	読むだけ
.claude/skills/	AI への指示書とテンプレート。AI が自動で読み込みます（通常は非表示）	なし
.cursor/	Cursor の設定ファイル。フォルダを開くと自動で作られます	なし
.gitignore	内部の設定ファイル	なし
deploy-history.log	図解を公開したときのURL記録	なし

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 の料金ページ で確認してください。

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 運営が動作確認済みです。