Geminiにもあった！ClaudeのArtifactsと同じ「Canvas」機能を今日初めて知った話

こんにちは！YaroTechです。

今日、他の方のAI活用を見学する機会があったのですが、そこで衝撃の発見がありました。

GeminiにもClaudeのArtifactsと同じような機能がある！

その方は間接部門の業務効率化アプリをGeminiで作成していて、最後に「Canvas機能でアプリを作成して」と指示したら、その場でアプリがプレビュー表示されたんです。

「あっ、これClaudeのArtifactsと同じだ！」

普段Geminiも使っているのに、この機能を全く知りませんでした。同じように知らない方も多いのではないでしょうか？

今日は、GeminiのCanvas機能について、ClaudeのArtifactsとの比較も交えてご紹介します！

※見出し画像のプロンプトは一番下におまけで公開中！

🖥️ 実行環境

検証環境:

• Google Gemini（Advanced / 無料版）

• Claude Desktop（Windows 11 Pro 25H2 / ARM64）

比較対象: Claude Artifacts

🎯 この記事で得られること

• GeminiのCanvas機能の基本的な使い方

• ClaudeのArtifactsとの違い

• 今すぐ試せる簡単なプロンプト例

• どちらを使うべきかの判断基準

📊 Canvas機能とは？

GeminiのCanvas機能は、コードを書いてその場でプレビュー表示できる機能です。

ClaudeのArtifactsと同様に：

• HTMLコードを即座に実行

• CSSでスタイリング

• JavaScriptで動きを追加

といったことが、会話画面の中で完結します。

🚀 実際に試してみよう

試してみるプロンプト（コピペOK）

以下のプロンプトをGeminiに送ってみてください：

シンプルなカウンターアプリを作成してください。
- ＋ボタンと−ボタン
- 現在の数字を表示
- 背景は薄いグレー

Canvas機能でプレビューしてください。

ポイント: 最後に「Canvas機能でプレビューしてください」と指示するのがコツです。

もっとシンプルに試すなら

Hello Worldを表示するHTMLを作成して、Canvas機能でプレビューしてください。
背景は青、文字は白で大きく表示。

これだけでOK！数秒で結果が表示されます。

🔍 Claudeアーティファクトとの比較

| 項目                 | Gemini Canvas                  | Claude Artifacts |
|---------------------|------------------------------------|-----------------------|
| 起動方法          | 「Canvas機能で」と指示 | 自動で判断         |
| HTML/CSS/JS | ○                                        | ○                         |
| React               | 要確認                               | ○                         |
| Mermaid図       | 要確認                               | ○                         |
| ダウンロード   | 要確認                               | ○                         |
| 無料版              | 要確認                               | ○（制限あり）   |

使い分けのポイント

Geminiが向いている場面:

• すでにGeminiで会話している時

• DeepResearchなど他のGemini機能と組み合わせる時

Claudeが向いている場面:

• Reactコンポーネントを作りたい時

• より複雑なアプリケーションを作る時

• Artifactsの自動判断に任せたい時

💡 今日の学び

他の人のAI活用を見る価値

今回の発見は、自分一人では絶対に気づけませんでした。

• 普段使っているツールにも知らない機能がある

• 他の人の使い方を見ると新発見がある

• 「Canvas機能で」という一言が鍵だった

AI活用は個人で黙々とやりがちですが、たまには他の人の使い方を見る機会を作ると、思わぬ発見があります。

🔗 関連記事

• 衝撃！ChatGPT・Claude無料版は知識検索に使えない？Gemini圧勝の理由

  • Day127でGeminiの強みを検証しています

• 10分で作った神アプリ、消えちゃった...→でも大丈夫！Imagine完全ワークフロー

  • Day85でClaudeのArtifacts活用ワークフローを紹介

• 4つのAIでExcel分析対決！同じ依頼で見えた驚きの違いと「幻のデータ200件事件」

  • Day104で4つのAI（Claude/ChatGPT/Copilot/Gemini）を徹底比較

📝 まとめ

今日のポイントは3つ：

1. GeminiにもCanvas機能がある - ClaudeのArtifactsと同様にコードプレビューが可能

2. 「Canvas機能で」と指示するのがコツ - この一言を添えるだけ

3. 他の人のAI活用を見ると発見がある - 知らない機能に気づける

普段使っているツールでも、まだまだ知らない機能があるものですね。

🎨 おまけ：見出し画像作成プロンプト

以下のプロンプトをChatGPTの画像生成で使用：

詳細なアニメの美意識の画像を作成してください。表情豊かな瞳、なめらかな網掛けセルの色使い、はっきりした線画を使用します。アニメのシーンに典型的な身ぶりと雰囲気で、心情と登場人物の存在を強調してください。

下記条件のnote見出し画像をサイズは横長で作成してください。サイズは必ず横長で作成してください。
## 🎨 見出し画像案

### デザインコンセプト
- **背景**: Google青からAnthropic橙へのグラデーション
- **メインビジュアル**: 
  - 左側：Geminiロゴ/アイコン
  - 右側：Claudeロゴ/アイコン
  - 中央：輝くコードプレビュー画面
- **テキスト要素**: 
  - 上部: 「発見！」
  - 中央: 「Gemini Canvas」
  - 下部: 「= Claude Artifacts?」
- **装飾**: キラキラ、発見エフェクト、イコール記号

### 作成手順
1. スライドサイズ（1536×1024px）
2. 青→橙のグラデーション背景を設定
3. 左右にAIロゴアイコンを配置
4. 中央にコード画面のイラストを配置
5. テキストを3段構成で追加
6. YaroTechロゴを右下に12ptで控えめに配置

#YaroTech #Gemini #GoogleGemini #Canvas #コードプレビュー #Artifacts #Claude比較 #AI活用 #プログラミング #生成AI #AIツール比較 #業務効率化