ChatGPTでオリジナルBotを作ってブログに設置するまでの話【簡単すぎて拍子抜けした】

ChatGPTでオリジナルBotを作ってブログに設置するまでの話【簡単すぎて拍子抜けした】

「アプリって何？」くらいの状態から始まりました。

なんか作りたいけど思いつかない。でもブログやってるし、ブログに使えるやつ作ってみようかな、と。それだけです。

やってみたら拍子抜けするくらい簡単で。AIに教えてもらいながら進めたら、気づいたら自分専用のBotができてました。

この記事では、ChatGPTのGPTs機能でオリジナルBotを作って、WordPressのサイドバーに設置するまでの手順を全部書きます。画面を開くところから1ステップずつです。

全体の流れ、先に見ておく

ざっくりこの順番で進みます。

難しそうに見えますが、コードを書く必要はゼロです。全部ブラウザ上でできます。

そもそもGPTsって何？

一言で言うと「自分専用のChatGPTを作れる機能」です。

普通のChatGPTは毎回ゼロから始まりますよね。でもGPTsを使うと、「こういうキャラで」「こういうルールで答えて」という設定を最初から覚えさせることができます。

しかも作ったBotは他の人にも使ってもらえます。リンクを渡すだけで、誰でもアクセスできる。ブログに置けばそのまま読者向けのサービスになるわけです。

Claude ProjecやNotionAIとの違いで言うと、GPTsは「人に渡せる」のが一番の特徴です。自分だけの道具じゃなくて、読者に使ってもらえる道具が作れます。

ステップ①　GPTs作成画面を開く

まずChatGPTを開きます。GPT-4oが使える有料プランが必要です。

ブラウザのアドレスバーに https://chat.openai.com/ と入力してEnterを押す
「Log in」をクリックする
メールアドレスとパスワードを入力して「Continue」をクリックする
ログインするとチャット画面が開く
画面左側のメニューにある「GPTを探す」をクリックする
画面右上に表示される「＋作成する」をクリックする
GPT作成画面が開く

作成画面には「作成する」と「構成する」の2つのタブがあります。「作成する」はAIが質問しながら自動で作ってくれるモード。「構成する」は自分で細かく設定するモードです。

自分で細かく設定したい場合は「構成する」を選んでください。

ステップ②　Botを設定する

「構成する」タブを開いて、以下の項目を入力していきます。

名前と説明を入力する

「構成する」タブをクリックする
「名前」の入力欄をクリックする
Botの名前を入力する（例：むきぐりAIツール相談Bot）
「説明」の入力欄をクリックする
Botの説明を入力する（例：AI初心者向けに、目的に合ったAIツールをやさしく提案する相談Botです）

指示を入力する

「指示」の入力欄をクリックする
Botの動作ルールを入力する

指示欄が一番大事です。「どんなキャラで答えるか」「何をすすめるか」「何を言わないか」をここで決めます。最初は短くてOKです。あとから追加していくと、返答がどんどん変わるのが見えて面白いです。

📋 指示欄の基本テンプレート

あなたは「〇〇Bot」です。
目的：〇〇な人に向けて、〇〇をやさしく提案する相談Botです。
ルール：
・初心者向けに説明する
・専門用語を使いすぎない
・最初は1〜3個だけおすすめする
・「一緒に考える感じ」で話す

会話のきっかけを設定する

「会話のきっかけ」の入力欄をクリックする
ユーザーが最初に選べるボタンテキストを入力する（例：AIで画像を作りたい）
「＋」をクリックして2〜4個追加する

ここに入力した文字がボタンとして表示されます。ユーザーがタップするだけで会話が始まるので、「何から聞けばいいかわからない」人でも使いやすくなります。

知識を追加する（任意）

「知識」の「ファイルをアップロード」をクリックする
BotPに読み込ませたいテキストファイルやPDFを選ぶ

ブログのURLリストをテキストファイルにまとめてアップロードすると、Botが回答の最後に関連記事を紹介してくれるようになります。これやると一気に使えるBotになります。

ステップ③　公開してリンクを取得する

画面右上の「保存」をクリックする
公開範囲の選択画面が表示される
「リンクを知っている全員」をクリックする
「確認」をクリックする
公開後に表示されるURLをコピーする

ここまでできると、BotのURLが手元に揃います。このURLをブログに貼れば読者が使えるようになります。

ステップ④　WordPressのサイドバーに設置する

取得したURLをSWELLの追尾サイドバーに設置します。

ブラウザで https://mukiguri.com/wp-admin/ を開く（ご自身のドメインに読み替えてください）
左側メニューの「外観」をクリックする
「ウィジェット」をクリックする
「追尾サイドバー」エリアの「＋」をクリックする
「カスタムHTML」を検索してクリックする
以下のHTMLを内容欄に貼り付ける

📋 サイドバー用HTMLコード

<a href=”BotのURL” target=”_blank” style=”display:block;text-align:center;padding:16px 12px;background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:12px;text-decoration:none;”><img src=”アイコン画像のURL” style=”width:64px;height:64px;border-radius:50%;border:2px solid #10a37f;margin-bottom:8px;” alt=”Bot名”>AIツール、何使えばいい？気軽に話しかけてみてくださいBotに聞いてみる →</a>