はじめに自己紹介
初めまして。
私は1979年生まれ、現在デジタルマーケティングの仕事をしている者です。
プログラミングについては、これまで何度か趣味で挑戦してみたものの、毎回挫折を繰り返してきました。
「今度こそWebアプリを作るぞ！」と意気込んでも、環境構築でつまづいたり、コードの壁にぶつかったりして、結局諦めてしまう...そんな典型的な「プログラミング挫折組」でした。
ただ、仕事でJavaScript周りのちょっとした課題をAIに相談したり、デジタルマーケティングの戦略を一緒に考えてもらったりと、生成AIは日常的に活用していました。
Xで最新のAI情報をチェックするのも日課になっていて、「AIの進化すごいな〜」と感心する毎日でした。
開発のきっかけ - ダイスアプリからの始まり
「AIでアプリを作ってみたい」と思った私は、まず簡単なものから始めようと考えました。最初の目標はシンプルなダイスアプリ。サイコロを振るだけの、本当に基本的なWebアプリです。
「これなら挫折しないで済むかも」と思いつつ、Claudeに相談してみました。
ところが、開発を進めている途中で、ふと思い出したのです。
実は私、かなりのオカルト好きなんです。
仕事中でもポッドキャストで怪談話を聞いているような人間で、心霊現象やオカルトガジェットには昔から興味津々でした。
その中でも気になっていたのが「バケタン」という霊感探知機。
「あれ？乱数を発生させて異常を検知する...今作ってるダイスアプリの技術で、バケタンみたいなものも作れるんじゃない？」
そこで方針転換。シンプルなダイスアプリから、一気にスピリットスキャナーの開発に舵を切りました。
結果的に、この思いつきでの方針変更が、想像以上に本格的なPWAアプリの完成につながったのです。
なぜClaude 4を選んだのか
開発パートナーとして、迷わずClaude 4を選びました。
実は以前から、仕事でフロントエンド周りの小さな課題をいくつかのAIに相談してきた経験があります。その中でClaudeは「エラーが出ないコードを書いてくれる確率が高い」という実感がありました。
本職のエンジニアの方からは怒られるかもしれませんが、正直なところ、ソースコードの美しさや最適化といった細かい部分はよく分かりません。私にとって一番大事なのは「とにかく動いてくれること」でした。
他のAIとの比較で言うと...
・ChatGPT: 雑談や相談事では寄り添ってくれる感じが好きで、EQが高い印象。ただコード生成では少し期待と違う回答になることも
・Claude: より優等生っぽい、的確な回答をくれる印象。特に技術的な質問では信頼できる
・Gemini: 全体的に回答の精度がまだ発展途上な印象で、今回は最初から候補外
ということで、「1日でアプリを完成させたい」という目標には、実績のあるClaudeが最適だと判断しました。
結果的に、この選択は大正解でした。
1日でリリースまで - 実際の開発体験
本機能の実装：「バケタンっぽいの作りたい」
方針転換後、Claudeに素直に相談しました。
「バケタンみたいなスピリット探知アプリを作りたいんです」
するとClaudeは、乱数生成から異常値検知まで含んだデモアプリを作ってくれました。
これが開発の大きなターニングポイント。動くものがあると、改善点が見えてくるんですね。
そこからは：
「もう少し感度を調整できるようにしたい」
「検知ログを残せるようにしたい」
「UIをもっとスマホらしくしたい」
といった具合に、細かな調整を重ねていきました。
UI/UX改善：スマホファーストで
最初から「スマホアプリにしたい」と伝えていたので、レスポンシブではなく完全にスマホ最適化でお願いしました。関連機能は使いやすい位置に配置してもらい、タッチしやすいサイズに調整。
ただし、ここで学んだ重要なことは、AIとのやり取りも人間と同じく、具体的な指示が大切ということです。
特にヘルプ部分の修正で、「直しました」と言われても確認すると直っていないことが4〜5回続きました。そこでスクリーンショットを撮って「ここを直してください」と具体的に指示すると、すぐに修正してくれました。
PWA化での発見：ブラウザとの違い
PWA化して気づいたのが、ブラウザで見ているのとPWAでは挙動が結構変わるということ。
当初は加速度センサーや水平センサーも活用する仕様でしたが、実際に使ってみると日常的にすぐ異常値が出てしまい、実用的ではありませんでした。「センサー機能を外してください」と何度もお願いしましたが、なぜか後半まで仕様が残っていて、これもヘルプ修正と同じく根気強く伝える必要がありました。
デプロイ・公開：モダン開発環境への感動
初めてのVercel + GitHub連携でのデプロイでしたが、これには本当に感動しました。
「モダンな開発ってこんな感じなのか！」
GitHubにコードをアップロードするだけで、Vercelが自動的に同期して本番環境に反映される。私は昔ながらのFTPでファイルアップロードしか知らなかったので、この自動化には驚きました。
そして、開発開始から約1日で、本格的なPWAアプリが世界に公開されていました。
▼ 記念すべき初アプリが世界に公開された！！
完成したスピリットスキャナーの紹介
はい、前置きが長くなりましたが、今回作成したアプリはこちらです。
公開URL: https://spirit-scanner.vercel.app/
主な機能
基本的な使い方
- 「スキャン開始」ボタンを押してセンサー許可を与える
- アプリが自動的に環境のベースライン（基準値）を測定
- 異常な磁場やエネルギーを検出すると自動でアラート
- 「感度調整」で検出レベルを変更可能（低・中・高）
監視対象
- 量子乱数パターン: デジタル乱数生成の統計的異常
- 確率偏差: 通常では発生しにくい乱数の偏り
- 数値相関: 複数乱数間の異常な関連性
- エントロピー変動: 乱数の予測可能性の変化
あとはログ機能も搭載して、検知した異常値の履歴を確認できるようになっています。
最初は「とりあえず乱数表示するだけ」と思っていたのに、想像以上に本格的な機能が実装されました。
開発を通じて得た技術的な学び
ブラウザ vs PWAの違い
一番驚いたのは、ブラウザで見るのとPWAでは大きく挙動が違うということでした。ブラウザでは問題なく動作していても、PWAとしてインストールすると別の動きをする場面が何度もあり、実際の環境でのテストの重要性を痛感しました。
ネイティブアプリ開発の大変さを実感
PWA開発を通じて、「ネイティブアプリを作るのはもっと大変そう」ということも分かりました。Webの技術だけでもここまでのアプリが作れるなら、まずはPWAから始めるのが現実的だと感じています。
自動デプロイの感動
GitHub + Vercelの自動デプロイは、もう「とりあえずすげー」の一言です。コードを更新すると自動で本番環境に反映される仕組みは、個人開発者にとって革命的だと思います。
※もはやエンジニアや開発されている方にとっては当たり前かもですが、衝撃的でした
収益化への挑戦 - AdSense導入
最初のアプリなのに烏滸がましいのですが、AdSenseを導入しちゃいました。
もちろん収益化が第一目的ではなく、「そういった組み込みもできるのかな？」という知的好奇心からの挑戦です。非エンジニアでも広告収益化まで実装できるのか、という実験でもあります。
現在審査待ちの状態ですが、この経験も今後のアプリ開発に活かせそうです。
今後の展望
第2弾アプリ開発中
アプリ作りがとにかく楽しかったので、熱量のあるうちにと思って第2弾のアプリを進行中です。今度は全く無関係なジャンルで、Google APIなども使ってみているため、難易度が一気に上がっています！
（実装は私がしてないので詳細は分かりませんが...笑）
オカルト好きの皆さんに試してほしい
そして何より、本物のバケタンみたいに反応するのか、オカルト好きの方に実際に試してもらいたいです。
「心霊スポットで使ってみた」「深夜に試したら反応した」などなど、色々なフィードバックをもらえたら嬉しいです。もしかすると、想定していなかった使い方や改善点が見つかるかもしれません。
そろそろまとめに入ります
非エンジニアの私でも、Claude 4との対話を通じて1日で本格的なPWAアプリを完成させることができました。
重要だったポイント：
- 具体的で明確な指示を心がける
- 実際の動作確認を怠らない
- AI選びも重要（用途に応じた選択）
- モダンな開発環境の活用
生成AIの進化により、アイデアさえあれば誰でもアプリ開発者になれる時代が来ています。この記事が、同じように「作ってみたいけど技術的に...」と躊躇している方の背中を押せれば幸いです。
ぜひスピリットスキャナーを試してみて、感想やフィードバックをお聞かせください。
また、次のアプリ作ったらまた記事にする予定です。
ではでは。