Vibe Codingでマスコットチャットを内製｜エンジニア不要の手順

「うちのマスコットキャラクター、ロゴやノベルティでは使っているけど、もっと活かせないかな」と感じていませんか。せっかく愛されているキャラクターなのに、Webサイトでは静止画のまま、というのはもったいない話です。

この記事では、自社のマスコットキャラクターと来訪者がチャットで会話できる仕組みを、Vibe Coding（AIに指示してコードを作らせる開発スタイル）で内製する具体的な手順を解説します。キャラ設定の作り方、APIキーを守る構成、動くコードの例、公開前のチェック、失敗の防ぎ方まで、現場目線でお伝えします。

Contents / 目次

1. 結論。マスコットチャットは「キャラ設定」と「答える範囲」を先に決めれば内製できる
2. マスコットチャットの作り方。5つのステップで進める
3. 取り組むと何が変わるのか。期待できる成果
4. よくある失敗と、その防ぎ方
5. 内製の落とし穴と、正直な妥協点
6. よくある質問

結論。マスコットチャットは「キャラ設定」と「答える範囲」を先に決めれば内製できる

最初に結論をお伝えします。自社マスコットとチャットする仕組みは、専門のエンジニアがいなくても内製できます。鍵になるのは、コードを書く技術ではなく、「キャラクターの人格設定」と「答えていい範囲」を先に言葉で固めることです。ここさえ決まれば、あとはAIに指示してコードを生成させ、自社サーバーに置くだけで動きます。

Vibe Codingとは、人が手作業でコードを書く代わりに、AIに「こういうものを作って」と自然な言葉で頼んでコードを生成させる開発の進め方のことです。プログラムの文法を覚える必要はなく、「何を作りたいか」を言葉にできれば形になります。

マスコットチャットを作るとき、進め方には大きく3つの選択肢があります。自社の目的とリソースに合うものを選びましょう。下の表で違いを整理しました。

進め方	向いている場面	作りやすさ	運用の手間
シナリオ型（選択肢を選んで進む）	聞かれる質問が決まっている。回答を完全に管理したい	かんたん	選択肢の更新が中心で軽い
生成AI型（自由に会話できる）	雑談や幅広い質問に、キャラらしく自然に答えたい	普通	暴走対策・回答チェックが必要
ハイブリッド型（両方を組み合わせ）	よくある質問は固定回答、それ以外はAIが対応	やや手間	バランス調整が必要

この記事では、いちばん相談の多い「生成AI型」を軸に手順を解説します。ハイブリッド型も、生成AI型の作り方が分かれば、固定回答を足すだけで実現できます。ポイント。最初から完璧を目指さず、まず「自社サイトの中だけで動く、社員が試せる試作品」を作るのが成功の近道です。社外公開はそのあとで十分間に合います。

Vibe Codingそのものの考え方をもう少し知りたい方は、「作りたい」を形にするVibe Coding超入門も合わせて読むと、全体像がつかみやすくなります。

マスコットチャットの作り方。5つのステップで進める

ここからは実際の手順です。読みながら手を動かせるよう、5つのステップに分けました。技術的に難しいのは1か所だけ（APIキーを守る部分）なので、そこだけ丁寧に解説します。

ステップ1。キャラクターの人格を言葉で書き出す

最初にやるのは、コードではなくキャラクター設定です。ここが仕組みの心臓部になります。AIは設定された人格になりきって答えるので、設定が薄いと「誰が話しても同じ無機質な回答」になり、わざわざマスコットにした意味がなくなります。

設定する項目は次のとおりです。雑談にも自然に応じられるよう、プロフィールはあえて細かく決めるのがコツです。

• 基本プロフィール：名前、年齢設定、出身、誕生日、好きなもの、趣味
• 一人称と語尾：「ぼく」「わたし」、語尾の口癖（一貫性が親近感を生む）
• 性格とトーン：明るい・落ち着いている・丁寧、など3〜4語で
• ブランドでの立ち位置：会社の何を象徴するキャラなのか
• 答えていい範囲：製品情報、営業時間、よくある質問など（ここが最重要）
• 答えてはいけないこと：個人情報の聞き出し、未確定の価格、約束ごと

この設定を、AIへの指示文（システムプロンプトといいます。つまりキャラの「台本兼ルールブック」です）にまとめます。下が出発点のたたき台です。これを丸ごと使うのではなく、AIと対話しながら自社のキャラに合わせて詰めてください。

あなたは［会社名］の公式マスコット「［キャラ名］」です。
一人称は「［例：ぼく］」、語尾は「［例：〜だよ］」を使い、明るく親しみやすく話します。

【話していい範囲】
・［製品/サービスの概要］　・営業時間と所在地　・よくある質問への案内

【守ること】
・範囲外のことを聞かれたら「ぼくには分からないから、担当者におつなぎするね」と答える
・価格や納期など変わりやすいことは断定せず「最新は担当者に確認してね」と言う
・住所や電話番号などの個人情報を相手から聞き出さない
・分からないことを、知っているかのように作って答えない

ステップ2。キャラクターの見た目（画像）を用意する

チャット画面に出すアイコンや立ち絵を用意します。既存のマスコット画像があればそれを使えば一番ブランドが揃います。新しい表情（笑顔・困り顔・お辞儀など）が欲しい場合は、画像生成AIで既存キャラのテイストに寄せて作る方法もあります。ただし自社の正式なマスコットは「権利が自社にある画像」を使うのが大原則です。AI生成で雰囲気だけ似せた別物を公式として出すと、ブランドの一貫性が崩れます。

ステップ3。APIキーを隠す「中継役」を用意する（最重要）

会話の頭脳はAI（大規模言語モデル）が担います。ここで一番気をつけるのが、AIを使うためのAPIキー（つまりAIサービスの合鍵）の扱いです。APIキーをWebページのJavaScriptに直接書くのは絶対にやめてください。ページの裏側を見れば誰でもキーを盗め、第三者に使われて高額請求につながります。これは内製でとくに注意したい事故です。

正しい構成は、ブラウザとAIの間に「中継役」のプログラム（PHPファイル1枚で十分です）を置くことです。ブラウザは中継役に話しかけ、中継役だけがAPIキーを持ってAIに問い合わせます。こうすればキーは表に出ません。XSERVERやさくらインターネットなど、PHPが動く一般的なレンタルサーバーにそのまま置けます。

下が中継役のPHPの完成例です（2026年06月16日時点で標準的な書き方）。コピーして使えますが、APIキーの場所と話しかけ先のAIサービスは、利用するサービスの公式ドキュメントで最新の指定を確認してください。

<?php
// chat-proxy.php ─ ブラウザとAIの中継役。PHPが動くサーバーに置く。
// 前提：APIキーは同じサーバーの安全な場所に環境変数などで保存し、ここに直書きしない。

header('Content-Type: application/json; charset=utf-8');

// ［ここを自社の値に変更］AIサービスのAPIキー。サーバーの環境変数から読む。
$apiKey = getenv('AI_API_KEY');

// ブラウザから送られた会話を受け取る
$input    = json_decode(file_get_contents('php://input'), true);
$messages = $input['messages'] ?? [];

// ステップ1で作ったキャラ設定をここに貼る（台本兼ルールブック）
$system = 'あなたは［会社名］の公式マスコット「［キャラ名］」です。…';

// 暴走・荒らし対策：1回の入力が長すぎたら止める
$last = end($messages);
if (mb_strlen($last['content'] ?? '') > 500) {
  http_response_code(400);
  echo json_encode(['error' => '入力が長すぎます']); exit;
}

// AIサービスへ問い合わせ（エンドポイント・形式は公式ドキュメントで確認）
$ch = curl_init('https://api.example-ai.com/v1/messages');
curl_setopt_array($ch, [
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_HTTPHEADER => [
    'Content-Type: application/json',
    'Authorization: Bearer ' . $apiKey, // ［サービスごとの指定に合わせる］
  ],
  CURLOPT_POSTFIELDS => json_encode([
    'model'      => 'モデル名', // ［利用モデル名を指定］
    'max_tokens' => 500,
    'system'     => $system,
    'messages'   => $messages,
  ]),
]);
$response = curl_exec($ch);
if ($response === false) {              // 通信失敗を握りつぶさない
  http_response_code(502);
  echo json_encode(['error' => 'AIに接続できませんでした']); exit;
}
echo $response;

ステップ4。チャット画面（見た目）をAIに作らせる

表示部分はVibe Codingの出番です。AIに次のように頼めば、HTMLとJavaScriptをまとめて生成してくれます。たたき台として短く渡し、出てきたものを見ながら直していきましょう。

右下に表示する吹き出し型のチャットウィジェットを作って。
・マスコットのアイコンを丸く表示
・入力欄と送信ボタン、会話は上に積み上がる
・送信したら chat-proxy.php に会話履歴をPOSTし、返信を吹き出しで表示
・スマホでも崩れないレスポンシブ対応
・外部ライブラリは使わず、HTMLとJavaScriptだけで完結させて

大事なのは、生成されたコードのうち「問い合わせ先が自分のchat-proxy.phpになっているか」「APIキーが画面側に紛れ込んでいないか」を必ず人が確認することです。AIはたまにキーを画面側に書く危険なコードを出します。ここは人の最終チェックが必須です。コードが読めなくても、「api」「key」という文字がHTML側にないかを目で探すだけで多くの事故を防げます。

ステップ5。社内で試して、会話の質を直す

動いたら、まず社員10人くらいで実際に話しかけてみます。想定外の質問、キャラが崩れる場面、答えに詰まる場面が必ず出てきます。それを集めて、ステップ1のキャラ設定に「こう聞かれたらこう答える」を追記していきます。AIチャットは作って終わりではなく、この育てる作業で精度が上がります。最初の2週間ほどは、毎日会話ログを見て手を入れるくらいのつもりでいると、ぐっと自然になります。社内向けアプリを内製した経験を整理したVibe Codingで社内限定アプリを自作する記事も、試作から改善の流れの参考になります。

取り組むと何が変わるのか。期待できる成果

マスコットチャットを導入すると、まず変わるのは「サイトの滞在体験」です。静止画だったキャラが話しかけてくれることで、来訪者の印象に残りやすくなり、問い合わせの心理的なハードルが下がります。電話やメールフォームは身構えるけれど、キャラとの雑談なら気軽に質問できる、という人は少なくありません。

キャラクターを会話の入口にすることは、来訪者との接点づくりや、他社との差別化、ブランドへの愛着づくりにつながりやすい打ち手です。社内向けの情報発信の窓口として使う方法もあります。

中小企業にとって現実的なメリットは、次のようなものです。なお具体的な削減率や件数は、業種・サイトの訪問数・質問の幅によって大きく変わるため、自社の数字で測りながら判断してください。

• 問い合わせ前の自己解決：営業時間やよくある質問にキャラが即答し、電話対応の手間が減る
• ブランドの記憶定着：キャラとの会話体験がそのまま会社の印象になる
• 採用・社内広報への横展開：採用ページや社内ポータルにも同じ仕組みを置ける
• 内製だからの低コスト維持：月額制サービスに比べ、サーバー代とAI利用料だけで運用できる

採用シーンでの応用に興味があれば、AIが24時間求職者の質問に答える採用サイト改善術でより具体的に解説しています。同じ作り方の応用で、求職者の疑問に夜間でも答える窓口がつくれます。

よくある失敗と、その防ぎ方

マスコットチャットづくりで現場がつまずくポイントは、だいたい決まっています。代表的な3つを「どんな状況で起きて、どうなって、どう防ぐか」のセットで紹介します。

失敗1。目的があいまいなまま作り始める

「流行っているから」とチャット導入自体が目的になると、何を答えさせるか決まらず、誰の役にも立たないものができあがります。社内でも「結局これ何のため？」という空気になり、放置されて終わります。

防ぎ方。作る前に「このチャットで減らしたい手間」か「増やしたい体験」を1つだけ言葉にします。たとえば「営業時間と定休日の電話問い合わせを減らす」のように具体的に決めると、答えさせる範囲もキャラの設定も自然に定まります。

失敗2。AIが知らないことを堂々と作って答える

生成AIは、知らないことでも、それらしい答えを自信たっぷりに作ってしまう性質があります（ハルシネーションといいます）。マスコットが存在しない商品や間違った価格を断言すると、ブランドの信用に直結する事故になります。

防ぎ方。キャラ設定に「分からないことは作らず、担当者につなぐと答える」を必ず書き込みます。さらに、製品情報や価格など正確さが必要な領域は、社内資料をAIに参照させてから答えさせる仕組み（RAGといいます。つまりAIに台本を渡してから答えさせる方法です）を足すと、的外れな回答が大きく減ります。 社内情報をAIで構築するRAG活用ガイドに、その仕組みの作り方をまとめています。

失敗3。公開後に放置してメンテナンスしない

AIチャットは公開直後がいちばん粗い状態です。学習や調整のための人と時間を確保していないと、変な回答が出続け、「使えない」と判断されてしまいます。

防ぎ方。公開前から「会話ログを週1回見て直す担当」を決めておきます。月に数時間でいいので、運用の枠をあらかじめ確保しておくことが、長く使われる仕組みの条件です。社内向けアプリを内製した経験を整理したVibe Codingで社内限定アプリを自作する記事も、試作から改善の流れの参考になります。

もう一つ見落とされがちなのが情報漏えいです。マスコットに社内の機密情報や顧客の個人情報を学習させたり、会話欄に入力させたりしないこと。利用するAIサービスのデータ取り扱い方針を公式ページで確認し、機微な情報は扱わせない前提で設計してください。

内製の落とし穴と、正直な妥協点

ここまで「内製できます」とお伝えしてきましたが、現場を見てきた立場から、率直な妥協点もお話しします。きれいごとだけでは判断を誤るからです。

まず、Vibe Codingで作れるのは「動くもの」までで、「安全に公開し続けられるもの」はもう一段の手間がかかります。社内で社員だけが触る試作品なら、AIが出したコードをそのまま使ってもほぼ問題ありません。しかし不特定多数が来る本番サイトに置くなら、入力の制限、荒らし対策、アクセス集中時の上限設定、AI利用料が跳ね上がらないための歯止めなど、地味だけれど欠かせない設計が要ります。この部分はAIに任せきると抜けが出やすく、人の目が要るところです。

次に、コストの見落としです。AIチャットは「使われるほど利用料がかかる」従量制が一般的です。社内試作では月数百円でも、来訪者が増えれば料金は伸びます。導入前に、想定する会話数で月いくらになるかをざっくり見積もり、上限設定をかけておくのが安全です。月額固定のサービスと、内製＋従量制のどちらが得かは、想定する利用量しだいで逆転します。

内製と外注の切り分けの目安はこうです。「キャラ設定と試作までは社内で楽しみながらやる、本番公開の安全設計と運用ルールづくりは詳しい人と一緒にやる」。この役割分担がいちばん無理がありません。全部を外注すると自社にノウハウが残らず、全部を内製すると安全面で不安が残ります。間を取るのが現実的です。向き不向きでいえば、来訪者数が少なく社内利用が中心なら内製がよく合い、ブランドの顔として大々的に出すなら最初から設計を相談したほうが結果的に早くて安全です。

よくある質問

ここまで読んで、「試作までは自社でやれそうだけど、安全な公開や運用設計に不安が残る」と感じた方は、ぜひ一度お話を聞かせてください。株式会社コレットラボ（大分・福岡を拠点にAI業務システム化を支援）では、自社で作りたい会社にもプロに任せたい会社にも合わせて伴走しています。現状の整理だけでも歓迎です。AI業務システム化の詳細はこちらから、気軽にご相談ください。