ChatGPTで予約チャットボット作成 - AI自動スケジューリングシステム

作ったチャットボット、今度は世の中に公開する

一生懸命作ったチャットボットがあります。友達も良いと言ったし、テストも完了しました。

さて次は?ブログやウェブサイトに設置しなければなりませんね!

「でも...どうやって?」

心配しないでください。今日はコーディングが分からなくてもチャットボットをウェブサイトに追加する方法をお教えします。

チャットボット埋め込み方法の種類

1. ウィジェット形式(一番簡単)

右下に浮いているチャットボタン

2. インライン形式

ページ内にボックスとして入る

3. 全画面ページ

チャットボットだけの別ページ

4. リンク共有

ただURLだけ共有

方法1:リンク共有(最も簡単)

コーディング不要です。リンクさえあれば終わり!

ChatGPT Custom GPTリンク

ステップ:

1. Custom GPTページを開く
2. 右上の共有ボタン
3. 「Anyone with the link」選択
4. リンクをコピー

ブログ記事に追加:

## ショッピングアシスタントチャットボット

気になることを聞いてください!

👉 [チャットボットと会話する](https://chat.openai.com/g/g-xxxxx)

長所:

• 最も簡単
• 管理が便利

短所:

• ユーザーがOpenAIアカウント必要
• 自分のサイトから離れる

Poe.comボットリンク

ステップ:

1. Poeでボットページを開く
2. 共有アイコンをクリック
3. リンクをコピー

ブログにボタンとして追加:

<a href="https://poe.com/YourBotName"
   style="background: #FF6B6B;
          color: white;
          padding: 12px 24px;
          border-radius: 8px;
          text-decoration: none;
          display: inline-block;">
   💬 チャットボットと会話する
</a>

長所:

• 無料
• 簡単

短所:

• Poeアカウント必要
• ブランディング制限的

方法2:iframe埋め込み

ウェブページ内に直接入れる

基本iframeコード

<iframe
  src="チャットボットURL"
  width="100%"
  height="600px"
  style="border: 1px solid #ddd; border-radius: 8px;">
</iframe>

きれいに飾る

<div style="max-width: 800px; margin: 40px auto;">
  <h2 style="text-align: center; margin-bottom: 20px;">
    💬 AIアシスタント
  </h2>
  <iframe
    src="https://poe.com/YourBot"
    width="100%"
    height="600px"
    style="border: 2px solid #4A90E2;
           border-radius: 12px;
           box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
  </iframe>
  <p style="text-align: center; color: #666; margin-top: 10px;">
    何でも聞いてください!
  </p>
</div>

レスポンシブにする

モバイルでもよく見えるように:

<style>
.chatbot-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.chatbot-iframe {
  width: 100%;
  height: 600px;
  border: 2px solid #4A90E2;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
  .chatbot-iframe {
    height: 500px;
  }
}
</style>

<div class="chatbot-container">
  <iframe
    class="chatbot-iframe"
    src="https://your-chatbot-url">
  </iframe>
</div>

方法3:ウィジェット形式(右下ボタン)

最もプロフェッショナルな方法

簡単なウィジェットを作る

<!-- フローティングボタン -->
<button id="chatbot-button" onclick="toggleChatbot()">
  💬
</button>

<!-- チャットボットウィンドウ -->
<div id="chatbot-widget" style="display: none;">
  <div id="chatbot-header">
    <span>AIアシスタント</span>
    <button onclick="toggleChatbot()">✕</button>
  </div>
  <iframe src="https://your-chatbot-url"></iframe>
</div>

<style>
#chatbot-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #4A90E2;
  color: white;
  border: none;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  z-index: 1000;
  transition: transform 0.2s;
}

#chatbot-button:hover {
  transform: scale(1.1);
}

#chatbot-widget {
  position: fixed;
  bottom: 90px;
  right: 20px;
  width: 380px;
  height: 600px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
  z-index: 999;
  display: flex;
  flex-direction: column;
}

#chatbot-header {
  background: #4A90E2;
  color: white;
  padding: 15px;
  border-radius: 12px 12px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#chatbot-header button {
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
}

#chatbot-widget iframe {
  flex: 1;
  border: none;
  border-radius: 0 0 12px 12px;
}

@media (max-width: 768px) {
  #chatbot-widget {
    width: calc(100% - 40px);
    height: calc(100% - 140px);
  }
}
</style>

<script>
function toggleChatbot() {
  const widget = document.getElementById('chatbot-widget');
  if (widget.style.display === 'none') {
    widget.style.display = 'flex';
  } else {
    widget.style.display = 'none';
  }
}
</script>

結果

右下に💬ボタンが表示され、クリックするとチャットボットウィンドウが開きます!

方法4:WordPressブログに追加

WordPressユーザーなら:

プラグイン使用

おすすめプラグイン:

1. WP Chatbot - 無料、簡単
2. Tidio - きれい、有料
3. Custom HTML Widget - iframe用

インストール方法:

1. WordPress管理者ページ
2. プラグイン > 新規追加
3. 「chatbot」検索
4. インストール&有効化

カスタムHTML使用

1. 外観 > ウィジェット
2. 「カスタムHTML」ウィジェット追加
3. 希望の位置に配置
4. 上記のHTMLコードを貼り付け

全ページとして作成

1. ページ > 新規追加
2. タイトル:「AIチャットボット」
3. ブロック追加 > カスタムHTML
4. iframeコード入力
5. 公開

<div style="width: 100%; height: 800px;">
  <iframe
    src="https://your-chatbot-url"
    width="100%"
    height="100%"
    style="border: none;">
  </iframe>
</div>

方法5:Notionページに追加

Notionブログを使っていますか?

ステップ:

1. Notionページを開く
2. /embed入力
3. チャットボットURLを貼り付け
4. サイズ調整

例:

/embed https://poe.com/YourBot

ヒント:

• 全幅に設定
• 高さは600px程度

方法6:Tistoryブログ

HTML編集

1. 記事を書く
2. 右上の「HTML」切り替え
3. コード入力

<div style="text-align: center; margin: 40px 0;">
  <h3>💬 AIチャットボットと会話する</h3>
  <iframe
    src="https://your-chatbot-url"
    width="100%"
    height="600px"
    style="max-width: 800px;
           border: 2px solid #ddd;
           border-radius: 8px;">
  </iframe>
</div>

サイドバーに固定

1. 管理 > デザイン > スキン編集
2. HTML編集
3. サイドバー部分にコード追加

<div class="sidebar-chatbot">
  <h4>💬 質問する</h4>
  <a href="https://your-chatbot-url" target="_blank">
    チャットボットを開く
  </a>
</div>

方法7:カスタムドメイン

本当にプロのようにやるなら:

サブドメイン作成

chat.yourdomain.com → チャットボットページ

簡単なHTMLページ

index.html:

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AIチャットボット</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
      height: 100vh;
      display: flex;
      flex-direction: column;
    }

    header {
      text-align: center;
      color: white;
      padding: 20px 0;
    }

    header h1 {
      font-size: 2.5em;
      margin-bottom: 10px;
    }

    header p {
      font-size: 1.2em;
      opacity: 0.9;
    }

    .chatbot-frame {
      flex: 1;
      background: white;
      border-radius: 16px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.2);
      overflow: hidden;
      margin-top: 20px;
    }

    iframe {
      width: 100%;
      height: 100%;
      border: none;
    }

    @media (max-width: 768px) {
      header h1 {
        font-size: 1.8em;
      }

      header p {
        font-size: 1em;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <header>
      <h1>💬 AIアシスタント</h1>
      <p>何でも聞いてください。24時間お答えします。</p>
    </header>

    <div class="chatbot-frame">
      <iframe src="https://your-chatbot-url"></iframe>
    </div>
  </div>
</body>
</html>

GitHub Pagesで無料ホスティング

1. GitHubリポジトリを作成
2. index.htmlをアップロード
3. Settings > Pages
4. デプロイ完了!

URL: https://username.github.io/repo-name

注意事項

1. 読み込み速度

iframeはページを遅くする可能性があります。

解決策:

<!-- lazy loading使用 -->
<iframe
  src="https://your-chatbot-url"
  loading="lazy">
</iframe>

2. モバイル最適化

小さい画面でもよく見えるように:

@media (max-width: 768px) {
  .chatbot-widget {
    width: 100% !important;
    height: 100% !important;
    bottom: 0 !important;
    right: 0 !important;
  }
}

3. 個人情報保護

チャットボットが個人情報を収集する場合は案内が必要:

<p style="font-size: 12px; color: #999;">
  * このチャットボットは会話内容を改善のために収集する可能性があります。
  詳細は<a href="/privacy">個人情報処理方針</a>をご確認ください。
</p>

4. アクセシビリティ

キーボードユーザーもアクセスできるように:

<button
  id="chatbot-button"
  aria-label="チャットボットを開く"
  onclick="toggleChatbot()">
  💬
</button>

次のステップ

次回は学習資料を注入して「カスタマイズチャットボット」作りを扱います。

自分のブログ記事、PDF、データを学習させて本物の専門家チャットボットを作る方法です!

最後に

チャットボットをブログに追加するのは思ったより難しくありません。

最も簡単な方法:

1. リンク共有

もう少しかっこよく: 2. iframe埋め込み

プロのように: 3. ウィジェット形式

あなたの状況に合った方法を選んでください。簡単なものから始めて徐々にアップグレードすればいいんです!

今日すぐあなたのチャットボットをブログに設置してみてください!

---

一緒に読むと良い記事:

• [前回] 友達とテストしてみる
• [次回] 学習資料を注入して「カスタマイズチャットボット」作り

どの方法で埋め込みましたか?コメントで共有してください!