WebアプリをClaudeCodeで作成しました！①

全5回 ― 第1回

はじめに

先日、友人が雀荘のオーナーになり話す機会がありました。「最近AIについて詳しいみたいじゃん？」「リアルタイムで来客数を公開できるようなホームページ作れない？」

「多分できるぞ。」と答えてしまったが最後、開発をすることになりました（タダ働き）。実際私はWebアプリ開発の知識は全くなかったのですが、ClaudeCodeを利用してガチなものが作れてしまいました。こちら→まーじゃんらんどピノ

この連載では、麻雀店向けのリアルタイム営業情報サイトをAIと共同開発した実例を、初心者向けにご紹介します。（このブログもAIにアプリ作成過程を執筆してもらっています。）

完成したアプリの機能はこちら：

• 卓の状況リアルタイム表示（6卓）
• 来客数・出勤スタッフ表示
• お知らせ・イベント・ルール・FAQ管理
• 管理画面（PIN認証）

使用技術

技術	役割
HTML / CSS / JavaScript	アプリ本体
Firebase Realtime Database	リアルタイムデータ管理
Tailwind CSS	デザイン
Netlify	公開・ホスティング
Cloudinary	画像アップロード
GitHub	コード管理

フレームワークは使わず、シンプルな構成にしました。

構築環境

エディタ：Zed

コードエディタは Zed を使用。ファイルの確認・管理に使っています。実際にコードを書くのはAIなので、エディタは「確認用」として使う場面が多いです。

AIコーディングアシスタント：Claude Code

メインで使っているのが Claude Code。ターミナルから起動し、会話形式で指示を出すとコードの実装・修正・ファイル操作まで全部やってくれます。

開発の流れはシンプルです：

1. やりたいことを言葉で伝える
2. Claude Codeがコードを実装する
3. ブラウザで動作確認
4. 問題があればフィードバック → 修正
5. OKならGitにコミット → Netlifyにデプロイ

自分でコードを書く場面はほぼゼロです。

調べ物・理解：Gemini

Claude Code だけでなく Gemini も使いました。

AI	使い方
Claude Code	実装・コード修正・ファイル操作
Gemini	仕組みの理解・用語の確認・調べ物

「Firebase App Check って何？」「Cloudinaryの仕組みを教えて」といった背景知識を調べるのにGeminiが活躍。実装はClaude Code、理解はGeminiという自然な使い分けができました。AIも得意不得意があるので、使い分けると効率が上がります。

デプロイ：Netlify

Netlifyは対象フォルダをドラッグ＆ドロップするだけでデプロイ完了。コマンドなし、設定なし。初心者にとって一番ハードルが低い公開方法です。

コード管理：GitHub

「プッシュして」と伝えるだけでClaude Codeがコミットメッセージも考えてプッシュしてくれます。

git add mahjong-status/admin.html
git commit -m "卓プリセットの追加・削除機能を追加"
git push

開発コスト

今回の開発で実際にかかったAIツールの費用は以下の通りです。

ツール	プラン	月額換算
Claude Code	Proプラン（月額22ドル）	約3,300円
Gemini	Google年間契約（200ドル/年）	約2,500円

合計で月あたり約5,800円。これがこのアプリを支えているAIのランニングコストです。プロのエンジニアに外注した場合、同等のアプリの開発には数十万円以上かかるのが一般的です。AIを活用することで、専門知識がなくても低コストでアプリを作れる時代になったことを、身をもって実感しました。

※ドル円レートは執筆時点の参考値です。