STUDIOで作ったサイトは、見た目がきれいに仕上がります。ところが公開してしばらく経つと、問い合わせフォームに同じ質問が並び始めます。「料金はいくらですか」「対応エリアはどこまでですか」「導入までどのくらいかかりますか」。

サイトのどこかには書いてあるのに、訪問者は見つけられずにフォームを開きます。そして返信を待っている間に、別の会社に問い合わせています。その場で答える窓口があれば、この取りこぼしは減らせます。

この記事では、STUDIOのサイトにAIチャットボットを設置する手順を、実際の設定画面の流れに沿って説明します。あわせて、STUDIO特有の「プレビューでは出ない」仕様と、埋め込みボックス（Embed）を使ってはいけない理由も扱います。ここを知らないと、正しく貼ったのに動いていないと勘違いします。

この記事で分かること

STUDIOでチャットボットを設置する経路が「カスタムコード」ひとつである理由
3ステップの具体的な設置手順
有料プランが必要になる理由と、そのコストの考え方
「貼ったのに出ない」の大半を占める、STUDIO特有の仕様
LINEやネットショップと組み合わせるときの考え方

1. STUDIOでの設置先は「カスタムコード」

STUDIOにはHTMLファイルを直接編集する機能がありません。デザインエディタで作った内容がそのまま公開サイトになります。そのため、外部のスクリプトを差し込む窓口はカスタムコードに限られます。

カスタムコードは、</head> の直前と </body> の直前に、自分で書いたコードを差し込める機能です。アクセス解析タグや広告タグを入れるときにも使う、標準的な仕組みで、チャットボットもここに入れます。

埋め込みボックス（Embed）ではうまくいかない

STUDIOにはもうひとつ、コードを扱える場所があります。追加パネルから置ける埋め込みボックス（Embed / Blank ボックス）です。ここにもHTMLやJavaScriptを書けるため、こちらに貼ろうとする方が多いのですが、チャットウィジェットには向きません。

理由は、埋め込みボックスの中身がiframeとして展開されるためです。iframeは自分の枠の中だけを描画領域とします。チャットボットは画面の右下に固定で浮かび、クリックすると大きく開く作りなので、箱の中に閉じ込められると、ボタンが切れる・開いても枠からはみ出せないという状態になります。

チャットボットのようにページ全体に対して浮かせたいものは、必ずカスタムコード側に入れてください。埋め込みボックスが向いているのは、地図・動画・フォームのように「この場所にこの大きさで置きたい」ものです。

2. 設置手順（3ステップ）

ここでは、私たちが提供しているものしりAIを例に説明します。所要時間は5分程度で、コードを書く場面はありません。

ステップ1: 埋め込みコードを取得する

ものしりAIにアカウントを作り、管理画面でウィジェットを作成して「埋め込みコード」をコピーします。形はこのような1行のスクリプトタグです。

<script async src="https://monoshiri.ai/widget/embed.js" data-api-key="（発行された自分のキー）" data-api-url="https://api.monoshiri.ai"></script>

設置先のドメインを事前に登録する必要はありません。studio.site のサブドメインでも、独自ドメインを接続したサイトでも、同じコードがそのまま動きます。

ステップ2: カスタムコードの設定を開く

STUDIOのデザインエディタで対象プロジェクトを開き、カスタムコードの設定欄を開きます。画面の外側（グレーの領域）をクリックして右側のパネルを開くと、サイト全体に適用する設定と、ページごとに適用する設定がタブで分かれています。

チャットボットは全ページに出すものなので、サイト全体側を選びます。

なお、エディタのUIは更新されることがあります。メニューの名前が記事と違う場合は、STUDIOの公式ヘルプで「カスタムコード」を検索して、最新の場所を確認してください。

ステップ3: `</body>` の直前に貼り付けて公開する

カスタムコードには </head> の直前と </body> の直前の2か所があります。チャットボットは </body> の直前に入れます。

</head> 側はページ本体が描かれる前に実行されるため、表示速度に影響しやすい場所です。チャットウィジェットのように「ページが表示されたあとに右下へ出てくればよいもの」は、終了タグ直前が適しています。

貼り付けたら保存し、公開（Publish）します。ここが最重要です。詳しくは次の章で説明します。

より詳しい要件と画面つきの手順はSTUDIO連携ページにまとめています。STUDIO以外のサイトも含めたウィジェット全般の考え方はチャットウィジェット導入ガイドを参照してください。

3. つまずきの大半は「プレビューで確認している」

STUDIOでもっとも多いつまずきが、これです。

カスタムコードは、デザインエディタとプレビューでは動作しません。 STUDIOの公式ヘルプにも、追加したコードはエディタやライブプレビューでは実行されないため、公開したサイトで確認するように明記されています。

つまり、正しく貼れているのに、プレビューを見ている限り右下には何も出ません。ここで「設定が間違っている」と判断して、貼り直したり、埋め込みボックスに移したりすると、かえって迷走します。

確認の手順はこうしてください。

カスタムコードに貼り付けて保存する
公開（Publish）する
公開URL（studio.site または独自ドメイン）をブラウザで開く
それでも出ない場合は、スーパーリロード（Windows: Ctrl+F5 / Mac: Command+Shift+R）で再確認する

それでも表示されないときは、ものしりAI側でウィジェットが公開状態になっているかを確認します。管理画面で下書きのままだと、コードを貼っても何も出ません。

知っておくと迷わない仕様

公式ヘルプで示されている仕様のうち、実務で効くものを挙げます。

</head> の直前に書けるタグは限られます（link / meta / style / script / noscript）。チャットボットは script タグなのでどちらにも置けますが、</body> の直前を推奨します
コードブロックは </head> 側・</body> 側それぞれ10個まで、1フィールドあたり30,000文字までです。解析タグなどと併用しても、通常の運用で上限に当たることはありません
サイト全体とページ個別のどちらにも設定できます。ページ個別に入れると、そのページでしか表示されません。チャットボットはサイト全体側に入れてください

4. 有料プランが必要な理由と、費用の考え方

正直に書きます。STUDIOのカスタムコードは有料プラン限定の機能です。無料（Free）プランでは入力欄自体が使えないため、この方法でチャットボットを設置することはできません。

STUDIOの有料プランはMiniから始まります。2026年9月時点では年払いで月額590円程度、月払いで月額1,290円程度です。プラン構成と料金は変更されることがあるため、契約前に必ずSTUDIOの公式料金ページで最新の条件を確認してください。

ここで考え方を整理します。STUDIOで作ったサイトを事業に使うなら、独自ドメインの接続やバナー非表示のために、いずれ有料プランへ上げることになります。カスタムコードのためだけに上げるというより、有料プランに上げたときに使えるようになる機能のひとつ、と捉えるのが実態に近いです。

チャットボット側の費用は別にかかります。参考として、ものしりAIの場合の数字を挙げます。

	Free	Light	Standard	Pro
月額（税込）	0円	2,980円	7,980円	29,800円
AIの回答数（月間）	150回	1,000回	3,000回	20,000回
フォルダ数	1	5	10	30
1フォルダあたりファイル数	30件	100件	300件	300件
チャットウィジェット	1つ（月150回）	1つ	1つ	1つ

※ 2026年9月時点。最新の内容は料金プランをご確認ください。

無料プランは「自分のサイトで使えるか確かめる」ためのものと考えるのが現実的です。チャットボットが機能し始めると、月150回は1日5回のペースで到達します。逆に、数か月経っても上限に届かないなら「問い合わせの母数がそもそも少ない」という事実が分かったことになり、それはそれで有用な情報です。

「無料」の中身の分け方は、WordPressにチャットボットを無料で入れる方法で3つの型に整理しています。考え方はSTUDIOでもそのまま使えます。

5. LINEやネットショップと組み合わせる

LINEへの導線とAIチャットは役割が違う

STUDIOのサイトにLINEを置きたい、という相談はよくあります。ここは整理しておく必要があります。

LINE公式アカウント側で提供されているのは、友だち追加のための導線が中心です。LINEのトーク画面そのものをサイトの中に埋め込んで、その場で会話を完結させる仕組みではありません（仕様は変わることがあるため、最新はLINEの公式ドキュメントを確認してください）。

つまり、サイトにLINEの導線を置いた場合、訪問者は「LINEアプリに移動して、友だち追加して、それから質問する」という流れになります。その場で聞きたいだけの人には、段差が3つあります。

現実的な組み合わせはこうです。

サイト上で今すぐ聞きたい質問 → チャットウィジェットで即答する
継続的に連絡を取りたい相手 → LINEの友だち追加へ誘導する

ものしりAIはLINE連携にも対応しているため、Webのチャットウィジェットと、LINE公式アカウントの自動応答で、同じ資料をもとに同じ回答を返せます。窓口ごとに回答を作り分ける必要がありません。考え方はLINEで社内ナレッジに答えさせるにまとめています。

ネットショップを別サービスで運用している場合

STUDIOでコーポレートサイトを作り、販売は別のECサービスで、という構成もよくあります。この場合、両方に同じ埋め込みコードを貼れば、どちらでも同じチャットボットが動きます。ドメインごとの登録が不要なので、貼るだけで済みます。

ECサイト側の設置手順は、Shopifyにチャットボットを設置する方法やBASEにチャットボットを設置する方法にまとめています。

6. 何を答えさせるかは、入れる資料で決まる

設置しただけでは、チャットボットは何も答えられません。AIが読む資料の質が、そのまま回答の質になります。

シナリオや想定問答の分岐を作る必要はありません。テキストやPDFをアップロードすると、AIがその内容をもとに回答します。STUDIOで作られることが多いコーポレートサイト・サービスサイトなら、最初に入れるべきは次の5つです。

サービス紹介資料 — 提供内容、対応範囲、他との違い
料金表 — プラン、オプション、初期費用の有無
FAQページの内容 — すでにサイトに書いてあるものをそのままコピーすれば十分です
導入の流れ — 問い合わせから開始までの期間とステップ
会社概要・対応エリア — 所在地、営業時間、対応可能な地域

コツは、すでにサイトに書いてある内容をそのままファイルにすることです。新しく文章を書き起こそうとすると、それだけで導入が止まります。

STUDIOで作ったサイトは、デザインを優先して情報量を絞っていることが多く、「書いていないから聞かれる」質問が集まりやすい傾向があります。チャットボットに入れる資料は、サイトに載せきれなかった詳細の置き場としても機能します。

7. 設置してからが本番

チャットボットは「置いたら終わり」の道具ではありません。効果が出るかどうかは、設置後に会話ログを見るかどうかでほぼ決まります。

ものしりAIでは管理画面で、訪問者の質問・AIの回答・評価を確認できます。ここで見るべきは、うまく答えられた会話ではなく、答えられなかった会話です。それはそのまま「サイトに書かれていない情報」のリストになります。

よくあるのは、次のようなパターンです。

対応エリアの質問が多い → 対応エリアの資料を追加し、サイトにも明記する
「個人でも依頼できますか」が繰り返される → サービス紹介のページに一文を足す
料金の細かい条件を聞かれる → 料金表に条件を書き足す

3つ目までを見て気づくのは、チャットボットに集まる質問が、サイトの改善リストでもあるということです。問い合わせを減らす一番効く手は、そもそも聞かれない状態を作ることです。

その他のつまずきポイント

右下でボタンが重なる: STUDIOのサイトにはページトップへ戻るボタンなど、右下に置かれる要素があります。重なる場合は、ものしりAIの管理画面でボタンの表示位置を左下に変更できます。

スマホでの見え方: 多くのウィジェットは、スマートフォンでは全画面表示に切り替わります。設置後は必ず実機のスマートフォンで開いて確認してください。PCのブラウザ幅を縮めるだけでは気づけない崩れがあります。

アニメーションとの干渉: チャットウィジェットは独立したスクリプトとして右下に表示されるため、STUDIOのスクロール演出やインタラクションとは干渉しません。

予約や決済はできない: チャットボットができるのは、資料に基づいて質問に答えることです。予約の確定や決済の処理は行いません。ウィジェットの設定に問い合わせフォームのURLを登録しておくと、AIが答えきれないときの逃し先が用意できます。

まとめ

STUDIOでの設置先は「カスタムコード」ひとつ。埋め込みボックス（Embed）はiframeに閉じるため、右下固定のチャットウィジェットには使えない
手順は埋め込みコード取得 → カスタムコードを開く → </body> の直前に貼って公開の3ステップ。5分程度で、コードを書く場面はない
最大のつまずきは、カスタムコードがエディタとプレビューでは動作しないこと。必ず公開したサイトで確認する
カスタムコードは有料プラン限定。無料プランでは設置できない。プラン構成と料金は変更されるため、契約前に公式の料金ページで確認する
コードブロックは </head> 側・</body> 側それぞれ10個まで、1フィールド30,000文字まで
埋め込みコードはドメインごとの登録が不要。studio.site でも独自ドメインでもそのまま動く
LINEはサイト内で会話を完結させる仕組みではないため、その場の質問はウィジェット、継続連絡はLINEと役割を分ける
回答の質は入れる資料の質で決まる。サービス紹介・料金表・FAQ・導入の流れ・会社概要を、既存ページからコピーして入れる
設置後は会話ログを見て、答えられなかった質問を資料とサイト本体に反映する

STUDIOにチャットボットを設置する方法｜カスタムコードで埋め込む手順【2026年版】

この記事で分かること