「プログラミングなんてやったことないし、自分には無理…」
そう思っていませんか？実は、AIの力を借りれば、専門知識がなくても、わずか10分で自分だけの便利なChrome拡張機能を作れてしまう時代になりました。この記事では、AIチャットボット「Claude」を使って、選択したテキストから自動で図解画像を生成するChrome拡張機能を作成する手順を、誰にでも分かるように、スクリーンショットをふんだんに使って徹底解説します。この記事を読み終える頃には、あなたも「AIを使えば、アイデアを簡単に形にできるんだ！」と実感しているはずです。
今回作成するChrome拡張機能の紹介
今回作成するのは、「選択したテキストから画像を生成する」という、ブログ執筆やSNS投稿を劇的に効率化するChrome拡張機能です。Webページ上のテキストを選択して右クリックするだけで、AIがその内容を読み取り、最適な図解画像を自動で生成してくれます。生成された画像は自動でクリップボードにコピーされるため、あとはペーストするだけで簡単に資料や投稿に貼り付けられます。
必要なもの
開発を始める前に、以下の2つを準備してください。
- Claudeのアカウント: まだの方は、公式サイトから無料で登録できます。
- Gemini APIキー: 画像生成に使用するGoogleのAIのAPIキーです。これも無料で取得できます。取得方法がわからない場合は、「Gemini APIキー 取得」などで検索してみてください。Google AI Studioから簡単に取得できます。
準備はいいですか？それでは、早速開発を始めましょう！
作成手順
Step 1: Claudeに魔法の呪文（プロンプト）を唱える
まずはClaudeを開き、使用するモデルが「Opus 4.5」になっていることを確認してください。Claudeには「Opus」「Sonnet」「Haiku」という3種類のモデルがあり、それぞれ性能が異なります。Haikuは最も処理が速いですが能力は控えめ、Sonnetはバランス型、そしてOpusは最も高性能なモデルです。拡張機能の開発のような複雑な指示を正確に理解してもらうためには、Opus 4.5を使うことをおすすめします。
次に、以下の「魔法の呪文（プロンプト）」をコピーして、Claudeに送信します。このプロンプトには、どんな拡張機能を作りたいかの要件がすべて詰まっています。
選択したテキストから画像を生成して挿入できるChrome拡張機能を作成してください。
要件は以下でお願いします。
操作方法 ：テキストをドラッグ → 右クリック → メニューから実行
画像生成API ：Gemini API（gemini-3-pro-image-preview）
図解スタイル ：AIがテキスト内容に応じて自動判断
挿入位置 ：選択テキストの直後
挿入方法 ：クリップボード経由（セキュリティ制限のため手動ペースト）
APIキー管理 ：拡張機能の設定画面でユーザーが入力
ローディング表示：あり
エラー通知 ：トースト通知（3秒で自動消滅）
Step 2: Claudeが生成したファイルを確認・ダウンロードする
プロンプトを送信すると、Claudeが数秒で拡張機能の作成を開始します。完了すると、拡張機能の本体であるZIPファイルと、取扱説明書であるREADME.mdの2つのファイルを生成してくれます。
ここで、README.mdの内容を確認してみましょう。インストール方法や使い方など、必要な情報がすべて記載されています。
内容を確認したら、ZIPファイルをダウンロードしてください。
ワンポイントアドバイス: AIは時々、間違った情報を返すことがあります。例えば、私が実装した際は「gemini-3-pro-image-preview（Nanobanana Pro）は現時点で利用できない」とClaudeが言ってきましたが、実際には利用可能でした。このような場合は、「使えるから、その仕様にして」と指摘すれば、Claudeは「申し訳ありません、確認不足でした」と言って修正してくれます。AIの回答を鵜呑みにせず、おかしいと思ったら遠慮なく指摘しましょう。
Step 3: Chromeに拡張機能をインストールする
ここからは、ダウンロードしたファイルをChromeにインストールしていきます。
- まず、Chromeのアドレスバーに
chrome://extensions/と入力して、拡張機能の管理ページを開きます。 - 画面右上の「デベロッパーモード」のスイッチをオンにします。
- 左上に表示される「パッケージ化されていない拡張機能を読み込む」ボタンをクリックします。
- 先ほどダウンロードして解凍したZIPファイルのフォルダを選択します。
これだけで、あなたのChromeに新しい拡張機能が追加されます！
Step 4: APIキーを設定する
最後に、拡張機能が画像生成AI（Gemini）と通信するための「合言葉」であるAPIキーを設定します。
- Chromeのツールバーにある拡張機能のアイコンをクリックし、今回追加した「テキストから画像生成」のメニューから「オプション」を選択します。
- 設定画面が表示されるので、事前に取得しておいた「Gemini APIキー」を貼り付け、「保存」ボタンをクリックします。
お疲れ様でした！これで全ての準備が完了です。
Step 5: 実際に使ってみよう！
それでは、早速作成した拡張機能を使ってみましょう。
- 好きなWebページを開き、図解にしたい部分のテキストを選択します。
- 選択したテキストの上で右クリックし、「選択テキストから画像を生成」をクリックします。
- しばらく待つと、画面上に「画像を生成中…」という表示が現れ、処理が終わると自動的に消えます。
- これで画像がクリップボードにコピーされた状態になりました。あとは、ドキュメントやSNSの投稿画面などでペースト（Ctrl+V / Cmd+V）するだけです。
どうですか？驚くほど簡単だったのではないでしょうか。
AIが選択する図解スタイル
この拡張機能では、AIがテキストの内容を分析し、以下のスタイルから最適なものを自動で選択して図解を生成します。
| スタイル | 適した内容 |
|---|---|
| フローチャート | 手順やプロセスの説明 |
| 比較表 | 複数の項目の比較 |
| 組織図 | 階層構造や関係性 |
| タイムライン | 時系列での出来事 |
| マインドマップ | アイデアの整理や関連性 |
| グラフ・チャート | 数値データの可視化 |
どのスタイルが選ばれるかはAIの判断に任せられるため、ユーザーが細かく指定する必要はありません。
まとめ
この記事では、AIを使ってわずか10分でChrome拡張機能を作成する方法を解説しました。改めて手順をおさらいしましょう。
- Claudeを開き、Opus 4.5モデルを選択する
- 作りたい拡張機能の要件をプロンプトとして入力する
- 生成されたZIPファイルをダウンロードして解凍する
- Chromeの拡張機能管理画面からインストールする
- オプション画面でGemini APIキーを設定する
- Webページでテキストを選択し、右クリックメニューから実行する
プログラミングの知識がなくても、作りたいもののアイデアさえあれば、あとはAIに指示を出すだけで、誰でも簡単に自分だけのツールを開発できるのです。
今回作成した拡張機能はほんの一例です。「こんな拡張機能があったら便利だな」「この作業を自動化できないかな」というアイデアが浮かんだら、ぜひClaudeに相談してみてください。AIは、あなたの創造性を解き放つ、最高のパートナーになってくれるはずです。
コメント