📒

NotebookLMのInfoGraphics生成を安定させたかったメモ

に公開
プロンプトエンジニアリング
NotebookLM
Claude Code
infographics
idea

前置き

皆様、NotebookLM、使っていますでしょうか。
https://notebooklm.google.com/
先日、今更ながら少し触ってみまして、InfoGraphicsの生成機能に度肝を抜かれました。

ClaudeCodeのInfoGraphics
例）ClaudeCodeの公式ホームページからInfoGraphicsを生成
「え！？こんなのが一瞬で作れるの？すごい！」と、本当にびっくりです。
なので今回は、NotebookLMのInfoGraphicsについての記事を書いてみようかなと思います。

NotebookLMとは

念の為最低限の説明だけ記載しています。

公式の説明

https://support.google.com/notebooklm/answer/16164461?hl=ja&co=GENIE.Platform%3DDesktop#

NotebookLM は、アイデアを練ったり、整理したりできるように設計された AI 搭載のリサーチ アシスタントです。NotebookLM を使用すると、次のことが可能になります。

  • PDF、ウェブサイト、YouTube 動画、音声ファイル、Google ドキュメント、Google スライドを簡単にアップロードしたり、新しいソースを入手したりする。
  • テキスト、グラフ、画像、音声などのさまざまなコミュニケーション方法と多くの言語で、Gemini の高度な推論能力と対話能力を体験する。
  • ノートブックとチャットして、ソースに基づいた根拠のある情報を取得する（情報にはインラインで引用が明記されており、正確性、透明性、信頼性が担保されている）。
  • ソースを、学習ガイド、概要説明資料、音声概要、マインドマップなどのわかりやすい形式に変換する。

（2026年1月時点）

ものすごく砕いた言い方をすると、自分が追加したソース（テキスト、ファイル、url、動画、etc）だけをコンテキストとし、それについてチャットで質問したり、関連するメディアを生成したりできます。

具体的な例

社内のチャットボット

社内の質問に対する回答などをソースとして追加しておき、社員が誰でも使えるチャットボットして扱う。
社内チャットボットの例

UnityのMCPの比較

例えばこんな感じで
UnityのMCP比較画面
3つのUnityのMCPのGitHubのURLを追加し、比較してもらったりできます。

InfoGraphics

生成してみる

本題です、今回は、何度も擦ってる
https://github.com/zawascript/UnityDebugSheetHierarchy
をソースに追加して、NotebookLMの右側のStudioパネルから、インフォグラフィックスボタンを押し数分待つと・・・
デフォルト生成結果1回目
UnityDebugSheetHierarchyをソースとして追加した場合

なんということでしょう、匠の手によって美しいインフォグラフィックスが生成されました。
試しにもう一回やってみます。
デフォルト生成結果2回目
なんとなくの雰囲気は似ていますが、ぜんぜん違うInfoGraphicsが生成されましたね。
デフォルトの状態で生成すると、だいたいこのようなデザインのものが生成されます。

カスタムプロンプトを使う

InfoGraphicsを生成する際に、✏️マークを押してカスタムプロンプトを指定することができます。
試しに、「ポップなデザインで」とだけ入力して生成してみます。
カスタムプロンプト
ポップなデザインを指定してみる

ポップな一回目

ポップなデザイン生成結果1回目

ポップな二回目

ポップなデザイン生成結果2回目

両者とも「ポップなデザイン」ですが、構成が大きく違う結果です。
このように、出力の安定しないInfoGraphicsを、できるだけテンプレート化して方向性を安定させたい、というのが今回の趣旨になります。

詳細なカスタムプロンプトを使う

スタイル、レイアウト、強調ポイント、対象読者まで、細かく指定してみます。

prompt
## 概要                                                                
  UnityDebugSheetHierarchyを、Unity初心者や一般開発者にもわかりやすく、親
  しみやすいビジュアルで紹介するインフォグラフィックスを作成してください 
  。                                                                     
                                                                         
  ## スタイルとデザイン                                                  
  - カラースキーム: 明るく楽しい色調                                     
    - メインカラー:                                                      
  明るいオレンジ（#FF9500）、フレッシュグリーン（#4CD964）               
    - アクセントカラー: 明るい黄色（#FFCC00）、スカイブルー（#5AC8FA）   
    - 背景: 明るいグレー（#F5F5F5）または白ベース                        
  - デザインテイスト:                                                    
    - フレンドリーで親しみやすい雰囲気                                   
    - 手描き風のイラストやアイコンを活用                                 
    - 柔らかい角丸のボックスやカード                                     
    - 遊び心のあるレイアウト                                             
  - 視覚要素:                                                            
    - 大きくわかりやすいアイコン（虫眼鏡、階層ツリー、歯車など）         
    - シンプルなイラスト（スマートフォン、ゲームコントローラーなど）     
    - 吹き出しや矢印で説明を補足                                         
  - フォント: 丸ゴシック系、読みやすく柔らかい印象                       
                                                                         
  ## レイアウト構成                                                      
  - 情報の配置: 非対称で動的、視線が自然に流れる配置                     
    - 上部: キャッチーなタイトルとイラスト                               
    - 中央: 主要機能を大きなカードで3つ配置（斜めや重なりで動きを出す）  
    - 下部: 導入ステップと「今すぐ試そう！」のCTA                        
  - セクション構成:                                                      
    1. ヘッダー:                                                         
  「ゲームのデバッグがもっと楽になる！」などキャッチーな見出し           
    2. 問題提起:                                                         
  「ビルド後にバグ発見…でもUnityエディタが使えない😱」吹き出しで共感     
    3. ソリューション紹介:                                               
  「そんな時にUnityDebugSheetHierarchy！」大きく明るく                   
    4. 3大機能カード:                                                    
       - 🔍 ヒエラルキーを見る                                           
       - 🎯 オブジェクトを探す                                           
       - ⚙️ プロパティを変える                                           
    5. できること一覧: アイコンとテキストで簡潔に箇条書き                
    6. かんたん導入: 3ステップで説明（大きな数字アイコン付き）           
    7. まずは試してみよう: GitHub URLとQRコード                          
  - 余白: ゆったりとした余白で圧迫感を減らす                             
                                                                         
  ## 強調ポイント                                                        
  - 最重要要素:                                                          
    - 「ビルド後のデバイスでも使える」便利さ                             
    - 「たった3ステップで導入」の手軽さ                                  
    - 「34種類以上のコンポーネント対応」の幅広さ                         
  - 視線誘導:                                                            
    - トップの大きなイラスト→問題提起の吹き出し→ソリューション→機能カード
  →導入ステップの自然な流れ                                              
    - 矢印や番号でガイド                                                 
  - ハイライト手法:                                                      
    - 数値は大きく、明るい背景の丸や四角で囲む                           
    - 重要な単語に蛍光ペン風の下線や背景色                               
    - アイコンは大きく配置して目を引く                                   
    - 「無料」「簡単」「便利」などのタグを付ける                         
                                                                         
  ## 対象読者                                                            
  - 読者層:                                                              
  Unity初心者〜中級者、学生、個人開発者、ゲーム開発に興味がある人        
  - 専門知識レベル: Unityの基本的な用語（GameObject、Component、Hierarchy
  など）は理解している                                                   
  - 読むシチュエーション:                                                
    - SNSでシェアされた画像として                                        
    - GitHub READMEのトップ画像として                                    
    - ブログ記事や紹介記事の図解として                                   
    - 「便利そう！」と思ってもらい、試してもらうきっかけ作り             
                                                                         
  ## 重点的に伝えるべき内容                                              
  1. **共感する問題**:                                                   
     - 「スマホでテストしてたらバグ発見！でもどのオブジェクトが原因かわか
  らない…」                                                              
     - 「エディタなら簡単に確認できるのに…」                             
  2. **解決策**:                                                         
     - UnityDebugSheetHierarchyを使えば、ビルド後のアプリでもヒエラルキー
  が見られる！                                                           
  3. **3つの便利機能**:                                                  
     - 🔍 ヒエラルキー表示: ゲーム実行中にシーンの構造を確認             
     - 🎯 オブジェクト検索: 名前で素早く目的のオブジェクトを発見         
     - ⚙️ リアルタイム編集:                                              
  Transform、Physics、UIなどのプロパティをその場で変更                   
  4. **こんな人におすすめ**:                                             
     - モバイルゲーム開発者

結果

一回目

カジュアルテンプレート生成結果1回目

二回目

カジュアルテンプレート生成結果2回目

内容やデザインに統一性が生まれました。これらのテンプレートを増やしていくことで、ある程度安定した画像を生成できそうです。

カスタムプロンプト生成スキルの作成

InfoGraphicsには、一日の生成数に厳し目の制限があるので、毎回プロンプトでガチャをしていると、すぐ使い切ってしまいます。
なので、「InfoGraphicsに渡すカスタムプロンプトを作るスキル」を作って、いくつかのテンプレートから選択できるようにしてみます。（上のプロンプトも実はこれを使いました）

このスキルは、Claude Code用のカスタムスキルとして実装しており、Claudeと対話しながら制作しました。今回、存在を忘れていて、skill-creatorのスキルを使わずに作りました。

スキル自体はまた別の記事で紹介しようと思いますが、大枠の流れは下記です。

  1. 自然言語もしくは、/notebooklm-prompt xxxxで起動
  2. 「InfoGraphics」か「Slide」か選ぶ
  3. テンプレートを選ぶ
  4. カスタムプロンプトが生成される
やりとり
❯ /notebooklm-prompt https://github.com/zawascript/UnityDebugSheetHierarchy  

NotebookLM用のカスタムプロンプトを生成します。                                                      
まず、どのStudioタイプを使用するか確認させてください。                                              
                                                             
☐ Studio type

どのNotebookLM Studioタイプを使用しますか？                                                           
                                                                                                     
❯ 1. InfoGraphics                                                                                     
     インフォグラフィックスを生成（静的な情報を視覚的に一覧表示）                                     
  2. Slide                                                                                            
     プレゼンテーションスライドを生成（ページ単位で情報を展開）                                       
  3. Type something.                                                                                  
                         

 ☐ 生成方法                                                                                           
                                                                                                      
プロンプトの生成方法を選択してください                                                                
                                                                                                      
❯ 1. テンプレートから選択 (推奨)                                                                      
     用途に応じた5つのテンプレートから選択。素早く適切なプロンプトを生成できます                      
  2. 完全カスタマイズ                                                                                 
     スタイル、レイアウト、強調ポイントなどを詳細に設定。独自のデザイン要件がある場合に最適           
  3. Type something.   

 ☐ テンプレート                                                                                       
                                                                                                      
どのテンプレートを使用しますか？                                                                      
                                                                                                      
❯ 1. 技術・詳細重視                                                                                   
     ダーク基調、テクニカルな配色、情報密度高め、図表・グラフ重視。対象：エンジニア、研究者、技術者   
  2. ビジネスプロフェッショナル                                                                       
     クリーンでモダン、青・グレー基調、左右対称レイアウト、余白多め。対象：ビジネスパーソン、エグゼク 
     ティブ                                                                                           
  3. カジュアル・親しみやすい                                                                         
     明るい色調（オレンジ、黄色、緑）、フレンドリー、非対称で動的。対象：一般ユーザー、学生、初心者   
  4. ミニマリスト・シンプル                                                                           
     白基調、モノトーン、最小限の装飾、重要情報のみ。対象：デザイン重視、洗練された印象を求める層     
  5. Type something.
生成されたプロンプト
## 概要                                                                
  UnityDebugSheetHierarchyの技術的特徴と機能を、Unity開発者向けに詳細かつ
  視覚的に伝えるインフォグラフィックスを作成してください。               
                                                                         
  ## スタイルとデザイン                                                  
  - カラースキーム: ダークベース（#1a1a1a背景）に、Unityカラー（#00FFFF, 
  #FF6B35）とテクニカルなアクセントカラー（#00D9FF, #4CAF50）を使用      
  - デザインテイスト:                                                    
  モダンでテクニカル、コード・開発ツールを想起させるUI/UX                
  - 視覚要素: アイコン、図解、階層構造図を多用し、情報密度を高める       
  - フォント:                                                            
  等幅フォント（コード部分）とサンセリフ（説明文）の組み合わせ           
                                                                         
  ## レイアウト構成                                                      
  - 情報の配置: 上部にヘッダー（ツール名・説明）、中央に主要機能の3カラム
  構成、下部に技術仕様と導入方法                                         
  - セクション構成:                                                      
    1. ヘッダー: ツール名、一行説明、GitHubスター/ライセンス表示         
    2. 主要機能:                                                         
  Hierarchy可視化、検索機能、コンポーネント操作の3つを並列配置           
    3. サポートコンポーネント:                                           
  34+のコンポーネントタイプをカテゴリ別にグリッド表示                    
    4. アーキテクチャ: ページ構造をフロー図で表現                        
    5. 導入方法: manifest.json記述例をコードブロックで表示               
    6. 要件: Unity/UnityDebugSheetバージョン、ライセンス情報             
  - 余白: 情報量を重視しつつ、各セクション間に明確な区切りを設ける       
                                                                         
  ## 強調ポイント                                                        
  - 最重要要素:                                                          
    - 「ランタイムでのヒエラルキー操作」が最大の特徴であることを強調     
    - 「ビルド後のデバイス上でも動作」する点を目立たせる                 
    - 「34+コンポーネント対応」の網羅性                                  
  - 視線誘導: 左上（ツール名）→中央（3大機能）→下部（導入方法）の        
  Z字パターン                                                            
  - ハイライト手法:                                                      
    - 数値（34+、Unity 2020.3+）は大きく、色付きで表示                   
    - コードスニペットは背景を暗くして強調                               
    - アイコンとラベルで機能を直感的に理解できるようにする               
                                                                         
  ## 対象読者                                                            
  - 読者層:                                                              
  Unity開発者（特にモバイル/コンソール開発者）、テクニカルアーティスト   
  - 専門知識レベル:                                                      
  Unity中級者以上（Hierarchy、Component、UnityDebugSheetを理解している） 
  - 読むシチュエーション: GitHub                                         
  README閲覧、技術選定、導入検討時のクイックレビュー                     
                                                                         
  ## 重点的に伝えるべき内容                                              
  1. **問題提起**: ビルド後のデバイスでHierarchyViewが使えない課題       
  2. **ソリューション**:                                                 
  UnityDebugSheetの拡張として、ランタイムでヒエラルキー操作を実現        
  3. **主要機能**:                                                       
     - Hierarchy可視化: シーン内のGameObject構造を表示                   
     - 検索機能: 名前でGameObjectを素早く検索                            
     - コンポーネント操作:                                               
  34+のコンポーネントタイプのプロパティを閲覧・編集                      
  4. **技術的利点**:                                                     
     -                                                                   
  Transform、Physics、UI、Audio、Animationなど幅広いコンポーネント対応   
     - カスタムComponentDebugPage作成でさらに拡張可能                    
  5. **導入の容易さ**: manifest.jsonへの追加だけで導入可能               
                                                                         
  ## 避けるべき要素                                                      
  - 過度に装飾的なグラフィック（技術的信頼性を損なう）                   
  - 明るすぎる背景色（目が疲れやすく、コード表示に不向き）               
  - 抽象的すぎるアイコン（具体的な機能が伝わらない）                     
  - 長文の説明（箇条書きと図解で簡潔に）                                 
                                                                         
  ## 追加指示                                                            
  - GitHubリポジトリのREADMEスクリーンショットがあれば、それを参考にUI要 
  素を配置                                                               
  - コードスニペット（manifest.json記述例）は必ず含める                  
  - MITライセンスであることを明記                                        
  - UnityDebugSheetへの依存関係を明確に示す（単体では動作しない点を誤解さ
  せない）

結果

「技術・詳細重視」のテンプレートでの生成結果です。

一回目

技術・詳細重視テンプレート生成結果1回目

二回目

技術・詳細重視テンプレート生成結果2回目

なんだかかっこいいデザインになりました。
強調したい項目はClaudeがよしなに書いてくれていますが、これらをユーザーが入力することである程度安定したInfoGraphicsが生成できそうです。

一応「ミニマリスト・シンプル」も載せておきます

一回目

ミニマリスト・シンプルテンプレート生成結果1回目

二回目

ミニマリスト・シンプルテンプレート生成結果2回目

ちょっと味気ないですね

まとめ

更に一歩先に進めるとしたら、NotebookLMのMCPサーバー等を使い、スキルでカスタムプロンプト生成~InfoGraphicsの生成まで一気通貫して行うような仕組みも考えられると思います。

「AIに渡すプロンプトをAIが作る」というのは、このケースだけでなく音楽生成や動画の生成などでも有用なケースが多いです。この手の作業は人間がゼロから文章を作るより、AIで雛形を作る -> 人間がレビューする、修正を行う、というフローが個人的には最適なのかなと思っています。

InfoGraphicsは強力な機能ですが、生成数の制限が厳し目なので、少しでも精度を上げるためカスタムプロンプトを有効に活用しましょう、という話でした。

Discussion