個人開発初心者がAIを活用してWebアプリを作る|まず公開して少しずつ育てる開発方法|エラーとの戦いも経験

こんにちは!

このブログでは、個人でWebサービスやアプリを制作する過程で経験したことや、開発中につまずいたこと、実際に解決した方法などを記録しています。

私はもともと、Web開発について高度な知識を持っていたわけではありません。

HTML、CSS、JavaScriptを中心に勉強し、Reactについては少し触ったことがある程度でした。

そんな状態から、AIも活用しながら少しずつWebアプリやiOSアプリを作るようになりました。

現在では、診断コンテンツ、画像を扱うWebアプリ、AIで利用するプロンプトを管理するツールなど、さまざまなサービスを制作しています。

FANELABで作ったアプリ・Webアプリ一覧/開発ログ一覧
FANELABでは、Web制作やアプリ開発の中で「こんな機能があったら便利そう」「毎回同じ作業をするのが面倒」と感じたことをきっかけに、さまざまな小さなアプリやWebツールを制作しています。このページでは、これまでに公開したiOSアプリと無…

この記事では、そんな私が個人開発を続ける中で大切にしている「まず作って、公開して、少しずつ改善する」という考え方について紹介します。

個人開発を始めたきっかけ

私が個人開発を始めたきっかけは、JavaScriptを勉強するために簡単なWebアプリを作ったことでした。

最初から大規模なサービスを作ろうとしたわけではありません。

「実際に動くものを作ってみたい」という気持ちから、小さな診断アプリを作りました。

最初に作ったものは、とてもシンプルなWebアプリです。

覚醒年齢診断を作りました!ロングスリーパーは人生でどれくらい損をしている?
ロングスリーパーの「人生でどれくらい睡眠時間を使っているのか」が気になり制作した「覚醒年齢診断」を紹介します。HTML・CSS・JavaScriptの学習を兼ねて開発した無料Webアプリです。

質問に答えると結果が表示されるという、基本的な仕組みでした。

しかし、実際に自分で作ってみると、単にJavaScriptの文法を勉強するだけでは分からなかったことがたくさん出てきました。

例えば、

  • ボタンを押したときの処理
  • 入力されたデータの扱い
  • CSSでのレイアウト調整
  • スマートフォンでの表示
  • エラーが発生したときの原因調査

などです。

「コードを書く」というだけではなく、「実際にサービスとして動かす」ことで、周辺の知識まで自然に学ぶことができました。

初心者の個人開発は小さく始める

個人開発を始めるとき、最初から完璧なアプリを作ろうとすると、なかなか完成しません。

私自身も、最初は「もっと機能を追加したほうがいい」「デザインをもっと綺麗にしたほうがいい」と考えてしまいました。

しかし、機能を増やせば増やすほど、コードも複雑になります。

さらに、完成する前に別のアイデアを思いついてしまうこともあります。

そこで、現在はできるだけ小さな形から作るようにしています。

例えば、

「こんな機能があったら便利そう」

と思ったら、まずは最低限の機能だけを作ります。

そして、

作る → 動かす → 問題を見つける → 修正する → 公開する

という流れで少しずつ改善していきます。

最初から100点を目指すのではなく、まず動くものを作ることを意識しています。

AIを使うことで個人開発の幅が広がった

最近の個人開発では、AIも積極的に活用しています。

私はすべてのコードを自分だけでゼロから書いているわけではありません。

「こういう機能を作りたい」

「このエラーを解決したい」

「この画面をスマートフォン向けにしたい」

といった内容をAIに相談しながら開発しています。

AIを利用することで、自分だけでは難しかった処理を実装できるようになりました。

特に、Web開発を始めたばかりの人にとっては、分からないことをその場で質問できるというのは大きなメリットだと思います。

ただし、AIにコードを書いてもらえば、それだけで簡単にアプリが完成するわけではありません。

ここは実際に個人開発をしてみて強く感じた部分です。

AIにコードを任せても「理解すること」は必要だった

AIにコードを書いてもらうと、一見するとすぐに完成したように感じます。

しかし、実際に開発を続けていると、

「このコードは何をしているんだろう?」

という場面が増えてきます。

特に、最初はJavaScriptを中心に勉強していたのに、AIにアプリを作ってもらったらReactやNext.jsなど、自分が十分に理解していない技術が出てくることもありました。

Reactしか触ったことがなかった私がNext.jsに挑戦した話|AIプロンプト図鑑を開発して感じたこと
AIプロンプト図鑑の開発を通してNext.jsに初挑戦。React経験者が感じた難しさや学び、Claude Codeを活用した開発体験をまとめました。

コードを書いてもらうこと自体はできます。

問題は、その後にエラーが発生したときです。

自分がコードの意味をまったく理解していないと、

「エラーが出たのでAIに直してもらう」

↓

「別のエラーが出る」

↓

「またAIに直してもらう」

という状態になってしまいます。

これでは、なかなか自分の知識として身につきません。

そのため、現在はAIを「全部任せる存在」ではなく、「一緒に開発する相手」として使うことを意識しています。

AIが作ったコードの修正が大変だった話|個人開発でぶつかった3つのこと
AIにコードを書いてもらってアプリを個人開発する中で感じた、「あとから修正するのが大変」というリアルな話をまとめました。文字サイズ・ファイル名・色の名前でぶつかった点と、私がした工夫を初心者目線で正直に書いています。

個人開発でつまずく

個人開発をしていると、当然ながらうまくいかないことがあります。

コードを書いてもエラーが出たり、スマートフォンでは表示が崩れたり、想定していた動作をしてくれなかったりします。

最初は、

「またエラーが出た……」

と嫌になってしまうこともあります。

しかし、原因を調べていると、結果的に別の知識を覚えることがあります。

例えば、ある機能のエラーを解決するために調べていたら、

  • JavaScriptの仕組み
  • Reactのコンポーネント
  • CSSのレイアウト
  • スマートフォン特有の問題

など、最初に作ろうとしていた機能とは直接関係のない知識まで学ぶことがあります。

エラーとの戦いも経験だと思いました。

そのため、最近は「つまずいた=失敗」と考えないようにしています。

個人開発では、エラーや失敗そのものが学習材料になるからです。

実際に作ったWebアプリ

これまでに、勉強を兼ねてさまざまなWebアプリを制作してきました。

最初は簡単な診断アプリでしたが、そこから少しずつ制作するものが変わっていきました。

例えば、画像を組み合わせてコラージュを作るWebアプリや、AIで利用するプロンプトをコピーして使いやすくするためのツールなどです。

ビフォーアフター画像を残したくて、写真コラージュツールを自作した話【Photo Timeline】
美容ケアの変化を残したくて、写真を並べるだけでビフォーアフター画像がつくれる無料ツール「Photo Timeline」をつくりました。開発のきっかけと、写真を外に出さない設計にした理由をまとめています。
AIプロンプト図鑑|コピペですぐ使える実践プロンプト30選を公開しました
最近はChatGPTをはじめ、ClaudeやGeminiなど、さまざまな生成AIサービスが身近な存在になりました。文章作成やプログラミング、画像生成、アイデア出しなど、AIを活用できる場面は日々増えています。しかし、実際に使ってみると「思っ…

どれも最初から大規模なサービスを作ろうとしたものではありません。

「こういうものがあったら便利そう」

「自分だったらこういう機能が欲しい」

という小さなアイデアを実際に形にしていきました。

今後も、診断コンテンツや便利なWebツール、ゲームなど、思いついたアイデアを少しずつサービスにしていく予定です。

個人開発では「公開すること」も大切

個人開発では、完成度を高めることばかり考えてしまいがちです。

しかし、誰にも見てもらわないまま開発を続けていると、本当に使いやすいサービスなのか判断できません。

そこで、ある程度動く状態になったら公開してみることも大切だと考えています。

公開すると、

「ここは分かりにくい」

「スマートフォンでは使いにくい」

「この機能が欲しい」

といった、自分だけでは気づけなかった問題が見えてくる可能性があります。

もちろん、個人情報やセキュリティなど、安全性に関わる部分は十分に確認する必要があります。

それでも、すべてを完璧にしてから公開するのではなく、改善できる部分を残した状態で小さく公開することにはメリットがあります。

「作って終わり」ではなく少しずつ育てる

私が個人開発で大切にしているのは、サービスを作って終わりにしないことです。

最初に公開したものが完成形ではなく、

公開した時点がスタート

くらいに考えています。

実際に使ってみて、

「ここはもっと使いやすくできそう」

「この画面は分かりにくい」

「この機能も追加したい」

と思ったところを少しずつ改善していきます。

デザインを変更することもありますし、機能を追加することもあります。

場合によっては、一度作った機能を削除することもあります。

個人開発だからこそ、大企業のサービスのように最初から大規模な開発計画を立てる必要はありません。

自分のペースで改善できることも、個人開発の面白さだと思っています。

これからも開発の過程をブログに残していきます

FANELABでは、これからもWebアプリやスマートフォンアプリなどの制作を続けていく予定です。

そして、完成したサービスだけではなく、開発中につまずいたことや、AIを使って開発してみて分かったことなどもブログに残していきたいと思っています。

例えば、

  • AIを使ったWebアプリ開発
  • エラーの解決方法
  • アプリのデザイン制作
  • iOSアプリの公開
  • 個人開発で実際に経験した失敗

などです。

これから個人開発を始める人にとって、実際の開発過程で起きたことが少しでも参考になれば嬉しいです。

まとめ|初心者だからこそ、まず作ってみる

個人開発を始める前は、「もっと勉強してから作ったほうがいい」と考えてしまうかもしれません。

私も最初から十分な知識があったわけではありません。

HTML、CSS、JavaScriptから始め、分からないことを調べたり、AIに相談したり、エラーを解決したりしながら少しずつ作れるものを増やしてきました。

その経験から、個人開発では、

完璧に勉強してから作るのではなく、作りながら学ぶ

という方法も十分にありだと思っています。

小さなWebアプリを作る。

エラーにつまずく。

調べる。

修正する。

公開する。

そして、また改善する。

この繰り返しによって、少しずつできることが増えていきます。

これからもFANELABでは、自分が「こんなサービスがあったら面白そう」と思ったアイデアを形にしていきます。

その過程で実際に経験したことも、このブログで記録していく予定です。

個人開発やWebアプリ制作に興味がある方にとって、少しでも参考になるブログを目指していきたいと思います。

タイトルとURLをコピーしました