AIでWebアプリを作って公開・改善するまで｜個人開発で回した6ステップ

AIを使えば、Webアプリを「作る」こと自体は以前よりかなり速くなりました。

読者

AIでコードを書けるなら、アプリ作りはもう簡単になったってこと？

YuLab

作る部分は速くなりました。でも実際には、設計・公開・実機確認・運用・改善まで回して初めて「使えるもの」になります。

自分もAIやCodexを使いながら、穴埋めノートや幼児向けWebアプリ、ポートフォリオなどを作ってきました。

その中で感じたのは、AIで制作速度が上がるほど、「作った後」の工程が重要になるということです。

この記事では、これまで実際に経験した制作・失敗・移行・自動化を、1つの流れとして整理します。

STEP 1｜AIに作らせる前に「何を成立させたいか」を決める

AIへ指示すれば、コードも文章も問題もかなり速く作れます。

ただし、出力があることと、目的に合ったものになっていることは別です。

穴埋めノートでは、AIに問題作成を任せても、重要箇所・手がかり・問いの成立性は人間側で確認するようにしています。

AIに作業を任せても、「何を良い状態とするか」は人間側で持つ。

これは学習アプリ以外のWeb制作でも同じだと感じています。

具体例は、AIで穴埋め問題を作るときの3つのチェックポイントで紹介しています。

STEP 2｜コード上のPASSだけで終わらず、実機で確認する

実装できたら、次は実際の端末で確認します。

自分の場合、コード上のテストではPASSしていたのに、iPhone Safariでは音声が出ないことがありました。

最終的にはWeb Speech APIにこだわらず、MP3ファイルを再生する方式へ切り替えています。

実機トラブルと解決までの流れは、iPhone SafariでWeb Speech APIの音が出なかった実例にまとめています。

STEP 3｜制作速度が上がると、公開コストが問題になる

AIで修正が速くなると、「少し直す → 公開 → 確認 → また直す」の回数も増えます。

自分はこのサイクルを短期間で繰り返し、Netlifyの無料枠クレジットを5日間で大きく消費しました。

ここで初めて、制作速度だけでなく、その速度を受け止める公開環境も必要だと気づきました。

無料枠を消費した具体的な経緯は、Netlify無料枠のクレジットを使い切った原因と対策で紹介しています。

STEP 4｜公開先を変えるときは「表示できた」で終わらせない

公開環境をConoHa WINGへ寄せるときも、新URLが表示できただけでは移行完了にしませんでした。

フォーム、ログイン、保存データ、GA4などの計測、次回の更新方法、旧URLの役割まで確認してから旧環境を整理しています。

移行時の確認項目は、Netlify・GitHub PagesからConoHaへ移行する手順でチェックリスト化しています。

STEP 5｜公開が安定したら、手動アップロードを減らす

公開先を整理したあとは、更新のたびにFTPソフトを開く作業も減らしました。

現在は、main push → GitHub Actions → ConoHa WINGという流れで自動デプロイする形にしています。

認証情報はGitHub Secretsで管理し、制作物ごとにFTPアカウントの接続範囲も限定しています。

実際の構成と運用上の注意点は、GitHub ActionsでConoHaへ自動デプロイする方法でまとめています。

STEP 6｜自動化は「できるだけ」ではなく「回収できるだけ」進める

一度自動化を始めると、あれもこれも自動化したくなります。

ただし、自動化にも設定・調整・保守のコストがあります。

自分は、数日〜1、2週間程度で手間を回収できるものは小さく試し、長期回収になるものはアクセス・利用・収益などの成果シグナルが出てから深く作り込むようにしています。

判断方法は、AI自動化はどこまでやるべき？回収期間と成果シグナルで判断する方法で整理しています。

この6ステップは一度で終わらない

ここまで進むと、また最初の設計へ戻ります。

実際に使って分かったことを次の仕様へ反映し、AIへ新しい作業を任せ、もう一度実機で確認する。

つまりWebアプリ制作は、

という循環になっています。

AI時代は「作ること」より、その後の判断が重要になる

AIを使い始めた当初は、「どこまで作れるか」に意識が向いていました。

今は、作る部分そのものよりも、誰にどんな価値を届けるか、実際に動くか、どう公開するか、どう改善するかの方が重要だと感じています。

自分では価値があると思っていても、それだけでは他の人にとって価値があるとは分かりません。

だからこそ、これからは制作物を増やすだけでなく、実際に使った結果・アクセス・反応も見ながら、この流れ自体を改善していく予定です。

このページを全体の入口として、各工程で詳しく知りたい内容があれば、それぞれの実例記事へ進める形にしています。

一通り読んだあとにまたこの流れへ戻り、次に改善する工程を選ぶ使い方を想定しています。