無職、AIにハマる。Claude CodeでWebアプリを自作してみた

2026年10月30日

どうも、ヒロキです。

最近、友達にやたらとAIを勧められまして。

「AIでアプリとか普通に作れるよ」
「プログラミングできるなら絶対ハマるって」

と、会うたびに言われるもんだから、試しに使ってみたんですね。

結論から言うと、どっぷりハマりましたw

お試しのつもりが、気づけば月額課金するほどに（笑）

今日は、AI（Claude Code）を使って、昔作ったアプリを作り直してみた話をしたいと思います。

数年前に作った「QR宝探しアプリ」のこと

実は僕、2022年頃にプログラミング（Ruby on Rails）の勉強にハマっていた時期がありまして。

その時に、約2週間かけて作ったのが「QR宝探しアプリ」です。

→QRコードリーダーで「宝探しゲーム」ができるアプリを開発してみた

ざっくり言うと、主催者が景品を登録してQRコードを印刷し、会場に隠す。

参加者はスマホでQRコードを読み取って、早い者勝ちでお宝をゲットする、という宝探しゲームアプリです。

僕にとっては初めてのポートフォリオで、それなりに思い入れもあったのですが、、

アップしていたサーバー（元々無料だった）が有料化してしまい、維持するのに毎月数千円かかるようになってしまったんですね。

無職の僕にとって毎月数千円は大金でございます。

ということで、泣く泣く公開を停止し、そのまま放置…。

その後、記事を見た方から「使ってみたい」というコメントをいただいたりもしたのですが、公開していないのでお断りするしかなく。

正直、ちょっと心残りでした。

友達に勧められて、AI（Claude Code）を試してみた

そんな中、友達に勧められたのが「Claude Code」というAIツール。

めちゃくちゃざっくり言うと、日本語でお願いするだけで、AIがプログラムを書いてアプリを作ってくれるツールです。

とはいえ、最初は半信半疑。

「どうせ簡単なものしか作れないんでしょ？」くらいの軽い気持ちで、試しにこうお願いしてみました。

（昔の記事のURLとソースコードを貼って）これ作って

以上ですw

いや、本当にこれだけ。

そしたら、、

30分ほどで、アプリが丸ごと完成してしまいました。

え、マジで？？

昔の僕が2週間かけて作ったものを、たった30分。

しかも、元のアプリよりもデザインも使いやすさも劇的に良くなってるんです。

これには本気で度肝を抜かれました。

その後、細かいところを「ここをこうして」「こんな機能もほしい」とお願いしながら、数日かけてブラッシュアップ。

（今もまだブラッシュアップ中です）

完成したアプリがこちら【使い方の流れ】

それでは、AIに作ってもらった新しいQR宝探しアプリをご紹介します。

アプリのURLはこちら↓

QR宝探し（テスト版）：https://qrtest.kobacchi.com/

※現在はテスト用のサーバーに置いているだけなので、予告なくデータが消えたり、仕様が変わったりする可能性があります。お試しで触ってみるのは大歓迎ですが、実際のイベントで使うのはおすすめしません。正式版は別のサーバーでリリース予定です。

今回は、参加者15人くらいの宝探しイベントを想定して、一通り動かしてみました。

（ちなみに、参加者15人分の操作もAIにシミュレーションしてもらいました）

①主催者アカウントを作る

まずは、主催者用のアカウントを作成します。

必要なのはアカウント名とパスワードだけ。メールアドレスは不要です。

（その分、パスワードを忘れると再発行できないので注意）

ちなみに、主催者側の操作はPCやタブレットでの利用がおすすめです。

スマホでも操作はできますが、景品や参加者の一覧表が少し窮屈になってしまうので、画面が広い端末の方が断然見やすいです。

（この記事のスクショは、参加者目線に合わせて全部スマホ画面で撮っています）

②イベントを作る

ログインしたら「イベントを作成」から、宝探しイベントを作ります。

イベント名と説明に加えて、「1人あたりの獲得上限」も設定できるようになりました。

今回は「1人3個まで」にしてみました。

ハズレを上限の個数に含めるかどうかまで選べるという親切設計です。

③景品とハズレを登録する

続いて、景品を登録していきます。

景品名と、宝箱を開けたときに表示されるメッセージを入力するだけ。

「ハズレにする」にチェックを入れれば、ハズレも作れます。

「登録して続けて追加」ボタンで、ポンポン連続登録できるのも地味に便利。

今回は当たり12個、ハズレ3個の合計15個を登録しました。

④QRコードを印刷して隠す

景品を登録したら、「お宝用QRコードを印刷」からQRコードを印刷します。

印刷サイズは大・中・小から選べます。

しかも、QRコードには景品名が載らないので、当たりかハズレかは開けてみるまで分からない仕組み。

これを切り取って、会場に隠せば準備OKです。

あわせて、参加者に配る（または受付に貼る）参加用QRコードも印刷しておきます。

⑤参加者はQRを読み取って参加

ここからは参加者側の流れです。

参加用QRコードをスマホで読み取ると、参加画面が開きます。

ニックネームを入れて「参加してスタート！」を押すだけ。

ゲスト参加なので、参加者側はアカウント登録もパスワードも不要です。

⑥お宝のQRを読み取って、宝箱を開ける！

いよいよ宝探し本番。

会場に隠されたQRコードを見つけたら、スマホで読み取ります。

（アプリ内の「QRコードを読み取る」ボタンでも、スマホ標準のカメラアプリでもOK）

すると、宝箱が出現！

「開ける！」を押すと…

当たり！！

この宝箱を開ける演出、個人的にめちゃくちゃ好きですw

ちなみに、ハズレを引くとこうなります↓

宝箱がグレーになって、しょんぼり感が出てますね（笑）

さらに、すでに他の人が見つけたお宝を読み取った場合はこちら↓

「からっぽ…」

早い者勝ちなので、こういうこともあります。

⑦獲得した景品はマイページで確認

獲得した景品は、参加者のマイページに一覧で表示されます。

マイページの下の方には、景品の引き換え用QRコードが表示されます。

宝探しが終わったら、これを受付で主催者に見せて景品と交換する、という流れです。

⑧主催者は引き換えQRを読み取って景品を渡す

主催者側は、管理画面の「引き換えQRを読み取る」から、参加者の引き換え用QRコードを読み取ります。

すると、その参加者が獲得した景品の一覧がパッと表示されるので、

「まとめて引き換える」を押せば引き換え完了です。

これで、同じ景品を2回受け取る、みたいなズルもできません。

旧バージョンでは、参加者のスマホ画面を見ながら目視で確認していたので、ここはかなり進化したポイントですね。

⑨管理画面で全体の状況をチェック

主催者の管理画面では、景品の残り数や参加者数がひと目で分かります。

今回のテストでは、参加者15人で、12個あった景品が残り1個に。

どの景品を誰が獲得したかも一覧で確認できます。

参加者ごとの獲得数や、引き換え済みかどうかも一目瞭然。

スマホだと表がかなり窮屈ですが（ニックネームが縦書きみたいになってるw）、PCやタブレットならすっきり表示されます。

主催者の方は、ぜひPCかタブレットで使ってみてください。

以上が、新しいQR宝探しアプリの使い方の流れでございます。

旧バージョンと比べてみた

せっかくなので、昔の自分が作ったものと比べてみました。

	旧バージョン（2022年）	新バージョン（AIで作り直し）
作った人	僕	AI（Claude Code）
制作期間	約2週間	約30分＋ブラッシュアップ数日
1人あたりの獲得上限	なし	あり
宝箱を開ける演出	なし	あり
景品の引き換え	画面を見せて目視で確認	引き換え用QRで管理