Gemini Canvasの使い方と5つの活用事例を解説【SNS・ブログ向け】

2025年3月23日2025年3月28日

この記事は、下記のYouTube動画内で紹介したプロンプトの紹介となります。

目次（クリックでジャンプできます）

グラレコ風のインフォグラフィックHTML作成プロンプト

AIによる回答をそのままインフォグラフィックにするプロンプト

使用方法

プロンプトを貼り付ける時に実行すること

上部の「## テーマ」内のメインテーマ、関連キーワードに知りたい内容を入れる
もし「作成日」「作成者」が不要な場合は、「コンテンツ要素 (Content Elements)」にある「6. 作成日・作成者:」欄をすべて削除してください。

キャンバス内のコードで実行すること

一番下の「作成日」「作成者」に任意の日付や名前を入れる

Canvasのコードとは、以下の「コード」をクリックします。

次にコードの画像の部分を直接変更します。

出力されるデザインはランダム性が高いです。

もし好みのデザインが出ない方は、

AIっぽい少し暗いデザインにして

〇〇のようなデザインにして欲しい

などリクエストしてみてください。

基本的にすべてチャットでリクエストでOKです。

プロンプト（右上にコピーボタンがあります）

# 超ハイクオリティなグラフィックレコーディング風インフォグラフィック作成指示

## テーマ (Theme)
*   **メインテーマ:** ”●●ここにテーマを入れる●●”
*   **関連キーワード:** "●●ここにメインテーマの何を知りたいかキーワードを入れる●●","●●ここにメインテーマの何を知りたいかキーワードを入れる●●"

## あなたの役割 (Role)

あなたは、熟練したグラフィックデザイナーであり、視覚的に魅力的で情報を効果的に伝えるインフォグラフィックの作成を専門としています。特に、AI関連の手描きのグラフィックレコーディングのスタイルをデジタル形式で再現することに長けています。

## ミッション (Mission)

与えられたテーマに関する情報を、手描きのグラフィックレコーディングのようなスタイルで表現した、直感的で理解しやすいインフォグラフィックを作成してください。

## 出力形式 (Output Format)

HTML (ブラウザで表示可能な形式)

## 詳細なデザイン指示 (Detailed Design Instructions)

### 全体レイアウト (Overall Layout)
*   **アスペクト比:** 16:9 (ワイドスクリーン)
*   **カラム構造:** 3カラム (コンテンツを3つの列に分割)
*   **縦長禁止:** 絶対に縦長のレイアウトにしないでください。情報を水平方向に展開してください。横幅は100%
*   **線の活用:** 必要に応じてセクションを分ける立体的な枠線や横線を入れてください
*   **全体的なスタイル:** キャンバスに手描きで図解したような、グラフィックレコーディングのスタイルを模倣してください。
*  **背景や枠線・文字などのデザイン:** AIっぽい近未来を連想させるデザイン

### コンテンツ要素 (Content Elements)

1.  **タイトル (Title):**
    *   **位置:** インフォグラフィックの最上部、中央に配置。
    *   **スタイル:** 15字以内のキャッチーで目を引くタイトルを付けてください。
    *   **フォント:** メイリオ (Meiryo)
    *   **強調:** 他のテキストよりも大きく、**太字**で表示してください。

2.  **見出し (Headings):**
    *   **フォント:** メイリオ (Meiryo)
    *   **スタイル:** 大きめの文字で表示。
    *   **アイコン:** 各見出しの内容に最も適したアイコンを付けてください。
        *   **アイコンのスタイル:** カラフルなアイコンを使用。
        *   **アイコンのソース:** 著作権フリーのアイコンリソース (例: Material Icons, iconmonstr) から選択してください。
            *   Material Icons: [https://fonts.google.com/icons](https://fonts.google.com/icons)
            *   iconmonstr: [https://iconmonstr.com/](https://iconmonstr.com/)
            *   または、その他の適切な著作権フリーのアイコン

3.  **箇条書きと説明 (Bullet Points and Descriptions):**
    *   **フォント:** 手書き風フォント
    *   **スタイル:** 各見出しの下に、箇条書きで情報を提示。箇条書きにはそれぞれ簡潔な説明文を作成してください。
    *   **重要ワード:** 色を変更し、太字と下線で強調。
    *   **視覚要素の追加:** 情報を視覚的に表現するために、シンプルな表や付箋または吹き出し（口語体でポイントを解説）などを積極的に取り入れてください。ただし、視覚要素は見出しにつき１つまで。
    *   **強調:** **太字**で表示してください。

4.  **情報の配置 (Information Placement):**
    *   以下の順序で情報を配置してください(必要に応じて要素を省略可)。
        1.  左上
        2.  左下
        3.  中上
        4.  中下
        5.  右上
        6.  右下

5.  **まとめ (Conclusion):**
    *   **位置:** インフォグラフィックの下部。
    *   **スタイル:** 全体の要点を簡潔にまとめてください。
    *   **フォント:** メイリオ

6.  **作成日・作成者:**
    *   **位置:** インフォグラフィックの最下部右側。
    *   **スタイル:** 小きめの文字で表示。
    *   **条件:** **必ず西暦で本日の年月日**にしてください。
    *   **出力例:** 2025年◯月△日　作成者：リマレレ🤖
    *   **フォント:** メイリオ

### 色と背景 (Colors and Background)

*   **背景:** グラデーションカラーにしてください。。
*   **背景の禁止色:** 白色または白色に近い色は使用禁止。
*   **文字の禁止色:** 黒色または黒色に近い色は使用禁止。背景とのコントラストを考慮して見やすくしてください。
*   **カラーパレット (Color Palette):** 以下のカラーコードを参考に、インフォグラフィック全体で使用する色を選択してください。必要に応じて、これらの色を調整・追加しても構いません。

<palette>
<resources>
    <color name="ai-core-deepblue">#00008B</color>
    <color name="ai-core-electricblue">#7DF9FF</color>
    <color name="ai-core-magenta">#FF00FF</color>
    <color name="ai-core-white">#FFFFFF</color>

    <color name="ai-data-start">#00FFFF</color>
    <color name="ai-data-mid1">#00BFFF</color>
    <color name="ai-data-mid2">#1E90FF</color>
    <color name="ai-data-end">#4169E1</color>
     
    <color name="ai-random-1">#8A2BE2</color>
    <color name="ai-random-2">#00FF7F</color>
    <color name="ai-random-3">#FFD700</color>
    <color name="ai-random-4">#FF69B4</color>

    <color name="cyberpunk-dark">#101010</color>
    <color name="cyberpunk-neon-pink">#FF00AA</color>
    <color name="cyberpunk-neon-blue">#00FFFF</color>
    <color name="cyberpunk-accent">#00FF00</color>

</resources>
</palette>


## 追加の指示(Additional Instructions)

*   **明確性と簡潔性:** 情報を最も効果的に伝えるために、デザイン要素 (色、アイコン、フォントサイズ、配置) を戦略的に使用してください。
*   **視覚的な魅力:** グラフィックレコーディングの手描き感を保ちつつ、デジタルならではの洗練されたデザインに。
*   **著作権:** 使用するすべての画像、アイコン、フォントが著作権フリーであることを確認してください。

自分の文章をインフォグラフィックにするプロンプト

使用方法

自分の文章を用意する。

下記のプロンプトを貼り付ける

## 情報元 (Theme)の●●●●部分に用意した文章を挿入する。

※このプロンプトには「情報元の文章を一字一句変更しないように」という指示を入れています。

もし「作成日」「作成者」が不要な場合は、下記のプロンプト内「コンテンツ要素 (Content Elements)」にある「6. 作成日・作成者:」欄をすべて削除してください。

プロンプト（右上にコピーボタンがあります）

超ハイクオリティなグラフィックレコーディング風インフォグラフィック作成指示

## 情報元 (Theme)
---
●●●●
---

## あなたの役割 (Role)

あなたは、熟練したグラフィックデザイナーであり、視覚的に魅力的で情報を効果的に伝えるインフォグラフィックの作成を専門としています。特に、AI関連の手描きのグラフィックレコーディングのスタイルをデジタル形式で再現することに長けています。

## ミッション (Mission)

# {## 情報元}の文章を一字一句変更せず、手描きのグラフィックレコーディングのようなスタイルで表現した、直感的で理解しやすいインフォグラフィックを作成してください。

## 出力形式 (Output Format)

HTML (ブラウザで表示可能な形式)

## 詳細なデザイン指示 (Detailed Design Instructions)

### 全体レイアウト (Overall Layout)
*   **アスペクト比:** 16:9 (ワイドスクリーン)
*   **カラム構造:** 3カラム (コンテンツを3つの列に分割)
*   **縦長禁止:** 絶対に縦長のレイアウトにしないでください。情報を水平方向に展開してください。横幅は100%
*   **線の活用:** 必要に応じてセクションを分ける立体的で魅力的な枠線や横線を入れてください
*   **全体的なスタイル:** キャンバスに手描きで図解したような、グラフィックレコーディングのスタイルを模倣してください。
*  **背景や枠線・文字などのデザイン:** AIっぽい近未来を連想させるデザイン

### コンテンツ要素 (Content Elements)

1.  **タイトル (Title):**
    *   **位置:** インフォグラフィックの最上部、中央に配置。
    *   **スタイル:** 15字以内のキャッチーで目を引くタイトルを付けてください。
    *   **フォント:** メイリオ (Meiryo)
    *   **強調:** 他のテキストよりも大きく、**太字**で表示してください。

2.  **見出し (Headings):**
    *   **フォント:** メイリオ (Meiryo)
    *   **スタイル:** 大きめの文字で表示。
    *   **アイコン:** 各見出しの内容に最も適したアイコンを付けてください。
        *   **アイコンのスタイル:** カラフルなアイコンを使用。
        *   **アイコンのソース:** 著作権フリーのアイコンリソース (例: Material Icons, iconmonstr) から選択してください。
            *   Material Icons: [https://fonts.google.com/icons](https://fonts.google.com/icons)
            *   iconmonstr: [https://iconmonstr.com/](https://iconmonstr.com/)
            *   または、その他の適切な著作権フリーのアイコン

3.  **箇条書きと説明 (Bullet Points and Descriptions):**
    *   **フォント:** メイリオ (Meiryo)
    *   **スタイル:** 各見出しの下に、箇条書きで情報を提示。箇条書きにはそれぞれ簡潔な説明文を作成してください。
    *   **重要ワード:** 色を変更し、太字と下線で強調。
    *   **視覚要素の追加:** 情報を視覚的に表現するために、シンプルな表や付箋または吹き出し（口語体でポイントを解説）などを積極的に取り入れてください。ただし、視覚要素は見出しにつき１つまで。
    *   **強調:** **太字**で表示してください。

4.  **情報の配置 (Information Placement):**
    *   以下の順序で情報を配置してください(必要に応じて要素を省略可)。
        1.  左上
        2.  左下
        3.  中上
        4.  中下
        5.  右上
        6.  右下

5.  **まとめ (Conclusion):**
    *   **位置:** インフォグラフィックの下部。
    *   **スタイル:** 全体の要点を簡潔にまとめてください。
    *   **フォント:** メイリオ (Meiryo)

6.  **作成日・作成者:**
    *   **位置:** インフォグラフィックの最下部右側。
    *   **スタイル:** 小きめの文字で表示。
    *   **条件:** **必ず西暦で本日の年月日**にしてください。
    *   **出力例:** 2025年◯月△日　作成者：リマレレ🤖
    *   **フォント:** メイリオ
    *   **強調:** **太字**で表示してください。

### 色と背景 (Colors and Background)

*   **背景:** グラデーションカラーにしてください。。
*   **背景の禁止色:** 白色または白色に近い色は使用禁止。
*   **文字の禁止色:** 黒色または黒色に近い色は使用禁止。背景とのコントラストを考慮して見やすくしてください。
*   **カラーパレット (Color Palette):** 以下のカラーコードを参考に、インフォグラフィック全体で使用する色を選択してください。必要に応じて、これらの色を調整・追加しても構いません。

<palette>
<resources>
    <color name="ai-core-deepblue">#00008B</color>
    <color name="ai-core-electricblue">#7DF9FF</color>
    <color name="ai-core-magenta">#FF00FF</color>
    <color name="ai-core-white">#FFFFFF</color>

    <color name="ai-data-start">#00FFFF</color>
    <color name="ai-data-mid1">#00BFFF</color>
    <color name="ai-data-mid2">#1E90FF</color>
    <color name="ai-data-end">#4169E1</color>
     
    <color name="ai-random-1">#8A2BE2</color>
    <color name="ai-random-2">#00FF7F</color>
    <color name="ai-random-3">#FFD700</color>
    <color name="ai-random-4">#FF69B4</color>

    <color name="cyberpunk-dark">#101010</color>
    <color name="cyberpunk-neon-pink">#FF00AA</color>
    <color name="cyberpunk-neon-blue">#00FFFF</color>
    <color name="cyberpunk-accent">#00FF00</color>

</resources>
</palette>

## 追加の指示(Additional Instructions)
*   "**"の文字は出力禁止。重要なワードであれば色を変えたり太字＆下線で強調してください。
*   **明確性と簡潔性:** 情報を最も効果的に伝えるために、デザイン要素 (色、アイコン、フォントサイズ、配置) を戦略的に使用してください。
*   **視覚的な魅力:** グラフィックレコーディングの手描き感を保ちつつ、デジタルならではの洗練されたデザインに。
*   **著作権:** 使用するすべての画像、アイコン、フォントが著作権フリーであることを確認してください。