開発会社への支払いをやめよう！💥 2025年におけるウェブサイトクローンの最適な方法 💥

4,078 文字

10分以内でウェブサイトをクローンする最適な方法は、AIを使用することです。Replitagentを使用して同じことを行う方法をお見せします。クローンするウェブサイトはStart a Storyと呼ばれるものです。インターネット起業家になりたいけれどもコーディングについて何も知らない方、このビデオはまさにあなたのためのものです。10分ほど時間を取っていただければ、ビデオの最後には役立つものができあがっているはずです。
まず最初にやるべきことは、repl.itにアクセスすることです。これは無料のツールではありません。このウェブサイトのスクリーンショットを撮り、それをコピーしてrepl.itに貼り付け、このウェブサイトをできるだけ忠実にクローンしたいと伝えるだけです。プロンプトを改善したい場合は、「improve the prompt」オプションを選択することができ、プロンプトがより詳細になっていきます。Create Replitをクリックすると処理が始まります。
その間、Replitには多くの機能があることがわかります。Stripe統合、Perplexity API、Firebase認証など、多くの機能が搭載されており、これらすべてを自分で実装しようとすると大変です。また、彼らのプラットフォームにデプロイすることもできます。
クローニングの進行状況を見てみましょう。基本的なプロンプトができました。「指定されたウェブサイトの機能と外観を忠実に複製するウェブベースのクローンを作成する。このプロジェクトは、ビジュアルデザイン、レイアウト、ユーザーインターフェース要素などをすべて再現することを目指しています。」
Replitの素晴らしい点は、通常あなたの要件を確認し、何を構築するかを教えてくれることです。機能を追加したい場合は追加できます。単純にフィルタリングとソートオプションを追加してと言えば、それを実行し始めます。この時点でチェックポイントを作成するので、このチェックポイントに常にロールバックすることができます。
構築を開始し、ファイルを作成し始めています。これはTypeScriptファイルで、メインアプリページ、ホームページ、メールキャプチャフォームを作成しています。UIデザイナーであれば、すぐに気付く点がいくつかあります。まず、新規ユーザーとの信頼関係を構築しようとするトップバナーがあり、そしてこのコピー、電話の画像、メールでサインアップできるCTA、そして「すでに数千人の創業者が参加している」という信頼を確立する文言があります。
これらはシンプルなデザインで、アカウントログインも必要です。現時点ではバックエンドシステムは追加しませんが、Replitエージェントの特徴は、V/AIとは異なり、フロントエンドを文字通りコピーするだけでなく、バックエンドも実装できることです。今回は私はフロントエンドだけを実装しています。
Replitエージェントが完了しました。新しいタブで開いてみましょう。「8桁のオンラインビジネスの秘密を解き明かす」。正直なところ、多くの点で良い出来栄えだと思います。コピーも良く、メールサインアップも良いですね。試してみましょう。「want.to.cod@gmail.com」...はい、機能は追加していないので動作しません。
「これは良いのですが、スクリーンショットとはかなり異なって見えます。元のものと全く同じにできますか？」と、技術的な詳細を提供せずにコメントしてみましょう。色、タイポグラフィ、レイアウトとデザインについて話しています。提供したスクリーンショットを使って、望む変更ができるかどうかを確認しています。
完了したら、Replitの素晴らしい点の一つとして、コードをダウンロードできることが挙げられます。ここでコードを入手できます。Cursorを使用している場合、ローカルコンピュータにIDEがあり、それらすべてのことができるという点でCursorは本当に優位性があります。他の多くのサービスでは、これをどれほど効果的に行えるかわかりませんが、Replitでは基本的にここに行ってダウンロードし、自分でホスティングを始めることができます。
進行状況に戻ると、進捗が見えます。これを閉じて...わお、これは印象的ですね。これが元のStart a Story、そしてこれが私たちが得たものです。正直なところ、かなり印象的です。創業者の写真は消えていますが、「画像がレンダリングされていないようです」と言えばいいでしょう。
これは英語で「impeccable（完璧な）」と言うような出来栄えです。このウェブサイトをMVPとしてウェブサイトデザイナーに渡し、このようなものを作成するよう依頼した場合、通常、開発会社は500ドル、1,000ドル、2,000ドルを請求するでしょう。国際的な料金がいくらかは分かりませんが、開発者に要件を伝えて作業を完了してもらうのはかなり難しいものです。
ここでは、最初のプロンプトを与え、満足できなかったので、スクリーンショットを再度与えて、すべてを実行しました。「はい、これを修正するお手伝いをしましょう」と言って、どのような変更を加えているかを見ることができます。これは開発者にとって別の良い点です。JavaScriptのバックグラウンドがないので、ここで起こっていることの多くを理解できませんが、そのバックグラウンドがあれば、編集を開始し、進行状況を確認し、どのような変更が行われているかを見ることができます。
実際、何か問題があれば、自分でコードに行って変更を加え始めることができます。AIに依存せずに、知識があれば可能です。しかし、このチュートリアルは、私のような、スタートアップの構築方法について全く感覚がない人のためのものです。
さて、プレースホルダーがたくさんあります。アプリのプレビューがあり、画像をアップロードできます。ケーススタディもあり、メールIDを入力できます。それだけです。
では、追加機能を加えてみましょう。「シンプルなユーザー認証システム、登録フォーム、そしてユーザーログインを追加できますか？」この時点ではFirebaseは使用したくありません。なぜなら、他にもお見せしたいことがたくさんあるからです。データボタンを使用した別のビデオがありますので、そちらをご覧ください。今回は、非常にシンプルなログインページを実装し、それがどのように機能するかを見てみたいと思います。
「ユーザー認証を追加し、登録とログイン機能を実装するお手伝いをします。」ユーザーログインを処理するには、ユーザー名とパスワードのデータベースが必要です。ご覧の通り、すでにデータベースの作成を開始し、ユーザーアカウントとパスワードを作成し、そのアカウントIDを使用してログインし、詳細を取得する機能も追加しています。
エージェントが作業を進め、変更を加えています。PostgreSQLデータベースが作成され、認証ページ、ユーザーページ（何なのかわかりませんが）があります。「データベースを作成しました」という表示があり、ここで管理できます。このデータベースを示す小さなアイコンが表示されています。小規模なスタートアップの中には、パスワードの置き換えなどのルールを手動で削除することもあります。シンプルなユーザー名とパスワードでログインができ、登録して、レスポンスを取得して完了です。
最後に、これをデプロイする場合どうするのでしょうか。ここの「Deploy」をクリックするだけです。その前に、これが気に入らない場合は、この特定の状態にロールバックすることができ、行われたすべての変更を元に戻すことができます。前回の動作バージョンに戻り、それを使用できます。
すべてが以前の状態に戻ったら、「Deploy」をクリックし、デプロイメントを設定します。アプリがバイラルになるまでは基本的な設定で進めることができます。どのドメインで使用したいかを指定し...「website-cloner」として、ここにすべてのシークレットを追加します。OpenAI、Gemini Pro、その他のAPIエンドポイントを使用してAIアプリケーションを構築している場合は、それらすべてをここに追加し、デプロイをクリックします。
そうすると、このアプリケーションが正常にデプロイされ、誰でも使用できるようになります。その後、独自のカスタムドメインを使用し、ここにリンクを張り、他のさまざまなことができます。この時点で止めておきますが、要点は、スタートアップのアイデアがあり、2025年にインターネットビジネスを始めようとしている場合、このようなサブスクリプションを取得し、何かを構築し始め、Stripe統合または何らかの決済ゲートウェイを追加するだけでよいということです。
私のようにインドにいる場合、Stripeは招待制で苦労しますが、世界の他の地域にいる場合、これは自分のスタートアップを立ち上げるのに最適な時期だと思います。これらのエージェントに技術的な部分を任せ、マーケティング、オーディエンス構築、カスタマーサポート、プロダクトアイデア、プロダクトマネジメントなど、通常は十分な時間を割くことができない多くのことに集中できます。
非技術系の共同創業者や非技術系の創業者である場合、これはおそらくこれまでで最高の時期です。ソフトウェアエンジニアではなく、ソフトウェアクリエイターになることができ、これらのツールがそれを可能にしてくれます。2025年にウェブサイトをクローンする方法、あるいはおそらく独自のインターネットビジネスを立ち上げる方法を理解する上で、これが役立つことを願っています。質問やフィードバックがありましたら、コメント欄でお知らせください。また別の動画でお会いしましょう。ハッピープロンプティング！