AIで英語記事の「読めるけど分からない」を解決！図解で理解を深める新習慣
前回の記事では、英語YouTubeを見るハードルを下げる方法を書きました。
ChatGPT Voiceを使って、英語の動画を日本語で追いやすくする方法です。
ただ、そこで少し思ったことがあります。
英語の情報を「見られる」「読める」ようになっても、それだけで理解が深まるとは限らないんですよね。
その場では分かった気がしても、あとから説明しようとすると、
「結局、どういう仕組みだったっけ？」
となることがあります。
そこで今回は、英語の公式AI記事を題材にして、AIに自然言語で頼みながら、図解の下書きを作る流れを試してみました。
目的は、きれいな資料を作ることではありません。
自分があとで思い出せるように、内容を整理することです。
1️⃣ 読めることと、理解できることは少し違う
AIの情報を追っていると、公式ブログや公式発表が英語で出てくることがあります。
翻訳を使えば、内容を読むこと自体はできます。
でも、読めることと、理解できることは少し違います。
特にAIの公式情報は、
新機能の説明
技術的な仕組み
安全性の話
規制や透明性の話
まだ分かっていないこと
が混ざっていることがあります。
文章だけで追うと、頭の中でつながりにくいです。
そこで今回は、読んで終わりにせず、AIに手伝ってもらいながら図解にしてみることにしました。
2️⃣ 今回使った題材
今回使ったのは、Anthropicの公式記事です。
参考にした記事はこちらです。
Claudeの「テキスト透かし」について説明している記事です。
ざっくり言うと、Claudeが作った文章に、人間には見えない特徴を持たせて、あとからClaudeが関わった可能性を確認できるようにする、という内容でした。
ただし、この記事でClaudeの透かしを詳しく解説したいわけではありません。
今回の主役は、
「少し難しい公式情報を、AIに頼みながらどう図解するか」
です。
⚠️ 注意 ⚠️
正確な情報は、必ず公式記事で確認してください。
3️⃣ まずAIに要点整理を頼む
最初から「図解して」と頼むと、少し雑な図になりやすいです。
なので、まずは内容を短く整理してもらいました。
使ったプロンプトは、こんな感じです。
以下の公式情報を、note記事を書くための下調べとして整理してください。
目的は、内容をそのまま転載することではなく、自分の理解を深めることです。
やってほしいこと：
1. 何についての情報かを3行で説明
2. 重要なポイントを5つに整理
3. 読者に関係ありそうな点を3つに整理
4. 専門用語をやさしい言葉に言い換える
5. 図解にすると分かりやすそうな部分を提案
注意：
- 原文の長い引用はしない
- 自分の言葉で要約する
- 事実と解釈を分ける
- 分からないところは分からないと書くこの段階で分かったのは、Claudeのテキスト透かしは、文章の中に隠し文字を入れる仕組みではないということです。
AIが次の言葉を選ぶときに、一定のパターンが残るようにする。
でも、読者が見ても普通の文章に見える。
あとから鍵を持つ側が見ると、Claudeが関わった可能性を調べられる。
そんな仕組みとして理解しました。
4️⃣ Mermaidで流れを図にする
次に、流れがある部分をMermaidにしてみました。
Mermaidは、テキストで書いたコードからフローチャートを作れる方法です。
ここでの目的は、Mermaidをそのままnoteに貼ることではありません。
まずは、記事の内容を
「どの順番で説明すると分かりやすいか」
「どこで分岐するのか」
という形で整理することです。
つまり、完成画像というより、図解の設計図を作るイメージです。
AIに頼むときは、こんなプロンプトを使いました。
以下の内容を、Mermaidのフローチャートにしてください。
目的：
note記事で「流れ」を説明するための図にしたいです。
条件：
- ステップは5〜7個に絞る
- 1つの箱の文字は短くする
- 専門用語はできるだけ避ける
- 分岐がある場合だけ判断ノードを使う
- Mermaidコードのあとに、図の読み方を3行で説明するMermaidでは、流れをこのようなコードで整理できます。
これはnoteにそのまま貼る完成画像ではなく、フローチャートの設計図のようなものです。
flowchart TD
A[Claudeが文章を作る] --> B[次の言葉の候補が複数出る]
B --> C{自然に選べる候補がある？}
C -->|ある| D[秘密の鍵と前の言葉を使って選ぶ]
C -->|ほぼ1つだけ| E[透かしを入れる余地が少ない]
D --> F[見た目は普通の文章になる]
F --> G[後からパターンを検査できる]Mermaidの良いところは、構造をテキストで管理できることです。
箱の文言を変えたいときも、コードを書き換えれば直せます。
ただ、noteにMermaidコードをそのまま貼っても、図として表示されるわけではありません。
そのため、noteに載せるには画像化が必要です。
今回は、Mermaidで流れを整理したあと、別の方法で見た目を整えました。
たとえば、MermaidをレンダリングしてPNGにする方法もあります。
ただ、Mermaidそのものの見た目は少しシンプルです。
noteに貼る画像として雰囲気まで整えたい場合は、同じ流れをもとにGPT Image 2.0で作り直す方法も使えそうでした。
なので、ここで載せているMermaidは「完成画像」ではなく、
図にする流れを決めるための下書き
として見てもらうのが近いです。
必要なら、このMermaidコードを対応ツールで表示して、PNG画像として書き出します。
5️⃣ GPT Image 2.0で見た目を整える
次に試したのが、GPT Image 2.0です。
OpenAIのChatGPT内の表記ではChatGPT Images 2.0と呼ばれていますが、この記事では分かりやすくGPT Image 2.0と書きます。
これは思ったより使えそうでした。
特に、noteに貼る画像としては、Mermaidよりも見た目が整いやすいです。
今回のように、
タイトル
いくつかの箱
矢印
見やすい色づかい
余白多め
という図なら、かなり雰囲気よく作れました。
ただし、注意点もあります。
文字の崩れや誤字が出る可能性はあります。
ただ、以前より画像編集の精度はかなり上がっているように感じました。
画像を指定して、
「この文字だけ読みやすくして」
「ここの表記だけ直して」
「レイアウトは変えずに、文字だけ修正して」
のように頼めるなら、生成後の修正もかなり現実的だと思います。
なので、GPT Image 2.0を使うときは、
最初の生成で完璧を狙うというより、
短い文言で作る → 目視確認する → 気になる部分だけ編集する
という流れが良さそうです。
今回の目的は、完成品を見せることではなく、
「手元にある記事を、どうやってサクッと図解に変えるか」
です。
なので、GPT Image 2.0に頼む前に、いきなり画像を作らせるのではなく、先に図に入れる情報を絞った方がよさそうでした。
たとえば、こんな順番です。
[1] 記事を要約する
[2] 図にする切り口を選ぶ
[3] 図に入れる文言を短くする
[4] 見やすさのルールを指定する
[5] GPT Image 2.0で画像化する
今回の記事で使うなら、題材に合わせて「Claudeのテキスト透かしの流れ」を図解する方が自然です。
色は主役ではなく、図を読みやすくするための最低限の指定にします。
プロンプトはこんな感じです。
以下の内容をもとに、noteに貼れるシンプルな図解画像を作ってください。
目的：
Claudeのテキスト透かしの仕組みを、専門的になりすぎず、流れとして理解できる図にすること。
公式記事の内容をそのまま再現するのではなく、自分の理解メモとして整理すること。
図解の種類：
縦型のワークフロー図。
タイトル：
Claudeのテキスト透かしの流れ
図に入れる流れ：
1. Claudeが文章を作る
入力内容をもとに言葉を選ぶ
2. 次の言葉の候補が出る
自然な候補が複数ある場合がある
3. 選べる候補がある？
選択の余地があるかを考える
ある：
秘密の鍵と前の言葉を使って選ぶ
ほぼ1つだけ：
透かしを入れる余地が少ない
4. 見た目は普通の文章になる
読者には透かしの有無は分からない
5. 後からパターンを検査できる
Claudeが関わった可能性を見る
デザイン条件：
- 日本語のみ
- 文字量は少なめ
- 1つの箱に長文を入れない
- 文字色は黒に近いグレー #333333 で統一
- 枠線と矢印は落ち着いた緑 #2f6f4e で統一
- ブロック背景は淡いグリーン #f2f7ef で統一
- 背景は白〜淡いクリーム色 #fffdf5
- 意味のない色分けはしない
- 分岐先の箱も同じ色味に揃える
- 余白を広めに取る
- note記事に貼れる、落ち着いた雰囲気
- 手描き風にしすぎず、読みやすさを優先
レイアウト：
- 上から下に読む流れにする
- 3番だけ判断ノードにする
- 右側に「ある」「ほぼ1つだけ」の分岐を置く
- 全体の余白を広めにする
禁止：
- ブロックごとに別々の色を使わない
- 文字色をバラバラにしない
- 装飾やアイコンを増やしすぎない
- 公式記事のスクリーンショット風にしない
- 英語を入れない
- 暗い背景にしない手元の記事を使うときは、本文を全部そのまま渡すより、先にAIにこう頼む方が安全そうです。
この記事を図解にする前提で整理してください。
やってほしいこと：
1. 図解に向いている部分を3つ提案
2. それぞれ、ワークフロー図・比較図・概念図のどれが向いているか判断
3. 図に入れる短い文言を作る
4. 元記事の文章をそのまま使っていないか確認
5. 文字量が多すぎる部分を削るここまで整理してから画像化すると、いきなり「いい感じに図解して」と頼むより、手戻りが少なそうです。
6️⃣ 手元の記事を図解するときに気をつけたいこと
今回の検証は、まだ1つの記事を題材にした範囲です。
なので、すべての記事で同じようにうまくいくとは言い切れません。
ただ、今回試した範囲では、いくつか注意した方がよさそうな点がありました。
[1] 元記事をそのまま図にしない
図解は、元記事のコピーではなく、自分の理解を整理するためのものです。
文章を長く引用したり、スクリーンショットのように再現したりするのは避けた方がよさそうです。
[2] 図にする目的を先に決める
同じ記事でも、
流れを見せたい
比較したい
仕組みをざっくり見せたい
注意点をまとめたい
で、向いている図が変わります。
先に「何を分かりやすくしたいのか」を決めると、図が作りやすくなりました。
[3] 文字量を減らす
図解に入れる文字が多いほど、読みづらくなります。
GPT Image 2.0を使う場合は、特に文字量を少なくした方が安定しやすいです。
[4] 色を増やしすぎない
なんとなく色を増やすと、逆に分かりづらくなりました。
色を変えるなら、
注意点
分岐
カテゴリ違い
のように、意味がある場合だけでよさそうです。
[5] 最後に必ず目視確認する
GPT Image 2.0はかなり使えそうですが、文字崩れや誤字の確認は必要です。
特に、固有名詞、数字、専門用語が入る場合は、元記事と見比べた方が安心です。
補足：GPT Image 2.0はコメントで部分修正できる
補足ですが、GPT Image 2.0で作った画像は、コメントを使って部分修正できます。
意外とこの方法を知らない人も多い気がします。
私も少し前まで知りませんでした。
たまたまXで見かけて試してみたところ、かなり便利でした。
図解を作っていると、
「ほぼ良いけど、ここだけ直したい」
「文字は合っているけど、少し見た目を整えたい」
「全部作り直すほどではない」
ということがあります。
そういうときに、画像全体を作り直すのではなく、修正したい場所にコメントを付けて依頼できます。
今回試した流れは、こんな感じです。
まず、修正したい画像を開き、「コメント」を選択します。
次に、修正したい場所をクリックします。今回は、右下の「補足」ボックス内にある横線を消したかったので、その部分を選びました。
修正内容をコメントとして入力し、チェックマークを押して確定します。
複数箇所を直したい場合は、同じようにコメントを追加できます。
今回は「補足」ボックス内の横線を削除するように指定しました。
最後に送信すると、コメント内容をもとに再生成が始まります。
実際に試したところ、指定した箇所だけかなり精度よく修正できました。
この機能を知っていると、GPT Image 2.0の使いやすさがかなり変わります。
最初から完璧な図を一発で作ろうとしなくても、
短い文言で作る
目視で確認する
気になる部分をコメントで直す
という流れで進められます。
今回の記事の主題は、英語の公式情報を図解して理解を深めることです。
ただ、図解をサクッと作るうえで、この修正方法はかなり役立つと感じました。
このあたりは、まだ検証を増やしたい部分です。
ただ、「手元の記事をざっくり図解にして理解を深める」という用途なら、十分試す価値があると感じました。
7️⃣ Excalidrawは「あとから直せる」可能性がある
今回、Excalidrawも試しました。
Excalidrawは、手描き風の図を作れるツールです。
最初は、GPT Image 2.0の方が完成品に近いと感じました。
でも、途中で気づいたのは、Excalidrawは「あとから直せる図解」として使えるかもしれない、ということです。
たとえば、
文字色を黒に近いグレーにする
意味のない色分けをやめる
分岐ブロックも同じトーンにする
矢印の色を統一する
という修正を、実際に何度か行いました。
これは、完成画像をもう一度作り直すというより、図形ファイルを少しずつ直していく感覚に近かったです。
この話は少し長くなりそうなので、次の記事で深掘りします。
8️⃣ やってみて分かった使い分け
今回試した中では、こんな整理になりました。
Mermaid
流れや分岐を、テキストで管理したいときに向いています。構造を考える下書きとして使いやすいです。
GPT Image 2.0
noteに貼る画像として、見た目を早く整えたいときに向いています。文字の確認は必要ですが、画像を指定した部分修正もかなり使えそうです。
Excalidraw
あとから図形や文字を動かして直したいときに向いています。ビジネス資料の図解にも使えそうです。
私の中では、今のところこうです。
構造整理ならMermaid。
見た目重視ならGPT Image 2.0。
あとから直したいならExcalidraw。
☘️ まとめ
今回は、英語の公式AI記事を題材にして、AIに自然言語で頼みながら図解の方法を試してみました。
やってみて分かったのは、いきなり完成図を作ろうとしない方が進めやすいということです。
まず要点を整理する。
次に、図にする切り口を選ぶ。
それから、目的に合う方法を選ぶ。
この順番の方が、頭の中も整理されました。
英語の記事や公式発表を読んで、分かったような、分からないような気持ちになったとき。
すぐに本文を書こうとする前に、
「これ、図解するならどこを図にすると分かりやすい？」
とAIに聞いてみる。
それだけでも、理解の深まり方が変わると思いました。
次の記事では、今回気になったExcalidrawについて、もう少し詳しく書いてみます。
Excalidrawは、AIガチャで画像を作るというより、あとから直せる図解ファイルとして使えるのではないか。
そこを試してみます。
参考にした記事はこちらです。
前回の英語YouTubeの記事はこちらです。
