CanvasでPDFの報告書を作ってみた【Gemini 2.5 Pro】

## はじめに

生成AIの登場によって、日々の調査業務にAIを活用する方が増えているのではないでしょうか。私もその一人です。

AIを使って集めた情報を調査報告書としてまとめる際、特に表などを用いて分かりやすく整理しようとすると、意外と手間がかかることがありますよね。

しかし、**GeminiのCanvas機能**を使えば、情報の調査から報告書として見やすいレイアウトでの出力まで、一連の作業を効率的に行うことができるんです！

今回は例として、「ここ1週間の注目すべきAI関連技術のニュース」をテーマに、Canvas機能を使って調査報告書の体裁に整える過程をご紹介します。

## 最終的なアウトプットイメージ

まずは、どのような報告書が出来上がるのか、最終的なイメージを先にご覧ください（一部抜粋）。
![pdf_output2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4073298/5c044224-3f66-4fa3-bd1c-e1f6ba243942.png)
PDFが添付できないのでスクショにはなりますが、いい感じにまとまっているのがわかるかなと思います。

## 調査報告書作成の手順

それでは、具体的な手順を見ていきましょう。

### ステップ1: DeepResearchで情報を収集する

まず、Geminiの**DeepResearch機能**を使って、最新のAI関連ニュースを収集します。
今回は、**Gemini 2.5 Pro** を使用しました。

以下のようなプロンプトを実行します。

```text
ここ1週間の注目すべきAI関連技術のニュースを調査し、社内に報告したいです。
以下の観点をもとに、調査報告書として情報をまとめてください。

# 観点
- 最大10件のニュースをピックアップしてまとめる
- さらに、特に注目すべきニュースについて2つを決め、さらに詳細にまとめてほしい
- 生成AIだけでなく、AI技術全般を対象として欲しい
- 参照情報が分かるようにしてほしい
```

すると、このようにリサーチ結果が出力されます（一部抜粋）。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4073298/1f85ebba-ac92-46d6-a0f0-d9e054fc3aaf.png)

この結果をそのままGoogleドキュメントなどにエクスポートしてPDF化することも可能ですが、レイアウトが少しシンプルで、情報が伝わりにくいかもしれません。

### ステップ2: Canvas機能でレイアウトを初期調整する

そこで、**Canvas機能**の出番です。
収集した情報を基に、より見やすいレイアウトにするため、以下のプロンプトを実行します。

```text
表もつかって、人間が理解しやすいようなレイアウトでHTMLを組んで、報告書としてまとめてください。
```

その出力結果がこちらです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4073298/34f541a5-d877-4252-9eac-24ca5919c7a6.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4073298/eb2378b0-937d-4d1e-8671-ea3a946cfcf0.png)

表などが使われ、最初のテキストベースの結果よりは見やすくなりました。
しかし、もう少し人間が作成したような、洗練されたデザインにしたいところです。

### ステップ3: Canvas機能でさらにレイアウトを改善する

さらに見やすい報告書を目指して、少し抽象的なお願いをしてみます。

```text
ちょっとシンプルすぎるので、もっと人間だったらどういうレイアウトにするか考えて作り直して
```

一見、曖昧な指示のように思えるかもしれませんが、Geminiは意図を汲み取って、以下のように改善してくれました。

#### 改善点1: タイトルにアイコンが追加され、視認性アップ！

**Before:**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4073298/ae43fb47-aaa1-4fbb-9e58-b9a5ef06acf3.png)

**After:**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4073298/bcdcce7e-b482-4685-8de4-78e2eef8a55e.png)

タイトル部分にアイコンが付くだけで、ぐっと見栄えが良くなりました。

#### 改善点2: キーポイントがより明確に！

**Before:**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4073298/da0eab76-dd3b-4b21-86ce-1f6953fec4a9.png)

**After:**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4073298/54249e96-e1f0-49b3-bcdd-99135c4f93de.png)

特に注目すべき情報が、背景色や枠線で区別され、分かりやすくなりました。

#### 改善点3: 箇条書きが洗練されたデザインに！

**Before:**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4073298/f274faac-a78c-4a2e-81b6-26771b86af49.png)

**After:**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4073298/ba6e2a20-ccf7-46ea-87b3-c227427f8aba.png)

単なるテキストの羅列だった箇所が、情報を区切ったカードのようなデザインになり、視覚的に理解しやすくなっています。

これでひとまず完成です！

## HTMLからPDFへの出力について

Canvas機能で生成されたHTMLは、画面右側のプレビューエリアに表示されます。
「これをそのままブラウザの印刷機能でPDFとして保存して完了！」・・・と、スムーズにいけば嬉しいのですが、残念ながら現在のCanvasのプレビュー機能では、直接その操作でPDFとして保存することは難しいようです。

開発者の方なら「HTML内に `window.print()` を実行するボタンを仕込めば良いのでは？」と思われるかもしれません。私も試してみましたが、Canvasのプレビュー環境（おそらくiframeの制約によるものと考えられます）では、この方法もうまく機能しませんでした。

そのため、一手間かかりますが、以下の手順でPDF化を行います。

1.  **HTMLコードのコピー:** まず、Canvasが生成したHTMLコード全体をコピーします。
2.  **HTMLファイルとして保存:** コピーしたコードをテキストエディタ（メモ帳、Visual Studio Codeなど）に貼り付け、拡張子を`.html`（例: `report.html`）としてファイルに保存します。
3.  **ブラウザで開く:** 保存したHTMLファイルを、お使いのウェブブラウザ（Google Chrome, Microsoft Edgeなど）で開きます。
4.  **ブラウザの印刷機能でPDF化:** ブラウザで表示された内容を、ブラウザのメニューから「印刷」を選択し、送信先（またはプリンター）で「PDFとして保存」を選び、任意の場所に保存します。

これで、見やすいレイアウトの報告書をPDF形式で作成することができました！

## まとめ

今回は、GeminiのDeepResearch機能とCanvas機能を活用して、AI関連技術のニュース調査から報告書のレイアウト作成までを行う手順をご紹介しました。

特にCanvas機能は、**抽象的な指示でもある程度意図を汲み取り、見やすいレイアウトを提案してくれる**点が非常に便利だと感じました。
何度か指示を繰り返すことで、より自分のイメージに近いアウトプットを得ることも可能です。

皆さんも、調査業務やレポート作成の際に、GeminiのCanvas機能を試してみてはいかがでしょうか。