Gemini 3 Pro Canvas 機能を使ってみたレポート

AI Tips

Gemini 3 Pro Canvas 機能を使ってみたレポート

Google Gemini 3 Proの「Canvas」機能を紹介してみたく思います。
「Canvas」はデータを元にWEBページをソースレベルで構築してくれるという機能です。
このコードが使えるかどうかは別として、初心者の方の学習用データには使えるものだと思うんですね。
もはや、この機能が使えるだけで、初心者でも先生になれると思えるくらいに神機能です。

今回は、前回、弊社のコーポレートコラムにアップした「E-E-A-T(Experience-Expertise-Authoritativeness-Trustworthiness)について考えてみる」の記事部分をWEBページとして生成した内容となります。

Google Gemini 3 Proは無料でも使えるようですが、有料枠と無料枠には違いがあるようです。
利用回数の制限であったり、忙しい時には後回しにされたりするようです。
有料枠というのは、Google workspaceに登録しているかどうか・・・というところでして、Google workspaceをお使いの方は自由に使うことができるようです。
とりあえず、学習用に使うだけでしたら無料枠でも十分使えると思いますので、まずはお試しでやってみることをおすすめしたいかなと思います。

では、本題に入って参ります。

写真で見るGemini 3 Pro Canvas

生成されたコード

まず生成されたコードが以下のデータです。
ドキュメントに書き出していますので、ドキュメントの内容をご覧ください。

上記のコードをそのままコピペしていただき、htmlファイルに貼り付け、そのままサーバーにアップロードすれば表示されることと思います。
学習はここから始まっている感じですね。
中身には動的なデータが入っていますので、動的な見せ方を身に付けたい方でもしっかり学習していただける内容になっているかなと感じました。
(他にも色々リクエストが出来るようですので、色々試し甲斐はある感じですね。)

写真で見るGemini 3 Pro Canvas

1. コンテンツファイルの生成

まずは、Gemini上でコンテンツファイルを生成する必要があります。
以下のキャプチャをご覧ください。
左の赤枠に「.md」ファイルがあります。
その内容が右側の赤枠になります。

Gemini 3 Pro Canvas 機能を使ってみたレポート その1

2. WEBページを作成

次に右上にあるボタン「作成」から「ウェブページ」をクリックします。

Gemini 3 Pro Canvas 機能を使ってみたレポート その2

3. レポートファイルを確認

ウェブページを作成しますと、左側にレポートファイルが生成されました。
レポートファイルを選択しますと、右側にコーディングの内容が出てきました。
この時、コーディングソースの直上に「コード」と「プレビュー」があり、「プレビュー」にチェックが入っている状態になります。

Gemini 3 Pro Canvas 機能を使ってみたレポート その3

4. コードを確認

「プレビュー」の横にある「コード」を選ぶと、生成されたコードそのものを確認することができます。

Gemini 3 Pro Canvas 機能を使ってみたレポート その4

htmlの構成として以下のタグのあり方はちゃんとみておきたいかもしれません。

  • header
  • h1
  • section
  • button
  • h2
  • scriptによって動的に演出されてるタブ

補足

今回、テスト的に利用してみた次第ですが、言わずもがなWEBサイトやHP(ホームページ)というのは、1ページだけで構成されるものではなく、固定型コンテンツページだけでも何ページも作成し、記事ページのような更新型コンテンツを実装するような、動的なサイトの方がマーケティングを継続的に実施するには有益になることが多いです。
広告のためのLP(ランディングページ)に関しては単一ページで構成されることもありますが、それは短期間のスポットキャンペーンでの扱いとなり、継続的なマーケティング施策とは異なります。

また、出力されたコードに、自ら自由にデータを追加したりしてどのように表示されるのかをチェックしたりするといいですね。
兎角、これはゴールではなくスタートでしかないため、Canvasだけで完結させるものではないということを念頭に置いていただければと思います。

まとめ

昨今、AIがあれば何でも出来る的な風潮が強いですが、決してそんなことはなく、AIを利用した成果というのは、AIを利用する人の理解度や器用さに大きく左右されるということがあるだけで、AIだけではどうにもできませんしどうにもなりません。

そのため、Googleの最新画像生成AIと組み合わせて使ったり、コードの内容を理解して利用していかないと、なかなか成果に結びつかないチグハグなWEBサイトになっていくことになります。

ただ、こうやって遊べば遊んだ分だけ、学習したら学習した分だけ身についてくことは間違いないかなと思います。
ぼくもそうですし、名のあるプログラマーさんやエンジニアの著名な方も最初は遊びから入ったはずですので、初心者で何も分からない方でも、まずは遊ばれることをおすすめしたいかなと思います。
そのうちどこかで火がつくんじゃないかなと思いますので、是非試してみてくださいね。

ご不明な点についてはお気軽にご連絡くださいませ。

清水 隼斗

SEMラボラトリー 代表取締役の清水です。基本的にWEBが大好きです。WEBの世界に入って20年が経ちました。SEOやMEO、広告運用や動画運用、これら諸々の実績も数えきれず。ただ、過去のWEBと現在のWEBには違いがありすぎて参考にならないことが多いので、未来に役立つ記事を配信するように心がけています。

関連記事

コメント

この記事へのコメントはありません。

カテゴリー
アーカイブ