AIを使ってWebflowサイトを作り直す方法

はじめに

Webflowは優れたウェブサイトを作れる強力なツールですが、使いこなすのが難しいことでも知られています。多くの企業がWebflowに縛られていると感じています。

最近、AIツールの進化により、AIとの会話だけで同等のサイトを構築できるようになりました。すでにWebflowサイトをお持ちなら、ゼロから始めることなく自動的に作り直すことができます。

このガイドでは、WebflowサイトをRepaintという新しいAIツールに移行する方法を紹介します。

なぜWebflowサイトを作り直すのか？

AIウェブサイトビルダーは、Webflowと比べてはるかに使いやすいツールです。複雑なビジュアルエディタを覚える必要はなく、やりたいことを言葉で伝えるだけで実現できます。そのため、サイトの更新をリスクとして捉えず、実際に継続的に管理していくことが現実的になります。

多くの人がまだ移行していない理由は、Webflowからの離脱がいつもゼロからの再構築を意味していたからです。AIツールはその状況を変えました。初めて、今あるものをそのまま持ち出して、より使いやすい場所に移せるようになりました。最初から作り直したり、数十万円を払って誰かに頼んだりする必要はありません。

AIによるサイト移行の仕組み

AIによる移行は、既存サイトを読み取り、新しいプラットフォームで作り直すことで行われます。コンテンツ、画像、レイアウトを取り込み、AIとの会話で編集できる新しいバージョンを生成します。満足できたら、ドメインを移転して完了です。

完全に同じものを複製しようとすると、80%程度の再現にとどまります。AIは変換の過程で細部を見落とすことがあります。特にアニメーションの移行は難しい部分です。ただし、コンテンツの移行、レイアウトの再現は行われるため、テンプレートよりもはるかに近いものができます。足りない部分はAIに変更を依頼することで補えます。

サイトが5年以上経過して古くなっているなら、デザインを刷新する良いタイミングでもあります。Repaintは既存のコンテンツをもとに、まったく新しいデザインを組み立てることができます。

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

まずはRepaintにアクセスしてください。画面上部にあるフォームにWebflowサイトのURLを入力するだけで、サイトの再構築プロセスが始まります。Repaintはサイトをスキャンし、画像をダウンロードし、各ページのスクリーンショットを撮影して、元のサイトを把握します。

この機能は一般公開されているウェブサイトのみ対応しています。Webflowサイトが公開済みである必要があります。xxxx-xxxx-xxxx.webflow.ioのような無料サブドメインでも問題ありません。

Repaintがビジネスの内容を把握すると、新しいサイトの計画に向けた質問を始めます。ガイドに沿って進めるので、事前に準備するものは特にありません。

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

構築を始める前に、Repaintが目指す方向を理解するためにいくつかの質問をします。通常3〜5回のやり取りで完了します。短いインタビューのようなもので、どのページを残すか、構成を見直すか、どんなスタイルにするかを確認します。回答が終わると、承認のためのプランが提示されます。

何にしたいか迷っている場合でも大丈夫です。Repaintにプランを提案してもらうことができます。気に入らなければ、やり直しを依頼することもできます。最初の案に縛られる必要はありません。

コンテンツを計画する

最もシンプルな方法は、すべてをそのまま移行することです。同じページ、同じテキスト、同じ画像。現在のサイト構成がうまく機能していて、管理しやすいツールに移りたいだけであれば、これがベストです。

ただし、サイトが長年使われて雑然としているなら、この機会に整理することができます。古いブログ記事、過去のキャンペーンのランディングページ、不要なセクションなどがあれば、残すページと削除するページをRepaintに伝えるか、見つけた内容をもとにシンプルな構成を提案してもらうこともできます。

WebflowサイトでCMSコレクション（ブログ、ケーススタディ、ポートフォリオなど）を使っている場合も移行できます。CMSページは繰り返しのテンプレートを使っているので、まず1〜2件だけ試してレイアウトを確認しましょう。また、20ページを超えるサイトをまとめてインポートすると、無料プランの使用上限に達する可能性があります。その場合はアップグレードが必要になります。大規模なサイトは、まず一部だけ試してから残りを移行するのがおすすめです。

スタイルを計画する

新しいサイトの見た目については、いくつかの選択肢があります。

• 元のデザインをそのまま再現する
• 別のウェブサイトのスタイルに合わせる
• Repaintのスタイルライブラリから選ぶ
• カスタムスタイルをリクエストする
• Repaintに決めてもらう

どの方法を選んでも、後からカスタマイズできます。ブランドカラーやフォントをどのスタイルにも適用できるので、選んだものに完全に縛られることはありません。

プランを確認する

生成が始まる前に、Repaintは作成する内容を具体的に書き出します。ページの構成、コンテンツ、スタイルを確認して、最後の修正を加えてください。プランを修正する方がサイト全体を再生成するよりずっと早いです。

確認すると、Repaintが新しいウェブサイトの構築を開始します。

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

プランを確認すると、Repaintがサイトの構築を開始します。各ページの進捗メッセージが表示されます。シンプルなトップページなら1〜2分程度で完了しますが、数十ページにわたる大規模なサイトは10分以上かかることもあります。

Repaintはバックグラウンドで、コンテンツとスタイルをもとに新しいサイトのコードを書いています。完成後は、結果を表示する前にスクリーンショットを撮影して明らかな問題がないか確認します。

最初のバージョンでは、読みにくいテキストのボタン、小さすぎるロゴ、ずれた余白など、細かい問題が見つかることがあります。これは通常のことで、Repaintに話しかけることで修正できます。

うまく移行されないことがある要素として、アニメーションがあります。Webflowは強力なアニメーションシステムを持っており、AIがスクリーンショットだけからアニメーションの動作を推測することは難しい場合があります。スクロールエフェクト、ホバーアニメーション、ページ遷移などが移行されていない場合は、やりたいことを説明してRepaintに再作成してもらう必要があります。Repaintは同じアニメーションを作れますが、自動的に移行されるとは限りません。

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

サイトが生成されたら、Repaintとの会話で変更を加えられます。

まず、色、フォント、レイアウトなど全体的なビジュアルスタイルを確認してください。これはすべての土台となる部分です。後から変更すると、サイト全体に影響を与え、細かい調整の作業が無駄になってしまう可能性があります。

全体的なスタイルに満足できたら、細かい部分を確認していきましょう。テキストが正確か、画像が適切な場所に配置されているか、リンクが機能するか、すべてのページで余白が正しく表示されているかを確認してください。

SEOを確認する

Webflowサイトが検索流入を得ていた場合、移行中にSEOにも注意を払う必要があります。Googleはウェブサイト全体ではなく、個々のページをランキングします。サイトの各ページはそれぞれのURLに紐づいた独自のランキングを積み上げています。新しいプラットフォームに移行してURLが変わったり消えたりすると、Googleはそれらを履歴のない新しいページとして扱い、それまで獲得していたトラフィックが失われます。

Repaintに古いサイトと新しいサイトを比較して、すべてのページがWebflow時代と同じURLで存在しているか確認してもらいましょう。URLが変わっている場合は、古いURLから新しいURLへのリダイレクトを設定して、Googleが追跡できるようにする必要があります。Repaintがサポートします。

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

ステップ5：公開する

準備ができたら、右上の「公開」ボタンをクリックしてください。Webflowの公開と同じ操作です。サイトはRepaintのURLで公開され、誰でもアクセスできるようになります。URLはhttps://xxxxxx-xxxxxx-xxxxxx.sites.repaint.comのような形式になります。

これでインターネット上の実際のウェブサイトとして公開されます。スマートフォンで確認したり、友人に共有したり、SNSに投稿したりすることができます。

この時点では、2つのサイトが同時に公開されています。RepaintとWebflow、それぞれに1つずつです。ドメインはまだWebflowを指しているので、訪問者には何も変化がありません。切り替える準備ができたら、ドメインを新しいサイトに向けることができます。

ステップ6：ドメインを移転する

本番公開の準備ができたら、ドメインをRepaintに向ける必要があります。「ウェブサイト設定 > ドメイン」に移動して「カスタムドメインを接続」をクリックしてください。有料プランが必要です。料金の詳細はこちらをご確認ください。

ドメインはWebflowとは別のものです。GoDaddy、Namecheap、Cloudflareなどのドメインプロバイダーに登録されています。ドメインを移動する必要はなく、ドメインプロバイダーの設定を変更してWebflowではなくRepaintを指すように更新するだけです。ウェブサイトを他の人に設定してもらった場合は、このステップを始める前にドメインプロバイダーへのログイン情報を確認しておいてください。

初めての場合でも心配いりません。Repaintに手順を聞けば、ステップバイステップで案内してくれます。

変更が反映されるまで数時間かかる場合があります。Repaintにドメインが確認済みと表示されれば、本番公開完了です。準備ができたらWebflowのプランをいつでもキャンセルできます。

まとめ

長年にわたり、Webflowからの移行はゼロからの再構築か、誰かに費用を払って依頼するかのどちらかでした。それはもう過去の話です。Repaintにコンテンツを取り込めば、数分で動くサイトができあがり、複雑なツールを覚えることなく自分で管理していけます。作業量が多そうで先延ばしにしていた場合は、今がちょうど良いタイミングです。

よくある質問

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

サイトの計画、コンテンツのインポート、新しいサイトの生成まで、通常3〜15分かかります。その後の公開までの時間は、必要な調整の量や追加コンテンツのインポートによって異なります。ほとんどのサイトは数時間以内に移行できます。

モバイルでも同じように表示されますか？

Repaintは自動的にさまざまな画面サイズに対応したサイトを構築します。ほとんどの場合、特に気にする必要はありません。気になる点があれば、特定のデバイスサイズに合わせた変更をRepaintに依頼できます。

移行後もフォームは機能しますか？

はい。Repaintはメールを受信ボックスに送信するお問い合わせフォームを作成できます。TypeformやGoogle Formsなどのカスタム埋め込みを使っている場合、Repaintは自動的に接続しようとしますが、埋め込みコードをRepaintに共有する必要がある場合もあります。

移行中、Webflowサイトはどうなりますか？

移行中、Webflowサイトには何も変化がありません。完全に独立しています。Repaintで新しいサイトを構築しているだけです。新しいサイトに満足したら、ドメインを新しいサイトに向けることができます。Webflowサイトを残す場合は、何もする必要はありません。

ECサイトのWebflowサイトも移行できますか？

部分的に可能です。Repaintはeコマース向けのウェブサイトを作成できますが、チェックアウトプロセスの構築や決済処理は対応していません。商品販売が必要な場合は、ShopifyやStripeなどのサードパーティサービスを接続する必要があります。埋め込みウィジェットを使っているショップであれば、埋め込みコードをRepaintに共有すれば組み込んでもらえます。

1ページだけ試しに移行できますか？

はい。1ページだけインポートして試すことができます。Repaintがビジネスに合っているか確認するのに良い方法です。結果に満足したら、残りのページの構築をRepaintに依頼できます。

WebflowからRepaintへの移行費用はどれくらいですか？

サイトの生成と編集の開始は無料です。無料プランの主な制限は、使用量に上限があること、カスタムドメインを追加できないこと、サイトにRepaintのバッジが表示されることです。有料プランは年払いで月額20ドルから、月払いで月額25ドルからです。使用量の拡大、カスタムドメインのサポート、Repaintバッジの非表示が含まれます。

AIが間違えた場合、個別の変更を元に戻せますか？

更新のたびに、Repaintはサイトのすべてのバージョンを保存しています。Repaintに「戻して」と伝えると、以前のバージョンに戻ります。特定の時点まで戻したい場合は、以前のバージョンを手動で復元することもできます。

WebflowのカスタムコードやサードパーティEmbedはどう扱われますか？

RepaintはWebflowサイトのカスタムコードや埋め込みを実行できます。最初のパスで自動的にすべてを移行しようとしますが、見落としが発生することもあります。その場合は、チャットに埋め込みコードを貼り付けてRepaintに対応してもらってください。