【2026年最新】Gemini 3.1 Proのキャンバス機能でできること完全ガイド（

 

2026年2月19日、Googleが最新AIモデル「Gemini 3.1 Pro」をリリースしました。

前モデルのGemini 3 Proから推論性能が2倍以上に向上し、SVGアニメーションの生成やキャンバス機能でのWebアプリ作成が、驚くほど実用的なレベルに達しています。

 

 

この記事を読めば、Gemini 3.1 Proの進化ポイント・キャンバス機能の使い方・実用的なアプリの作成方法まで理解できます。プログラミング不要でAI搭載Webアプリが作れる具体的な手順を、実例付きで解説していきます。

 

現在動画編集中です…しばらくお待ちください！

• 

  YouTube

• 

  TikTok

• 

  X

• 

  Instagram

Gemini 3.1 Proとは？前モデルからの進化ポイント

 

Gemini 3.1 Proは、2026年2月19日にGoogleがリリースした最新のAIモデルです。

前モデルのGemini 3 Proは2025年秋にリリースされ、コーディング能力やCLIツールなどで話題になりました。今回の3.1 Proでは、さらに大きな進化を遂げています。

 

Gemini 3.1 Proの3つの進化

 

 

特に注目すべきは、キャンバス機能を使ったSVGアニメーション生成のクオリティです。以前のGemini 3では「それっぽい」レベルだったものが、3.1 Proではそのまま実用できるレベルにまで引き上げられています。

 

キャンバス機能の使い方 ― SVGアニメーションを作ってみよう

 

Geminiのキャンバス機能とは、左側のチャット画面と右側のリアルタイムプレビュー画面が一体になったコーディング環境です。

ClaudeのArtifacts機能と似ていますが、Gemini 3.1 Proの高い生成精度と組み合わせることで、より実用的なアウトプットが得られます。

 

キャンバス機能の起動方法

step
1Geminiアプリにアクセス

ブラウザで gemini.google.com にアクセスし、Googleアカウントでログインします。

 

 

step
2モデルをProに切り替え

画面右下の生成モードから「Pro」を選択し、Gemini 3.1 Proモードに切り替えます。

 

 

step
3ツールからキャンバスを選択

「ツール」の項目をクリックし、「Canvas」を選択します。これで左にチャット、右にプレビューが表示される画面構成になります。

 

 

step
4プロンプトを入力して生成開始

作りたいものをテキストで入力するだけで、右側のプレビュー画面にリアルタイムで結果が表示されます。

 

 

SVGアニメーションの生成テスト

 

実際に「ピカチュウのSVG画像を生成してください」と入力してテストしてみました。

 

Gemini 3 vs 3.1 Proの比較

 

 

さらに、ローディングアニメーションも作成してみました。「待ち時間を表現するようなローディングのアニメーションをSVG形式で作成して」と入力するだけで、タップ時やページ読み込み時に使えるアニメーションが生成されます。

 

動画編集や画像編集で「ちょっとしたアニメーション素材が欲しい」というシーンで、わざわざ素材サイトを探す必要がなくなります。

 

「Gemini機能を追加」で簡単にAI搭載Webアプリを作成

 

今回のアップデートで最も面白いのが、キャンバスの右下に追加された「Gemini機能を追加する」ボタンです。

作成したSVGアニメーションやWebアプリに、ワンクリックでAI機能を搭載できます。従来はGemini APIを呼び出してWebアプリ開発をする必要がありましたが、この機能によりプログラミング知識がなくてもAI搭載アプリが作れるようになりました。

 

実例1：SVGアニメーションジェネレーター

https://gemini.google.com/share/c7459f273fc6

 

先ほど作ったローディングアニメーションに「Gemini機能を追加」ボタンを押し、テキスト検索からアニメーションを生成するWebアプリに発展させました。

 

 

キーワードを入力するだけで、欲しい素材のアニメーションを作り出せるツールが、数回のやり取りで完成します。

 

実例2：AI搭載ToDoリスト

https://gemini.google.com/share/8cc9e1869ac0

 

ToDoリストを作成し、Gemini機能を追加したところ、各タスクにAIマークが搭載されました。

例えば「カレーの材料の買い物」というタスクをAIで分析すると、単に食材をリスト化するのではなく、「冷蔵庫の確認」→「スーパーで購入」→「調理準備」のように、自分が気づかないステップまで細分化してくれます。

 

タスクの抜け漏れを防ぐ実用的なツールとして、仕事でもプライベートでも活用できます。

 

実例3：見出しジェネレーター

https://gemini.google.com/share/7358690c7a63

 

ブログやYouTubeのタイトル案を考える「見出しジェネレーター」も作成できます。キャッチフレーズのアイデア出しに便利です。

 

 

実例4：生成AIの仕組みを可視化するアプリ

 

生成AIがテキストをどのように生成しているのか、そのプロセスを視覚的に理解できるアプリも作れます。

例えば「ロボット」というテキストの後に、どの単語が何%の確率で続くのかを表示します。「は」が61%、「が」が20%、「を」が10%といった形で、次の単語の予測確率を可視化してくれます。

 

 

2〜3文のプロンプトだけでこうした教育用アプリが作れるため、ITに詳しくない方でも、解説コンテンツの質を大幅に引き上げることが可能です。

 

共有機能でアプリをシェアできる

 

キャンバス機能で作成したWebアプリは、共有機能を使って他のユーザーとシェアすることができます。

便利なアプリが作れたら、チームメンバーやSNSのフォロワーに共有するといった使い方も可能です。AIがここまで身近に使えるようになったことで、自分だけのツールを作って活用する時代が到来しています。

 

まとめ｜Gemini 3.1 Proでキャンバス機能がさらに実用的に

 

この記事では、Gemini 3.1 Proの進化ポイントとキャンバス機能を使ったWebアプリ作成の実例を紹介しました。

 

本記事のポイント

 

まずはGeminiアプリでキャンバス機能をオンにして、「簡単なSVGアニメーションを作って」と入力してみてください。

数秒で結果が表示され、そのクオリティの高さに驚くはずです。今後Gemini 3.1 ProのCLIツールなどがリリースされれば、さらに面白い活用法が広がりそうです。

 

 

LINE友だち登録して情報Get

 

 

こちらの動画もおすすめ

おすすめAIツール

おすすめ動画編集ソフト

Filmora15を使ってみる

 

本ブログ「ルーティンラボ」では、他の記事で様々なAIやI Tに関するツールについて紹介しています。

他にもITスキルを高めてキャリアアップや副業の役立つ情報の発信もしています。ぜひチェックしてみてください。

▶︎他の記事も読んでみる

▶︎ AIツールを使った解説した記事はこちら

 

• 

  YouTube

• 

  TikTok

• 

  X

• 

  Instagram