WebflowサイトにAIを組み込む方法｜チャットボット・自動化・パーソナライズの実装ガイド

2026年4月9日

はじめに

「WebflowのサイトにAIを入れたいけど、どこから始めればいいかわからない」という相談を受けることが増えています。

競合他社が似たようなデザインのサイトを量産している中で、AIを活用してユーザー体験を底上げしたいというニーズは当然のことです。チャットボットで問い合わせを自動化したい、訪問者ごとにコンテンツを出し分けたい、フォームに入ってくるスパムをなんとかしたい——こうした課題に、WebflowはAIとの組み合わせで意外なほど柔軟に対応できます。

この記事では、Webflow AIの実装パターンを具体的なコードや設定例とともに解説します。非エンジニアの方でも全体像を把握できるよう丁寧に説明しつつ、エンジニアの方にはすぐ使えるコードスニペットも紹介します。

1.WebflowとAIの相性が良い理由

Webflowは「ノーコードツール」と呼ばれることが多いですが、実際にはカスタムコードの埋め込みに対応しており、外部サービスとの連携も柔軟です。この特性がAI組み込みと非常に相性よく機能します。

1-1.カスタムコード埋め込みによる自由度

WebflowはページのHead、Body開始直後、Body終了直前のそれぞれにカスタムHTMLとJavaScriptを注入できます。タグで外部のAI SDKを読み込んだり、インラインでAPIを呼び出したりと、フロントエンドエンジニアが普段やっている実装のほぼすべてがWebflow上でも実現できます。 また、特定のページやセクションだけにカスタムコードを差し込めるため、AI機能が必要なページにだけ処理を限定してパフォーマンスへの影響を最小化できます。 1-2.Zapier・Make（旧Integromat）によるAPI連携 WebflowのCMSやフォームのイベントをZapierやMakeのトリガーとして使い、OpenAI APIやその他のAIサービスと繋ぐことができます。コードを書かなくても、フォーム送信時にAIが内容を分析して自動返信メールを送る、といった自動化が実現します。 1-3.Webflow Logic（ベータ機能） Webflow Logicは、フォーム送信後の処理をWebflowの画面上で定義できる機能です。現時点では機能が限定的ですが、条件分岐やWebhook送信が可能なため、外部AIサービスへのリクエストをトリガーする用途に使えます。 2.AIチャットボットの組み込み方 Webflowチャットボットの実装には大きく3つのアプローチがあります。それぞれの特徴と実装手順を解説します。 2-1.方法1: Tidioを使う（最も手軽） TidioはWebflowとのネイティブ連携を持つチャットボットサービスです。AI機能（Lyro）も搭載されており、FAQへの自動回答や問い合わせの一次対応を任せられます。 実装手順: Tidioのアカウントを作成し、プロジェクトを設定する Tidioの管理画面から「インストール」→「JavaScript埋め込みコード」を取得する WebflowのProject Settings → Custom Code → Footer Codeに以下を貼り付ける <script src="//code.tidio.co/YOUR_PUBLIC_KEY.js" async></script>
Tidioの管理画面でLyro AIを有効化し、自社のFAQやドキュメントをトレーニングデータとして登録する設定から公開まで最短30分で完了します。無料プランでも月50件程度の自動回答が可能なため、まず試してみるには最適です。 2-2.方法2: Intercomを使う（中規模以上のサービス向け） IntercomはCRMと連携した高度なチャットボット機能を持ちます。顧客データと紐づけたパーソナライズ対応や、チケット管理まで一元化したい場合に向いています。 Webflowへの組み込みはTidioと同様にスクリプトタグを埋め込む形式ですが、ユーザー認証情報をJavaScriptで渡すことでログインユーザーごとの文脈を持った対話が可能になります。 <script>
  window.intercomSettings = {
    api_base: "https://api-iam.intercom.io",
    app_id: "YOUR_APP_ID",
    user_id: "{{ユーザーID}}",
    name: "{{ユーザー名}}",
    email: "{{メールアドレス}}"
  };
</script>
<script>
  (function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){
    ic('reattach_activator');ic('update',w.intercomSettings);
  }else{var d=document;var i=function(){i.c(arguments);};
  i.q=[];i.c=function(args){i.q.push(args);};w.Intercom=i;
  var l=function(){var s=d.createElement('script');
  s.type='text/javascript';s.async=true;
  s.src='https://widget.intercom.io/widget/YOUR_APP_ID';
  var x=d.getElementsByTagName('script')[0];
  x.parentNode.insertBefore(s,x);};
  if(document.readyState==='complete'){l();}
  else if(w.attachEvent){w.attachEvent('onload',l);}
  else{w.addEventListener('load',l,false);}}}
  )();
</script>
2-3.方法3: OpenAI APIで独自チャットボットを実装する既製品では対応できない独自の業務フローや、自社データベースと連携したチャットボットが必要な場合は、OpenAI APIを直接呼び出す実装を行います。ただし、APIキーをフロントエンドに露出させるのはセキュリティ上危険なため、必ず中間サーバーを挟む設計にしてください。Cloudflare WorkersやVercelのEdge Functionsが軽量で使いやすいです。 Cloudflare Workersに中継APIを作る例: // Cloudflare Worker (worker.js)
export default {
  async fetch(request, env) {
    if (request.method !== 'POST') {
      return new Response('Method not allowed', { status: 405 })
    }

    const { message } = await request.json()

    const response = await fetch('https://api.openai.com/v1/chat/completions', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${env.OPENAI_API_KEY}`
      },
      body: JSON.stringify({
        model: 'gpt-4o-mini',
        messages: [
          {
            role: 'system',
            content: 'あなたはf2t.jpのサポートスタッフです。Webflow制作とAI導入に関する質問に日本語で丁寧に回答してください。'
          },
          { role: 'user', content: message }
        ],
        max_tokens: 500
      })
    })

    const data = await response.json()
    const reply = data.choices[0].message.content

    return new Response(JSON.stringify({ reply }), {
      headers: {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': 'https://your-webflow-domain.com'
      }
    })
  }
}
WebflowのカスタムコードからこのAPIを呼び出す: <div id="chat-container">
  <div id="chat-messages"></div>
  <input type="text" id="chat-input" placeholder="質問を入力..." />
  <button id="chat-send">送信</button>
</div>

<script>
  const sendBtn = document.getElementById('chat-send')
  const input = document.getElementById('chat-input')
  const messages = document.getElementById('chat-messages')

  sendBtn.addEventListener('click', async () => {
    const userMessage = input.value.trim()
    if (!userMessage) return

    appendMessage('user', userMessage)
    input.value = ''

    try {
      const res = await fetch('https://your-worker.workers.dev/chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ message: userMessage })
      })
      const data = await res.json()
      appendMessage('bot', data.reply)
    } catch (e) {
      appendMessage('bot', '申し訳ありません。しばらくしてからお試しください。')
    }
  })

  function appendMessage(role, text) {
    const el = document.createElement('div')
    el.className = `message ${role}`
    el.textContent = text
    messages.appendChild(el)
    messages.scrollTop = messages.scrollHeight
  }
</script>
UIのスタイリングはWebflowのCSSクラスと合わせて調整することで、サイトデザインとの統一感が出ます。 3.お問い合わせフォームのAI強化 Webflowのフォームは単体では入力データの保存と通知メール送信しかできませんが、ZapierやMakeを噛ませることでAI処理を組み込めます。 3-1.自動分類とルーティングフォームの送信内容をOpenAIに渡し、問い合わせ種別（料金相談、技術的な質問、クレームなど）を自動判定して担当者に振り分ける実装です。 Makeのフローイメージ: Webformのフォーム送信をトリガーに設定 OpenAIモジュールで以下のプロンプトを実行: 以下のお問い合わせ内容を分析し、カテゴリをJSON形式で返してください。
カテゴリ: ["料金相談", "技術質問", "プロジェクト依頼", "クレーム", "その他"]

お問い合わせ内容:
{{フォームの本文}}

出力形式:
{"category": "カテゴリ名", "priority": "high|medium|low", "summary": "30字以内の要約"}
返ってきたJSONをパースしてカテゴリに応じたSlackチャンネルやメールアドレスに通知 3-2.スパムフィルタリング WebflowのフォームはreCAPTCHA非対応のケースも多く、スパムが流入しやすいです。AIによる文章判定を組み込むことでフィルタリング精度を高められます。 Make上でOpenAI APIを呼び出し、スパム判定スコア（0〜1）が0.8以上のものはNotionのスパムDBに隔離し、担当者への通知をスキップする、といった設定が可能です。 3-3.自動返信メールのパーソナライズ画一的な「お問い合わせを受け付けました」メールではなく、問い合わせ内容に応じてAIが返信文を生成してSendGridやMail Chimに渡す実装です。以下のお問い合わせへの返信文を作成してください。
- 担当者が確認後に詳しくご連絡する旨を伝える
- 問い合わせ内容に言及して「お問い合わせ内容を確認しました」という安心感を与える
- 丁寧でありながら簡潔に、200字以内で

お問い合わせ者名: {{名前}}
内容: {{本文}}
4.コンテンツのパーソナライズ WebflowはCMSとの組み合わせでコンテンツの出し分けができますが、AIを加えることで訪問者の行動に基づいたダイナミックな表示が可能になります。 4-1.閲覧履歴に基づくコンテンツ推薦 JavaScriptでlocalStorageに閲覧ページのカテゴリや滞在時間を記録し、AIに「この閲覧パターンのユーザーに最適なコンテンツを推薦してください」と問い合わせる実装です。 // 閲覧履歴の記録
function trackPageView() {
  const history = JSON.parse(localStorage.getItem('pageHistory') || '[]')
  const currentPage = {
    path: window.location.pathname,
    category: document.querySelector('[data-category]')?.dataset.category,
    timestamp: Date.now()
  }
  history.push(currentPage)
  // 最新20件のみ保持
  const trimmed = history.slice(-20)
  localStorage.setItem('pageHistory', JSON.stringify(trimmed))
}

// ページ読み込み時に実行
trackPageView()
ただし、Webflowの静的な構造上、完全なサーバーサイドレンダリングは難しいため、コンテンツの切り替えはDOM操作（要素の表示・非表示）で対応するケースが一般的です。 4-2.A/Bテストの仕組み Webflow単体ではA/Bテストに対応していませんが、Google Optimize（2023年にサービス終了）の代替としてStatsigやGrowthbookを使う方法があります。スクリプトを1行埋め込むだけでフラグ管理ができ、AIがユーザー属性に基づいて最適なバリアントを動的に選択するパーソナライズドA/Bテストも実現します。 5.AI画像・テキスト生成のAPI連携 Webflow CMSと外部のAI生成APIを組み合わせると、動的にコンテンツを生成・更新する仕組みが作れます。 5-1.MakeでブログをAI自動生成してWebflow CMSに投稿以下のフローをMakeで構築することで、テーマを入れるだけでSEO記事がWebflow CMSに追加される半自動ワークフローが完成します。 Google スプレッドシートに記事テーマを追加（トリガー） OpenAI APIで記事構成とHTMLを生成 Webflow APIでCMSアイテムを作成・公開 Webflow CMS APIへの投稿例（Makeのモジュール設定）: POST https://api.webflow.com/v2/collections/{collection_id}/items

Headers:
  Authorization: Bearer {your_api_token}
  Content-Type: application/json

Body:
{
  "fieldData": {
    "name": "{{生成された記事タイトル}}",
    "slug": "{{スラッグ}}",
    "post-body": "{{AIが生成したHTMLコンテンツ}}",
    "post-summary": "{{メタディスクリプション}}"
  },
  "isDraft": false
}
5-2.DALL-E 3でOGP画像を自動生成記事タイトルをDALL-E 3に渡してOGP画像を自動生成し、CloudflareのR2やAWSのS3に保存後、WebflowのCMSアイテムの画像フィールドに設定する実装も可能です。ブランドガイドラインに沿ったプロンプトを固定しておくことで、一定のスタイルを保てます。 6.実装時の注意点 6-1.ページ速度への影響チャットボットスクリプトや分析用JavaScriptを安易にページ全体に読み込ませると、Core Web Vitalsのスコアが悪化します。対策として: スクリプトには必ずasyncまたはdeferを付けるチャットボットは初回の表示から遅延させて読み込む（Lazy Load）必要なページにのみカスタムコードを差し込む（Webflowの「Page Settings」→「Custom Code」を活用） 6-2.プライバシーと法的対応 AIチャットボットは会話内容を外部のサービス（OpenAI等）に送信します。個人情報保護法やGDPRの観点から、以下を必ず確認してください: プライバシーポリシーに「チャットボット利用時のデータ送信先と目的」を明記するユーザーから問い合わせ内容に氏名や住所など個人情報が含まれる場合の取り扱いを規定する Cookieを使ったトラッキングを行う場合はCookieバナーを設置する 6-3.フォールバック設計 AIのAPIは100%稼働することが保証されていません。OpenAIのステータスページを見ても月に数回は部分的な障害が発生しています。必ずtry-catchでエラーをキャッチし、AI処理が失敗した場合でも通常のフォーム送信や問い合わせ受付が機能するよう設計してください。 async function sendWithAI(formData) {
  try {
    const aiResponse = await callOpenAI(formData)
    return { success: true, aiEnhanced: true, data: aiResponse }
  } catch (error) {
    // AI処理失敗時は通常フローで処理
    console.error('AI処理エラー:', error)
    return { success: true, aiEnhanced: false, data: formData }
  }
}
6-4.APIコストの管理 OpenAI APIは使用量に応じた従量課金です。特にチャットボットは1回の会話で複数回APIを呼び出すため、思わぬコストになることがあります。 max_tokensを適切に制限する gpt-4o-miniなど軽量モデルを選択肢に入れる Cloudflare WorkersやVercelの無料枠を最大限活用する OpenAIの使用量アラートを設定しておく 7.まとめ WebflowとAIの組み合わせは、想像以上に実現できることが多いです。Tidioのような既製品から始めて徐々にカスタム実装に移行する段階的なアプローチが、コストと効果のバランスという観点からも現実的です。本記事で紹介した実装パターンをまとめると: チャットボット: Tidio（手軽）→ Intercom（CRM連携）→ OpenAI独自実装（フルカスタム）の3段階 フォームAI強化: ZapierかMakeでOpenAI連携するだけで分類・フィルタ・自動返信が実現 コンテンツパーソナライズ: localStorage + DOM操作で非エンジニアでも対応可能 動的コンテンツ生成: Webflow API + OpenAI + Makeで半自動化ただし、ページ速度への影響、プライバシー対応、フォールバック設計は後から対応しようとすると工数が跳ね上がるため、設計段階から組み込んでおくことを強く勧めます。 Webflow制作とAI組み込みをまとめて依頼したい方、既存のWebflowサイトにAI機能を追加したい方は、f2t.jpにご相談ください。お客様の目標と予算に合わせて、最適な実装方法をご提案します。あわせて読みたい Web制作で使えるAIツール10選中小企業のWebサイトにAIを導入する方法 Webflow CMSの使い方完全ガイド