Gemini のCanvasでインフォグラフィックを使った資料作成！説明資料はHTMLで作る時代！？

インフォグラフィックとは

Geminiのインフォグラフィックとは、Geminiへのプロンプトに添付したデータや、情報をインターネットから収集し、グラフなどを織り交ぜてHTMLコードを作成して可視化してくれる機能です。

以下はサンプルとしてGoogle CloudのAgentSpaceという新機能について調査したデモンストレーション動画です。簡単なプロンプト入力からデータ集計まで約2分かかっていますが、見事にわかりやすく作成してくれました。
※2分の動画なので最終形を見たい方は1分35秒ぐらいまでスキップしてください。

今回は機能説明なのでCanvasからインフォグラフィックを選択していますが、このように調査をし、調査後の資料をまとめるような使い方であればDeep Researchをオンにしてインフォグラフィックを選択しても良いと考えています。
ただ、Deep Research後にインフォグラフィックを作成しようとすると正しく回答が返ってこない(明らかにコードが壊れてる)場合があります。その場合はまた翌日に再度最初からやり直すなどしてもらえれば動くこともありますので、時間をおいて試してみてください

また、明らかにHTMLコードが異常な表示をしている状態で完了している場合、その後のプロンプトで追加で「4:3のアスペクト比に収まるようにして、項目ごとに1ページずつ表示されるように修正して」と実行すると正常に戻ったりもしますのでぜひ試してみてください。
※実際に1ページずつ遷移するように変更する例はこのあとにも紹介します

次はこの機能を使って簡単なデータでデータ分析を行ってみます。

元のデータ

元のデータは私が投稿したブログのタイトルとURLとPV数です。

※この表もGemini のサイドパネルを使用してタイトルとURLとトータルPV数を抜き出すように指示して作成しました

インフォグラフィックによるトレンド分析

Gemini にこのスプレッドシートの内容をコピーしてプロンプトを投げました。
※スプレッドシートをそのまま添付すると正しく読み込んでくれなかったため、プロンプトで手入力しています。
プロンプトを投げる際には、プロンプト入力ボックスにある「Canvas」をオンにしています。
※ブログのURLなどで長くってしまうので途中で削っています

また、プロンプトもかなり適当な内容であることも記憶しておいてもらえればと思います。この適当なプロンプトでも十分なものが出来上がってると思います。

結果が、テキストで出てくるのでここから右上の「作成」をクリックして「インフォグラフィック」をクリックします。
※インフォグラフィックをクリックするだけで勝手に動き出します

最終的にHTMLコードが表示されるのでコードを保存して開いた結果が以下になります。文字がほぼ読めないかと思いますが、記載されていることは正しいことばかりでした。

今回は1ページのWebサイトにしましたが更に「4:3のアスペクト比に収まるようにして、項目ごとに1ページずつ表示されるように修正して」といったプロンプトを追加で実行する「前へ」「次へ」ボタンで1ページずつ切り替えができるようになりますので説明資料としてもわかりやすくなると思います。

ここまでグラフィカルに見やすく資料化してくれるのでこのまま他の人への説明でも使えるようになると思いませんか？

GeminiがここまでわかりやすいHTMLページを作成してくれるのであれば、今後はプレゼン資料を PowerPoint や Google スライド ではなくHTMLで作る日も来るのではないでしょうか。

また、HTMLであれば後で編集することも可能です。完全に全て画像で生成されるのではないので、細かい点は自分で編集できるのも良い点です。

私は、インフォグラフィックで作成したグラフなどの情報をGoogleスライドに貼り付けて、説明資料や提案資料を作成していますが、これだけでも、かなり業務効率が大幅に向上しています。

まとめ

Geminiの新しい機能「インフォグラフィック」を使うと、データを基にしたグラフ付きのWebページ形式の資料を簡単に作れるようになりました。情報やブログのアクセス数などをGeminiに入力するだけで、自動でトレンドを分析したり、グラフや表が作られ、わかりやすい資料が完成します！

資料作りが楽になるだけでなく、Geminiは細かく指示しなくても内容を理解してくれるので、作業時間の短縮にもつながるのではないでしょうか！

最後まで読んでいただきありがとうございました。

◆Google Workspaceに関することは、ぜひソフトバンクの窓口又は担当営業までご相談下さい

関連サービス