はじめに
「あぁ、またか…」
愛用していたフリーのカンバンボードアプリに表示された「無償枠の制限」の文字。
普段開発をしていない私は、業務効率化を Excel や Googleスプレッドシート の関数と睨めっこしながら、なんとかやりくりしていました。
代替サービスを探しても、いつまた同じことになるか分からない。そんな不安を抱える日々。
この記事は、そんな私が Google AI Studio (Gemini) という強力な相棒を見つけ、ゼロからわずかな期間でWebアプリを8個も開発・公開するまでの、実践的な記録です。
最近話題の 「バイブコーディング（VibeCoding）」 という言葉を、私は知らず知らずのうちに実践していました。
この記事が、「自分も何か作ってみたい」と思っている非エンジニアの方や、AIの活用法を探しているエンジニアの方の参考になれば幸いです。
転機は連休、相棒はAI
今年の5月の連休、ふと頭をよぎったのです。
「今のAIなら、本当に欲しいアプリを、簡単に作ってくれるんじゃないか？」
世間はAIの話題で持ちきり。その進化のスピードは凄まじい。
しかし、問題はどのAIを使うか。
- 課金はしたくない
- 機能制限が厳しいのは困る
いくつかのAIを試す中で、私は壁にぶつかりました。一度に読み込ませる文章量の上限、利用回数の制限…。これでは、じっくり腰を据えてアプリ開発などできそうにありません。
最高の相棒「Google AI Studio」との出会い
そんな中、一筋の光が差し込みます。Googleの 「AI Studio」 です。
半信半疑で使い始めると、それはまさに私が探し求めていたものでした。
私が感じたAI Studioの圧倒的なメリット：
- ✅ ほぼ無制限の利用回数
- ✅ 長文の入出力に対応（これが最重要だった）
- ✅ 最新のGeminiモデルが無料で使える
後になって気づくのですが、AIが生成した大量のコードを丸ごとコピペして「このコードをこう修正して」とお願いする私の開発スタイルにとって、この 「入出力の文字数制限がない」 ことが成功の最大の鍵となりました。※上限はありますが、まず超えることはなかったです。
「雰囲気」で始める、自分だけのアプリ開発
最高の相棒を見つけた私は、いよいよアプリ開発に乗り出します。
まず考えたのは、絶対に譲れない技術要件（というほどのものでもないですが）でした。
- 費用ゼロ: サーバー代も何もかもかけたくない
-
ブラウザだけで完結:
index.html1つで動くものが理想
アーキテクチャの決定（AIと相談）
以前、JavaScriptでカンバンボードを作る記事を見かけたことを思い出しました。
🤔 （私）「これならブラウザだけで動くぞ。でも、データの保存はどうしよう？サーバーにDBなんて無理だ…」
この素朴な疑問をAIにぶつけてみます。
私: 「JavaScriptだけで作ったアプリのデータを、どうやって保存したらいい？サーバーは使いたくないんだけど。」
🤖 AI (Gemini): 「それなら、データを JSON形式 でファイルとしてダウンロードし、次回利用時にそのJSONファイルを読み込ませる方法はどうでしょう？ブラウザの
localStorageを使う方法もありますよ。」
これだ！道は開けました。
今回は、複数人での共有は考えず、個人利用がメインなので、JSONファイルでのエクスポート/インポート機能を実装することにしました。
最終的な構成:
-
フロントエンド:
HTML/CSS/JavaScript(ライブラリはAIにお任せ) - データ永続化: JSONファイルでの手動エクスポート/インポート
-
デプロイ:
GitHub Pages
AIとの"バイブコーディング"実践記
ここからの開発は、まさにAIとのペアプログラミング。いや、私が監督でAIがスーパープログラマーです。
私が伝えたのは、厳密な仕様書ではなく、「こんな感じ」という雰囲気（Vibe）。
実際のプロンプト例（こんな感じのやり取りでした）
僕:
カンバンボードを作りたい。
- レーンは「TODO」「DOING」「DONE」の3つ。レーン名も自由に編集可能にして。
- カードを追加できて、テキストを入力できるようにして。
- カードはドラッグ＆ドロップでレーン間を移動できるようにしてほしい。
- 全体のデータをJSONでダウンロードするボタンと、JSONを読み込むボタンも追加して。
🤖 AI (Gemini):
承知いたしました。HTML、CSS、JavaScriptのコードを生成します。ドラッグ＆ドロップ機能にはdragula.jsというライブラリを利用するのがおすすめです。CDNのリンクも含めてコードを作成しますね。<!-- HTMLのコードがズラッと出てくる -->/* CSSのコードがズラッと出てくる */// JavaScriptのコードがズラッと出てくる
生成されたコードをローカルの index.html にコピペしてはブラウザで確認。思った動きと違えば、また文章で根気強く伝えます。
私:
「このボタン、もうちょっと右にして、色も青っぽくして。あと、カードの角を丸くして、影をつけて立体的に見せてほしいな。」
この繰り返し。驚くべきことに、連休が終わる頃には、6つものWebアプリが完成していました。
今までExcelでなんとかやりくりしていたものが、ブラウザの中で軽快に動く。この感動は、何物にも代えがたいものでした。
作ったアプリを、ネット上へ届けるまで
さぁ、次はどうやってこれを公開するか。
困ったときのAI頼み。これがすっかり私のスタイルです。
私: 「無料で
index.htmlファイルを公開する方法を教えて」🤖 AI (Gemini): 「いくつかの方法がありますが、エンジニアに人気で手軽なのは GitHub Pages です。リポジトリを作成し、特定のブランチにファイルを置くだけでWebサイトとして公開できますよ。」
GitHub Pagesでの公開
AIに手順を聞きながら、見よう見まねで作業を進め、ついにその瞬間が訪れます。
ブラウザのアドレスバーに、発行された https://<ユーザー名>.github.io/<リポジトリ名>/ を打ち込むと…。
おぉ、動いた！やった！
自分の作ったアプリが、ネットの世界で動いている。
※実際のカンバンボードがこちら → https://lifebook2021.github.io/app/Kanban/
感動に浸るのも束の間、新たな欲が出てきました。
「このアプリの凄さを、みんなに伝えたい。紹介するホームページが必要だ！」
しかし、HPのデザインなんて…。その時、最高のアイデアが閃きます。
「そうだ、AIに、今作ったアプリのHTMLコードを読ませて、このアプリを紹介するHPを作ってもらおう！」
この作戦は、見事に成功しました。AIはアプリのコードを理解し、その特徴を紹介するHPのHTMLを見事に生成。さらには、必要なフォルダ構成や、どこにスクリーンショットを配置すれば良いかまで、丁寧に教えてくれたのです。
こちらがそのHP → 「AIと創るJavaScriptツールキット」
まとめ：そして今、旅は続く
こうして、私が、たった一人（と一人のAI）で、アイデアの着想から開発、公開、そして公開サイトの立ち上げまでをやり遂げました。
現在、アプリの数は8つに増え、週末を利用して新しいアプリを追加する日々です。
今は、この感動的な体験と、私が作ったアプリたちを一人でも多くの人に知ってもらうため、こうして記事を書いています。
この記事を読んで、「自分にもできるかも」と思ってくれた人が一人でもいたら、これほど嬉しいことはありません。
私が学んだこと
- AIのポテンシャルは計り知れない: 特に Google AI Studio のような制約の少ないツールは、非エンジニアにとって最高の武器になる。
- 完璧じゃなくていい: 「雰囲気」を伝えるバイブコーディングは、高速なプロトタイピングに最適。
- とにかくやってみる: 知識ゼロでも、AIに聞きながら一歩ずつ進めば、必ず形になる。
必要なのは、専門知識や技術力だけではない。
「こんなものが欲しい」という強い想いと、それを粘り強く伝えてくれる、最高の相棒（AI）がいれば、あなたのアイデアはきっと形になります。
さあ、あなたもAIと一緒に、自分だけの「ものづくり」の旅へ出てみませんか？