【マジクラ】NotebookLMの画像を「要素分解＆編集」できる!! NotebookLM Image Editor

こんにちは、「チームまじん」の やまじん です！

過去の記事では、本当にたくさんの スキ や温かいフィードバックをいただき、ありがとうございました！
皆さんの日々の業務効率化に少しでもお役に立てているようで、本当に嬉しく、開発の励みになっております！🙏

さて、現在「チームまじん」では絶賛 「NotebookLM強化月間」 ということで、まじんさんとともにNotebookLMについて日々研究をしております。

その中で今回は、NotebookLMで生成されるスライドPDFやインフォグラフィック画像を編集可能なPowerPointデータとして簡単に変換ができる 『NotebookLM Image Editor（NotebookLMイメージエディター）』をご紹介させていただきます！🎉

まじんによる解説動画

🚀 なぜこのツールを作ったのか？開発の背景

実は1月頃にGoogleから「NotebookLMにスライド編集機能がリリースされる」というアナウンスがあり、その後プロンプトで画像編集ができるような機能がリリースされました。
「ついにnanobananaで生成された画像が図形に変わって、中のテキストも直接編集できるようになるのかな？」と期待が高まったのですが、今のところ公式ではそこまでの機能は出ておらず、今後も画像は画像としてプロンプトで編集する流れが強そうです。

しかし、NotebookLMを実務で使っていると、 「この画像の中のテキストだけをサクッと書き換えたい！」 とか、 「インフォグラフィックのこのパーツだけをスライドに流用したい！」 という場面が非常に多いですよね。

画像を分解して、中のテキストを認識し、エディタブル（編集可能）な状態にする機能は、絶対に需要があるはず。
そう確信し、元々は「まじん式v4.3」の一部機能として搭載していた 「画像分解機能」 を贅沢に切り出し、 HTMLファイル単体で動くスタンドアロン版ツール として、極限まで使いやすく整えました！

「まじん式を使っていない人でも、もっと多くの人にこの手軽さと便利さを届けたい！」
そんなチームまじんの想いが詰まったツールです。Google公式の標準機能として完璧にリリースされるまでは、やまじんの方で少しずつメンテナンスを続けて分解精度向上と機能追加をしていこうと思っています！

注意点！！
ただ、どうしてもAIやAPIなどの複雑な仕組みは使わずにHTMLのコードだけで無理やり変換を頑張っているので、精度的には他のNotebookLM画像の分解サービスよりも劣りますので、過度な期待はしないようにお願いいたします。『HTMLのコードだけでよくここまで頑張ってるなぁ』という温かい目でご活用いただけると大変嬉しいです。。。！
まじん式v4.3で、すでに利用していただいている方は良くご存知かと思いますが、基本的には同様の仕組みを利用しております。

🌟 『NotebookLM Image Editor』のここがスゴい！

このツール、最大の特徴は 「完全にHTMLとJavaScriptだけで動いている（HTMLファイル1つだけ）」 という点です！

• 完全ローカル処理でセキュリティも安心！
  アップロードした画像やPDFが外部サーバーに送信されることは一切ありません。会社の厳しいセキュリティルールがあっても大丈夫！ 機密情報の含まれる社外秘資料や、競合他社に見せられない企画書 でも、完全にプライベートなローカル環境で安心してご利用ください！

• インストール・環境構築は不要！
  面倒なインストール作業や環境設定は1ミリも不要です。ダウンロードしたHTMLファイルをダブルクリックするだけで、MacでもWindowsでもサクッと変換できます。

• PowerPoint（PPTX）形式で一発ダウンロード！
  分解・編集した要素は、そのままPowerPointスライドとして書き出し可能。普段お使いのPowerPointやGoogleスライドに貼り付けて、さらに自由にレイアウトやデザインをブラッシュアップすることができます！

💡 どんなときに使う？おすすめのユースケース

個人的にも、現在このツールは日々の業務で ものすごく愛用 しています（笑）。

① インフォグラフィックのパーツ流用・再レイアウト

NotebookLMが生成してくれた綺麗なインフォグラフィック画像。「この説明文とアイコンのセット、スライドの一部で使いたいな…」という時、ツールにアップロードするだけで、テキストとイラストに一瞬で分解されます。
必要なパーツだけをコピーして、自分のスライドへペタペタ貼り付けるブラッシュアップ作業が本当に便利になります！

② スライドの一部のテキスト修正

「全体のデザインやレイアウトは最高なのに、文字のフォントや一部の文言だけを変更したい…」という時、ツール上でテキストボックスをダブルクリックしてササッと書き換え。そのままPPTXで保存すれば、デザインの崩れを最小限に抑えて修正が完了します！

分解精度が少し低かったとしても、分解して修正した画像を再生成で利用したり、Googleスライドのブラッシュアップで整えて使うことができるので、とにかく画像をバラバラに編集可能な状態に変換さえできれば意外と整える作業は最近は特に簡単になってきています。

🛠️ 開発のこだわり：試行錯誤で生まれたロジック

「HTMLファイル1枚だけで、どうやってそんな複雑な処理をしてるの？」と不思議に思いますよね。
実は、内部では以下のような 段階的な画像処理と解析 を行っています。

1. テキスト領域の抽出：
   画像解析を行い、「どれがテキストの塊で、どれがイラスト画像か」を機械的に判定します。文字の特徴を数値に置き換えて文字を判別します。

2. 高度なOCR処理：
   抽出したテキスト領域に文字認識をかけ、編集可能なテキストデータに変換します。一般的なOCRの精度は低いので、OCR精度が最大限向上するように画像を加工してOCR処理でテキスト化します。

3. イラスト・画像の要素分解：
   テキスト以外の残った画像を、イラストなどの個別のグラフィック要素として切り出し・分解します。

このロジックは、やまじんが 何千回ものテストパターンと格闘し、絶妙な調整を重ねた結晶 です！その軽やかな使い心地をぜひ体験してみてください！

🛠️ 導入＆使い方は超簡単！たったの3ステップ

GASでもCanvasアプリでもないため、導入は拍子抜けするほど簡単です。

1. ファイルをダウンロード：この記事の最下部にある添付ファイルからHTMLファイルをダウンロードします。

2. ブラウザで開く：ダウンロードしたHTMLファイルをダブルクリックするだけ！

3. ファイルをアップロード：NotebookLMで作ったPDFやインフォグラフィック画像を『PowerPointに変換』ボタンにドラッグ＆ドロップ！（ボタンをクリックしてファイル選択も可能です）

これだけで自動的に分解が始まり、変換が完了したら自動的にPowerPoint形式でダウンロードされます！たった、それだけの簡単機能です。

最初の画面で、『プレビューで表示』を選択すると、PowerPointデータのダウンロード前にプレビュー画面で結果を確認することができます。テキストじゃないところがテキストに誤認識されている場合には、左クリックでイラストに戻すことができます。また、テキストがテキストとして認識されていない場合には、テキストを左クリックで赤い枠で囲み（なるべくギリギリで選択するとOCR精度が高くなります）ボタンを押すとテキスト変換ができます。

🔮 今後のロードマップ

今後は、さらに複雑なレイアウトでも綺麗に切り出せるよう、 「画像分解の精度向上」 を目指してアップデートを続けていきます。

さらに！この要素分解機能については、この後さらに使いやすくしたものを 次期のアップデート「まじん式v4.4」に標準搭載する予定 です！
直接アップロードしてGoogleスライド上で編集ができるようになるという連携機能も用意していますので、ぜひ楽しみにしていてください！

💖 チームまじんからのお願い

もしこのツールを使ってみて「本当に15分の時短になった！」「使ってみて良かった！」と思っていただけたら、開発のモチベーション維持のために、ぜひ以下の応援アクションをお願いします！
やまじんが嬉しさのあまり泣いて喜びます（笑）。

• STEP 1：この記事への 「スキ♡」 をポチッと！

• STEP 2：noteで 「まじん」 をフォロー！

• STEP 3：X（旧Twitter）で「#マジクラ」「#まじん式」をつけて感想を拡散！「こんな風に使ってみたよ！」という感想を教えていただけると開発の励みになります！

これからも皆さんのスキルアップや日々の業務効率化に全力で貢献できるよう、ワクワクするツールやコードをたくさん共有していきます！

どうぞよろしくお願いします！

以上、チームまじんの やまじん でした！

🎁 【マジクラメンバー限定】ツール配布エリア

ファイルをPCに保存し、ダブルクリックして起動するだけで今すぐご利用いただけます！