そんなところから始まったWebアプリ制作ですが、気が付けば第10回まで進み、Ver.1.0が完成しました。
制作開始が2026年8月6日。Ver.1.0完成が8月9日。
わずか4日間。
……ちょっと作るペースがおかしい（笑）
今回は制作方法を細かく解説する記事ではなく、運営日記として第1回から第10回までを軽く振り返りながら、AIと一緒にWebアプリを作ってみて感じたことを書いてみようと思います。
まずは第1回から第10回までを振り返ってみる
制作過程を最初から読みたい方は、こちらの第1回からどうぞ。
最初は本当に普通のタイマーでした。
そこから「これも欲しい」「ここはこうした方が使いやすい」と少しずつ機能を追加していった結果、こんな感じになりました。
| 回 | 今回やったこと | 完成版 |
|---|---|---|
| 第1回 | 単体タイマーの基本機能。スタート、一時停止、再開、リセットなどを作成。 | 別ウィンドウで開く |
| 第2回 | 青いガラス・ネオン風のデザインに変更。時間の直接編集とスマートフォン対応。 | 別ウィンドウで開く |
| 第3回 | 終了時にタイマーパネルが回転し、「タイマー名＋終了」を表示する演出を追加。 | 別ウィンドウで開く |
| 第4回 | 複数タイマーへ拡張。上段・下段・全体の一斉スタートとリセットを追加。 | 別ウィンドウで開く |
| 第5回 | 設定画面を追加。タイマー数を可変にし、段ごとの累積時間にも対応。 | 別ウィンドウで開く |
| 第6回 | マシントラブルなどを想定した個別延長タイマーを追加。延長履歴や残り1分警告も実装。 | 別ウィンドウで開く |
| 第7回 | 累積時間／個別時間の切り替え、段ごとの終了表示、試験全体の終了表示を追加。 | 別ウィンドウで開く |
| 第8回 | 7種類の外観テーマを追加。サイバーパンクやスチームパンクなど、かなり遊び始める（笑） | 別ウィンドウで開く |
| 第9回 | 設定や実行状態を保存。ブラウザを閉じたりPCを再起動したあとでも復元できるようにした。 | 別ウィンドウで開く |
| 第10回 | 全画面表示、Wake Lock、Windows 11のスリープ設定案内を追加してVer.1.0完成。 | 別ウィンドウで開く |
こうやって並べてみると、第1回と第10回ではほとんど別物です（笑）
第1回の段階では「普通のキッチンタイマー」だったものが、複数タイマー、個別延長、保存・復元、テーマ変更、全画面表示などを追加して、最終的には模擬試験や試験運営を想定したタイマーボードになりました。
そして完成したVer.1.0がこちら
第10回まで作った完成版を、このページにもそのまま埋め込んでみます。
大きな画面で使いたい場合や、全画面表示を試したい場合は、こちらから別ウィンドウで開いてください。
ところで、これって普通の会社なら誰が作るんだろう？
Ver.1.0が完成してから、ふと思いました。
今回は私とAIのノンの2人で作っています。
でも、普通の開発現場の職種に当てはめたら、実際には何人分の仕事をしていたんだろう？
ちょっと分けてみました。
| 開発職種 | 今回やったこと | 主な担当 |
|---|---|---|
| 企画・プロダクトオーナー | 何のために使うのか、どんな機能が必要なのかを考える。 | きょろぽん |
| ディレクター | 次に何を作るか、どこまで実装するか、制作の順番を決める。 | きょろぽん＋ノン |
| UI・UXデザイナー | タイマーの配置、ボタン、設定画面、色、操作方法などを考える。 | きょろぽん＋ノン |
| フロントエンドエンジニア | HTML・CSS・JavaScriptを書いて実際に動くWebアプリを作る。 | ノン |
| QA・テスター | パソコンやスマートフォン、Chrome、Edgeなどで実際に動かして確認する。 | きょろぽん |
| デバッグ担当 | 不具合や想定外の動きを見つけ、原因を考えて修正する。 | きょろぽん＋ノン |
| サーバー・公開担当 | Xserverへファイルを配置し、Web上で使える状態にする。 | きょろぽん |
| ドキュメント担当 | 制作過程や新しく使った機能を記事としてまとめる。 | きょろぽん＋ノン |
| サイト運営・SEO | WordPressへ公開し、Google Search Consoleへ登録をリクエストする。 | きょろぽん |
| プロジェクト管理 | 仕様、進捗、引き継ぎ内容などを整理する。 | きょろぽん＋ノン |
……兼任しすぎ（笑）
今回の開発チームを無理やり会社っぽく表現すると、こんな感じでしょうか。
- 社員数：2名
- 人間：1名
- AI：1名
- 兼任職種：いっぱい
小さなWebアプリだからできることですが、改めて考えると面白いです。
AIに全部おまかせでは作れなかったと思う
今回、HTML・CSS・JavaScriptのソースコードを書いたのはノンです。
私は基本的にコードを書いていません。
そう書くと、「AIにタイマーを作ってもらっただけ」に見えるかもしれません。
でも実際にやってみると、ちょっと違いました。
AIに全部おまかせだと、たぶんこのタイマーにはならなかった。
「ここにボタンが欲しい」
「この動きだと実際の試験では使いにくい」
「設定画面へ戻っても入力した内容は残してほしい」
「試験そのものが終わっても、個別延長タイマーは動いていてほしい」
「ブラウザを閉じたり、PCを再起動しても復元できた方が安心」
「試験中に音が鳴るのは困る」
こういう部分は、実際に使う場面を考えながら少しずつ決めていきました。
逆に、私がHTML・CSS・JavaScriptを一から勉強し直して、全部自分でコードを書いていたら、4日間ではまず完成していなかったと思います（笑）
人間が「何を作りたいのか」「実際に使ってどうだったのか」を考え、AIがそれを形にする。
完成したものを人間が実際に触って、「違う」「もっとこうしたい」と返す。
そしてまたAIが修正する。
今回は、この繰り返しでした。
コードを書けなくても、開発には参加できる
今回やってみて一番面白かったのは、コードを書けなくてもアプリ開発のかなり深いところまで参加できることでした。
もちろん、プログラムの知識があればさらに細かなことができます。
でも、「何をしたいのか」「どう動いてほしいのか」「実際に使って何が困るのか」を具体的に伝えることも、立派な開発作業なんだと思います。
むしろ、ここが曖昧なままAIに「便利なタイマーを作って」とお願いしても、今回のようなものにはならなかったはずです。
AIに全部任せるのではなく、人間とAIで得意な部分を分担する。
今回のキッチンタイマー制作は、それをかなり実感できる実験になりました。
Ver.1.0でいったん完成。でもたぶん終わらない（笑）
第10回、Ver.1.0で試験用キッチンタイマーの本編はいったん一区切りです。
大きな機能を追加したくなった場合は、第11回以降として制作を再開する予定です。
小さな修正や改善なら、Ver.1.1、Ver.1.2といった形で更新していこうと思っています。
また、第1回から第10回までの制作記事、Ver.1.0の完成版、その後の更新履歴をまとめた「キッチンタイマー一覧ページ」も作る予定です。
……まぁ、Ver.1.0完成直後から次のことを考えている時点で、本当に終わるのかは怪しいですが（笑）
まとめ
最初は単純なキッチンタイマーだったものが、4日間で第10回まで進み、試験運営を想定したWebアプリになりました。
そして振り返ってみると、企画、ディレクション、UI・UX、プログラミング、テスト、デバッグ、公開、記事制作、SEOなど、いろいろな役割を人間1人＋AI1人で兼任していました。
AIだけでも作れない。
人間だけなら、もっと時間がかかる。
でも、それぞれが得意なところを担当すると、かなり面白いことができる。
今回の4日間は、そんなことを実感したWebアプリ制作でした。
さて、次は何を作ろうかな（笑）
