59分で35兆ウォン相当のアプリを複製:AIコーディングでZoomクローンを作った非開発者の全過程
まとめ
WeAreNoCodeチャンネルのChristian Peverelliが、AIコーディングツール「Emergent」を使ってZoomクローンアプリを最初から最後まで作る全過程を見せてくれます。WebRTC技術で始めて問題が発生したらDaily.coに切り替え、Framerテンプレートからデザインのインスピレーションを得てAIにスタイルをコピーさせるなど、実践で直面する問題を解決するノウハウを共有します。単なる技術デモではなく、アイデア発掘からMVP戦略、デザイン、デプロイまで起業家が知っておくべきすべての過程を扱います。
59分で35兆ウォン相当のアプリを複製:AIコーディングでZoomクローンを作った非開発者の全過程
🎯 この記事で学ぶこと: 非開発者がAIコーディングツール1つでZoomクローンを59分で完成させ、デプロイまで成功した実践ガイド
📺 オリジナル動画: Christian Peverelli - WeAreNoCode (21:26)
概要
WeAreNoCodeチャンネルのChristian Peverelliが、AIコーディングツール「Emergent」を使ってZoomクローンアプリを最初から最後まで作る全過程を見せてくれます。WebRTC技術で始めて問題が発生したらDaily.coに切り替え、Framerテンプレートからデザインのインスピレーションを得てAIにスタイルをコピーさせるなど、実践で直面する問題を解決するノウハウを共有します。単なる技術デモではなく、アイデア発掘からMVP戦略、デザイン、デプロイまで起業家が知っておくべきすべての過程を扱います。
267億ドルのアプリを複製するという宣言
動画は大胆な宣言で始まります。「コード1行なしで267億ドル(約35兆ウォン)価値のアプリを作る」というのです。もちろんこれを売るつもりはなく、AIコーディングで誰でもアプリを作れることを証明しようとしているのです。
興味深いのは、Christianが意図的に「自分には作れなさそうな」複雑なアプリを選んだという点です。単純なToDoアプリではなく、ビデオストリーミングが必要なZoomのようなアプリを課題として選んだのです。成功したら自分でも驚くだろうと言っています。
「失敗するのを見に来てください」と冗談を言いながらも「君ならできる、Christian。君は素晴らしい」と自分を応援する姿が面白いです。
戦略策定:MVPに集中せよ
本格的な開発の前に、まず戦略を立てます。「計画なしに失敗することは、失敗を計画すること」だと言います。
最初の戦略はツールの選択です。複雑なアプリを作る必要があるので「Emergent」というAIコーディングツールを選びました。以前のチャレンジで複雑なアプリをうまく作っていたからです。特にWebRTCのようなビデオストリーミング技術が必要で、これは一般的なアプリよりはるかに複雑です。
2番目の戦略はMVP(最小機能製品)に集中することです。すべての機能を入れようとすると失敗すると言います。目標はちょうど3つ:ログインして、ミーティングを開始して、友達を招待して双方向通話をする。これができれば成功です。
「大企業の競合相手に対抗するとき、最高の戦略は単純化することです。ほとんどの人はZoomにある10,000個の機能は必要ないのです。」
Emergentで開発開始
普通はChatGPTで詳細なプロンプトを先に作成しますが、クローンを作るときは例外だそうです。Zoomのような有名なアプリはAIがすでによく知っているからです。そこで簡単なプロンプトだけを入力しました:
「シンプルなZoomクローンを作って。ユーザーがアカウントを作成し、ミーティングを開始し、他の人を招待できるように。完全に動作する製品で、シンプルだけど強力に。」
不思議なのは、Emergentがすぐに質問を始めることです。ビデオ/オーディオ技術は何を使うか、ログインはメールかGoogleか、画面共有やチャット機能は必要か...まるで製品企画書を作成するかのように聞いてきます。
WebRTC(Googleが作った無料ブラウザ技術)を選択し、Googleログイン、画面共有とチャットは入れて録画は外すことにしました。デザインはモダンでミニマルに。
「マルチエージェントシステムなので、複数のAIがそれぞれ異なる役割を果たします。1つはパスを把握し、もう1つはメモリツールを呼び出し...」赤い警告(コンパイルエラー)が出たとき少し緊張しましたが、AIが自動的に問題を検出して修正してくれました。
最初のテスト:動作するが完璧ではない
最初のバージョンが完成しました!ランディングページはすっきりしていて、「Quick Zoom」という名前が付いています。(「この名前だと訴えられそうだけど...」と笑っています)
Googleログイン後にミーティングを開始すると、自分の顔が見えます。「やあ、僕だよ!」と手を振る場面が面白いです。画面共有も動作します。
しかし問題がありました。リンクをコピーして別のブラウザで開いてみたら、ミーティングではなくランディングページに行くのです。そしてゲストもアカウントを作成する必要がありました。
「これはMVPを作るとき良い教訓です。コア機能が動作するまでは、他のことを磨かないでください。」
一方、Emergentではコードに直接アクセスすることもできます。VS Codeのような環境が開きますが、非開発者は気にする必要がなく、GitHubに保存するだけでいいそうです。「Fork」機能もあるので、後で開発者がチームに加わったら引き継いで作業できます。
アイデアがないなら?不満を持つ顧客を探せ
AIが作業している間、Christianがアイデアを見つける方法を教えてくれます。Zoomクローンを真似したくない方のために。
核心戦略は「肥大化したソフトウェア」を探すことです。何年も機能を追加していくうちに複雑になったサービスがありますよね?それを単純化したバージョンを作るのです。
「インターネットの良い点は、人々が怒ったらオンラインで不満を言うことです。」3つの方法をおすすめしています:
- Reddit - 特定の会社や問題に対する不満の投稿を探す
- アプリストアレビュー - 大企業なのに評価が低いアプリのコメントを読む
- ChatGPTディープリサーチ - 「X社について人々が最も不満に思っていることは何?」と聞く
もちろん単に「私の方が良いです」と言っても顧客は移ってきません。でもシンプルなバージョンを作り、その顧客たちが望む方向に機能を追加していけば、自然に差別化ができます。EtsyがAmazonの「ハンドメイド専門」バージョンであるように。
「人々が『ニッチ』を探せと言うとき、より大きな市場の特定セグメントをターゲティングして、彼らのためにより良くしろということです。」
WebRTC失敗、Daily.coに切り替え
2回目の試みでもまだ双方向通話ができませんでした。ゲストログインはできるのに相手のビデオが見えないのです。
Christianが開発者ツール(Inspect)を開いてエラーメッセージを確認します。「Socket connection error」と表示されています。このスクリーンショットをAIに見せて「これが問題みたいだから解決して」と言いました。
AIが分析後、代替案を提示します。WebRTCの代わりに「Daily.co」を使えと。有料サービスですが月10,000分無料があります。テストには十分です。
「正直、この時点で多くの方が『これ複雑になってきた...』と思うでしょう。だから素早い解決策に移るのです。」
技術を変えたら、ついに動作しました!2つのブラウザウィンドウでお互いの顔が見えます。チャットもできます。
「これが時にはやるべきことです、ただ技術を変えること。もっと時間があれば最後まで追求したでしょうけど。」最初からやり直すなら、ビデオストリーミングにどの技術が最適か先に調査するそうです。
デザインアップグレード:テンプレートからインスピレーションを得る
コア機能が動作したので、次はデザインをきれいにする番です。Christianの戦略が面白いです:
- Framer TemplatesやWebflow Templatesで気に入ったデザインを探す
- 複数のセクションのスクリーンショットを撮る(背景グリッド、ボタンスタイルなど)
- AIに「このデザインスタイルをコピーして私のアプリに適用して」とお願いする
プロンプトはシンプルです:「このアプリ全体を私がアップロードするデザインスタイルに変えて。フォント、色、スタイル全部コピーして。」スペルが間違っていてもAIは理解します。
結果物は確実に変わりました。きれいな背景パターン、すっきりしたアニメーション、全体的にはるかに洗練された感じです。
「プロンプト1つと少しのリサーチでデザインを直しました。この戦略の良い点は、継続的に調整できることです。これはスタートポイントに過ぎないのですから。」
デプロイ:59分でライブに
デプロイ前のチェックリストをAIに聞きました。モバイルレスポンシブ確認(OK)、SEO(スキップ)、環境変数(OK)、エラー処理(OK)、パフォーマンスチェック(次のバージョンで)。
デプロイは本当に簡単です。右上の「Deploy」ボタンを押すだけ。ただし、Emergentで月50クレジットが必要だそうです。
デプロイボタンを押すと自動的に:コードをデータベースにマイグレーション → シークレットをエクスポート → アプリをデプロイ → ヘルスチェック実行 → 完了!
「さあ、これでライブです!見てください、なんて素敵なんでしょう。」カスタムドメインも接続できます。ドメインがなければEntriを通じてすぐに購入して自動接続も可能です。
さらに素晴らしいのは、Emergentがライブアプリで問題を検出したら知らせてくれて、AIですぐに修正できることです。継続的なモニタリングと改善が可能なのです。
核心の教訓4つ
最後にChristianが核心の教訓をまとめます:
1. MVPはコーディングなしで作れる 開発者に大金を払わないでください。まずMVPを作ってテストしてください。
2. 車輪を再発明する必要はない すでに需要がある市場で少し違う顧客層をターゲティングすればいいのです。独創的なアイデアがなくてもストレスを受けないでください。
3. 座って考えるだけでは起業は学べない 最初の試みが失敗しても大丈夫です。その経験が積み重なってフルタイムのキャリアになるのです。ほとんどの人はこれが趣味だと思っていますが、これは学ぶべきフルタイムのキャリアです。練習が完璧を作ります。
4. 自分の障害物から抜け出せ 「私は技術的じゃない」「私にはできない」という信念が最大の敵です。行動をたくさんすればするほど結果が出て、結果が自信を作り、自信がより多くの結果を作ります。雪だるま効果です。皆さんは人生を完全に変えるいくつかの行動から遠くありません。
核心まとめ
- AIコーディングツール(Emergent)で非開発者も複雑なアプリMVPを作れる
- クローンアプリを作るときは簡単なプロンプトで開始 - AIはすでに有名なアプリの構造を知っている
- 技術的な問題が起きたら最後まで固執せず代替案(WebRTC → Daily.co)に切り替え
- デザインはFramer/Webflowテンプレートからインスピレーションを得てスクリーンショットでAIにスタイルコピーを依頼
- Reddit、アプリストアレビュー、ChatGPTディープリサーチで不満を持つ顧客を探してニッチ市場を発掘
- MVPの核心:すべての機能ではなくコア機能を先に、動作したら次はデザイン
重要なポイント
- 1AIコーディングツール(Emergent)で非開発者も複雑なアプリMVPを作れる
- 2クローンアプリを作るときは簡単なプロンプトで開始 - AIはすでに有名なアプリの構造を知っている
- 3技術的な問題が起きたら最後まで固執せず代替案(WebRTC → Daily.co)に切り替え
- 4デザインはFramer/Webflowテンプレートからインスピレーションを得てスクリーンショットでAIにスタイルコピーを依頼
- 5Reddit、アプリストアレビュー、ChatGPTディープリサーチで不満を持つ顧客を探してニッチ市場を発掘
- 6MVPの核心:すべての機能ではなくコア機能を先に、動作したら次はデザイン