はじめに
「アプリを作って収益化したい」と思っていても、プログラミングの知識がないと難しそうに感じますよね。
私もWindowsしか持っておらず、さらにプログラミング初学者。
iPhoneアプリの開発にはMacが必要だと知ってあきらめかけていました。
でも調べてみると、Webアプリなら0円で作って0円で公開できることがわかりました。しかもAI(Claude)にコードを全部書いてもらえば、プログラミング知識がほぼなくてもできます。
アプリ開発と後学のためにやってみようと決意。
この記事では、実際にやってみた手順をそのまま紹介します。
使ったもの
Claude(AIアシスタント):コード生成
GitHub:ファイルの管理(無料)
Vercel:Web公開(無料)
かかった費用:0円
Step 1:Claudeにアプリを作ってもらう
Claudeのチャット画面でこのように入力しました。
| シンプルな家計簿Webアプリを作って。 HTML/CSS/JavaScriptで1ファイルにまとめて |
|---|
たったこれだけです。するとClaudeが完全なHTMLコードを生成してくれました。
できあがったアプリの機能:
- 収入・支出の追加(日付・メモ・カテゴリ・金額)
- 収入合計 / 支出合計 / 残高の自動計算
- 収入・支出でフィルター表示
- 項目の削除
- データはブラウザに自動保存
生成されたコードをメモ帳に貼り付けて、index.htmlという名前で保存しました。
Step 2:GitHubにアップロードする
- github.com で無料アカウントを作成
- 「New repository」でリポジトリを作成(名前は
kakeiboにしました) - 「uploading an existing file」から
index.htmlをアップロード - 「Commit changes」をクリック
GitHubの操作が初めてでも、画面の指示通りに進めれば5分もかかりません。
Step 3:Vercelで公開する
- vercel.com にアクセス
- 「Continue with GitHub」でログイン
- 「Add New Project」から先ほどの
kakeiboリポジトリを選択 - 「Deploy」をクリック
数秒で公開完了。こんなURLが発行されました。
→ https://kakeibo-khaki.vercel.app/
iPhoneのSafariでもそのまま動きます。ホーム画面に追加すればアプリっぽく使えます。
まとめ
| やったこと | 費用 | 時間 |
|---|---|---|
| Claudeでコード生成 | 0円 | 約1分 |
| GitHubにアップロード | 0円 | 約5分 |
| Vercelで公開 | 0円 | 約3分 |
| 合計 | 0円 | 約10分 |
Macがなくても、プログラミングの知識がなくても、AIを使えばWebアプリを作って公開できる時代になりました。
今後はGoogle AdSenseで広告収益化や、機能追加なども試していく予定です。
同じように「アプリを作りたいけど難しそう」と思っている方の参考になれば嬉しいです!