体験レッスン後の連絡を楽にできる？フォロー文メーカーを作ってみた

こんな人に役立ちます

• コードを書いた経験はないが、小さな業務ツールを作ってみたい人
• AIにどこまで任せ、人が何を判断すべきか知りたい人
• 試作品を公開するまでの現実的なつまずきを知りたい人

この記事を読むと、非エンジニアがAIと小さなWebツールを作るときに、最初から決めておきたい範囲と確認点が分かります。

今回は、AIライフラボの実験ログ No.003 として、AIエージェントだけで小さなWebサービスを作れるのかを試しました。

私はプログラマーではありません。

これまでなら、Webサービスを作るには「コードが書ける人に頼む」「自分で勉強してから作る」という選択肢しかないと思っていました。

でも今は、CodexのようなAIエージェントに相談しながら、仕様を決め、ファイルを作り、動作確認し、GitHubで公開するところまで進められます。

今回の目的は、完成度の高いサービスを作ることではありません。

AIエージェントと一緒に、実際にブラウザで動くものを公開まで持っていけるのか。

そこを検証しました。

今回作ったもの

今回作ったのは、体験レッスン後フォロー文メーカー です。

個人教室や習い事教室の先生が、体験レッスン後に保護者へ送るLINEやメール文を作れる小さなWebツールです。

公開したツールはこちらです。

体験レッスン後フォロー文メーカー

GitHubのリポジトリはこちらです。

lesson-followup-maker

なぜこのツールを選んだのか

今回のテーマは、「AIエージェントだけで小さなWebサービスを作れるのか？」でした。

そのため、最初から大きなサービスは作らないことにしました。

条件は次の通りです。

• 個人でも需要がありそう
• シンプル
• 数時間から1日で試作できる
• ブラウザで動く
• 今後改善できる

いくつか候補を出した中で、今回は「体験レッスン後フォロー文メーカー」を選びました。

理由は、前回の実験ログ No.002 とつながっているからです。

No.002では、個人教室向けに「体験レッスン後の入会率を上げるテンプレート集」を作りました。

今回のWebサービスは、そのテンプレートをもう少し使いやすくする実験でもあります。

MVPで作った機能

最初から多機能にせず、今回はMVPとして必要最小限に絞りました。

作った機能は次の通りです。

• 教室の種類を入力できる
• 生徒名を入力できる
• 保護者名を入力できる
• 体験でよかった点を入力できる
• 保護者に伝えたいことを入力できる
• 文体を選べる
• 用途を選べる
• フォロー文を自動生成できる
• 生成した文章をコピーできる

逆に、今回は作らなかった機能もあります。

• ログイン機能
• 保存機能
• 決済機能
• AI API連携
• データベース

まずは「ブラウザで動く」「第三者が触れる」「文章が生成される」という状態を優先しました。

Codexに任せたこと

今回、Codexにはかなり多くの作業を任せました。

具体的には、次の作業です。

• サービス候補の整理
• MVPの設計
• HTMLファイルの作成
• CSSファイルの作成
• JavaScriptファイルの作成
• READMEの作成
• ローカルでの動作確認
• Gitの初期化
• 初回コミット
• GitHub Pages公開までの手順案内

私は、何を作るか、どこまでをMVPにするか、文章の違和感がないかを判断しました。

コードそのものは、ほとんどCodexに任せています。

実際に作ったファイル

今回作成したファイルは4つです。

• index.html
• style.css
• script.js
• README.md

最初はこの4つだけで十分でした。

ブラウザで動く小さなツールであれば、複雑な環境を用意しなくても形にできることがわかりました。

つまずいたこと

今回、スムーズに進んだ部分もありましたが、つまずいたこともありました。

特に難しかったのは、GitHubまわりです。

Git、GitHub、リポジトリ、GitHub Pagesなど、初めてだと似た言葉が多く、どこで何をしているのかがわかりにくく感じました。

また、ターミナルからGitHubへ直接アップロードしようとしたところ、認証で止まりました。

そのため、今回はGitHubの画面からファイルをアップロードする方法で進めました。

ここは、初心者にとって大きな壁になりやすいと感じました。

ただ、一度やってみると流れは見えてきます。

1. GitHubでリポジトリを作る
2. ファイルをアップロードする
3. GitHub Pagesを有効にする
4. 公開URLを確認する

この順番で進めれば、コードを書けない人でも小さなWebツールを公開できる可能性があります。

想像より簡単だったこと

一方で、想像より簡単だったこともありました。

それは、Webサービス本体の作成です。

入力欄を作る、選択肢を作る、文章を生成する、コピーボタンを作る。

このあたりは、Codexに依頼することでかなり短時間で形になりました。

途中で生成文に少し不自然な表現がありましたが、それもCodexと一緒に修正できました。

「最初は基礎から無理なく進めていくので安心してほしいように進めていきます」

という文章が出てしまったため、表現を調整して自然な文章になるように修正しました。

このように、AIが作ったものをそのまま使うのではなく、人間が違和感を見つけて直すことが大切だと感じました。

今回の成功条件

今回の実験で、成功条件として決めていたのは次の内容です。

• ブラウザで動く
• 入力すると文章が生成される
• 生成された文章をコピーできる
• 第三者が触れるURLを用意できる
• GitHubに保存できる

結果として、これらは達成できました。

公開URLはこちらです。

体験レッスン後フォロー文メーカー

GitHubにも保存できました。

lesson-followup-maker

完璧なWebサービスではありません。

でも、AIエージェントと一緒に、実際に触れるものを公開できたことは大きな一歩でした。

使ってみた感想

基本機能はCodexとの対話で想像より早く形になりました。一方、生成文の不自然さやGitHub認証は、人が確認して切り分ける必要がありました。完成品というより、第三者が触って反応を確かめるためのMVPです。

わかったこと

今回の実験でわかったことは、次の3つです。

1つ目は、AIエージェントがあれば、非プログラマーでも小さなWebサービスを形にできるということです。

もちろん、すべてを完全に任せられるわけではありません。

でも、ゼロからコードを書く必要はなくなります。

2つ目は、人間の判断はやはり必要だということです。

何を作るか、誰の課題を解決するか、どこまでをMVPにするか、文章が自然かどうか。

このあたりは、AIに任せきりにせず、自分で判断する必要があります。

3つ目は、公開まで進めることで学びが一気に増えるということです。

ローカルで動いただけではなく、GitHubに保存し、GitHub Pagesで公開したことで、「本当にサービスを作った」という感覚が生まれました。

これは、単にAIに相談しただけでは得られない経験でした。

次に改善したいこと

今回作ったツールは、まだ最小構成です。

今後改善するなら、次のような方向が考えられます。

• 生成文のパターンを増やす
• スマホでさらに使いやすくする
• 文章のトーンを増やす
• 入会案内文やFAQ回答も作れるようにする
• note商品への導線を追加する
• AI APIと連携して、より自然な文章を生成する

ただし、今すぐ全部を作る必要はありません。

まずは公開できたことを実験の成果として記録し、必要に応じて改善していきます。

今回の結論

AIエージェントと一緒に、非エンジニアでもブラウザで動く小さなWebツールを作り、GitHub Pagesで公開できました。ただし、誰の課題を解決するか、文章が自然か、MVPをどこまでにするかは人の判断が必要です。今回の成果物は完成版ではなく、実際に使える形まで到達できるかを検証するMVPとして公開しました。

実験データ

• 実験番号：No.003
• ステータス：制作・公開
• 使用AI：Codex
• 成果物：体験レッスン後フォロー文メーカー
• 公開URL：https://aya-ai-lifelab.github.io/lesson-followup-maker/
• GitHub：https://github.com/aya-ai-lifelab/lesson-followup-maker
• 達成したこと：小さなWebサービスを作成し、GitHub Pagesで公開
• 次回：公開したツールの改善、または別テーマで小さなWebサービスを作る