簡易チャットボット無料ダウンロード（プログラミングで作った）

記事内にPRが含まれる場合があります

2026年5月7日2026年5月18日

URLをコピーしました！

この記事で配布しているものは、2026 年の感覚でいうとAI チャットボットというより「埋め込み型の簡易 FAQ ウィジェット」として見るのが正確です。考え方自体は今でも使えて、問い合わせ導線の補助や、よくある質問の一次受けには十分役立ちます。

一方で、現在は生成 AI 連携のハードルが下がったぶん、実運用では次の注意点が増えています。

2026年時点での補足ポイント

API キーはフロント側に直書きせず、必ずサーバー側で扱う
問い合わせ内容に個人情報が入る前提で、保存方針を決める
表示が重いと離脱しやすいので、最初から全機能を積みすぎない
SEO 目的なら、回答本文そのものはページ内テキストでも持っておく

要するに、「右下から開く補助 UI」としては今も十分ありですが、高機能な AI 接客ツールと同じ期待値で置くとズレるということです。むしろ小さく、速く、よく聞かれる質問だけを返す構成のほうが使いやすい場面も多いです。

この記事内の配布データや設置方法は当時の作りに基づいているので、現在使う場合は JavaScript の読み込み位置、HTTPS、スマホ表示、API キー管理を追加で見直してください。

プログラミングの勉強をしながらチャットボットを作ったので公開します。こんなのでも使ってみたい方はダウンロードしてください。（いないか‥いないよね‥） 2023年3月15日　ChatGPT APIを使う様にVer2化しました。ブログに入れれば他者のサイトと差別化できて、SEO効果がアップするかも！！？ソースコードは公開してます。このツールで情報収集は一切やっていませんのでご安心ください。

無料チャットボットで出来る事

このツールができること‥ それは‥ 選択した「問い」に応じて、「答え」を表示する 以上。これだけ。（Ver2はChatGPT API連携してるけど別にChatGPTを連携する必要は無いんだけど個人的にやってみたかっただけ。）これでチャットボットと言えるんだろうか‥ むしろ「チャット」すらしてないような。文字入力エリアが無いので文章の受付もしないし、対応する回答をするわけでもなく。 AIは勿論搭載されていません。学習して答えを返すような機能もありません。あらかじめ用意された「問い」の一覧から、ユーザーがボタンを押せば、その問いに対応する「答え」を表示するのみです。簡易なＱ＆Ａを画面右下に表示させることができるツールです。

無料チャットボットのダウンロード

こちらからダウンロードしてください。 chatbot.zip chatbot2.zip

無料チャットボットのデモサイト

このサイトの右下にあるボタンを押してチャットボットウィンドウを開いてください。ここで動作確認できます。動作確認できるのはVer2です。 ChatGPT APIを使っていますがレスポンスが遅くて。早くレスポンスを表示するのにうまくいってません（誰かやり方教えて‥）

チャットボットの設置の仕方

ここからはVer1の設置方法について説明しています。Ver2のほうはまだ‥ ダウンロードファイルを解凍すると以下のファイルが出てきます。

●ファイル構成

chatbot/　　　　　＊＊フォルダ ┗chatbot.css　　　＊＊chatbot用のCSS ┗chatbot.js　　　　＊＊chatbotの本体JS ┗eyecatch.png　　　＊＊アイキャッチ画像 300×90 ┗eyecatch-sp.png　　＊＊スマホ用アイキャッチ画像 50×50 ┗profile.png　　　＊プロフィール画像 50×50

●設置方法

ドメインルート直下にchatbotフォルダ毎アップロードしてください。例）http://pg-happy.jp なら https://pg-happy.jp/chatbot/ このようになるようにアップロード ※ドメインルート直下じゃなくてもうごくけど

●設定

HTMLファイルの</head>タグ直前に以下のコードを追記してください。 www.example.comのドメイン部分は適宜あなたのサイトのドメインに書き換えてください。


<script type="text/javascript" src="http://pg-happy.jp/chatbot/chatbot.js"></script>

とりあえずはこれで動きます！あとは自分のサイト用にカスタマイズすればよいです。

無料チャットボットのカスタマイズとか

画像を変えたい

	ファイル名	縦横サイズ
アイキャッチ画像	eyecatch.png	300 x 90
アイキャッチ画像（スマホ用）	eyecatch-sp.png	50 x 50
プロフィール画像	profile.png	50 x 50

これらのファイルを用意して、chatbotフォルダの中に上書きしてください。

「問い」と対応する「答え」を設定するには

ここからは直接ソースコードをいじることになります。修正するファイル　：　chatbot.js

const menu = [
  'プログラミングスクールはやめとけ？',
  'おまえは何者じゃ？',
  'おすすめのプログラミングスクールは？',
  'どんな基準で言語を選ぶ？',
  'おすすめのプログラミング言語は？',
  '次のおすすめの言語は？',
];

ここの中身を変更することで「問い」を変えることができます。次に以下の中身を変更することで「答え」を変えることができます。「問い」の数と「答え」の数は一致させてください。

const res = [
  '独学できる人はやめとけ。自分で数千円で書籍を買えば数十万円もするスクールに通わなくても1年やれば一定の知識とスキルは身に着くでしょう。ただ、途中で挫折しないことが条件‥',
  '40代のオッサン。むかしSEとPGやってたけど、ブログのためにわざわざプログラミングスクールに実費で入会を繰り返して、ガチのレビューを書いてまふ。',
  '3ヶ月受講したけどテックアカデミーの先生は良かった。次点でテックキャンプ、テックキャンプの先生はちょっと心もとなかった。',
  'WEB系ならHTML/CSS/JavaScript/PHP/Rubyあたり。業務系ならJava/Cあたり。組み込みならC。JAVAはWEBもAndroidもできる。AI・統計分析ならPython。iOSはSwift。AndroidはKotlin。',
  '初心者ならまずはHTMLとCSSをやるとよい。その後にJavaScriptかな。画面で見てすぐ結果がわかるしWeb上にたくさんの参考が載ってる。',
  'まずは1つの言語をつきつめるとよい。大抵のプログラミング言語は似たような構文をしているので。',
];

名前を変えたい

修正するファイル　：　chatbot.js 以下の「光のプログラマー」のところを適宜、あなたの名前に変えればOKです。

const yourName = "光のプログラマー";

役職を変えたい

修正するファイル　：　ファイル　chatbot.js 以下の「駆け出しプログラマーサポート」のところを適宜、あなたの役職名に変えればOKです。

const yourRoll = "駆け出しプログラマーサポート";

アイキャッチの画像サイズを変えたい

修正するファイル　：　chatbot.css 6行目付近にある以下の「width: 300px;」の数字をいじれば幅を変えることができます。「height: 90px;」の数字をいじれば高さを変えることができます。（パソコンでの表示時）

#chatbot-eyecatch-div {
  display: block;
  position: fixed;
  padding: 0;
  top: auto;
  bottom: 0; /*アイキャッチの場所下からの距離*/
  right: 0; /*アイキャッチの場所右からの距離*/
  overflow:visible;
  width: 300px;
  height: 90px;
  background-image: url(eyecatch.png);
  background-position:right;
}

スマホでのアイキャッチ画像のサイズを変える場合は、修正するファイル　：　chatbot.css 176行目付近にある以下の「width:50px」と「height:50px;」の数字を変えれば幅高さのサイズを変えられます。

@media screen and (max-width: 480px) {
  #chatbot-eyecatch-div {
    bottom: 50px;
    width: 50px;
    height: 50px;
    background-image: url(eyecatch-sp.png);
  }

アイキャッチ画像の位置を変えたい

修正するファイル　：　chatbot.css ・PC画面の場合 6行目付近にある以下の「bottom: 0;」は画面下からの距離を表しています。数字を増やせば、画面下から上の方に位置を移動できます。

#chatbot-eyecatch-div {
  display: block;
  position: fixed;
  padding: 0;
  top: auto;
  bottom: 0; /*アイキャッチの場所下からの距離*/
  right: 0; /*アイキャッチの場所右からの距離*/
  overflow:visible;
  width: 300px;
  height: 90px;
  background-image: url(eyecatch.png);
  background-position:right;
}

もし画面右端に張り付きじゃなくて、左端に張り付きにしたい場合は「right: 0;」のところを「left: 0;」にすればOKです。・スマホ画面の場合同様に、176行目付近にある以下の「bottom: 50px;」の数字部分をいじればOKです。

@media screen and (max-width: 480px) {
  #chatbot-eyecatch-div {
    bottom: 50px;
    width: 50px;
    height: 50px;
    background-image: url(eyecatch-sp.png);
  }

ということで以上です。