マーケターが知っておきたいAI

「チャットで指示するだけ」 Gemini「Canvas」で作成した実用ツール5選と社内共有術

Googleの生成AI「Gemini」のCanvas機能で何ができる?コード不要で作れる原稿チェッカーなど5つの実用例と、業務を効率化する社内配布の手順をわかりやすく解説。

寺田昇平[執筆]

9月10日 7:05

Googleの生成AIであるGeminiには「Canvas」という機能があります。この機能を使うと、AIと対話しながら文章やプログラミングコードなどを同じ画面上で直接編集・推敲ができます。コードを書くのはAIなので、こちらは日本語で指示を出すだけです。

本記事では、自分でコードを1行も書かずにCanvasでどこまでのものが作れるのか、5つの例で見ていきます。「Canvasでこんなことができるのか」と知っていただき、ここで挙げたものに限らず、何か試してみる機会が増えればうれしいです。

今回紹介するのは、次の5つです。

  • QRコード生成器
  • 原稿チェッカー(文字数・文体の混在・二重敬語・NGワードの検出)
  • LP比較アナライザー(自社と競合のLPを並べて差分を出す)
  • 画像alt文の一括生成
  • アンケート自由回答の分類

① QRコード生成器 ── 1文でどこまで出てくるか

まずは、比較的シンプルなものから作ってみます。あわせて、Canvasをどう使うのかの流れもここで見ていきます。Canvasは、入力欄のツール一覧から選んで使います。

Geminiのメニューから「Canvas」を選択する。コードの記述・文章の作成・スライドの作成に対応している


選んだうえで指示を出すと、チャットの右側に作業スペースが開き、そこに成果物が組み上がっていきます。今回頼んだのは、この1文だけです。

プロンプト例

ユーザーがURLを入力すると、そのQRコードを生成するウェブアプリを作ってください

入力欄で「Canvas」を選び、作りたいものを1文で伝える

入力欄の右側では、モデルを選べます。ここでは「Pro」を選んでいます。どこまでの完成度を求めるかにもよりますが、ツールを作る場合は、比較的高度なモデルを選んでおくほうが無難です。生成が終わると、右側の作業スペースにアプリが組み上がります。

左のチャットで指示を出すと、右の作業スペースにアプリが組み上がる。この時点ではURL欄は空の状態

入力欄、生成ボタン、QRの表示エリア、ダウンロードとコピーのボタン。ひととおり揃った状態で出てきます。配色やレイアウトも含め、デザインについては一言も指定していません。あとは、URLを入力して生成ボタンを押すだけです。

URLを入力して生成ボタンを押すと、その場でQRコードが表示される。画像のダウンロードもできる

できあがったものは、このままチャット上でやり取りしながら、機能を足したり直したりできます。たとえば、こんな指示を続けてみてください。

  • 「画像のサイズを選べるようにして」
  • 「URLをまとめて貼って、一括で生成できるようにして」

指示は日本語のままで構いません。コードを触る必要はありません。なお、このあと②以降で載せるプロンプトは、「こういった指示から始めます」という例です。そのままでなくて構いません。実際には、扱うデータの形式や画面への要望まで書き足したほうが、狙いに近いものが返ってきます。

ただし、一度に複数の指示をしないほうが確実です。1つ指示をして動作を確かめ、また指示を1つ足す。この進め方なら、どこかが崩れたときに原因がすぐわかります。

作る上での考慮点

作り始める前に、次の2点だけ押さえておいてください。

  • 同じ指示を出しても、返ってくるものが毎回同じとは限りません。AIがその場でコードを書くため、実行するたびに構成や見た目が変わります。ここに載せた画面も、そのまま再現されるわけではないと考えてください。
  • できあがったものが実際に使えるかを必ず確かめてください。QRコードであれば、生成したものをスマートフォンで読み取って、意図したURLが開くかどうかまで確認しておくと安心です。動いているように見えても、中身が正しいとは限りません。

② 原稿チェッカー ── 公開前の確認を1人で回す

プロンプト例

文章を貼ると、文字数を数えて、文体の混在や二重敬語、指定したNGワードを検出するツールを作ってください

原稿チェッカー。原稿を貼ると、文字数・文体の混在・二重敬語・登録したNGワードが同時に出る

文字数(記号込み・記号抜き)、行数、段落数、原稿用紙換算に加えて、3種類のチェックが動きます。

  • 文体チェック:「です・ます調」と「だ・である調」が混ざっていないか。混在している場合、どちらの文なのかまで一覧で出ます
  • 二重敬語チェック:「おっしゃられる」のような重複を拾います
  • NGワードチェック:カンマ区切りで登録した語を拾います。図では「絶対に」「業界No.1」「完全な」を登録しています。

検出した箇所は、下部の本文プレビューで色分けして表示されます。どこを直せばいいかを探し直す必要がありません。チェックの内容は、あとから足せます。自社サービス名の表記ルール、広告表現で避けたい言葉、必須キーワードのチェックなど、自社独自の表記ガイドラインをそのままツールに組み込めるのが、自分で作る最大の利点です。

機械的に確認できる部分については、担当者が1人で回せる状態になります。

③ LP比較アナライザー ── 自社と競合を並べて差分を出す

プロンプト例

自社LPと競合LPのスクリーンショットをアップロードすると、訴求内容の違いを項目ごとに比較して、改善案まで出してくれるツールを作ってください

LPの比較は、やること自体は決まっています。キャッチコピー、ファーストビューの訴求、CTAの文言と配置、価格の見せ方、想定ターゲットなど、比較したい項目を決めて、両方を並べて、差分を拾っていきます。やることはさほど難しくありませんが、画面を行き来しながら項目ごとに書き出していく作業は時間がかかります。でも、Canvasを使えば、この一連の作業をまとめて任せられます。

自社LPと競合LPのスクリーンショットをアップロードする。商材ジャンルとターゲットも渡せる

縦長のLPは分割して撮り、複数枚をまとめて読み込ませます。商材ジャンルとターゲットを先に伝えておくと、比較の観点がそちらに寄ります。

出力された比較表。項目ごとの差分に加えて、競合にあって自社にない要素と自社の優位点まで整理される

出てくるのは項目別の比較表です。そのあとに「競合にあって自社にない要素」と「自社の優位点」が並び、最後に改善提案が優先度順で出ます。比較表はTSVでコピーできるので、そのままスプレッドシートに貼れます。

  • リニューアル前に、競合との差分を洗い出す
  • 広告のLPを出し分けている場合に、どちらの訴求が厚いかを整理する
  • 制作会社への依頼前に、直したい箇所を項目立てて渡す

④ 画像alt文の一括生成 ── 後回しになりがちな作業を任せる

プロンプト例

複数の画像をまとめて読み込むと、それぞれにalt属性用の説明文を生成してくれるツールを作ってください

画像のalt属性は、アクセシビリティ上必要なものであり、検索エンジンが画像の内容を理解する手がかりにもなります。ただ、1枚ずつ書いていく必要があるため、後回しになりやすい作業でもあります。

画像alt文の一括生成ツール。サイトの種類と文体を選び、画像をまとめて読み込ませる

画像をドラッグ&ドロップで読み込ませると、

まとめて20枚まで扱えます。先に渡せる設定は3つ
  • サイトの種類(ECサイト、メディアなど)
  • 文体(簡潔にするか、詳しめにするか)
  • サイトやページの文脈(「AI関係の書籍を紹介するサイトに掲載する画像です」といった補足)

同じ画像でも、載せる場所によって適切なalt文は変わります。文脈を先に渡しておくと、出てくる文面が実際に使えるものに近づきます。

生成結果。alt案と詳細説明に加えて、装飾画像か情報画像かの判定とその理由まで出る

出力は表の形です。alt案は80字以内で文字数が表示され、その場で直接直せます。注目したいのは装飾判定です。alt属性は、意味を持つ画像には説明を入れ、飾りの画像には空のaltを入れるのが原則です。この判断を1枚ずつ人がやるのは骨が折れますが、ここでは判定とその理由まで出してくれます。仕上がったら、CSVで書き出すか、HTMLスニペットを一括でコピーできます。

  • サイト内の画像を棚卸しして、altが空のものをまとめて埋める
  • 記事の公開前に、使用した画像のalt文を一括で用意する
  • 生成された文面を確認して、必要なものだけ手で直す

読み込んだ画像はAIに送られるので、扱う画像の内容には注意してください。画面には「生成結果はAIによる提案です。公開前に内容の正確性をご確認ください」という注記も出ます。最終判断は人が持つ前提のツールです。

⑤ アンケート自由回答の分類 ── AIの判断を組み込む

プロンプト例

アンケートの自由回答を貼ると、感情とカテゴリで分類して集計してくれるツールを作ってください

アンケート自由回答の分類ツール。感情比率・カテゴリ別ランキング・クロス集計表まで自動で組み上がる

自由回答を貼り付けると、1件ずつに感情(ポジティブ/ネガティブ/中立)とカテゴリが付き、集計まで済みます。カテゴリは自分で指定することも、AIに発見させることもできます。後者では、回答の中身を読んで「接客・サポート」「利用料金」「操作性・UI」といった軸を提案してきます。

自由回答の集計は、人が読んで1件ずつタグを付けていく形になりがちで、件数が増えるほど時間もかかります。分類の下書きまでを任せられると、確認と手直しから始められます。結果はCSVで書き出せるので、既存のレポートにそのまま組み込めます。

作ったものを、社内に共有する

同じ作業を毎回チャットで頼むこともできますが、その都度それなりに長い指示を打ち直すことになりますし、返ってくる形も少しずつ変わります。一度ツールの形にしておけば、指示は中に固定されるので、誰が使っても同じ手順で動きます。社内に展開していくときは、この安定感があるかどうかで扱いやすさが変わってきます。自分用に作ったツールは、そのまま社内に配れます。

Canvas画面の右上にある共有ボタンから、「Googleドライブで共有」を選びます。

Canvas画面右上の共有ボタンから「Googleドライブで共有」を選ぶ

Googleドライブに保存されると、あとは通常のGoogleドキュメントやスプレッドシートと同じ扱いです。

  • 「リンクを知っている全員」にすれば、社内メンバー全体に展開できます
  • 特定のメールアドレスを指定して、閲覧または編集の権限を個別に付けることもできます
  • 社外への公開を避けたい場合は、「制限付き」のままにしておきます
Googleドライブの共有設定画面。アクセスできるユーザーと公開範囲をここで決める

もう1つ、ソースコードを渡す方法もあります。同じメニューの「内容をコピー」でコードをコピーし、相手に渡す。受け取った側がGeminiのチャットに「このソースコードをCanvas機能で再現してください」と伝えて貼り付ければ、相手の環境で動きます。相手が自分用にカスタマイズしたい場合は、こちらが向いています。

うまく作れないときは

頼んだのに「そのような機能はありません」と返ってきたり、生成が途中で止まったりすることがあります。原因はいくつかに分かれるので、順に試してみてください。

  • 指示の情報が足りない場合:前提条件を足して頼み直します。「以下の形式で出力してください」「入力はCSV形式です」など、条件を具体的にすると通ることがあります
  • 指示が細かすぎる場合:逆のパターンです。制約を詰め込みすぎると処理できる余地が狭まります。表現を少し緩めて、シンプルに書き直してみてください
  • もう一度、同じことを頼む:AIの応答は毎回同じではありません。まったく同じ文をもう一度送るだけで通ることがあります
  • 新しいチャットで試す:会話が長くなると、前のやり取りが判断に影響します。新しいチャットを開いて同じ依頼を入れ直すと、素直に処理してくれることがあります
  • 生成が途中で止まった場合:「続けてください」と送るか、ページを再読み込みします。一時的なことが多いので、少し待ってから試し直すと通ることがあります

Canvas特有の注意として、改修を何度も重ねると、動いていた部分が崩れることがあります。うまく動いている状態でいったん共有・保存しておくと、戻る場所ができます。

まとめ

Canvasで押さえておきたいのは、次の3点です。

  • 日本語で頼めば、動くものが返ってきます。デザインの細かい指示は要りません
  • 完成形を最初に設計する必要はありません。1つ足して確かめ、また足す
  • Googleドライブで共有すれば、そのまま社内に配れます

まずは、自分が毎週やっている手作業を1つ思い出して、それを日本語のままCanvasに頼んでみてください。どこまでのものが返ってくるかは、試してみるのが早いと思います。

人気記事トップ10

人気記事ランキングをもっと見る