「Webアプリの開発は、専門のエンジニアに数百万円規模で依頼するもの」というイメージは、もはや過去のものになりつつあります。当記事では、株式会社リタバース代表・萩本陸汰が実際に60分で開発・公開したWebアプリを題材に、Anthropic 社の生成AI Claude を活用した現代のアプリ開発手法と、中小企業が押さえておくべきポイントを解説します。

実際に公開したアプリはこちらです。

Face Yen — 顔写真で年収を予想 https://face-yen.vercel.app

はじめに

近年、生成AI(Generative AI、文章や画像、コードを自動生成するAI)の進化により、ソフトウェア開発のあり方が大きく変わりつつあります。特に Anthropic 社の Claude をはじめとする高性能な生成AIと、AI搭載のコードエディタ、クラウドホスティングサービスを組み合わせることで、従来であれば数日〜数週間を要した開発期間が大幅に短縮されるようになりました。

一方で「具体的にどのくらい速くなるのか」「自社の業務にも応用できるのか」といった疑問をお持ちの中小企業の経営者・IT担当者の方は少なくありません。本記事では、当社が実際に60分で開発・公開したアプリを事例として、現代の開発手法のリアルな姿をお伝えします。

今回開発したアプリの概要

今回開発したのは、Face Yen という顔写真をアップロードすると AI が推定年収をエンタメとして判定する Webアプリです。

主な機能は以下の通りです。

• 顔写真のアップロード機能
• AI による顔分析(目力・顔の輪郭・表情・全体の雰囲気の4項目)
• 推定年収の表示と判定理由の解説
• スマートフォンでも快適に動作するレスポンシブデザイン

エンタメ目的のアプリですが、生成AI による画像分析 と 構造化された出力 を組み合わせる、ビジネス用途にも応用可能な実装となっています。

使用した技術スタック

今回採用した主な技術は次の通りです。

開発支援には Claude を、アプリ内の画像分析機能には Google Gemini を採用しました。Claude は実装作業の効率化を、Gemini は画像理解のリアルタイム処理を担当するという役割分担です。

画像分析AIによる機械学習機能の即時実装

従来であれば、画像分析機能を組み込むには機械学習モデルの選定・学習・チューニングが必要でした。Google Gemini API を使えば、画像と分析指示を送るだけで結果が返ってきます。

今回のアプリでは、Gemini に「顔写真から目力・顔の輪郭・表情・全体の雰囲気を分析して、推定年収を JSON 形式で返してください」というプロンプトを送るだけで、構造化されたデータが返ってきます。複雑な機械学習の知識がなくても、高度な AI 機能を実装できる時代になりました。

クラウドホスティングによる即時公開

Vercel は、GitHub にコードをアップロードするだけで、自動的にビルドと公開を行ってくれるサービスです。サーバーの構築・SSL証明書の設定・ドメイン割り当てといった作業が不要で、数分でインターネット上に公開できます。

無料プランでも本番環境として十分な性能が提供されており、アクセス数が想定以上に伸びた場合のみ有料プランへの移行を検討するという、コストを抑えた運用が可能です。

開発の流れ

実際の作業手順は、以下のようなシンプルな流れになります。

1. 開発環境の準備(Node.js、Cursor のインストール)
2. プロジェクトの雛形を作成
3. Cursor 上で Claude に要件を伝えてコード生成
4. Google Gemini API のAPIキー取得と設定
5. ローカル環境で動作確認
6. GitHub にコードをアップロード
7. Vercel と GitHub を連携してデプロイ
8. 環境変数(APIキー)を Vercel 側に設定
9. 公開URLで動作確認

技術的な障壁が高いと感じる方もいらっしゃるかもしれませんが、各工程の所要時間は数分単位です。実際の開発時間の大半は「何を作るか」を決める設計の時間と、Claude との対話を通じて要件を具体化していく時間に充てられます。

中小企業がこのアプローチから学べること

今回の事例を中小企業の業務に応用する場合、以下のような可能性が考えられます。

業務効率化アプリの内製化として、これまで外注に頼っていた小規模な社内ツール(問い合わせフォーム、簡易な集計ツール、社内FAQ等)であれば、Claudeのような生成AIを活用した開発手法によって短期間・低コストで内製化できる可能性があります。

検証用プロトタイプの高速作成としては、新規事業のアイデア検証や、社内の業務改善案を試す際に、すぐに動くプロトタイプを作って関係者に共有できます。「実際に触ってみる」ことで議論の質が上がり、意思決定のスピードが向上します。

顧客向けキャンペーン用Webアプリの領域でも応用可能です。販促や SNS拡散を狙ったエンタメ系Webアプリを、自社で短期間に企画・公開する選択肢が生まれます。広告代理店に依頼するよりも、機動性の高い施策が打てます。

運用上の注意点

こうした高速開発手法には、いくつかの注意点があります。

第一に、生成されたコードの品質確認です。Claude が生成するコードは多くの場合適切ですが、本番運用するアプリではセキュリティ・パフォーマンス・例外処理の観点から、人による確認・調整が必要です。生成されたコードの意図を理解せずにそのまま公開することは避けるべきです。

第二に、APIの利用料金管理です。Google Gemini や Anthropic Claude の API は従量課金です。アクセス数が想定を超えると、想定外の料金が発生する可能性があります。利用上限のアラート設定や、1ユーザーあたりのリクエスト制限を設けることが重要です。

第三に、個人情報・機密情報の取り扱いです。顔写真や顧客データを扱う場合は、プライバシーポリシーの整備、データの保存ポリシー、API への送信内容の確認など、法的・倫理的な配慮が欠かせません。

最後に、業務利用には継続的な運用設計が必要です。1日で動くものを作れたとしても、長期的に業務で使うアプリには、保守・運用・障害対応の体制が必要です。誰がメンテナンスするのか、トラブル時の対応窓口はどうするのか、といった運用設計まで考えることが、本格的な業務利用の前提となります。

まとめ

本記事の要点を整理します。

• Claude を活用することで、Webアプリの開発時間は劇的に短縮されている
• 個人や少人数のチームでも、60分程度で実用的なアプリを公開できる時代になった
• 一方で、品質確認・コスト管理・セキュリティ・運用体制といった企業利用に必要な観点は別途設計が必要
• 中小企業にとっては「業務改善ツールの内製化」「プロトタイプの高速作成」「キャンペーン施策」など、活用の余地が広い

株式会社リタバースでは、Claude をはじめとする生成AIを活用した業務改善・社内ツール開発・キャンペーン用Webアプリ開発のご支援を行っています。「自社の業務でこんなアプリを作れないか」「生成AIを活用した社内ツールを内製化したい」といったご相談がございましたら、お気軽にお問い合わせください。

実際に作成したアプリは引き続き公開しております。一度お試しください。

Face Yen — 顔写真で年収を予想 https://face-yen.vercel.app

参考リンク

• 株式会社リタバース 公式サイト: https://ritaverse.jp
• Anthropic Claude 公式サイト: https://www.anthropic.com/claude
• Google Gemini API 公式ドキュメント: https://ai.google.dev/gemini-api/docs
• Cursor 公式サイト: https://cursor.com
• Vercel 公式サイト: https://vercel.com
• Next.js 公式サイト: https://nextjs.org