【4ステップ】Gemini Canvasで作るWebツール収益化法

こんな悩みや疑問を持っていませんか？💭

• 「GeminiにCanvasっていう新機能が出たけど、どう使えばいいんだろう？」

• 「プログラミングの知識がないけど、自分でWebツールを作って収益化してみたい…」

• 「AIを使って何か新しいことに挑戦したいけど、具体的な方法が分からない…」

この記事で解説すること📢

• 「Gemini Canvas」を使ったWebツール開発の具体的な4ステップ

• プログラミング未経験者でもAIを活用してツールを作成する実践的な手順

• 開発したWebツールをWordPressに埋め込み、アドセンスで収益化する方法

この記事を読むことで、分かることや具体的な行動プラン💡

• 自分だけのWebツールを開発する具体的なイメージが掴める

• 「自分にもできるかも！」と、AIを活用したツール開発への第一歩を踏み出せる

• 開発したツールをブログやサイトに組み込み収益源を作るヒント

2025年3月18日（火）Googleより突然、「Canvas（キャンバス）」機能のリリースが発表されました。

3月18日（火）の5日前である、3月13日（木）に「Deep Research（ディープリサーチ）」機能をリリースしたばかりなのに、またしてもドでかい発表。

ChatGPTでは既に同名の「Canvas（キャンバス）」、Claudeでは「Artifact（アーティファクト）」という名前で、同じような機能が備わっていました。

Geminiも一足出遅れる形になってしまいましたが、ようやくのリリースです。

しかもメチャ嬉しいポイントが、「無料」ということ✨✨
ChatGPTやClaudeでは無料で使えるものの、使用制限や回数制限がありました。

無料ユーザーにとっては、使い放題という点は非常にグッドなポイントでしょう👍

Geminiの「Canvas（キャンバス）」が新機能としてリリースされたので、早速使ってみました！💻

YouTubeやSNS、ブログ記事なんかでも既に他のクリエイターさんがCanvasの紹介をしているでしょうし、本記事では「Canvasを使ってWebツールを開発→収益化」という手順を解説していきます。

筆者である私も「おそらくできるだろうな～」という程度で、ぶっつけ本番で実践していきます！💪🔥

ステップ1.｜需要のあるWebツールを考える

Webツール開発しても使ってもらわなければ、「収益化」にはなりません💰
そこで、まずは需要のあるWebツールを考えます。

私は本業のかたわら、複業としてブロガーやライターとして活動していますが、エンジニアではありません💦

なので自身の頭では、「今後○○ツールの需要が伸びる！」なんてことは、分かりません。

ってことで、ここはAIにアイデアを立案してもらいます💡

我らが相棒、ChatGPTでアイデアを考えてもらいました💭

ん～なんとも言えない結果…
どのアイデアもLLMのAPIを使用しなければ、作れなさそうなツールばかりです💦

ChatGPTではイマイチだったので、GeminiやGrokでもアイデア立案をしてみました！

色々とアイデアを考えること、20分ほど🕐
LLMのAPIを使わずとも作れそうな、Webツールがようやく立案できました💡

👆今回はこちらのWebツールを、Geminiの「Canvas」機能で作ってみます。

ステップ2.｜Canvas機能を使ってコード生成

「画像生成AIプロンプト作成ツール」を作るということですが、本当に私でも無料で作れるのかどうかは分かりません。

とにかく、ものは試し！

軌道修正はコーディングをしながらということで、以下のプロンプトをGeminiに送信。

上記のプロンプトで作成された、ツールがこれ👇

項目に従って選択していけば、初心者でも簡単に画像生成AIに使えるプロンプトが作成できるという仕組み。

ただ最後に出力されるプロンプトが、日本語になっています。

別に日本語でも問題はないのですが、画像生成AIに突っ込むプロンプトは基本的に英語の方が精度よく生成されます。

なので今回は日本語でプロンプトが出力されるのではなく、英語で出力されるようにしたいのです。

ってことでGemini君に、修正してもらいました🔄

うん！無事に英語でプロンプトが出力されるようになりました🍀

ただ今度は一部項目選択の表記が日本語ではなく、まったく別の言語で表示されるようになってしまいました💦

これも具体的にキャプチャ画面とともに、「改善してください」と指示。

無事に項目選択の表記も、治りました✨✨

その他、文言の追加や調整を行ったのですが、長くなるのでここではカットゥ！

ステップ3.｜Wordpressに貼り付けられるコード形式にする

修正に修正を重ねて、なんとか形にはできました。

なので開発したWebツールを、自分の所有するWordpress（ワードプレス）に埋め込めるように、コード形式を調整していきます。

GeminiのCanvas機能で作成したツールは、URLを発行することが可能です。

この機能については、Claudeを含めて他のAIツールでも備わっている機能です。

ですがURLを発行したとしても、開発したツールを触ることはできますが、「収益化」にはなりませんよね？？

そこで登場するのが、Wordpressというわけ💻
Wordpressに開発したツールを埋め込むことさえできれば、こっちのものです！

Wordpressで運営しているブログへの流入にもなりますし、アドセンスを掲載しておけばサイトに訪れてくれるだけで、チャリンチャリンとお金が発生します💰

それを実現するべく、Canvasで出力したコード形式を調整するというわけです。

「出力されたコードをWordpressのカスタムHTMLに入力すれば、いいだけじゃないの？？」

👆このように思った方もいるでしょうが、ノンノン！です。
カスタムHTMLに入力すれば、操作もできるし機能するのですが、少し文字化けすることがあります。

それを防ぐために、WordpressのカスタムHTMLに合った形式のコードを再出力してもらいます。

プロンプトは以下の通り。