投稿日
声で数えるWebアプリ「Voice Counter」と紹介動画をAIで爆速開発したよ
2026年は「Webアプリやサイトを10個作る！」という目標を掲げ、爆速でアウトプットを続けています。3月は3つ目のアプリが完成しました！今回作ったのは、数を数えるだけの超絶シンプルなカウンターアプリ。でも、ただのカウンターではありません。「声」でカウントアップできる、かゆいところに手が届くツールです。
作ったもの
使い方は至ってシンプル。
- カウントアップ： 画面のタップ、または「増やす」「プラス」と発話。
- カウントダウン： キーボードの「−」「←」キー、または「減らす」「マイナス」と発話。
- リセット： Deleteキー
会員登録なし、ブラウザを開くだけで即利用可能です。ローカルストレージ保存なので、ページを閉じてもカウントは消えません。
背景色は黒・白・ランダム、またはカスタマイズ可能。
初回利用時は、ブラウザのマイク入力を許可してくださいね！
開発スタック
今回はいつもの Antigravity ＋ Gemini 3 のコンビから少し浮気をして、別件で触る機会のあった Claude Opus 4.6（Claude Code）をメインに据えてみました。
Geminiよりもどこかスマートで気が利く印象。言語のニュアンスを汲み取るのが非常にうまく、コードの書き味も滑らかでした。このあたりのAIの使い分け・比較も楽しいんですよね〜。
制作の裏側
アイデアの源泉は編み物
今年に入って編み物を再開し、見事にハマって現在も継続中。編み物って今どこを編んでいるのかわからなくなりがちで、常に数を数えてるんですよね。でも手を離せないので、声で数を数えられたら便利だなー！という単純な理由で作り始めました。
最初はiOSアプリも考えましたが、Apple Developer Programへの登録が必須で年間$99ってのと、審査が長いらしいからやめました。またいつの日か挑戦したいですね。
音声認識の試行錯誤
Web Speech APIを使って実装しましたが、最初は「次（Next）」「戻る（Back）」といった短い単語で登録していました。が、これが全然反応しない！AIに相談しつつテストを重ねた結果、短すぎる単語は「言葉」ではなく「音」として処理されやすいことが判明。そこで、自然かつ2音節以上ある単語であれこれ試しました。
- 改善前：次、戻る、Add
- 改善後：増やす、減らす、Plus one、Count up
こだわりすぎず、ユーザー体験（UX）を優先して仕様を変えるという、開発において大切な教訓を再確認しました。
Vercelで公開
いつものようにVercelで公開。今回のアプリはスマホでの操作が想定されるので、実機iOSのSafariでのユーザーテストに時間をかけようと早めに公開しました。
自分で試す分には問題なかったんですが、家族をはじめ非IT系の人に試してもらうと、自分では絶対使わないだろうという使い方をされますよね。Webサイトをアプリ風に使うためにホーム登録したり、単語を間髪なく連発してみたり…。
それぞれ対応すべく、ホームに登録したときの画像を用意したり、連発しても音声認識されるよう微調整しました。第三者のテスト、大事ですね。
紹介動画もAIで作ってみた
いつも操作画面のスクリーンキャプチャだけなんで、実際に使っている風の動画を作ってみようかしらと、AIで構成を考えてもらってました。でもいざ撮影しようって思うと、なんやかんや手間なんですよね〜w と、いうことで、これも全部AIにまかせてみることに。Geminiに以下のプロンプトで生成してもらいました。
女性が編み物をしていて、男性が腕立て伏せをしているところ。スマホを置いていて、画面はグリーンバックになっている動画を生成して。
すると、なんかごちゃまぜの怖い感じの動画が完成してしまいましたw 床に埋まってるな？君？いや指示が悪かったね、一気にあれこれ言われても困るよね、ごめんごめん。気を取り直して、1シーンごとに指示を出して、小分けに動画生成しました。
柔らかな光が差し込むリビングで、日本人の女性が編み物をしているシーン。スマートフォンをテーブルに置き、両手で編み物をしている女性を後ろから撮影しているところ。女性の後ろ姿と編み物をしている手元とテーブルの上のスマホが写っている。手元にあるスマホの画面はグリーンバックにする。縦横比 16:9 。
手元の動きは不自然さもありますが、まぁこんなもんでしょう。
音声は自分で吹き込もうかと思いましたが、調べてみるとAdobe Firefly で音声の生成もできるようになってたんですね！セリフをGeminiに考えてもらい、そのままコピペ。生成開始して3秒後には音声ファイルがダウンロードできました。すご！今のところ日本語はまだ対応していないみたいですが、今後追加されそうですね。
音楽もGeminiで生成。素材が揃ったので Adobe Premiere Proに投げて、つなげて、完成！1時間くらいでここまでできたなら及第点でしょう。
ちなみにAdobe Premiere Proも得意なわけじゃないので、グリーンバックのはめ込みについてはこちらの動画を参照しました。手作業ですがはめ込みは一瞬でできた…すごい。（動きにあわせて追従させる方法はよくわかんなかったからそのまま。てへ。）
開発を終えて
今回の制作を通して感じたのは、ただ作ることより、使い勝手を磨く方が何倍も難しいということ。 そして、AIのおかげで「生む苦しみ」が「育てる楽しみ」へと変わってきているのを実感しています。
「こんな機能があったらいいな」というアイデアがあれば、ぜひXでリプをいただけると嬉しいです！また、もしこの記事やアプリが役に立ったら、ぜひ中の人に応援のコーヒーを一杯いただけると圧倒的感謝！