コピペで完成！ChatGPT風 Webアプリ

※この内容はコード不要の記事です
使用環境：Windows 10/11 または macOS、Google Chrome 最新版／無料ホスティング（CodePen・Glitch・Netlify・Vercel いずれか）／チャットボット埋め込みサービス（例：Elfsight・Chatbase・SiteGPT などの「埋め込みコード」を発行できるサービス）

導入

「APIが難しそう…」という初心者でも、コピペだけでChatGPT風のWebアプリを公開できます。ポイントは、ChatGPTとやり取りする複雑な処理を外部のウィジェット（埋め込み）サービスに任せ、あなたはHTMLのひな形にスニペットを貼るだけにすること。本記事は、その最短ルートを「導入 → 手順解説 → コード → 動作確認／実用方法 → まとめ」で解説します。

手順解説（全体像）

埋め込み対応のチャットボットサービスに登録
管理画面で「ウィジェットを作成」→「埋め込みコード（iframe または script）」を取得します。
ひな形HTMLを用意
本記事のテンプレートをコピペして index.html を作成します。
埋め込みコードを差し替え
テンプレ内のコメント位置に、サービスが発行したスニペットをコピペします。
無料ホスティングにアップ
CodePen/Glitch ならブラウザだけで公開リンクが作れます。Vercel/Netlify もドラッグ＆ドロップでOK。
見た目の微調整はコピペで
ボタン色や背景色は、テンプレ内のCSS変数を書き換えるだけで変更可能です。

ここからコード

このコードは外部のチャットボット・ウィジェットを埋め込むための最小テンプレートです。画面サイズに合わせて自動で伸縮し、スマホでも見やすいように整えています。コメント位置に発行されたスニペットを丸ごとコピペしてください。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ChatGPTアプリ（コピペ版）</title>
  <meta name="description" content="埋め込みコードを貼るだけで動くChatGPT風Webアプリのテンプレート">
  <style>
    :root {
      --bg: #f5f7fb;
      --card: #ffffff;
      --accent: #2563eb;
      --text: #0f172a;
      --muted: #64748b;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Noto Sans JP, Arial, sans-serif;
      background: linear-gradient(180deg, var(--bg), #e9eef9);
      color: var(--text);
    }
    header {
      padding: 24px 16px;
      text-align: center;
    }
    .app {
      max-width: 960px;
      margin: 0 auto;
      padding: 0 16px 48px;
    }
    .card {
      background: var(--card);
      border-radius: 20px;
      box-shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
      overflow: hidden;
      border: 1px solid rgba(2, 6, 23, 0.06);
    }
    .hero {
      padding: 16px 20px;
      border-bottom: 1px solid rgba(2, 6, 23, 0.06);
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .dot {
      width: 10px;
      height: 10px;
      border-radius: 9999px;
      background: var(--accent);
      box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.15);
    }
    .title {
      font-size: 18px;
      font-weight: 700;
    }
    .muted {
      color: var(--muted);
      font-size: 13px;
    }
    .frame-wrap {
      aspect-ratio: 16 / 10;
      width: 100%;
      background: linear-gradient(180deg, #eef3ff, #ffffff);
    }
    iframe, .widget-slot {
      width: 100%;
      height: 100%;
      border: 0;
      display: block;
    }
    .notice {
      padding: 14px 18px;
      background: #eef6ff;
      border-top: 1px solid rgba(2, 6, 23, 0.06);
      font-size: 13px;
      color: #0b3b83;
    }
    .actions {
      display: flex;
      gap: 10px;
      padding: 16px 20px 0;
      flex-wrap: wrap;
    }
    .btn {
      appearance: none;
      border: 1px solid rgba(2, 6, 23, 0.1);
      background: #ffffff;
      color: var(--text);
      padding: 10px 14px;
      border-radius: 12px;
      font-size: 14px;
      cursor: pointer;
      transition: transform 0.05s ease, box-shadow 0.2s ease;
    }
    .btn.primary {
      background: var(--accent);
      color: #ffffff;
      border-color: transparent;
      box-shadow: 0 6px 16px rgba(37, 99, 235, 0.25);
    }
    .btn:hover { transform: translateY(-1px); }
    footer {
      text-align: center;
      font-size: 12px;
      color: var(--muted);
      padding: 24px 16px 40px;
    }
  </style>
</head>
<body>
  <header>
    <div class="app">
      <h1>ChatGPTアプリ（コピペ版）</h1>
      <p class="muted">埋め込みコードを貼るだけで動く最小テンプレート</p>
    </div>
  </header>

  <main class="app">
    <div class="card">
      <div class="hero">
        <div class="dot"></div>
        <div class="title">AIチャット</div>
        <div class="muted" style="margin-left:auto;">レスポンシブ対応</div>
      </div>

      <div class="actions">
        <button class="btn primary" onclick="document.documentElement.style.setProperty('--accent','#16a34a')">配色：グリーン</button>
        <button class="btn" onclick="document.documentElement.style.setProperty('--accent','#2563eb')">配色：ブルー</button>
        <button class="btn" onclick="document.documentElement.style.setProperty('--accent','#db2777')">配色：ピンク</button>
      </div>

      <div class="frame-wrap">
        <!-- ▼▼▼ ここにサービス発行の埋め込みコードをコピペ ▼▼▼ -->
        <!-- 例1：iframe 方式 -->
        <!-- <iframe src="https://あなたのウィジェットのURL" allow="clipboard-read; clipboard-write; microphone; camera"></iframe> -->

        <!-- 例2：script 方式（div を用意してスクリプトを貼るタイプ） -->
        <!-- <div id="chat-widget"></div>
        <script src="https://提供元ドメイン/widget.js" data-target="#chat-widget" data-bot-id="xxxx"></script> -->
        <!-- ▲▲▲ ここまで差し替え ▲▲▲ -->

        <!-- 何も貼っていない間だけ見えるダミー領域 -->
        <div class="widget-slot" aria-hidden="true" style="display:grid;place-items:center;color:#64748b;">
          <div>
            <div style="text-align:center;font-size:14px;">上のコメント位置に「埋め込みコード」を貼るとここに表示されます。</div>
          </div>
        </div>
      </div>

      <div class="notice">
        セキュリティのため、APIキーをHTML内に直接書かないでください。埋め込みサービスが提供する「公開用スニペット」をそのまま貼り付けます。
      </div>
    </div>
  </main>

  <footer>
    © 2025 Your Site
  </footer>
</body>
</html>

動作確認／実用方法

CodePenで動作確認
CodePen で「New Pen」→「HTML」欄に上記コードをコピペ→「埋め込みスニペット」をコピペして差し替え。右側プレビューにチャットが表示されれば成功。
Glitch／Netlify／Vercelで公開
新規プロジェクトを作り、index.html をアップロード（またはコピペ）。自動で公開URLが発行され、誰でもアクセス可能になります。
見た目の変更
:root 内のCSS変数（例：--accent）をコピペで置き換えるだけで配色変更。ロゴや注意文のテキストもそのまま編集できます。
よくあるつまずき
- 何も表示されない → スニペットの貼り位置が内か確認。
- ブラウザでブロック → iframe の allow 属性にマイク等の権限を追加。
- スマホで切れる → frame-wrap の aspect-ratio を 16 / 14 などに変更。