見出し画像

GeminiのCanvasでウェブページが2分で作れた

GoogleのAIサービスであるGeminiのCanvas(キャンバス)とは、Geminiで生成されたテキスト、コードなどの回答を1つの画面でリアルタイム編集できる非常に便利な機能です。

わたしも記事の作成でよく使用しています。

2025年5月21日、Googleが大規模なアップデートを行いました。その中でもわたしが特に衝撃的だったのは、Canvasのアップデートです。

なんと、ウェブページがたった2分でできた方法でできてしまいました。
ハッキリ言って本当にスゴい…

もともとプロンプトを工夫すればウェブページは作成できていたのですが、今回はワンクリックでできるという絶句ものです。

本記事では、Gemini Canvasでのウェブページの作り方、より魅力的なウェブページにカスタマイズする方法、2.5 Proと2.5Flashどちらのモデルがいいのかまで解説します。

最後まで読めば、今すぐにでもGeminiのCanvasでウェブページを作りたくなっているはずです!

以下の記事では、note×AI×SEOを駆使して最短でnoteを検索上位に表示する10ステップを解説しています。第1章まで(8,000文字以上)無料で読めるので、ぜひご覧ください。



Gemini Canvasでウェブページを作る方法

さっそく、GeminiのCanvasでウェブページを作る方法を2ステップで解説します。
超簡単に作れるので、ぜひ一緒に作業してみてください。

※今回使用したモデルは、Gemini 2.5 Proです。記事後半ではGemini 2.5 Flashとの比較も解説します。

まず公式サイトにアクセスし、Googleアカウントでログインしてください。

次に、画面下部のバーにプロンプト(指示文)を入力します。このとき、「Canvas」の押下を忘れずに!

今回は、以下のプロンプトを入力してみます。

「Canvas」を選択し、プロンプト「Gemini 2.5 Flash、Gemini 2.5 Proの違い、概要、特徴、用途をそれぞれ教えてください。」を入力している画面
「Canvas」を選択

プロンプトを実行すると、以下のような画面になります。この状態で、画面右上の青い「作成」ボタンをクリックしてください。

Canvas画面右上の青い「作成」ボタンをクリックする画面

「ウェブページ」をクリックすると、コードが自動生成されます。

「ウェブページ」をクリックする画面
コードが自動生成されている様子
コードが自動生成されている様子

2分ほどで完成したウェブページがこちらです。LPのようなシングルページが生成されました!
(全体を見たい方はこちら

完成したウェブページ
主要比較チャートの画像
「主な用途」「比較表」の画像

このレベルのウェブページを作るには最低でも数時間はかかるところを、GeminiのCanvasはワンクリック&わずか2分で作成してしまいました…

本当にスゴすぎる!!!

さらに、個人的にポイントが高いのは、トップページにちゃんとカテゴリ分けされているところです。

トップページのカテゴリ分けされたメニュー

該当の箇所への遷移もスムーズですね。


Gemini Canvasのウェブページを編集

Gemini Canvasは、作成したウェブページをカスタマイズすることも可能です。

たとえば、「おすすめ診断を作ってください」と追加でプロンプトを入れてみます。

「おすすめ診断を作ってください」を追加でプロンプト入力
「おすすめモデル診断」が追加された画面
「おすすめモデル診断」が追加された
「🚀 Gemini 2.5 Pro がおすすめです!
最高のパフォーマンス、複雑なタスク処理、高度な推論能力を重視するあなたには、Proモデルが最適です。詳細を見る →
」のキャプチャ
おすすめモデルの結果表示

ラジオボタン式でポチポチしていくと、ちゃんと自分におすすめのモデルが表示されました!

ちゃんとカテゴリにも追加されて、動作も問題ありません。

さらに、今度は「このウェブページをグラレコ風に作ってください」と入力してみます。

「このウェブページをグラレコ風に作ってください」と追加プロンプトを入力
グラレコ風に作成されたウェブページ

手書きっぽさがあり、グラレコ風になっています!

今回追加で入力したプロンプトは、Canvasでウェブページを作成したときと同じく、いずれも2〜3分という驚異的なスピードで完成しています!

ぜひ、いろいろと試してみてください^^


ウェブページは2.5 Pro、2.5 Flashどちらで作るべき?

Gemini Canvasでウェブページを作る場合、Gemini 2.5 ProとGemini 2.5 Flashのどちらのモデルがいいのか、疑問が湧いてくる方もいると思います。

個人的には、回答精度が高く情報量が充実している2.5Proがおすすめです。
ただ、以下のように2.5Flashでもウェブページは作成できます。
(全体を見たい方はこちら

Gemini 2.5 Flashで生成したウェブページ
Gemini 2.5 Flashで生成したウェブページ
Gemini 2.5 Flashで生成したウェブページの「詳細比較」
Gemini 2.5 Flashで生成したウェブページ「おすすめ診断」

こちらは元から「おすすめ診断」が実装されてますね笑

2.5 Proと違い、2.5 Flashは利用回数制限が緩和されています。気軽にたくさん試せることがメリットですが、回答は短めです。

高精度な回答や長文のレポートが欲しければ、2.5Proがおすすめです。必然的に内容が充実し、よりリッチなウェブページができるでしょう。ただし、Gemini無料ユーザーは利用制限が少し厳しめなことに留意してください。

Gemini 2.5 Proの特徴の画像
Gemini 2.5 Proの特徴

自身の状況に合わせて、使いわけてみてくださいね。


Gemini Canvasでウェブページを作ってみよう!

本記事では、Canvasでウェブページを作る方法、カスタマイズ方法、Gemini 2.5 Proと2.5 Flashの比較を解説しました。

今回の大幅アップデートにより、GoogleのGeminiのCanvasはわずか2分で誰でも簡単に、魅力的なウェブページを作成できるようになりました。

Gemini Canvasは、他にもインフォグラフィック、音声概要生成、クイズが作成できます。今後のGoogleのアップデートも盛りだくさんで、待ちきれないですね。

以下の記事では、note×AI×SEOを駆使して最短でnoteを検索上位に表示する10ステップを解説しています。第1章まで(8,000文字以上)無料で読めるので、ぜひご覧ください。


いいなと思ったら応援しよう!

みんご|AI業務効率化 もしよければ応援お願いします✨いただいたチップは活動費にあて、より良い記事にして還元します!