GeminiのCanvasでインフォグラフィックを作成する方法！料金やコツ、コピペOKのプロンプトまで紹介

「GeminiのCanvas機能でインフォグラフィックの作り方がわからない」「テキストばかりの資料をもっとわかりやすくしたい」と悩んでいませんか。

Gemini（ジェミニ）のCanvas（キャンバス）機能を使えば、デザインスキルがなくてもインフォグラフィックの作成が可能です。

本記事では、GeminiのCanvas機能でインフォグラフィックを作る手順や役立つプロンプト、注意点などをまとめました。

記事を読めば、テキストだけの資料を一瞬で視覚的な図解に変換する方法がわかります。

GeminiのCanvas機能を活用して、資料作成の時間を大幅に短縮しクリエイティブな作業に集中しましょう。

SHIFT AIでは、ChatGPTやGeminiなどの生成AIを活用して、副業で収入を得たり、昇進・転職などに役立つスキルを学んだりするためのセミナーを開催しています。

また、参加者限定で、「今日から使えるプロンプト100選」「新時代のAI×デザイン活用ガイド」「Nano Banana Pro 徹底解説」など、全12個の資料を無料で配布しています。

「これからAIを学び始めたい」「AIを使って副業収入を得たい」「AIで業務を効率化したい」という方は、ぜひ以下のボタンからセミナーに参加してみてください。

GeminiのCanvasでインフォグラフィックは作成できる？

GeminiのCanvas機能を使えば、インフォグラフィックを作成できます。

入力したデータや文章をもとに、グラフや図解などのインフォグラフィックとして自動で作成するのがGeminiのCanvas機能です。

ただし、Canvas機能で作成したインフォグラフィックは、Canvaのような静的な1枚絵ではありません。

Canvas機能で作成されるインフォグラフィックは、HTML/CSSで構成された動的なWebコンテンツです。

たとえば、以下のようにGeminiのCanvas機能を使って、乗り物の速度比較をグラフで作成してみました。

実際はHTMLとCSSで作成されていて、Geminiに依頼して修正をしたり、コードから直接直したりできます。

GeminiのCanvas機能の使い方については、以下の関連記事をご確認ください。

GeminiのCanvasでインフォグラフィックは無料で作成可能？

GeminiのCanvas機能は、無料で利用できます。

Geminiの無料プランと有料プランの違いは、以下のとおりです。

プラン	月額料金	Canvas利用	利用上限
無料	0円	利用可	制限あり
Google AI Plus	1,200円	利用可	上限引き上げ
Google AI Pro	2,900円	利用可	上限引き上げ
Google AI Ultra	36,400円	利用可	最大上限

GeminiのCanvas機能は、すべてのプランで利用可能です。

ただし、GeminiのCanvas機能を利用するには、選択したAIモデルによって使用量の上限があります。

Geminiの無料プランでは高性能モデル（3.1 Pro）の1日あたりの利用回数に上限があります。

無料プランの場合、使用量の上限に達すると翌日まで高性能モデルが使えなくなるので、注意が必要です。

頻繁にCanvas機能を使ったり、何度も修正を繰り返したりする場合は、有料プランへのアップグレードがおすすめです。

GeminiのCanvas機能でインフォグラフィックの作成を試してみたいなら、無料プランから始めましょう。Geminiの機能や特徴については、以下の関連記事をご確認ください。

GeminiのCanvasでインフォグラフィックを作る手順

GeminiのCanvas機能でインフォグラフィックを作る手順は、以下のとおりです。

1. 情報整理を行う
2. Geminiにログインする
3. チャット入力欄「ツール」から「Canvas」を選択する
4. プロンプトを入力して生成する
5. フィードバックして修正する

GeminiのCanvas機能を使ってインフォグラフィックを作る手順について、以下で詳しく紹介します。

ステップ1：情報整理を行う

GeminiのCanvas機能でインフォグラフィックを作る前に、情報を整理しましょう。

情報整理をせずにGeminiへ丸投げすると、伝えたい内容がぼやけた成果物になりがちだからです。

「何を伝えたいか」「誰に見せるか」「データの優先順位」などをまとめます。

情報整理を済ませておけば、GeminiのCanvas機能で質の高いインフォグラフィックを効率よく作成できます。

ステップ2：Geminiにログインする

Geminiの公式サイトにアクセスして、Googleアカウントでログインします。
＞Gemini公式サイトはこちら

Geminiを利用するには、Googleアカウントが必要です。Googleアカウントを持っていない場合は、作成しましょう。

ステップ3：チャット入力欄「ツール」から「Canvas」を選択する

Geminiの画面を開いたら、チャット入力欄の下にある「ツール」ボタンをクリックします。

「ツール」ボタンをクリックすると、以下のように利用可能な機能の一覧が表示されます。

表示された機能の一覧から「Canvas」を選択します。青い文字で表示されれば、Canvas機能が有効化されています。

ステップ4：プロンプトを入力して生成する

Canvas機能を有効にしたら、インフォグラフィックの内容をプロンプトとして入力しましょう。

プロンプトには、インフォグラフィックに含めたいデータや伝えたい情報を具体的に記載します。

プロンプトを送信すると、GeminiがHTML/CSSベースのインフォグラフィックを自動で作成します。

画面の右側にCanvas（編集画面）が表示され、作成されたインフォグラフィックのプレビューの確認が可能です。

ステップ5：フィードバックして修正する

GeminiのCanvas機能で作成されたインフォグラフィックは、一発で満足のいく仕上がりになることは稀です。

以下のサイクルを繰り返し、満足のいくインフォグラフィックを作成しましょう。

1. 作成
2. 確認
3. 修正プロンプト
4. 再作成

「グラフの色を変えて」「文字を大きくして」など、気になる部分をチャットで指示すればGeminiが修正を反映します。

上記の流れでGeminiのCanvas機能を活用し、効率よくインフォグラフィックを作成しましょう。

Geminiでインフォグラフィックを作る際に役立つプロンプト

Geminiでインフォグラフィックを作る際に役立つプロンプトは、以下のとおりです。

• サイズ・レイアウトを調整するプロンプト
• グラフの種類を指定するプロンプト
• デザインの色味・雰囲気を指定するプロンプト
• 修正指示を出すプロンプト

紹介するプロンプトを活用して、高品質なインフォグラフィックを作成しましょう。

サイズ・レイアウトを調整するプロンプト

GeminiのCanvas機能でサイズやレイアウトを指定するプロンプトを入力すれば、パソコンやスマホに合わせたインフォグラフィックの作成が可能です。

パソコンのサイズやレイアウトに合わせたプロンプトは以下のとおりです。

# あなたの役割
あなたは、情報を視覚的に整理し、一目で内容が理解できるミニマリズム（究極のシンプルさ）を追求する天才インフォグラフィック・デザイナーです。
パソコン画面（16：9）で見た際に、圧迫感がなく、すべての情報が1画面にスッキリと収まるレイアウトを作成してください。

# 厳守事項（文字詰め込み防止）
* テキスト量は、現在のAIが作成する平均的な量の「半分以下」に要約して。
* 説明文は、1項目につき最大2行まで（極力1行）。具体的なエピソードや詳細な解説は削除し、要点のみを箇条書きにする。
* その分、要素間の余白（ホワイトスペース）を大幅に確保し、視認性を最優先する。

# レイアウト構造
* **キャンバスサイズ**: 横長（アスペクト比 16：9）。
* **全体構造**: 上部にヘッダー、その下に「3カラム（三列）」の横並び配置。
* **ヘッダー**: タイトルと、その下に短いキャッチコピー（UPDATE版...など）を配置。
* **3カラム（横並び）**: 3つの要点を左右に並べ、それぞれの項目にアイコン、短い見出し、要約テキストを配置。1画面に収め、縦スクロールを不要にする。

# ここにブログ記事から抽出した「タイトル」や「要点」を入力
【タイトル】初心者必見！ブログで月5万稼ぐ完全ロードマップ
【キャッチコピー】正しい手順でコツコツ続ければ、月5万は見えてくる！
【ステップ1：ブログの立ち上げ（0〜1ヶ月）】
・アイコン：ロケット、または「1」の入った旗
・見出し：環境をサクッと整える

【ステップ2：記事作成＆SEO対策（1〜3ヶ月）】
・アイコン：執筆するペン、または「2」の入ったグラフ
・見出し：読者の悩みを解決

【ステップ3：分析と収益化（3ヶ月以降）】
・アイコン：虫眼鏡と上向き矢印、または「3」の入ったメダル
・見出し：分析・リライト・展開

上記のプロンプトを入力したところ、以下のインフォグラフィックがGeminiのCanvas機能で作成されました。

プロンプトで指定されたミニマリズムが徹底されており、1項目あたりのテキストがとてもシンプルに記載されています。

パソコン画面（16：9）の中で、圧迫感のない「視覚的なゆとり」も再現できました。

続いては、以下のスマホに最適化するプロンプトを入力します。

# あなたの役割
あなたは、スマホでの「一瞬の読みやすさ」を極限まで追求する、天才インフォグラフィック・デザイナーです。
小さな画面でも文字が大きく、ハッキリと目に飛び込んでくる、縦長（9：16）の1カラム（一列）レイアウトを作成してください。

# 厳守事項（横幅の最大活用）
* **左右の余白を最小化**: 左右のパディングやマージンは最小限（画面幅の5%程度）に抑え、アイコンやテキストを画面の横幅いっぱいまで大きく配置して。
* **フォントサイズの最大化**: スマホの小さな画面を想定し、タイトルや重要な数値は「これ以上ないほど大きく」表示して。
* **縦の余白でリズムを作る**: 横に余白を作らない代わりに、セクションごとの「上下」には十分なスペースを空け、スクロールした際の情報区切りを明確にして。

# レイアウト構造
* **キャンバスサイズ**: 縦長（アスペクト比 9：16）。
* **構成**: 「上から下へ」の完全な1カラム構造。
* **視覚誘導**:
1. 冒頭に大きくタイトルを配置。
2. その下に、要点を「アイコン＋大きな見出し＋要約文」のセットで縦に並べる。
3. 各要素は横に並べず、必ず一段ずつ積み重ねること。

#（ここに記事の内容や要点を入力）
【タイトル】初心者必見！ブログで月5万稼ぐ完全ロードマップ
【キャッチコピー】正しい手順でコツコツ続ければ、月5万は見えてくる！
【ステップ1：ブログの立ち上げ（0〜1ヶ月）】
・アイコン：ロケット、または「1」の入った旗
・見出し：環境をサクッと整える

【ステップ2：記事作成＆SEO対策（1〜3ヶ月）】
・アイコン：執筆するペン、または「2」の入ったグラフ
・見出し：読者の悩みを解決

【ステップ3：分析と収益化（3ヶ月以降）】
・アイコン：虫眼鏡と上向き矢印、または「3」の入ったメダル
・見出し：分析・リライト・展開

上記のプロンプトを入力したところ、以下のインフォグラフィックが作成されました。

スマホは画面が狭いため、横に情報が並んでいると見づらいです。

サイズやレイアウトをスマホに最適化するプロンプトにより、上から下へ情報が配置されるインフォグラフィックが作成されています。

グラフの種類を指定するプロンプト

GeminiのCanvas機能でインフォグラフィックを作る際、グラフの種類を指定するプロンプトも効果的です。

円グラフや棒グラフなど使いたいグラフの種類をプロンプトで明確に伝えると、Geminiが意図どおりの図解を作成します。

以下のプロンプトでは、棒グラフを作成するように指示をしています。

# あなたの役割

あなたは、複雑なデータを多角的な視点で可視化する、天才データ可視化デザイナーです。

「量」を比較する棒グラフのインフォグラフィックを作成してください。



# 厳守事項

* **左右の余白を最小化**: 画面の横幅いっぱいを使ってグラフを描画し、文字サイズを最大化して。


# データ内容

以下の情報にもとづいて、両方のグラフを作成してください。

・シロナガスクジラ：約30m
・マッコウクジラ：約20m
・ジンベエザメ：約18m
・ダイオウイカ：約17m 



# レイアウト構造

* **キャンバスサイズ**: 横長（16：9）。

* **ヘッダー**: 「海の大きい動物比較」とタイトルを表示。

上記のプロンプトで以下のインフォグラフィックが作成されました。

シロナガスクジラからダイオウイカまで動物の大きさが「棒の長さ」として表現されていて、一番大きいのがどれかすぐにわかります。

それぞれの動物の種類に合わせたアイコンが設置されているため、視覚的にも親しみやすいインフォグラフィックです。

Geminiでのグラフ作成については、以下の関連記事をご確認ください。

デザインの色味・雰囲気を指定するプロンプト

GeminiのCanvas機能でインフォグラフィックを作る際、色味や雰囲気をプロンプトで指定すると、統一感のあるデザインに仕上がります。

カラーコードを指定すれば、GeminiのCanvas機能でブランドカラーや好みの配色を正確に再現できます。

以下のプロンプトのように、色の役割（背景・見出し・強調）を分けて指示するのがポイントです。

# あなたの役割
あなたは、清潔感と信頼性を重視する、プロのWebデザイナーです。
爽やかで親しみやすく、かつ情報の整理されたインフォグラフィックを作成してください。

# 配色ルールの厳守
以下のカラーコードを厳密に使用して、全体のトーンを統一して。
1. ベースカラー（背景）：#FFFFFF (純白) または #F0F9FF (ごく薄い水色)
- 画面全体を明るく、清潔感のある印象にする。
2. メインカラー（見出し・枠線）：#00AEEF (鮮やかなスカイブルー)
- 最も重要な見出しや、図解のメインパーツに使用。
3. アクセントカラー（強調）：#FF9900 (暖かみのあるオレンジ)
- 「ここがポイント！」や「重要な数値」など、読者の目を引きたい部分にのみ使用。

# デザインの雰囲気
* **全体像**: 柔らかい角丸のボックスや、親しみやすいアイコンを多用して。
* **視認性**: 白背景に対して水色の文字や枠線を使い、アクセントにオレンジを置くことで、一目で重要な情報がわかるようにして。
* **文字**: フォントは読みやすく、少し太めのゴシック体を選択して。

#（ここに図解したい「タイトル」や「要点」を入力）
【タイトル】初心者必見！ブログで月5万稼ぐ完全ロードマップ
【キャッチコピー】正しい手順でコツコツ続ければ、月5万は見えてくる！
【ステップ1：ブログの立ち上げ（0〜1ヶ月）】
・アイコン：ロケット、または「1」の入った旗
・見出し：環境をサクッと整える

【ステップ2：記事作成＆SEO対策（1〜3ヶ月）】
・アイコン：執筆するペン、または「2」の入ったグラフ
・見出し：読者の悩みを解決

【ステップ3：分析と収益化（3ヶ月以降）】
・アイコン：虫眼鏡と上向き矢印、または「3」の入ったメダル
・見出し：分析・リライト・展開

上記のプロンプトで作成されたインフォグラフィックは、以下のとおりです。

GeminiのCanvas機能で作成されたインフォグラフィックは、指示どおりの清潔感がある配色で、優しくて頼もしいデザインになっています。

ステップごとの期間ややるべきことが整理されているので、次に何をすればいいのかが直感的に伝わってきます。

SHIFT AIでは、ChatGPTやGeminiなどの生成AIを活用して、副業で収入を得たり、昇進・転職などに役立つスキルを学んだりするためのセミナーを開催しています。

また、参加者限定で、「今日から使えるプロンプト100選」「新時代のAI×デザイン活用ガイド」「Nano Banana Pro 徹底解説」など、全12個の資料を無料で配布しています。

「これからAIを学び始めたい」「AIを使って副業収入を得たい」「AIで業務を効率化したい」という方は、ぜひ以下のボタンからセミナーに参加してみてください。

修正指示を出すプロンプト

GeminiのCanvas機能で作成したインフォグラフィックを修正する際は、変更したい箇所と変更後のイメージを伝えましょう。

あいまいなプロンプトだと、GeminiのCanvas機能が意図と異なる修正をする場合があります。

以下は、Geminiに修正指示を出す際のプロンプト例です。

# 修正指示
以下の点を修正してください。

1. タイトルのフォントサイズを現在の1.5倍に拡大してください。
2. グラフの配色を、メインカラー（#00AEEF）からダークブルー（#003366）に変更してください。
3. 各セクション間の余白を現在の2倍に広げてください。

上記のプロンプトで修正されたインフォグラフィックは、以下のとおりです。

タイトルのフォントが大きくなり、何について書かれているのかが明確になりました。

全体の線をダークブルーにして、明るい色使いの中にも知的な印象がプラスされた印象です。

GeminiのCanvas機能で納得のいくインフォグラフィックが完成するまで何度でもフィードバックを繰り返しましょう。

GeminiのCanvasで作成したインフォグラフィックの保存方法

GeminiのCanvas機能で作成したインフォグラフィックの保存方法は、以下のとおりです。

• HTML形式のデータで保存
• スクリーンショットで保存
• 社内WikiやWebページへ埋め込んで共有・公開

目的に合った保存方法を選んで、インフォグラフィックを活用しましょう。

HTML形式のデータで保存

GeminiのCanvas機能で作成したインフォグラフィックは、HTML形式のデータとして保存できます。

HTML形式で保存すれば、Webブラウザでいつでもインフォグラフィックを表示できます。

HTML形式で保存する手順は、以下のとおりです。

1. コードをコピーする
2. メモ帳に貼り付けて保存する

GeminiのCanvas機能で出力されたインフォグラフィックの上部にある「コード」タブをクリックします。

ソースコードが表示されるので、すべてのコードを選択してコピーします。

コードタブとソースコードは、以下の画像を参考にしてください。

パソコンの「メモ帳」や「テキストエディタ」を開き、コピーしたコードを貼り付けましょう。

保存する際に、ファイル名を「○○.html」にして保存します。

出力されたコードが「React」などの形式になっていた場合は、Geminiのチャットで「コードをHTML形式に変換して」と伝えましょう。

GeminiのCanvas機能がHTMLファイルとして書き換えてくれます。

スクリーンショットで保存

GeminiのCanvas機能で作成したインフォグラフィックは、スクリーンショットで保存する方法もあります。

スクリーンショットの撮り方は、以下のとおりです。

• Windows：Win + Shift + S
• Mac：Command + Shift + 4

キャンバスの表示を最大化（ズーム機能などを使用）してから撮影すると、高い画質で保存できます。

ブラウザ拡張機能の「GoFullPage」や「FireShot」を使えば、ページ全体のスクリーンショットも撮影可能です。

ただし、スクリーンショットは画質が落ちるため、印刷物や高画質が必要な場面には向いていません。

高画質のインフォグラフィックが必要な場合は、HTML形式での保存をおすすめします。

社内WikiやWebページへ埋め込んで共有・公開

GeminiのCanvas機能で作成したインフォグラフィックは、共有リンクを使って社内WikiやWebページに埋め込めます。

共有リンクの発行手順は、以下のとおりです。

1. 右上にある「共有」ボタンをクリックする
2. 「Canvas用の共有可能な公開リンク」を発行する
3. 表示されたリンクをコピーする
4. 社内Wikiやチャットツール、ブログなどへ貼り付ける

共有リンクを利用する際は、URLを知っている人なら誰でもインフォグラフィックを閲覧できるため注意が必要です。

機密情報や個人情報が含まれていないか、リンクの発行前に確認しましょう。

チャット履歴の削除やサービスの仕様変更によって、共有リンクが無効になる場合があります。

共有リンクは永続的な保管を保証するものではない点も覚えておく必要があります。

GeminiのCanvasでインフォグラフィックを作る際の注意点

GeminiのCanvas機能でインフォグラフィックを作る際の注意点は、以下のとおりです。

• 画像で出力・保存ができない
• コンテンツの品質や正確性に欠ける場合がある
• 著作権や商用利用に関して注意する

注意点を把握したうえで、GeminiのCanvas機能を活用しましょう。

画像で出力・保存ができない

GeminiのCanvas機能で作成したインフォグラフィックは、画像ファイルとして直接ダウンロードできません。

一般的な画像作成AIにはダウンロードボタンが用意されています。

しかし、GeminiのCanvas機能には、ダウンロードボタンが存在しません。

GeminiのCanvas機能で作成されたインフォグラフィックはHTMLコードのため、画像ファイルとしての保存には対応していないからです。

画像として保存したい場合は、スクリーンショットを撮影するか、HTMLコードをブラウザで表示してから印刷機能でPDFに変換するのがおすすめです。

コンテンツの品質や正確性に欠ける場合がある

GeminiのCanvas機能で作成したインフォグラフィックは、品質や正確性に問題が見つかる場合があります。

以下のポイントを確認しましょう。

• グラフの数値に誤りがないか、元データと照合する
• Deep Researchの直後にコードが破損する恐れがある
• 日本語の一部が文字化けや英語表記になるリスクがある

GeminiのCanvas機能が作成したグラフの数値チェックは、特に重要です。

数値の誤りに気づかないままインフォグラフィックを提出すると、信頼を損なうリスクがあります。

著作権や商用利用に関して注意する

GeminiのCanvas機能でインフォグラフィックを作成する際は、著作権や商用利用にも注意が必要です。

以下のポイントを守って、GeminiのCanvas機能を安全に利用しましょう。

• 第三者の著作物（ニュース記事など）を無断で図解化しない
• 社外秘の機密データをプロンプトに入力しない
• 商用利用する場合は、Googleの利用規約を事前に確認する

ビジネスでGeminiのCanvas機能を利用する際は、自社のセキュリティポリシーも確認しましょう。

GeminiのCanvasで資料作成の時間を短縮しよう

GeminiのCanvas機能を活用すれば、インフォグラフィックの作成時間を大幅に短縮できます。

GeminiのCanvas機能でプロンプトを入力すれば、グラフや図解を含んだインフォグラフィックが自動で作成されます。

デザインのスキルがなくても、プロンプトの工夫だけで統一感のあるわかりやすいインフォグラフィックの作成が可能です。

資料作成に時間をかけすぎている人は、GeminiのCanvas機能を活用して戦略立案やクリエイティブな作業に時間を使いましょう。

SHIFT AIでは、ChatGPTやGeminiなどの生成AIを活用して、副業で収入を得たり、キャリアアップで年収を高めたりするノウハウをお伝えする無料セミナーを開催しています。

セミナーでは、主に以下の内容を学習できます。

• AIを使った副業の始め方・収入を得るまでのロードマップ
• おすすめの副業案件と獲得方法
• AIスキルを高めて昇進・転職などに役立てる方法
• 実際に成果を出しているロールモデルの紹介
• これから使うべきおすすめのAIツール

無料セミナーは、AI初心者〜中級者の方を対象としています。

「これからAIを学習したいけど、何から始めていいのか分からない」「AIの独学に限界を感じてきた」という方にとくにおすすめです。

また、参加者限定で、「初心者が使うべきAIツール20選」や「AI副業案件集」「ChatGPTの教科書」など全12個の資料を無料で配布しています。

完全無料で参加できるため、ご興味のある方は、ぜひセミナーに申し込んでみてください。