AIを活用したミニアプリ・業務改善ツール制作を始めました

小さなWebアプリや業務改善ツールの制作サイト「fmiyako.com」を公開しています

Webサイト制作やWordPress構築に加えて、最近は 小さなWebアプリ・業務改善ツールの制作 にも力を入れています。

その制作例や相談窓口として、fmiyako.com というアプリサイトを作成しました。

fmiyako.com では、予約システム、問い合わせフォーム、見積もりシミュレーター、診断ツール、クイズアプリなど、目的に合わせた小さなWebアプリ制作の相談ができるようにしています。実際に、予約・申込み系、お問い合わせ・管理系、費用計算・診断系、学習・クイズ系、業務改善ツール、Webサイト改善などの制作内容を紹介しています。

実際に遊べるアプリも公開しています

fmiyako.com では、制作相談用のサンプルだけでなく、実際にブラウザ上で遊べるミニアプリも公開しています。

漢字クイズ、ことわざクイズ、英単語クイズ、タイピング練習、おみくじ、占い、天気予報など、学習や気分転換に使える小さなアプリを少しずつ増やしています。これらのアプリは、JavaScript や PHP を使って制作しており、AIも活用しながらアイデア出しやコード作成を進めています。ただし、実際に動かすためには、画面の見やすさ、スマホでの操作性、データの扱い、エラーの確認など、AIだけでは整えきれない部分も多くあります。

現在28種類のアプリがあります。「こんなアプリが作れるんだ」と見ていただける制作サンプルにもなっていますので、よろしければ実際に触ってみてください。

AIも活用しながら制作しています

最近の制作では、AIも積極的に活用しています。

AIといっても、「ボタンを押せば全部自動で完成する」というものではありません。
私の場合は、主に ChatGPT と Codex を使い分けながら、制作の流れを進めています。

ChatGPTは、制作前の整理やアイデア出しに使うことが多いです。

たとえば、

• どんな機能が必要かを整理する
• 画面構成を考える
• ボタンや説明文の文言を整える
• クライアント様に伝わりやすい文章にする
• 制作手順を分解する
• 仕様をCodexに渡しやすい形にまとめる

といった場面で活用しています。

特に、予約システムやお問い合わせフォーム、見積もりシミュレーターのようなアプリでは、いきなりコードを書くよりも、先に「何を入力して、どこで確認して、管理画面では何を見たいのか」を整理することが大切です。

ChatGPTは、その整理を一緒に行う相談相手のような存在です。

一方で、Codexは実際のコード修正や機能追加に使っています。自分一人でコードを１から記述していた頃に比べると格段に速くなったし、デバックも楽になりました。

たとえば、

• PHPファイルの修正
• HTML/CSSの調整
• JavaScriptの機能追加
• 管理画面の追加
• JSONデータの読み込み
• 既存ページのデザインに合わせた実装
• エラーが出ないかの確認
• Gitで変更内容を管理する作業

などを進めるときに活用しています。ChatGPTで「こういう機能を追加したい」と仕様を整理し、その内容をCodexに渡して、実際のファイルを修正してもらう流れです。

Gitで変更履歴を残しながら進めています

AIを使った制作では、Gitで変更履歴を残すことも大切にしています。

AIはとても便利ですが、一度にたくさんのファイルを変更することがあります。相談しながら作っても意図しない結果になったり、かなり方向がズレることもしばしばあります。そのため、Gitで変更前と変更後の差分を確認しながら作業することで、どこが変わったのかを把握しやすくなります。

Gitを使っていると、

• どのファイルが変更されたか確認できる
• 変更内容をあとから見直せる
• 問題があったときに前の状態へ戻しやすい
• 作業の区切りごとに記録を残せる
• 本番環境へ反映する前に確認しやすい

というメリットがあります。

AIにコードを作ってもらう場合でも、最終的には人が変更内容を確認します。
「動いているから大丈夫」ではなく、「どこが変わったのか」「本番に上げても問題ないか」を確認しながら進めるために、Gitは欠かせない存在になっています。

AIだけでは完成しない部分もあります

AIを活用すると、制作スピードはかなり上がります。画面構成のたたき台を作ったり、コードの修正案を出したり、似たような機能を展開したりする作業は、AIが得意な部分です。ただし、AIだけでそのまま完成するわけではありません。

実際には、

• どんな目的で使うのか
• 誰が使うのか
• どこまで自動化するのか
• 管理画面が必要か
• メール通知が必要か
• スマホで使いやすいか
• 本番環境で安全に使えるか
• 個人情報をどこまで保存するのか
• 公開前に認証やアクセス制限が必要か

といった部分を、人の目で確認しながら調整する必要があります。

たとえば、お問い合わせフォームや見積もりフォームでは、名前・メールアドレス・電話番号などの個人情報を扱うことがあります。その場合、管理画面を誰でも見られる状態にしてはいけませんし、保存するデータの扱いにも注意が必要です。

また、AIが作ったコードが一見動いていても、実際の運用に合っていないこともあります。

「この項目は本当に必要か」
「管理画面に表示した方がよいか」
「お客様に見せる画面と管理者が使う画面を分けた方がよいか」
「デモでは問題ないが、本番では認証が必要ではないか」

こういった判断は、AI任せではなく、制作する人が確認する必要があります。

AIを使うからこそ、人の確認が大切になります

AIを使うことで、制作のスピードは上がります。しかし、スピードが上がるからこそ、確認や調整も大切になります。

私自身も、ChatGPTで仕様を整理し、Codexでコードを修正し、Gitで変更履歴を確認しながら制作を進めています。

AIに任せきりにするのではなく、

• 目的に合っているか
• 使う人にとってわかりやすいか
• スマホでも操作しやすいか
• 本番環境で安全に使えるか
• 後から修正しやすい構成になっているか

を確認しながら、ひとつずつ整えています。

AIは便利な道具ですが、最終的に大切なのは「何のために作るのか」です。

• 予約を受け付けたい。
• お問い合わせを管理したい。
• 見積もりの目安を自動で出したい。
• 診断ツールやクイズアプリを作りたい。
• 今の業務を少し楽にしたい。

そういった目的に合わせて、AIを活用しながら、実際に使える形に整えていくことを大切にしています。