231 lines
10 KiB
Markdown
231 lines
10 KiB
Markdown
# 図解ツール
|
||
|
||
わからない言葉やしくみを AI に伝えるだけで、初めて聞く人にもわかるように噛み砕いた図解ページを自動で作ってくれるツールです。
|
||
|
||
検索してもよくわからなかったことが「なるほど」に変わります。
|
||
|
||
- **前提知識がなくても読める** — 専門用語は出てきた場所で必ずわかりやすく解説されます
|
||
- **いきなり難しくならない** — まず全体像を見せてから、細かい話に入ります
|
||
- **文字の壁にならない** — カード・ステップ図・比較表など、目で見てわかる構成です
|
||
- **毎回きれいな図解ができる** — テンプレートと模範回答をもとに、安定した品質で生成されます
|
||
- **スマホでも見やすい** — 画面サイズに合わせてレイアウトが自動で調整されます
|
||
|
||
## まず見てみる
|
||
|
||
`output/index.html` が図解ライブラリ（一覧ページ）です。
|
||
ブラウザ（Chrome、Safari など）にドラッグ＆ドロップして開いてみてください。
|
||
サンプルの図解が 3 つ入っているので、完成品のイメージがわかります。
|
||
|
||
- **Gitの仕組み** — 開発の土台になるバージョン管理ツール
|
||
- **LLM（大規模言語モデル）の仕組み** — AI 時代の中核技術
|
||
- **Cursorの仕組み** — まさにこの図解ツールを動かしているエディタ
|
||
|
||
気に入ったら、次のステップで自分だけの図解を作ってみましょう。
|
||
|
||
## 使い方
|
||
|
||
3 ステップで図解が完成します。
|
||
|
||
```
|
||
① このフォルダを Cursor で開く
|
||
↓
|
||
② チャット欄で「○○を図解して」と依頼
|
||
↓
|
||
③ ブラウザで確認（自動で開きます）
|
||
```
|
||
|
||
### ステップ 1: このフォルダを Cursor で開く
|
||
|
||
Cursor のメニューから「File → Open Folder」を選び、この「図解ツール」フォルダを開きます。
|
||
|
||
コードを書いたり、ファイルを編集したりする必要はありません。
|
||
フォルダを開くだけで準備完了です。
|
||
|
||
### ステップ 2: チャット欄で図解を依頼する
|
||
|
||
Cursor のチャット欄に、知りたいことを書いて送信します。
|
||
|
||
```
|
||
APIについて図解して
|
||
```
|
||
|
||
これだけで OK です。AI が内容を読み取り、図解を自動で作ってくれます。
|
||
|
||
### ステップ 3: 図解を確認する
|
||
|
||
AI が図解を作り、`output/` フォルダに保存します。
|
||
完成すると自動でブラウザが開きます。
|
||
|
||
作った図解は上書きされず、どんどん溜まっていきます。
|
||
`output/index.html`（図解ライブラリ）を開けば、過去の図解を一覧で確認できます。
|
||
|
||
## 使い方の例
|
||
|
||
こんなときに使えます。
|
||
|
||
- **「API とは何か、図解して」**
|
||
レストランの注文に例えて説明してくれるので、仕組みが腹落ちします
|
||
|
||
- **「Git の rebase と merge の違いを図解して」**
|
||
Before / After の比較図で、2 つの違いが一目でわかるようになります
|
||
|
||
- **「クラウドとは何か、図解して」**
|
||
専門用語をひとつずつ噛み砕きながら、全体像が頭に入ります
|
||
|
||
- **「HTML と CSS の関係を図解して」**
|
||
役割の違いと連携の仕組みが、具体例つきで理解できます
|
||
|
||
技術用語に限らず、どんなテーマでも図解にできます。
|
||
特に指定しなくても、初めて聞く人にわかるレベルで説明してくれます。
|
||
|
||
## 図解を共有するには
|
||
|
||
### PDF で共有する（おすすめ・準備不要）
|
||
|
||
図解ページの下部にある「PDF でダウンロード」ボタンを押すと、印刷画面が開きます。
|
||
保存先を「PDF」にすれば、そのままファイルとして保存できます。
|
||
|
||
保存した PDF は、メール・Slack・LINE などで誰にでも送れます。
|
||
相手は特別なアプリもアカウントも不要で、すぐに読めます。
|
||
|
||
### URL で共有する（上級者向け）
|
||
|
||
URL を発行して他の人にも共有したい場合は、以下の 2 つが必要です。
|
||
|
||
- **Node.js** — パソコン上でプログラムを動かすための土台
|
||
- **Surge** — URL を発行してくれる無料の公開サービス
|
||
|
||
どちらも、AI がチャット上でインストールと登録の手順を案内してくれます。
|
||
|
||
```
|
||
手元で見るだけ → 準備不要
|
||
output/index.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/ ← 図解の保存先
|
||
├── index.html ← 一覧ページ（自動生成）
|
||
└── ○○.html ← 個別の図解（どんどん増える）
|
||
```
|
||
|
||
「.claude」で始まるフォルダは通常は非表示です。表示されなくても問題ありません。
|
||
あなたが触る必要があるファイルはありません。
|
||
AI がすべて自動で処理します。
|
||
|
||
| ファイル / フォルダ | 説明 | 触る必要 |
|
||
|---|---|---|
|
||
| `output/` | 図解ライブラリ。`index.html` で一覧、各図解は個別ファイル | 見るだけ |
|
||
| `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 運営が動作確認済みです。
|