ClaudeでYoutubeの内容を要約して図解に

https://x.com/tetumemo/status/1909563616753598594?s=12 を参考にClaudeを使って無料でYoutubeの内容を要約、図解にしてまとめました。 元のポストはClaudeだけで完結していますが、それにはClaude MCPの利用が必要になるため、今回は簡単のためにgeminiを併用しています。

文字起こし

まず、以下のプロンプトで文字起こしをし、その後フィラーを取り除きました。

この内容をタイムスタンプをつけて文字起こしして
フィラーを取り除いて
スクリーンショット 2025-04-22 20.37.50

要約、図解

まず、以下のプロンプトを入れたものの、無料だとURLから文字情報を取得できないので、今回はURLの代わりに文字起こしした文章を入れました。添付した画像は参考にした元のポストを使いました。

mcp-youtubeを使って字幕情報を取得し詳細にまとめて
色合いやデザインは添付画像を参考にして

[URL]
スクリーンショット 2025-04-22 21.17.44

その結果以下のように要約されました。

スクリーンショット 2025-04-22 20.51.45

ここで、以下のプロンプトで図解にしました。

上記内容をApple社のような洗練されたデザインで一覧で見れるように整理し、アーティファクトで出力して
スクリーンショット 2025-04-22 20.48.14

htmlの形式で出力されているので、そのままwordpressに載せることもできます。