AIでv0サイトを再構築する方法

はじめに

v0は、開発者向けプラットフォームVercelが作ったブラウザベースのAIコーディングツールです。数分でシンプルなサイトを作れますが、そもそもウェブデザインのために設計されたものではありません。アプリケーションのUI設計と本番環境向けのコードワークフローに特化した、フル機能のアプリ構築プラットフォームです。コードを書かない人にとっては、多機能すぎて圧倒されがちです。

v0でサイトを仕上げる代わりに、よりウェブサイトに適した別のツールへ移行することができます。このガイドでは、RepaintというAIプラットフォームでサイトを完成させる方法をご紹介します。

なぜRepaintなのか

Repaintはウェブサイト制作に最適化されたAIプラットフォームです。基本的な考え方はv0と同じです。やりたいことを伝えれば、AIがそれを構築します。しかし、Repaintはよりシンプルで、ウェブデザインに集中できるよう設計されています。いくつかの違いをご紹介します。

• 技術的な知識が不要。 v0はコードファイル、gitの差分、コンポーネント、本番環境へのデプロイ、リポジトリなど、技術的な話をよくします。Repaintは平易な言葉で話しかけるので、覚えるべき専門用語が少なくて済みます。
• より効率的にサイトを構築できる。 Repaintは少ない使用量でより大きなサイトを構築できます。効率的な並行処理を使い、シンプルなタスクには自動的に安価なAIモデルを選択します。ほとんどの更新は、v0が複雑なアプリ構築のために使う高価なAIモデルを必要としないからです。
• コンテンツのインポートが得意。 Repaintには既存のサイトからコンテンツやスタイルを取り出す専用ツールがあるため、すべてを手作業で移すことなくサイトを移行できます。

v0からの移行の仕組み

サイトをRepaintに移行する方法は2つあります。コードをインポートする方法と、公開中のURLを共有する方法です。v0からコードをエクスポートしてRepaintにアップロードすると、Repaintが本物のソースから作業できるため、最も元のサイトに近い仕上がりになります。ただし、どうせリデザインするつもりなら、公開中のv0のURLをそのまま貼り付けるほうがシンプルです。

どちらの方法でも、AIとの会話で編集できる完全なサイトが手に入ります。新しいサイトに満足したら、Repaintから直接公開し、カスタムドメインを接続できます。

ステップ1: コンテンツをインポートする

Repaintにコンテンツをインポートする方法は2つあります。

1. v0からコードをエクスポートし、Repaintにインポートする
2. 公開中のサイトのURLを共有する

v0でのコードエクスポートは無料で、Repaintに最も正確な元のコピーを渡せます。URLからRepaintが再構築する場合、わずかに元のサイトからずれることがあります。とはいえ、どうせリデザインするつもりなら、コードのエクスポートは過剰であり、公開URLをそのまま共有するほうがシンプルです。

コードとしてインポートする

v0でのコードエクスポートは、場所さえ分かれば簡単です。

1. v0でサイトを開きます
2. 右上の省略記号（…）メニューを開きます
3. 「Download Zip」をクリックしてコードファイルを取得します
4. Repaintにアクセスしてアカウントを作成します
5. .zipをアップロードして送信します

URLからインポートする

Repaintはインターネット上の公開アクセス可能なあらゆるサイトをリデザインできます。これを機能させるには、v0のサイトが公開されている必要があります。v0には右上に「Publish」ボタンがあり、https://custom-company-website-iybvfowln-repaint.vercel.appのようなURLでサイトを公開できます。

まず、v0でサイトを公開します。次に、

1. サイトにアクセスして公開URLをコピーします
2. Repaintにアクセスし、URLを貼り付けて送信します
3. Repaintのアカウントを作成します

どちらの方法でも、サイトの構築プロセスが始まります。Repaintはサイトをスキャンし、テキストと画像をコピーし、デザインを理解するために各ページのスクリーンショットを撮ります。あとはRepaintと会話するだけでプロセスを完了できます。

ステップ2: 新しいサイトを計画する

Repaintは元のサイトをそのまま複製することも、完全にリデザインすることも、その中間のどんなことでもできます。サイトの構築を始める前に、何を求めているかを把握するためにいくつか質問をします。

どうせ再構築するなら、スタイルを試してほかに試したいことがないか確認する良い機会です。Repaintに選択肢となるスタイルのサンプルを生成してもらえるので、最初に決まったデザインに縛られることはありません。

コンテンツをインポートする

含めたい情報がさらにある場合は、今このタイミングで共有してください。Repaintは他のサイト、Googleビジネス、PDFやその他のファイル、画像などの情報を活用できます。サイトを構築する前に学習する内容が多いほど、後で仕上げる作業が減ります。

たとえばv0のサイトに加えて古いサイトがあるなど、複数のソースサイトがある場合は、両方をRepaintに渡すとよいでしょう。古いサイトを移行する情報源として、新しいサイトをスタイルガイドとして使えます。迷ったときは、たくさんの情報を共有して、その使い方はRepaintに任せましょう。

計画についてRepaintと合意できたら、新しいサイトを構築します！

ステップ3: サイトを生成する

Repaintは通常、サイトの最初のバージョンの構築に数分かけます。正確な所要時間は、移行するコンテンツの量や新しいサイトの規模によって異なります。数十ページの大規模なサイトは10分以上かかることもあります。

完成すると、Repaintは自動的に新しいサイトのプレビューを開きます。最初のバージョンには通常、いくつか粗削りな部分があります。テキストが途中で切れている、画像の位置がずれている、余白が少しおかしいなどです。これは想定内です。位置がおかしいものは、AIとの会話で修正できます。

v0のプロジェクトがSupabaseやUpstashなどのデータベースに接続されている場合、それは自動的には移行されません。Repaintは人々が目にするビジュアルなサイトだけを再構築し、複雑なバックエンド機能は対象外です。データベースを使わないマーケティングサイトがほとんどなので、通常は問題になりません。しかし、v0で複雑なアプリを構築している場合、移行するとその根幹のロジックが壊れる可能性が高いです。

ステップ4: 調整を加える

サイトを生成した後、いくつか手を入れるべき点があるかもしれません。Repaintはサイトを独自の形式に変換するため、一部の細部が変換の過程で失われる可能性があります。また、Repaintにv0サイトをリデザインさせる場合は、確認すべき新しいコンテンツがたくさんあります。

編集のワークフローはv0とまったく同じで、AIとの会話でサイト上のあらゆるものを変更できます。「デザインにもっと色を加えて」「ヒーロー画像をモダンな高層ビルの写真に変えて」「見出しのフォントサイズを小さくして」といった具合に。新しい画像が必要な場合は、Repaintが直接生成してくれます。

まずはビジュアルスタイルの評価から始めましょう。色、フォント、レイアウトがすべて良く見えることを確認してください。ビジュアルスタイルは、AIが新しいコンテンツを作成する際に自然と使うパターンを確立するものなので、早めに仕上げておくほうが、数十ページを作り込んだ後に仕上げるよりも速く済みます。

スタイルが気に入ったら、コンテンツを一通り確認し、テキストが正確か、画像が適切な位置にあるか、リンクが機能するか、モバイルですべてが良く見えるかを確認しましょう。

SEOコンテンツを確認する

v0サイトがSEOで検索トラフィックを獲得していた場合、移行時にSEOに注意を払う価値があります。詳しく知りたい方のために、ウェブサイトリデザインのSEOガイドを丸ごと用意しています。大まかに言えば、新しいサイトが同じページURLと同じコンテンツを持つようにするだけです。

Googleはサイト内の個々のページについて、そのURLに紐付けて検索順位を構築します。新しいプラットフォームに移行してこれらのURLが変わったり消えたりすると、Googleはそれらを履歴のない新しいページとして扱い、それまで獲得していたトラフィックを失います。また、コンテンツを変更すると、Googleは新しいバージョンが検索クエリにもはや関連しないと判断し、ランク付けをやめる可能性があります。

新しいサイトのURLをv0のものと比較して違いがないか確認するよう、Repaintに依頼できます。コードを直接インポートした場合は、何も変わっていない可能性が高いです。しかし、変更や欠落があった場合でも、依頼すればRepaintが修正を手伝ってくれます。

サイトの見た目が整い、コンテンツが正確になったら、公開の準備が整いました。

ステップ5: サイトを公開する

新しいサイトを公開する準備ができたら、Repaintのプロジェクトを開き、右上の「Publish」をクリックします。サイトはRepaintのURLで公開され、誰とでも共有できます。v0のURLに似た、次のような形になります。https://careful-tiger-5jd92kjd.sites.repaint.com

この時点で、RepaintとV0の2つのサイトが公開されています。カスタムドメインをお持ちの場合、それはまだv0サイトを指しているので、訪問者にとっては何も変わっていません。乗り換える準備ができたら、ドメインを移管できます。

ステップ6: ドメインを移管する

正式に切り替える準備ができたら、ドメインを新しいRepaintサイトに向けるだけです。Repaintでこれを行うには、AIにドメインを接続するよう伝えるだけです。追加すべきDNSレコードが提示されます。これには有料プランが必要です。料金の詳細はこちらでご確認いただけます。

ドメインはVercelで登録されているかもしれませんし、GoDaddy、Namecheap、CloudflareなどほかのDNSサービスで管理されているかもしれません。いずれにせよ、ドメインはそのプラットフォームに残しておいて構いません。サイトとは独立しているので、新しいサイトに接続するために移管する必要はありません。設定を更新して、ドメインがv0のサイトではなく新しいRepaintサイトを指すようにするだけです。

DNS設定を扱ったことがなくても心配いりません。Repaintが手順を案内してくれます。ご利用のプロバイダーに合わせたカスタムの手順を提供できます。DNSの変更が反映されるまでには20分以上かかることがあります。DNSレコードを設定したら、Repaintにライブのレコードを確認してもらい、正しく反映されたかをチェックできます。すべてが正しく設定されていることが確認できたら完了です。

ドメインを移管した後は、ホスティングのためにv0の有料プランは必要なくなります。v0のサブスクリプションはいつでもキャンセルできます。

まとめ

v0は高度なソフトウェアのアプリケーションUIをプロトタイプするには優れたツールですが、ウェブサイトを作るには多機能すぎます。Repaintは、サイトを移行し、ページを磨き上げ、文章やビジュアルを改善して、準備が整ったら公開できる、よりウェブサイトに適した場所を提供します。v0のコードをエクスポートするか公開URLを共有するかで移行し、その後はコードを管理することなくAIとの会話で編集を続けられます。v0サイトは移行中もずっと公開されたままなので、切り替える前にRepaintを試してみても失うものは何もありません。

よくある質問

RepaintもAIビルダーなら、なぜv0から乗り換えるのですか？

似たようなツールで、どちらもやりたいことを伝えて構築できます。違いは特化している点です。v0はよりコード寄りで複雑なアプリのために作られているのに対し、Repaintはよりウェブサイト寄りです。シンプルな言葉、より効率的な複数ページの構築、既存サイトからのコンテンツインポートに優れたツールが揃っています。

v0はウェブサイト制作に技術的すぎますか？

完全な壁というわけではありません。v0を使うのにコードの書き方を知っている必要はありません。コードやデータベースは奥に隠れているので、無視しやすいです。インターフェース自体がひどく圧倒的なわけでもありません。本当の課題は、AIチャットとUIボタンの言葉がとても技術的なことです。AIはコードファイル、gitの差分、コンポーネント、本番環境へのデプロイ、リポジトリについて話します。シンプルなサイトを作るだけなら、これは圧倒的に感じられることがあります。Repaintは会話をシンプルに保ち、サイト自体に集中します。

v0で達した使用量の上限に、Repaintでも同じように達してしまうのでは？

Repaintにも使用量の上限はありますが、無料プランでも有料プランでも、より長く使えます。RepaintのAIエージェントはウェブサイトの編集に対して一般的により効率的で、シンプルなタスクには安価なAIモデルを使います。より少ない費用でより多くのことができます。また、月単位のクレジット上限ではなく週単位の使用量枠で動くため、月の中でより余裕があります。

移行するとv0のトークンを消費しますか？

いいえ。公開URLからインポートする場合、Repaintは訪問者と同じように公開中のサイトを訪れるだけです。v0のアカウントには一切触れないので、v0のトークンはゼロで済みます。コードのエクスポートも、すでに持っているファイルをダウンロードするだけなので無料です。移行はv0ではなくRepaintの使用量で動きます。

移行中、v0サイトはどうなりますか？両方を維持できますか？

v0サイトには何も起こりません。2つは完全に独立しています。あなたがしているのはRepaintで新しいサイトを構築することだけで、その間v0のプロジェクトは公開されたまま手つかずです。Repaint版に満足したら、ドメインをそちらに向けられます。v0を使い続けると決めた場合は、何もする必要はありません。

v0のプロジェクトがデータベースを備えた完全なアプリの場合はどうですか？

その場合、Repaintはおそらく適切なツールではありません。Repaintは人々が目にするビジュアルなサイトを再構築しますが、データベース接続などの背後にあるインフラは対象外です。そのような機能を持つ本物のアプリであれば、移行するとそれを機能させている部分を失うことになります。

Repaintでv0のデザインを完全に再現できますか？

インポート方法によります。コードをエクスポートしてRepaintに渡せば、元のサイトをもとに作業するので、かなり近づけられます。公開URLからインポートする場合、Repaintは見える範囲からデザインを再現します。明らかにあなたのサイトだと分かる仕上がりにはなりますが、いくつかの箇所でずれる可能性が高くなります。いずれの方法でも、AIとの会話であらゆる点を細かく調整できます。

移行にはどのくらい時間がかかりますか？

最初の構築は通常、数分かかります。ページ数が多い大規模なサイトは10分以上かかることもあります。その後、公開までの時間は加えたい調整の量によって異なります。ほとんどのサイトは数時間以内に移行して仕上げられます。

v0からRepaintへの移行にかかる費用は？

サイトのインポート、編集、sites.repaint.comアドレスへの公開は無料です。無料プランでは、週単位の編集使用量枠、Repaintのバッジ付き、カスタムドメインなしで、シンプルなサイトの構築と公開ができます。有料プランは年払いで月額20ドル、月払いで月額25ドルから始まり、より大きな使用量枠が得られ、バッジが削除され、カスタムドメインを接続できるようになります。詳細は料金ページでご確認いただけます。

まず1ページだけ移行して試せますか？

はい。サイト全体に取り組む前に、1ページだけインポートしてどう仕上がるか確認できます。気に入ったら、残りの構築をRepaintに依頼できます。

移行すると検索順位を失いますか？

URLとコンテンツの一貫性を保てば失いません。Googleは順位を個々のページURLに紐付けるので、新しいRepaintサイトが古いサイトと同じURLと、ほぼ同じコンテンツを使うことが目標です。新しいURLを元のものと比較してギャップを修正するようRepaintに依頼できます。サイトをインポートする際のSEOを維持するためのガイドに詳しく書いています。

AIがミスをした場合はどうなりますか？変更を元に戻せますか？

はい。Repaintは変更を加えるたびにサイトのバージョンを保存します。何かおかしな仕上がりになった場合は、戻すよう依頼するか、バージョン履歴から以前のバージョンを自分で復元できます。何も永続的ではないので、安心して試してみてください。