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つ：
GeminiにもCanvas機能がある - ClaudeのArtifactsと同様にコードプレビューが可能
「Canvas機能で」と指示するのがコツ - この一言を添えるだけ
他の人の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ツール比較 #業務効率化
