Webアプリも生成AIで簡単！オリジナルのビジネスチャットボットを作ろう！【初心者OK・2時間半で完成】

皆さんは日々の業務で自動化・効率化したい作業はありませんか？これまではExcelでVBAを組んだり、Pythonで分析ツールを作成したりと、個人レベルでの効率化が主流でした。

しかし最近企業案件に関わる中で、「社員全員でブラウザ上で利用できる業務効率化サービスを内製したい」「便利なサービスをブラウザ上にリリースし、外部企業に提供したい」といったニーズが高まっているように感じます。特にサイボウズ社の提供する「kintone」をはじめ、ノーコードでWebアプリケーションを簡単に作成する流れが見受けられます。

Webアプリケーションとは、インターネットのWebブラウザ上で動作するアプリケーションのことです。今回は「生成AI」と「クラウドサーバーサービス」を組み合わせて、短時間でWebアプリケーションをデザイン・コーディングし、公開する方法をステップバイステップでご紹介します。

本記事のターゲット
Webアプリ制作の進め方とAIの活用ポイント
使用するツールの費用
実践：2時間半でチャットボットWEBアプリを完成させる方法
最後に
参考文献

本記事のターゲット

kintoneに憧れるが基本料金に見合う利用人数がいない企業担当者
業務生産性を向上させた企業担当者
費用と時間を極力抑えてWebアプリを作りたい方
オリジナルのチャットボットサービスを作りたい方
プログラミング初心者だが挑戦してみたい方

Webアプリ制作の進め方とAIの活用ポイント

Webアプリ制作を始める前に、基本的な概念である「フロントエンド実装」「バックエンド実装」について押さえておきましょう。「フロントエンド実装」とは「ユーザーが直接触れる画面やUIなど、目に見える部分の実装」になります。フロントエンド実装によって、ユーザーがストレスなく直感的に操作可能なUIが実現されます。

一方、フロントエンドでは複雑な集計ができません。そのため、「バックエンド実装」として「目には見えないが、裏側で行われる計算処理やデータベース操作」も併せて必要になります。

まさに、Webアプリケーションを制作するとは、「ユーザーが直感的に操作できる画面と、ユーザーが意図した返信をする計算処理を両方作成すること」と言えます。

本記事では特に、「1. アプリ企画」「2. フロントエンド実装」「3. バックエンド実装」「4. ローカルテスト」「5. 本番化」という流れで進行し、「1. アプリ企画」「2. フロントエンド実装」「3. バックエンド実装」「4. ローカルテスト」で生成AIツールのClaudeとCursor、「5. 本番化」でHerokuを使用することで、アプリを高品質かつ短時間で公開することを目指します。

使用するツールの費用

今回使用するAIツールは、ClaudeとCursorです。いずれも月額サブスクリプションサービスであり、3,000円/月程度で利用可能です。また、Herokuについてはクラウドサーバープラットフォームであり、性能によって費用は変動します。今回のケースであれば、Basicプランで1,000円/月程度を見込んでおくと良いでしょう。

従来のWebアプリ外注費用は規模にもよりますが、簡単なチャットボットアプリでも半年の開発期間で初期投資に20〜数百万円程度、維持費用で数万円程度かかるケースも多いです。生成AIを活用することで大幅な開発期間・コスト削減が実現できることがわかります。

ツール名	用途	費用
Claude	アプリ要件定義・フロント/バックエンドのベース作成	20ドル/月
Cursor	フロント/バックエンドの仕様追加・修正	20ドル/月
Heroku	クラウドサーバープラットフォーム	Basic 7ドル/月

実践：2時間半でチャットボットWEBアプリを完成させる方法

Webアプリ制作の全体フローは約2時間半（目安）で完了します。その内訳は以下の通りです。

要件定義：10分
フロントエンド実装：30分
バックエンド実装：60分
ローカルテスト：20分
本番化：30分

今回は、「石川県に店を構える本屋で働くスタッフ。お客様から日々問い合わせを受ける中で、これまでの社内対応をチャットボットに読み込み、業務負荷を削減と新入社員のオンボーディングを図る」というシチュエーションのもと、実際に作成してみましょう。

※今回の説明にあたって以下の設定を割愛しています。事前のセットアップをお願いします。

Python
Pip
OpenAI API

STEP1. 要件定義(10分)

まず、アプリに求める要件を簡単にまとめ、Claudeにファイルを一式作成してもらいましょう。

以下の仕様でWEBアプリケーションを実現するファイル一式を作成してください

# 仕様
- 質問に対して、Excelでまとめた社内の知見を参照し、回答を返すチャットボット
- ブラウザアクセスするとオリジナルのチャット画面に遷移
- チャットされた内容を、プロンプトにはExcelの内容を差し込み、OpenAI APIでリクエスト。レスポンスをチャット画面に表示
- フロントエンドはHTML・CSS・JavaScript、バックエンドはPython Flaskとする

指示を出した結果以下のファイル一式を作成してくれました。ダウンロードして、フォルダに格納します。

chatbot-sample/
├── app.py                  # Flaskバックエンド
├── requirements.txt        # Python依存関係
├── .env.example           # 環境変数設定例
├── knowledge_base.xlsx    # 知見データベース（自動生成）
├── templates/
│   └── index.html         # フロントエンドHTML
└── README.md             # このファイル

ファイルを格納したらターミナルにてrootフォルダに移動し、pythonのライブラリをインストールし、バックエンドプログラムを実行してみます。

# Pythonの関連ライブラリのインストール
pip install -r requirements.txt
# バックエンドプログラムの起動
python app.py

実行したら、app.pyで指定しているポート番号のローカルホストにブラウザ上でアクセスします。5000ポートを利用している場合は、「http://localhost:5000」をブラウザで実行します。

ブラウザアクセスすると以下のような画面が表示されました。

STEP2. フロントエンド実装（30分）

STEP1のローカルホストで表示したチャットボット画面UIについて、改善を施していきましょう。

「index.html」をCursorで開き、「Go > Add Symbol to New Chat」をクリックすることで、左手に「コード編集画面」、右手に「チャット画面」が表示されます。チャット画面に対して、修正依頼をしていきましょう。

修正依頼内容は、PowerPointのスライドにスクリーンショットを貼り付け、コメント形式で記載すると楽でしょう。コメント記載が終わったら、PDFに変換しCursorに貼り付け修正指示を出します。

修正指示を出した箇所を一部修正してくれました。修正として反映不足な点や追加の観点について修正依頼をもう一度出してみましょう。より具体的に指示を出すことで、意図通りの修正をしてくれます。

以下の修正を加えてください
- チャットボットの名称を「石川書店チャットボット」としてください
- 使用する色について文字色は白もしくは黒、メインカラーは#E0F2E8、ハイライトカラーは#61A242 のみを使うように変更してください
- キャラクターアイコン画像を、static/images/character_img.png に変更してください

いい感じで修正してくれました。次のバックエンド実装は、少し難易度が上がりますが頑張っていきましょう。

STEP3. バックエンド実装：60分

まずOpenAI APIキーをローカルの環境変数に設定します。Macだとbash・zshシェルで登録する場合や、Windowsではシステムプロパティから直接設定もできます。

# bashシェルの場合
vim ~/.bash_profile
# zshシェルの場合
vim ~/.zshrc

今回APIリクエスト時に参照するExcelデータ（knowledge_base.xlsx）についても作成しておきましょう。以下のようなデータセットを30行ほど用意してみます。

カテゴリ	質問	回答	更新日
営業時間	営業時間は何時までですか？	10:00～19:00まで営業しています。	2025/7/10
駐車場	駐車料金はかかりますか？	無料でご利用いただけます。	2025/8/16
支払い	電子マネーは使えますか？	はい、交通系ICカードやPayPayなどに対応しています。	2025/8/16

準備ができたところで、Cursorにapp.pyの修正依頼を出していきましょう。

以下のバックエンド仕様にapp.pyを修正してください。

# 仕様
ユーザーが問い合わせた内容について、knowledge_baseのうち適切な内容を、OpenAI APIのレスポンスにより回答する。適切な回答がない場合には、店員に尋ねるように促す

# knowledge_base.xlsxのレコード例
カテゴリ	質問	回答	更新日
営業時間	営業時間は何時までですか？	10:00～19:00まで営業しています。	2025/8/16
駐車場	駐車料金はかかりますか？	無料でご利用いただけます。	2025/8/16
支払い	電子マネーは使えますか？	はい、交通系ICカードやPayPayなどに対応しています。	2025/8/16

一回の修正依頼後に、3~4回追加で修正箇所を依頼していくと比較的柔軟な回答が可能になりました。

STEP4. ローカルテスト：20分

バックエンドの実装で概ね動きは確認できたので、細部について「index.html」「app.py」などをまとめて修正していきましょう。

以下の点について修正してください

- 書籍DBや書籍数という表現をデザインから消してください
- アイコンのキャラクターが画面左側で回答するデザインにしてください。デフォルト画面のキャラクターアイコンも画面左側にしてください
- basic認証をつけ、id:hogehoge、pass:hogehogeで設定してください
- requirements.txtのpandasのバージョンをpandas>=2.1.0としてください。またgunicorn==21.2.0を依存関係に追加してください
- runtime.txtにpython-3.11.7を明示的に指定してください
- HerokuでFlaskアプリを実行するため、Procfileを作成をしてください: web: gunicorn app:app

Cursorが自動的にコードを修正した結果を反映すると、しっかり反映されています。修正点が問題なければ、Herokuへの本番化に移りましょう。

STEP5. 本番化：30分

本番化に際して、今回はクラウドサーバープラットフォーム「Heroku」を使っていきます。

Herokuは米国Salesforce社のサービスであり、大手企業であることからセキュリティ・信頼性ともに高いと言えます。SOC認証取得済み、GDPR/CCPA対応、多くのアプリケーションがすでに稼働している実績がある点も評価できるでしょう。では実際に設定していきましょう。

https://jp.heroku.com/ にアクセスし、アカウントを所有していない場合は作成をし、ログインします
ターミナルを開き、Heroku CLI をインストールし、アプリの作成をします。
ローカルテストしたファイルに移動し、Herokuサーバーへアップしていきます。
Herokuの環境変数設定にOpenAI APIキーを登録する

手順2・3・4をターミナルで実行するコードは以下になります。

# Heroku CLIをインストールする
brew install heroku/brew/heroku
# Heroku CLIにログインする
heroku login
# Herokuアプリを作成する
heroku create wanilablog-test1
# リモートリポジトリを設定
heroku git:remote -a wanilablog-test1
# ファイルをステージング
git add .
# コミット
git commit -m "初回コミット"
# Herokuにデプロイ
git push heroku master
# HerokuサーバーにOpenAI APIキーを登録する
heroku config:set OPENAI_API_KEY=xxxxxxxxxxxxx

アプリが無事作成されると、Herokuのダッシュボード画面にアプリケーションが表示されます。作成したアプリケーションをクリックし、右上の「Open app」をクリックするとブラウザ上で表示されます。以後、ブラウザ表示されたURLを共有することで他のユーザーもアクセス可能になります。