Anthropicのチームがよく使う「何でも簡単図解で説明するSkill “ELI5”」をカスタムして、記事を投げると読む図解がそのまま音声つきアニメーション動画になる方法を紹介
こんにちは！テツメモです。
動画の話は、今回で3回目になります。第1回は、買った教材のファイルは書き換えずに、外側から自分の決めごとをかぶせて自分用にする話。第2回は、教材なしでも動く道具をまるごと配る話でした。今回はちょっと別のアプローチです。
前回の記事です ↓
|
きっかけは、Anthropicで働いているThariqさんが書いた1本のポストでした。
a skill people at Anthropic have been using a lot recently: ELI5
@trq212
/eli5 <what you want explained>
"explain like I'm someone who knows nothing about this topic, using a HTML artifact with big pictures and few words"pic.twitter.com/OZqzjAyFdT— Thariq (@trq212) August 21, 2026
書かれていたのは、こういう内容です。
a skill people at Anthropic have been using a lot recently: ELI5
>
/eli5 <what you want explained>
>
"explain like I'm someone who knows nothing about this topic, using a HTML artifact with big pictures and few words"
日本語にすると、こうなります。
Anthropicの人たちが、最近よく使っているSkillがあります。ELI5です。
>
/eli5 と打って、そのうしろに説明してほしいことを書く。
>
「このトピックを何も知らない人に向けて、大きな絵と少ない文字のHTMLで説明して」
ELI5というのは Explain Like I'm 5、つまり「5歳児にも分かるように説明して」の頭文字です。むずかしい話を、大きな絵と少ない文字の1枚のページにしてくれるものだと思ってください。
先に1つだけ。これはAnthropicの公式プラグインではありません。置かれているのはAnthropicが運営している「みんなが持ち寄ったプラグインの置き場」で、Thariqさんご本人も前日に「公式にするかどうかは、まだ検討中」と書いています。社内でよく使われている、というだけの話です。
名前だけは前から見かけていたのですが、ちゃんと使ったのはこのポストを見てからでした。で、さっそく自分の記事を投げてみたんです。たしかに分かりやすい。大きな絵と、少ない文字。ざっくりすぎる大枠をつかむにはこれで十分でした。
試しに、毎日発行しているAIニュースの内容をELI5で図解指示してみます ↓
どうでしょうか？確かに図解でわかりやすいのですが、わかりやすさを通り越してもはやニュースの内容がよくわかりませんよね、、、
で、、、毎回こう打っている自分がいました。
「もう少し詳しく図解して」
技術系の解説ならざっくり大枠は分かるんです。でも、そこから先が知りたくなっちゃう。しかも追加でお願いするたびに、色も余白も文字の大きさも変わります。同じシリーズの資料には、とても見えませんでした。
そこから、自分が読みやすくて、人にシェアしやすくて、ビジネスの資料としても出せる形はどこかなと、けっこう試行錯誤しました。
そして図をいじっている途中で、ふと思ったんです。
「これ、前回紹介したHyperFramesなら、そのまま動かせるんじゃないか？」
ヒントをくれたのはまつにぃさんのポストでした。さきほどのThariqさんのポストを引用して、こう書かれていたんです。
趣味タスクの一個だけどELI5系のmd→音声付き動画作成ができるスクリプトやSkills作ってる。
@yugen_matuni
md書いたらそれだけで動画になるので、Token消費量も極小でぱっと作ってぱっとみれる的な。
Kimi3に作ってもらってる。 https://t.co/nMu2NvocO4
趣味タスクの一個だけどELI5系のmd→音声付き動画作成ができるスクリプトやSkills作ってる。
>
md書いたらそれだけで動画になるので、Token消費量も極小でぱっと作ってぱっとみれる的な。
読んだ瞬間、手が止まりましたね。ELI5で作ったものが、そのまま動画になる。私が前回配った道具も、まさにHTMLから動画を作るものでした。「同じことができるじゃないか」と思ったんです。
で、ELI5のカスタム図解Skillと、それをそのままHyper Framesで動画化するSkillを作り込んだので、今回皆さんにシェアします！
📝Vibe Codingで作った自分のポートフォリオサイトをClaude Codeで”独自ドメイン”設定公開できた。→設定操作はすべてAIにお任せ。
@tetumemo
作業完了後はどんなことを実行したのかを、ELI5のSkillsで簡単図解解説して、Hyper Framesで解説動画にしてみた
この流れ、全部GPT-5.6 Lunaでできるからコスパ最高 https://t.co/4ZOeLptwdZpic.twitter.com/FJatWcVBy8— テツメモ｜AI図解×検証｜Newsletter (@tetumemo) August 25, 2026
📝過去のニュースレターも解説動画に早変わり！
@tetumemo
Anthropicのチームが毎日使っているELI5のSkillsを自分好みにカスタム
↓
SVG図解を丁寧に追加
↓
それをHyper Framesで動かす
↓
音声付きのアニメーション解説動画の完成！
全部無料ツールでできちゃいます♪
投げた記事はリプ欄 ↓ https://t.co/o5NZ1v1KIYpic.twitter.com/xS6zk1AXbN— テツメモ｜AI図解×検証｜Newsletter (@tetumemo) August 25, 2026
ショート動画も作れちゃう ↓
📝Anthropicのチームが毎日使っているELI5のSkillsで、記事を投げるだけで簡単図解する説明用HTMLが完成、これをを起点にそのまま図解が動くアニメーション解説動画をHyper Framesで実現できるのは嬉しい https://t.co/lxClnGDKpN
@tetumemo
この記事で解決したいこと
「AIに図解してもらったけど、なんかあっさりしてるんだよな」
「図はできたのに、動画にするときはまた一から描き直している」
「読み物と動画で、絵がバラバラになってしまう」
私も全部やりました。改善には地味にメッチャ時間がかかりました。とくに3つ目は根が深くて、図を2回描いているという自覚すらないまま、何本も動画を作っていたんです、、、
この記事の後半では、むずかしい話を大きな図に噛み砕くSkillと、その図をそのまま動かして動画にするSkillの2つをお渡しします。読み終わる頃には、「自分の記事も、まず1枚の図解にしてみようかな」という気持ちになっていたら嬉しいです！たぶんこの図解Skillは毎日使えるレベルだと思いますっ！というか私のお気に入り。
💡 この記事で手に入るもの
- Anthropicの中の人が使っているELI5の中身（全文で8行しかありません）と、本家をそのまま試す手順
- むずかしい話を、大きな図と少ない文字の1枚のHTMLに噛み砕くSkill
- その図をそのまま動かして、縦約60秒・横約3分・横約5分の動画にするSkill
- AIにブラウザ操作を任せた作業を、そのまま図解レポートにして学びに変えるやり方
- 同じ図を2回描かなくて済む仕組みと、描き直しが起きたら止まる仕掛けの考え方
- 前回の記事で道具を受け取った方へ、新しい版との置き方（古いほうも残ります）
- この記事の全文データ（AIに読ませて、ご自分の環境の言葉に翻訳してもらうため）
✅️縦約60秒・横約3分・横約5分の動画についてはこんな感じです ↓
🎞 3つの長さと、6色のテーマ
動画のほうは、長さを3つから選べます。ここで大事なのは、長さの違いではなく、読み手の違いで選ぶことです。
モード | 長さ | 画面 | 向いている場面 |
|---|---|---|---|
ショート | 約60秒 | 縦（1080×1920） | SNSでの告知。まだ何の話か知らない人に届ける |
ミドル（既定） | 約2〜3分 | 横（1920×1080） | その分野を知らない人への解説。ふだん使うのは、たいていこれです |
講義 | 約4〜5分 | 横（1920×1080） | 関心のある人が、章ごとに順に学ぶ |
同じ記事から3つとも作れます。私は、記事を出すときにミドルを1本、SNS用にショートを1本、という組み合わせで使うことが多いです。
カラーテーマは6色あります
templates/themes/ の中に6つ入っています。
どんな色かは、同じフォルダの カラバリ見本.png を見てください。色の名前だけで選ぶのは難しいので、画像を見てから決めるのをおすすめします。
テーマ | 雰囲気 |
|---|---|
00 tetumemo | 私が使っている色です。好きに書き換えて構いません |
01 calm（既定） | 白地に落ち着いた紺。無難にまとまります |
02 vivid | 白地に明るい色。ビジネス寄り |
03 forest | 白地に緑。暮らしや健康の話に |
04 plum | 白地に紫。美容や文化の話に |
05 slate | 薄いグレー地に濃い文字。引き締まります |
背景はすべて白から薄いグレーです。以前は黒地のテーマも入れていたのですが、文字が読みにくくなる場面が多かったので外しました。
色を変えたら、次のコマンドで「ちゃんと読めるか」を確かめられます。
🎯 この記事を読んでほしい人
- AIに図解を頼むと毎回見た目が変わるのが、地味に気になっている方
- 👑 動画は作らないけれど、読む図解だけ欲しい方（ここだけで完結します）
- 前回の記事で動画の道具を受け取って、次の版を待っていてくださった方
📝 tetumemoのLP紹介
ニュースレターの記事が130本を超えてきて、「あの記事どこだっけ」と自分でも探すのに苦労するようになったのがきっかけで、過去記事が探しやすい自分のポートフォリオサイトを作りました。
今では課題やテーマから過去記事や配布物を検索できるようになっていて、今回のように動画の話を3回続けたあとで「そういえば図解の話も前に書いたな」と思ったときの道しるべになっています。
📝 オススメの教材を紹介
AIカンパニーを構築する際に、その道のプロを教材を購入してリクルートしてきました。今では顧問として毎日相談しています。
そんな教材ですが、購入前にどんな内容なのか、そして自分でも活用できるのか不安だと思います。その不安を解消するために、私が先に購入して、試して、実際に使ったノウハウを紹介する記事を掲載しています。
今回の記事も教材なしで完結します。ただ、私が記事を投げるだけで動画を作れるようになったきっかけをくれたのはイケハヤさんの動画講義の教材でした。台本の型も、音声の検収も、あそこで学んだものが今の土台になっています。
🔗「AIで動画講義を作る方法」〜 撮影ゼロ・音声代は1本約20円・自分の声のクローンで（Brain・#PR）
教材から専門家を招き入れるというやり方そのものは、少し前の記事で詳しく書いています。
|
Fable 5解禁の7日間で、Brainの教材から専門家を5人ヘッドハンティングして、約20分でAI組織が完成。Fable 5の7日間の実行ログをシェアします
私の場合、自分の専門外のSkillsは「買う」ようにしています。もちろんAIがあれば自分で作ることもできますが、他の方がトークンを燃やし試行錯誤して作り上げたSkillsを購入したほうが圧倒的に早いです。つまり時間を買ってます。そのおかげでAIカンパニーを作り上げ、AI社員を働かせることができるようになりました。
気になる教材があれば、ぜひこちらもチェックしてみてください。
🎙️ AI音声でキャッチアップ
「文章を読む時間がなかなか取れない」という方のために、記事の内容をAIが対話形式で解説してくれる音声を用意しています。通勤中や家事をしながら、まずは全体像をつかんでいただけます。
私のSpotifyをフォローしていただければ通知が届きますのでチェックしてみてください。
🔙 前回：記事を投げるだけで、動画ができる道具を配りました
前回お渡ししたのは、記事を1本渡すと5分半の講義動画ができる道具でした。画像を1枚も生成せず、動画編集ソフトも使いません。追加でかかるお金も0円です。
📝【週刊ニュースレター発行】今日から始めるAI生活
@tetumemo
記事は書けるのに動画制作が苦手な方へ。大手が無料公開した「HyperFrames」に記事を投げるだけで、音声もアニメーションも付いた5分半の解説動画ができました！
ブログもニュースレターも書けるのに、動画だけは手が回らない、、、私もそうでした… https://t.co/KM1FSLkoLjpic.twitter.com/zXx7ujKUda— テツメモ｜AI図解×検証｜Newsletter (@tetumemo) August 19, 2026
その動画を裏で描いているのが、HeyGenが無料で公開しているHyperFramesという仕組みです。ものすごくざっくり言うと、AIがHTMLで動画を組み立てて、そのままmp4に書き出してくれるものになります。公式サイトを引用すると、、、
動画を説明すれば、AIエージェントがHTML・CSS・JavaScriptを書く。コードを書く必要はない
書き出す前にブラウザで確認して直せるStudioという編集画面のことや、単調にならないためのスライド12種の型については、前回の記事に全部書きました。この記事ではこれ以上振り返りませんので、気になる方は前回の記事をチェックしてみてくださいね。
そして、その1つ前の8/13に配信した第1回にあたるのが、買った教材のファイルには一切触らず、外側から自分の決めごとをかぶせて自分用にした話です。今回の記事は教材なしで完結しますが、道具を自分に合わせ込むという考え方は、ここから続いています。
|
ここまでが前回までのお話です。今回は、その動画の一段手前にある「動画の元となる解説図解をつくる」話から始めます。
🧒 Anthropicの中の人が使っている「ELI5」を、そのまま試してみました
冒頭で引用したThariqさんのポストを振り返りますね。
「このトピックを何も知らない人に向けて、大きな絵と少ない文字のHTMLで説明して」
これがELI5の指示文です。そして驚いたのですが、ELI5の中身は、ほぼこの1行しかありませんでした。
実際にGitHubで公開されているものを、そのまま持ってきました。
name: eli5
description: Explain a topic like I'm a 5 year old. Use when the user
types /eli5 <topic> or asks for a dead-simple picture explainer of how
something works.
# eli5
Explain like I'm someone who knows nothing about this topic,
using a HTML artifact with big pictures and few words.
Topic: $ARGUMENTS
これで全部です。空行を入れても8行しかありません。
上の3行は「いつ使うか」の説明で、実際に指示しているのは下の2行だけです。名前を付けて、1行の指示を書いて、置いた。それだけのものが、社内でよく使われている。ここ、けっこう衝撃でした。（実際は私のようにもう少しビジネス寄りにカスタムしている気がしますが、、、）
本家をそのまま試すこともできます
紹介されていたポストに、入れ方も書いてありました。Claude Codeをお使いなら、この2行を順番に打つだけです。AIにお願いするだけでOK
claude plugin marketplace add anthropics/claude-plugins-community
claude plugin install eli5@claude-community
あとは /eli5 のうしろに、知りたいことを書きます。ポストでは、こんな使い方が挙げられていました。
- /eli5 このモジュールは、どう動いているのか
- /eli5 なぜ、この判断をしたのか
- /eli5 この障害の原因は何だったのか
私も同じように、自分の記事を1本投げてみました。
【6つの要約記事がXで数万imp達成！】ネタ収集ゼロ・執筆5分はそのまま、品質だけ4段階上がった。X記事生成スキルv8と改善版を配布します{{node:mnewsletter}}
すると結果は、、、 ↓
😐 分かりやすい。でも、あっさりしすぎでした
何枚か作っているうちに、物足りなさの正体が3つに分かれてきました。深さが足りないこと、毎回見た目が変わること、そして図が図になっていないことです。順番に書きますね。
毎回「もう少し詳しく図解して」と打っていました
頻度でいうと、これが群を抜いていました。出てきた1枚を読んで、なるほどとは思う。でも、そこで終わらないんです。
「この部分、どうしてそうなるの？」
「この2つは、どっちが先なの？」
読んでいる途中で疑問が湧いてきて、結局こう打ち直していました。
もう少し詳しく図解して
たぶん、指示文が1行しかないからだと思います。「大きな絵と少ない文字で」としか書いていないので、どこまで踏み込むかはAIのその時の判断に任されます。ざっくりした1枚が出てくるのは、むしろ指示どおりなんですよね。
✅️私が実際に「もう少し詳しく図解して」と打ち直したときの画面 ↓
🔗公開リンク：URLを貼るだけでXの記事ができちゃう（少し詳しめ）
何度かやりとりすれば、ある程度は詳しくなります。ただ、毎回このやりとりをするのかと思うと、少し気が重くなりました。「たぶん、このSkill使わなくなるわ」って
同じ日に作った2枚が、別の会社の資料に見えました
2つ目はこれです。追加でお願いするたびに、色が変わります。余白も、文字の大きさも、見出しの位置も変わります。ClaudeではなくGeminiにお願いしたらもっと変わっちゃいました。
🔗URLを1つ貼るだけ！5分で数万人に届く「X長文記事」のつくりかた（Gemini版）
1枚だけ作って読んで終わりなら、これで困りません。でも私は、作った図を記事に貼りたいし、人に共有したいし、できればシリーズとして並べたいんです。
ELI5だけの指示では実行のたびに変わるので別の人が作った資料に見えます。中身はどちらも悪くないのに、揃っていないだけで、まとめて渡す気になれませんでした。
引っかかったのは、図が「図」になっていないことでした
3つ目が、いちばん根っこにあった話です。
出てくる1枚には、カードが3枚並んでいたり、アイコンが添えられていたり、枠線が引かれていたりします。きれいなんです。でも、よく見ると、それぞれの要素がどう関係しているのかが描かれていないことも多い。
私は、これは図解ではなく装飾だと思っています。
図解というのは、要素どうしの関係を線と矢印で目に見せることです。「AがBに渡して、Bが作る」という話が出てきたら、箱と矢印を描いて、矢印の上に「何が流れるのか」を書く。そこまでやって、はじめて読み手の頭の中に絵ができます。
実はこれ、10年前に痛い目を見て覚えたことでした。
2016年、ビジネススクールで定量分析の授業を受けていた頃、私は毎回のアサインメントに何時間もかけていました。Excelと格闘して、データをこねくり回して、「これだけ緻密にやったのだから完璧だろう」と思って提出するんです。ところが講師から返ってくるレビューは「で、So What？（結局、何が言いたいの？）」ばかりでした。
ある日の振り返りで、ハッとしました。私はデータの最初から最後まで全部知っているので、断片的なグラフを見ても頭の中で背景を勝手に補完して、理解できた気になっていたんです。前提を知らない相手にとっては、ただの数字の羅列でしかありません。
そこから、スマートに見せるための分析をやめました。伝えたい本質を「5秒で直感的に分かるかたち」に絞って、前提知識をまったく持たない他部門の人に見せて感想をもらう実験を始めたんです。畑違いの相手でも、シンプルな数字と図と、1行の明確なメッセージがあれば、方向性は伝わりました。
図解も、たぶん同じです。誰の何を解決するのかを先に決めてしまえば、説明する言葉はどんどん減っていきます。逆に、そこが決まっていないまま作ると、きれいなカードが並んだだけの1枚になり、「で、So What？（結局、何が言いたいの？）」となる。
📢ここ、試行錯誤したポイントです：「もっと図解っぽくして」とお願いしても、カードやアイコンが増えるだけで関係は描かれませんでした。効いたのは「矢印には何が流れるのかを必ず書いて」「箱を並べただけのものは図と呼ばない」と、作法のほうを先に渡す頼み方です。見た目ではなく、描き方のルールを渡すと変わります。
というわけで、この3つを自分で埋めにいくことにしました。
🎨 だから、表現とデザインを自分好みに作り替えました
やったことは、あの1行の指示に3つ足しただけです。決まった見た目と、関係図の描き方と、出す前のチェック。この3つで、さっきの物足りなさが順番に消えていきます。
つまりバリエーションを増やすより型を決めて表現を絞ることに注力しました
中身をそのまま書いていきます。ここは配布する道具の中身でもあるので、真似したい方はご自分のAIに同じ作法を渡して対話で補完してもらえれば、同じことができると思います。
1つ目：いきなり書かせず、お題を「つまずき」に割ってもらう
効き目が大きかったのは、これです。
お題を投げると、AIはすぐに1枚を作ろうとします。そうではなく、まず知らない人がつまずくところを3つから5つの問いに割ってもらうんです。
- これは何なのか
- なぜ要るのか
- どう動くのか
- 何がうれしいのか
- 気をつけることは何か
そして、1つの問いにつき1つのセクション、1つの図と決めます。これだけで、深さが自動的に入ります。「もう少し詳しく」と打ち直していたのは、要するに問いが立っていなかったからでした。
もう1つ、たとえ話は最初から最後まで同じものを1本だけ通してもらいます。途中でたとえが乗り換わるのが、読んでいて混乱するところなんですよね。
2つ目：矢印には「何が流れるのか」を必ず書いてもらう
ここが、図と装飾の分かれ目でした。
私が渡している作法は5つです。
決まり | 中身 |
|---|---|
矢印にラベル | 矢印の上か横に「何が流れるのか」を短く書く。ラベルの無い矢印は、線を引いただけで情報がゼロ |
向きを描き分ける | 片方向は矢じり1つ、両方向は2つ、「ときどき」「自動で」は破線 |
囲いで場所を示す | 角丸の枠でくくって、枠自体に名前を付ける（「あなたのパソコンの中」など） |
登場人物は5つまで | 6つ以上になったら、そのセクションが2つに割れていない合図 |
図の下にひとこと | その図でいちばん言いたいことを、1行だけ図の真下に置く |
とくに1つ目です。矢印にラベルが無いと、読み手は「この線、何を意味してるんだろう」と考えることになります。「渡す」「返す」「1回だけ」と書いてあるだけで、その線が急に情報になります。
逆に、順番も移動も無い話に無理やり関係図を作らせないことも決めました。並列なら番号カード、比較なら2枚並べ、数量なら大きい数字1つ。関係が無いところに矢印を引くと、かえって嘘の図になります。
3つ目：色と余白を、毎回同じにする
3つ目は見た目です。色の値と文字の大きさと余白を1つのまとまりにして、毎回それを使ってもらうようにしました。
使っているのは、デジタル庁が公開しているダッシュボードのデザインガイドに沿った白基調の組み合わせです。公共データ利用規約で公開されているものなので、そのまま使えます。自分で色を選ぶより、根拠のあるものを借りたほうが早いですし、何より毎回そろいます。
📝デジタル庁って本当に有益なアセットを無料で公開してて、もう一つのオススメは「ダッシュボードデザインの実践ガイドブックとデザインテンプレート」で、中身はデータと根拠に基づいた政策判断を推進するための、実践ガイドブックとPower BI用のデザインテンプレート
@tetumemo
これ、そのままClaude… https://t.co/bfvnErUuWZpic.twitter.com/wNLXvtMF9n— テツメモ｜AI図解×検証｜Newsletter (@tetumemo) August 15, 2026
決めたのは「色は発明しない」ということです。この組み合わせの外の色に意味を持たせない。制約があるほうが、結果的に毎回きれいにそろいます。
出す前に、道具に見てもらいます
最後に、書き上がったものを開く前に、小さなチェック用の道具を通します。見ているのは4つです。
- 文章が長く続きすぎていないか
- 図や表やカードが、いくつあるか
- スマホで開いても崩れないか
- 1つのカタマリに詰め込みすぎていないか
自分の目は、作った直後がどうしても甘くなります。だから最初のチェックは人ではなく道具にやらせる、というのが私のやり方です。
ただ、正直にお伝えしておくと、このチェックは「文字だらけになっていないか」しか見ていません。箱もカードも図として数えるので、矢印が1本も無くても合格が出ます。内容によって矢印は必須ではないのであえて”緩和”しています。ですので関係がちゃんと描けているかは、最後に自分の目で見てくださいね。
📢ここ、試行錯誤したポイントです：チェックの道具を作ったあと、わざと壊したファイルを何本か通してみました。ちゃんと止まるかを確かめるためです。これをやらないと、「効いているつもりのチェック」ができあがります。効いていないチェックは、無いより危ないです。安心して素通りさせてしまいますから。
ここまでで、読み物としてのELI5は自分のものになりました。そして、ここからはいよいよELI5の図解を動かしていきますよ。
📖 読む図解だけでも、ここまでできます
動画の話に入る前に、1つだけ確かめておきたいことがありました。この読む図解、私の環境だから動くだけじゃないか、という不安です。
そこで、まっさらなフォルダを1つ作って、そこに配る予定のものだけを置いて、私の手元にある資料を1つも使わずに1枚作ってみました。お題は、AIとまったく関係ないものにしました。
お題は「ドリップコーヒーは、なぜ蒸らすのか」にしました
AIの話でやると、私の頭の中の知識が混ざります。だから、自分がふだん書かない話にしました。
投げた指示は、これだけです。（Skillを指定して指示文を投げる）
eli5-visual-explainer-v1 の手順で、
「ドリップコーヒーは、なぜ蒸らすのか」を1枚のHTMLにしてください。
出てきたものが、こちらです。ちゃんと手順どおりに進んでいました。
まず「粉に何が起きているのか」
「蒸らすと何が変わるのか」
「どれくらい待てばいいのか」の3つの問いに割れています。
そして、たとえ話が最初から最後まで1本で通っていました。
この解説では、コーヒーの粉を「乾いたスポンジ」だと思ってください。
Q1では「乾いたスポンジに水をかけると、はじいて落ちますよね」と言い、Q2では「一度しめらせてから水をかけると、ちゃんと吸い込みますよね」と受けていてつながりがわかる！
図は、ちゃんと矢印で描かれていました
ここが見たかったんです。
Q1の図は「乾いた粉（中にガスが詰まっている）」から「お湯を注ぐ（ガスが噴き出す）」へ矢印が伸びて、「粉がふくらんで浮く（お湯が通れない）」を通り、「薄い一杯（素通りして落ちる）」に着きます。
図の下には、こう1行だけ置いてありました。
ガスが邪魔をして、お湯と粉が出会えていない
Q2は同じ形で、今度は「30秒待つ（ガスが先に抜ける）」を挟んで「濃い一杯」に着きます。
つまり、同じ形の図を2枚並べて、途中に1つだけ違う箱を入れることで、蒸らしが何をしているのかを見せているんです。カードを3枚置いただけの1枚とは、伝わり方がまるで違いました。
Q3だけは関係の無い話（待ち時間の目安3つ）なので、矢印ではなく番号カードになっていました。
ここも作法どおりです。必ずしも”矢印”を必須としてない理由です。
必要なものは、ほとんどありません
読む図解だけを使う場合、要るものはこれだけです。
要るもの | 何のために | 無いとどうなるか |
|---|---|---|
Skillのフォルダ1つ | 作法をAIに読ませるため | これが本体です |
Python 3.10以上 | 出す前のチェックを動かすため | チェックが使えないだけで、図解そのものは作れます |
動画のほうはNode.jsやFFmpegが要りますが、8月の記事を読んで第1回、第2回目を試している方は準備万端です！
ちなみに読む図解だけなら、実質フォルダを1つ置くだけで行けます。
ここまでで、動画を作らない方への話は完結します。記事に貼る、社内の資料にする、人に共有する。この1枚だけで足りる場面は、けっこう多いと思います。
📢ここ、試行錯誤したポイントです：はじめは自分のパソコンの中にある資料を参照する書き方になっていて、他の場所に置いた瞬間に動かなくなりました。配る前に、まっさらなフォルダで1回通してみるのをおすすめします。手元では動くのに配ると動かない、はけっこう起きます。
🌐 AIにやらせた作業を、そのまま「学び」に変える
この記事を書いている途中で、もう1つの使い道が見つかりました。こちらのほうが、日常で効くかもしれません。簡単に言うと、、、
最初にAIに作業をお願いして、それが終わったら復習用でELI5図解→動画化する。つまりAIに任せたらなんか作業が終わってしまったけど、その流れを勉強したいから説明してもらえるってことです。
きっかけは、自分のポートフォリオサイトに独自ドメインを設定したことでした。
設定は、全部AIにブラウザを操作してもらいました
やったのは3つです。
- ドメインを買ったサービスで、ネームサーバーの設定を変える
- CloudflareでGitHubとPagesをつなぐ
- Cloudflareで独自ドメインを設定する
これを、私は1つも自分で操作していません。AIにブラウザを触ってもらって、全部やってもらいました。サイトの公開まで完了です。
数年前なら自分でやろうとすると、たぶん解説記事を3本くらい読んで、画面を見比べながら入力することになります。私はここで何度か挫折した経験があるので、正直かなり気が楽でした。
📝Vibe Codingの強い味方！無料で使える高品質なCloudflareで独自ドメイン設定してサイト公開するなら、自分で設定せず、GPT-5.6 Luna等にブラウザ操作して設定してもらったほうがメチャ楽！！
@tetumemo
私の場合、
①ムームードメインのネームサーバー変更操作
②CloudflareでGitHubとCloudflare Pagesを接続… https://t.co/hEaxDtdmA4pic.twitter.com/D5vHEoVx8n— テツメモ｜AI図解×検証｜Newsletter (@tetumemo) August 25, 2026
でも、それだと何も残らないんです
ここが引っかかりました。
AIに全部やってもらうと、たしかに早いです。ただ、自分の中には何も残りません。画面も見ていないし、どこをどう変えたのかも分からない。次に同じことをやるとき、また丸投げすることになります。
そこで、作業が終わったあとにこう頼みました。
いま実行した作業を、eli5-visual-explainer-v1 の手順で1枚のHTMLにしてください。出てきたのは、自分がやってもいない作業の図解です。何と何がつながっていて、どの順番で何が起きたのか。ネームサーバーを書き換えると何がどこを見に行くようになるのかまで、矢印つきで描かれていました。
つまり、こういう流れになります。
これまで | これから |
|---|---|
自分で調べて、画面を見ながら入力する。手は動くが時間がかかる | AIに作業させる。速い |
手を動かしたぶん、なんとなく覚える | そのままだと何も残らない |
— | 作業のあとに図解させて、学びとして受け取る |
「AIにやらせて終わり」ではなく、「AIにやらせて、その作業を学びに変える」。今回いちばん自分の使い方が変わったのは、たぶんここでした。
その図解を、そのまま動画にもしました
ここまで来たら、あとは同じです。できた図解をそのまま渡して、動画にしてもらいました。
📝Vibe Codingで作った自分のポートフォリオサイトをClaude Codeで”独自ドメイン”設定公開できた。→設定操作はすべてAIにお任せ。
@tetumemo
作業完了後はどんなことを実行したのかを、ELI5のSkillsで簡単図解解説して、Hyper Framesで解説動画にしてみた
この流れ、全部GPT-5.6 Lunaでできるからコスパ最高 https://t.co/4ZOeLptwdZ
自分がやった作業の記録が、2分ちょっとの解説動画になって残りました。これなら半年後の自分が見ても、たぶん思い出せます。あと皆さんにもシェアしやすい！
そして、これが全部コスパのいいモデルで通りました
ここは正直、意外でしたね。この一連の流れ、私は途中からGPT-5.6 Lunaという、料金の安いモデルで動かしていました。上位のモデルでないと無理だろうと思っていたのですが、最後まで通ったんです。
できあがったものの検収結果を、そのまま置いておきます。
見たもの | 結果 |
|---|---|
動画 | 1920×1080／30fps・2分13秒 |
音声と映像 | どちらも入っている |
音の大きさ | -16.7dB（目安の -16dB あたり） |
動きのチェック | 合格 |
図が読み物と一致しているか | 合格 |
文字の読みやすさ | 合格 |
作業の開始から動画の書き出しまで、31分ほどでした。
前回の記事では「計画は上位のモデル、作業は中位のモデル」と書きましたが、この道具に関しては、そこまで気にしなくてよさそうです。手順書のほうに決めごとが書いてあるので、モデルが賢くなくても道に迷わない、ということなんだと思います。
安いモデルで通るというのは、気軽に何本も作れるということです。嬉しすぎますねっ。
🎬 読んでいるうちに、動かしたくなった
図を描いていると、頭の中で勝手に動き始めるんです。
「この矢印、左から右へ這っていったら分かりやすいだろうな」
「この箱は、話しているタイミングで1つずつ出てきてほしいな」
冒頭に書いたまつにぃさんのポストが刺さったのは、たぶんこれを感じていたからでした。前回配った道具はHTMLから動画を作るものです。そしてELI5が作るのもHTMLです。つながらないほうがおかしい、という状態でした。
実際に動かしてみた1本がこちらです
題材は、私が以前書いた「ClaudeとNotebookLMをつなぐ」という記事です。まずELI5で読む図解を作り、その図を動画のスライドに入れて、声を付けました。
📝ELI5で簡単図解する説明用HTMLをつくると、そのまま図解が動くアニメーション解説動画をHyper Framesで作れるのが楽しい。音声は無料のVOICEVOXだからAPI等も気にせず試しまくれる
@tetumemo
引用元の記事をClaude Codeに投げて完成
Claude Code×Gemini Notebook（NotebookLM）のチート級組み合わせについて https://t.co/v7VGAeX9tGpic.twitter.com/Dna7K4FtjF— テツメモ｜AI図解×検証｜Newsletter (@tetumemo) August 24, 2026
できたのは、3分24秒の動画です。スライドは12枚。ナレーションと字幕が付いています。
✅️投げた記事はこちら（※今も読まれまくっている大人気の記事です） ↓
|
【基礎編】これチート級。Claude×NotebookLMで「トークン消費1/10」を実現するための全手順
見ていただきたいのは「図が組み上がる」ところです
この動画で手をかけたのは、図の出し方でした。
完成した図をそのまま映すのではありません。ナレーションが進むのに合わせて、部品が1つずつ現れて、話し終わる頃に図が完成します。
だんだんアニメーションで図が描かれていく
図が動くので見ていて飽きないんですよね
矢印も手順の流れに沿ってでてきます ↓
これぞHyper Framesの醍醐味！
ナレーションが言っていること | そのとき画面で起きること |
|---|---|
「机で作業する人だと思ってください」 | 机だけが現れる |
「資料を積みすぎると」 | 資料が1枚ずつ積み上がっていく |
「溢れる。これが制限の正体です」 | はみ出した1枚が飛び出して震える |
「外に棚を置いて、要点だけ聞く」 | 右側に棚が現れ、矢印が這って机とつながる |
止まった図を長く映すより、組み立てて見せたほうが、なぜか短く感じます。分かりやすくなるなら動画が少し長くなってもいい、というのが今の私の判断です。
気づいたら、過去の記事が全部「素材」になっていました
これは作ってから気づいたことですが、私はニュースレターを130本以上書いてきました。それが今まで、書いたきり置いてあったんです。ところがこの流れができた瞬間、過去記事のフォルダが、そのまま動画の素材置き場になりました。
古い記事を1本選んで投げる。図解ができる。動画になる。ポストしてまた多くの人へアプローチできる。
たったそれだけですが、自分の記事を多くの人に読んでもらおうと思ったら、どんな日も毎日必ずポストすることが重要です。正直しつこいくらいでも多くの人へ届きませんので躊躇せず実行してください。
📝過去のニュースレターも解説動画に早変わり！
@tetumemo
Anthropicのチームが毎日使っているELI5のSkillsを自分好みにカスタム
↓
SVG図解を丁寧に追加
↓
それをHyper Framesで動かす
↓
音声付きのアニメーション解説動画の完成！
全部無料ツールでできちゃいます♪
投げた記事はリプ欄 ↓ https://t.co/o5NZ1v1KIY
しかも使っているのは、全部無料の道具です。ブログを書いている方、noteを続けている方、社内の資料が溜まっている方。書いたものが手元にある人ほど、この道具は効くと思いますよ。
🔁 白状すると、最初は同じ図をAIが2回描いていました
ここが、今回いちばんお伝えしたかったところです。
「読み物の図を、そのまま動画で動かす」と決めたのは、実は少し前でした。ところが、しばらく経ってから気づいたんです。この仕組み、AI守ってないよな？？なんか図が違うぞ？
毎回、AIが描き直して似せていただけでした
やっていたことは、こうです。まずELI5で読む図解を作ります。次に動画を作るとき、その図を見ながら、動画のテンプレートの部品を使って似た図を勝手にAIが組み立てる。
似ています。よく似ています。でも、同じではありません。そして、似せるのが上手くいった回だけ合格していました。
ある回では、5枚のうち2枚から3枚が静かに落ちていました。落ちた図は、比較のカードになったり、アイコンを並べただけの画面になったりしていたんです。
いちばん怖いのは、これがAIの検査にも見つからないことでした。
- 自動のチェックは、エラーがないので緑のまま通ります
- 静止画を見ても、それはそれで崩れていないので気づけません
- 読み物と動画を並べて見比べない限り、分かりません
つまり、私の目にも、道具の目にも映らない壊れ方でした。
直し方を「頑張る」にしなかった理由
気づいたとき、最初に浮かんだのは「次からは気をつけよう」でした。でも、それはたぶん効きません。
というのも、今回の失敗は「うっかり忘れた」ではないからです。手で似せる作業がある限り、上手い回と下手な回が出ます。AIがやることを「何となくの指示文」で守ろうとするのは無理があります。
だから、作業そのものを無くしました。
ELI5で作った読み物の図に、目に見えない名札を付けておきます。動画を作るときは、その名札を頼りに、AIが図をそのままコピーして持っていきます。AIは図を新たに1枚も描きません。
そのうえで、運べたかどうかを確かめる仕掛けを別に付けました。読み物の図の中の言葉と、動画に入った図の中の言葉を1つずつ突き合わせて、1語でもズレていたら「描き直しの疑い」として赤く止まります。
実際に通したときは、図5枚すべてが一致しELI5で図解した図が動いたんです！
作っている最中に、さらに3つ出てきました
もう失敗ばかりのシェアでうんざりかもしれませんが、この仕組みを作っている途中で、別の不具合が3件出ました。
1つ目は、矢印を描く共通の部品が、たまたま1枚のスライドの中に置いてあったことです。そのスライドを図と差し替えた瞬間、部品ごと消えて、他のスライドの矢印まで全部止まりました。
2つ目は、確かめる仕掛けのほうが縦動画と横動画の区別をしていなくて、横の動画に対して縦専用の図まで要求してきたことです。
3つ目は、図の部品の切れ目を「何番目の要素か」で決めていたことでした。1つズレると、右の箱と1本目の矢印が同じ部品に混ざります。いまは「この言葉が出てくるところから次の部品」という決め方に変えました。番号で切ると、ズレても目で気づけません。
誰も直さなかった面倒を、道具に肩代わりさせる
同じ図を2回描くって、AIに任せきっていたらそうなる時もある。そして、たいていの人は「まあ、そういうものだよね」で流します。私も最初は流していました。
でも、こういう「一見どうでもいい、めんどくさいこと」こそ、仕組みにした人が強いんだと思っています。
前にビジネススクールで、物流のプラットフォームの話を学んだことがありました。FAXが飛び交うアナログな業界に入って、届いたFAXを読み取ってデータに変えて、また返す。そんな泥臭い作業を肩代わりし続けた会社が、気づけばそのフローを仕組み化して、その業界のデータを全部握っていた、という話です。
規模はまったく違いますが、構図は同じだと思っています。誰も直さない小さな面倒を、仕組みにする。それだけで、その先の景色が変わります。
✅ ここまでのまとめ
前半でお伝えしてきたことを、整理させてください。
やったことは、1行の指示に3つ足して、その先をつないだだけです。
段階 | やったこと | 何が変わったか |
|---|---|---|
① | Anthropicの中の人が使っているELI5を、そのまま試した | 大枠はつかめる。ただ、あっさりしていた |
② | お題を3〜5個の問いに割ってもらうようにした | 「もう少し詳しく」と打ち直す必要が無くなった |
③ | 矢印に「何が流れるのか」を必ず書かせた | カードの寄せ集めが、関係の見える図になった |
④ | 色と余白を固定した | 並べても揃う。シリーズとして渡せるようになった |
⑤ | その図を、そのまま動画へ運ばせた | 読み物と動画で、同じ図が動くようになった |
⑥ | AIにやらせた作業を、そのまま図解させた | 丸投げして終わりだった作業が、学びとして残るようになった |
⑦ | 料金の安いモデルで通るか試した | GPT-5.6 Lunaで最後まで通った。気軽に何本も作れる |
⑤まで来て、ようやく「同じ図を2回描かない」が仕組みになりました。⑥と⑦は、書いている途中で見つかったおまけです。
そして、ここからが後半の話です。この2つの道具を、そのままお渡しします。
📚 あわせて読みたい過去の記事
今日の話に関係する記事を、いくつか置いておきます。
今回の動画の題材にした記事です。ClaudeとNotebookLMをつなぐ話で、動画の中の「机と棚」の図は、この記事の内容を1枚に噛み砕いたものです。
【基礎編】これチート級。Claude×NotebookLMで「トークン消費1/10」を実現するための全手順
その続きにあたる発展編です。こちらも別の動画にしました。
|
【発展編】Claude×NotebookLMにSkills5本入れたら別物になった。チート級のトークン削減ノウハウを全部シェアします
図解そのものについては、以前スライドのデザインを型から作り直した話を書いています。「先に型を決めてしまう」という考え方は、今回のELI5とまったく同じです。
Claude DesignでCanvaのスライドを投げるだけでデザインシステムができた。MBA50フレームワーク・スライド60レイアウト・マッキンゼー型コンサルテンプレをまるごと配布します
🔐 ここからのコンテンツ
ここまで、ELI5という1行の指示のことと、そこに3つ足して自分のものにした話と、その図がそのまま動き出すまでを見てきました。
「読む図解、ちょっと欲しいかも」
「でも、自分の環境で動かせるんだろうか」
「フォルダを置くって、どこに置けばいいの？」
今回は、道具が2つありますが大丈夫です。読む図解を作るほうと、その図を動かすほうです。どっちを先に置くのか、両方要るのか、前回配ったものとぶつからないのか。これらの段取りごとお渡しします。
何が手に入るか
やることは、フォルダを2つ置いて、AIに1行お願いするだけです。問いを立てるのも、図を描くのも、色を揃えるのも、動画にするのも、全部AIがやります。
できるようになることは2つです。むずかしい話を1枚の図解にできること。そして、その図をそのまま縦60秒・横3分・横5分の動画にできることです。追加でかかるお金はありません。
誰の何が解決するかというと、AIに図解を頼むたびに見た目がバラつくのが気になっていた方、資料は作れるけれど動画まで手が回らない方、そして前回の道具を受け取ったけれど、まだ動かせていない方です。
あなたがやらない作業は3つあります。図を描く。同じ図をもう一度描く。動画編集ソフトを開く。この3つは発生しません。
中身を1つだけ、先に出します
イメージしにくいと思うので、実際に私が使っている文をそのまま置いておきます。読む図解を作るときは、これ1行です。
eli5-visual-explainer-v1 の手順で、【説明してほしいこと】を1枚のHTMLにしてください。
※Skillの保存場所はこちらです：【フォルダを置いたパスを書く】
前回の記事でも書きましたが、保存場所を書いておくのが地味に効きます。ここを書いておくと、AIが探し回らずに済みます。
そして、できた図解を動画にしたくなったら、次はこう頼みます。
article-motion-slides-v2 のSKILL.mdを読んで、さっき作ったELI5の図解を動画にして。
※article-motion-slides-v2 の保存場所はこちらです：【フォルダを置いたパスを書く】
※長さは【ショート／ミドル／講義】でお願いします。
自分の環境に不足している部分があればユーザーに確認しながら環境を一緒に構築してください。
まずは計画を出力し、ユーザーの確認後に進めてください。
実際、配布物の構成の覗いて見ましょう
かなり作り込んだので充実したSkillsになっていると思います！
eli5-visual-explainer-v1\
├── SKILL.md ← AIに読ませる手順書（本体）
├── README.md ← 人が読む説明書。ここだけ開けば十分です
├── reference\
│ └── design-tokens.css （色と文字の決まり。ここを書き換えると自分の色になります）
└── scripts\
└── check_layout.py （出す前のチェック）
article-motion-slides-v2\
├── SKILL.md ← AIに読ませる手順書（本体）
├── README.md ← 人が読む説明書
├── setup\
│ └── 導入ガイド.md （Node.js・Python等の入れ方。AIに丸投げできる文つき）
├── reference\ ← AIが必要なときだけ読む資料
│ ├── diagram-patterns.md （関係図の型）
│ ├── motion-catalog.md （動きの型16種）
│ ├── slide-patterns.md （スライドの型）
│ ├── icon-guide.md （アイコンの探し方）
│ ├── reading-dict.md （音声の読み間違いを直す）
│ ├── audio-custom.md （声の変え方）
│ └── troubleshooting.md （つまずき15件）
├── templates\ ← そのまま1回動くテンプレート
│ ├── short.src.html （縦・60秒）
│ ├── middle.src.html （横・3分）
│ ├── lecture.src.html （横・5分）
│ ├── patterns.src.html （型見本帳）
│ └── themes\ （カラーテーマ6種＋見本画像）
├── scripts\ ← AIが動かす道具
├── input\ ← 動画にしたい記事を置く場所
└── output\ ← できあがったmp4の保存先
開くのは README.md の1枚だけで大丈夫です。残りはAIが必要なときに読みます。全部に目を通す必要はありません。
先にお伝えしておきたいこと
これ、毎回書いていますが、ご理解いただいている方は読み飛ばしていただいてOKです。
配布Skillsはあなたが本当に望むカタチの完成形ではありません。私自身、この2日間で何度も作り直しましたし、図が落ちていることに気づかないまま何本も動画を出していたくらいですから、まだ足りないところがあると思います。あなたが好ましいと思う”型”があるはずです。
でも、それでいいと思っています。完成品を配るのではなく、出発点を配る。前回も、前々回も、同じ考え方でお渡ししてきました。
完璧になるまで待っていると、たぶん永遠に出せません。動くものを見せたほうが、話が具体的になって、直すところも見つかります。これは私が仕事で何度も体験してきたことです。作りかけのまま人に見せた日から、物事が動き始めるんですよね。
まずは読む図解を1枚だけ、試してみてください。それだけでも十分に元は取れると思います。
それではここから先で、2つの道具と、置き方と、必要なものと、つまずきやすいところをお渡しします。一緒に、あなたの資料が動き出すところを見にいきましょう！
| 購読中 |
📝 発行者
🔗tetumemo：非エンジニアのためのAI活用ニュースレター
📝Substack版ニュースレター：「テツメモ｜AI時代の仕事と発信メモ」
🎤Spotify：AI QUEST（今日から始めるAI生活）
🎤Apple Podcasts：AI QUEST（今日から始めるAI生活）
📹️YouTube：AI QUEST（今日から始めるAI生活）
🎟️お得な招待コード
💡Manus（1,000クレジットが獲得できる限定招待コード）
💡AIエージェント「Felo」（月額100円引きの招待コード）
💡Perplexity Pro（初月10ドルの招待コード）
💡リアルタイム翻訳「Felo字幕」（15分無料で試せる招待コード）
💡便利なAI音声入力ツール「Typeless」（5ドルのクレジットがもらえます）
| ここから先は有料コンテンツです |
| |
| この続き：14915文字 / 画像10枚 |
- 08/27Anthropicのチームがよく使う「何でも簡単図解で説明するSkill “ELI5”」をカスタムして、記事を投げると読む図解がそのまま音声つきアニメーション動画になる方法を紹介
- 08/20記事は書けるのに動画制作が苦手な方へ。大手が無料公開した「HyperFrames」に記事を投げるだけで、音声もアニメーションも付いた5分半の解説動画ができました！
- 08/13ショート動画作りに何度も挫折した私が、教材を購入して専門家をAI会社へリクルート！自分環境へ合わせ込むSkillを配布します
- 08/05コードを1行も書けない私が、スマホだけでCodexとClaude Codeを動かせるようになった実践結果をシェアします
7,000人以上の方達が購読中
いつでも購読解除可能です