AIでFramerサイトをリデザインする方法

既存のFramerサイトをAIでリデザインし、すべてをゼロから作り直すことなくコンテンツを移行する方法をご紹介します。

公開日: 2026年7月29日Ben Shumaker

はじめに

Framerはデザインの自由度が非常に高いウェブサイトビルダーです。コーディングなしでトップクラスのウェブサイトを作りたいプロのデザイナーに人気があります。しかしそのデザインの自由度には代償もあります。細部まで精密にコントロールしたいプロ向けに作られているため、多くの人にとって使いこなすのが難しいツールです。最近、AIが代わりに編集を行ってくれるチャット機能が追加されましたが、その周りのツール自体は依然としてデザイナー向けに作られています。

多くの人にとっては、より幅広いユーザーに向けて作られたRepaintのようなAIプラットフォームの方が適しています。やりたいことを言葉で説明するだけで編集でき、デザイン用のキャンバスではなく実際のウェブサイトそのものを扱います。すでにFramerサイトを持っているなら、既存のコンテンツを自動で移行できるので、ゼロから始める必要はありません。

このガイドでは、FramerサイトをRepaintでリデザインする方法をご紹介します。

なぜAIを使ってFramerサイトをリデザインするのか？

最大の違いは編集の体験です。Framerはもともとプロ向けのデザインツールであり、それが今も核となっています。2Dキャンバス上で要素を選択し、設定を調整し、画面サイズごとにオーバーライドを追加していく仕組みです。新しいAIチャットは確かに優秀ですが、その同じシステムの中で編集を行います。何かをクリックすると、サイト内を移動するのではなく、その要素を選択してしまいます。

Repaintは最初からAIによる編集を前提に作られています。同じレベルのデザイン品質を、完全にチャットだけで実現できます。やりたいことを入力すればAIがデザイン作業を行い、レイアウト、余白、レスポンシブ対応まで引き受けてくれます。またブロックを組み立てるのではなく実際のコードを書くため、開発者と同じだけの自由度があります。そしてエディターはキャンバスではなく実際に動くウェブサイトを表示するので、訪問者と同じようにサイトを読んだりクリックしたりできます。

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

Repaintは訪問者と同じように公開中のFramerサイトにアクセスします。テキストを読み取り、画像をダウンロードし、レイアウトを把握するために各ページのスクリーンショットを撮ります。その素材をもとにサイトを再構築します。その後は、AIとの会話で変更を加えていきます。Framerアカウントへのアクセス権は必要なく、Framer側の何かが変更されることもありません。

始めたからといって何かを確定させる必要もありません。構築中もFramerサイトは公開されたままで、ドメインを新しいサイトに向けるまで訪問者にはこれまで通り表示されます。途中でやめても、何も変わりません。

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

RepaintのAIウェブサイトリデザインツールにFramerサイトのURLを貼り付ける

まず、公開中のFramerサイトのURLが必要です。

AIウェブサイトリデザインツールにアクセスします。
FramerサイトのURLを貼り付けて送信します。
Repaintのアカウントを作成します。

カスタムドメインでも無料のframer.websiteアドレスでも、公開されているFramerサイトであれば利用できます。スキャンで何か見落としがあれば、チャットで追加したりファイルとしてアップロードしたりできます。

大規模なサイトの場合、まず主要なページと代表的なCMSアイテムをいくつかインポートするのがうまくいきやすい方法です。Repaintはプランを立てる際に既存サイトの規模を考慮するため、最初のパスですべてを再構築しないこともあります。レイアウトの見た目が整った段階で、残りのブログ記事やポートフォリオ項目をバッチで移行できます。これにより、デザインを確認する前に無料プランの利用上限に達してしまうことも防げます。

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

Repaintはあなたのウェブサイトと変更したい内容について会話を始めます。そしてその指示とコンテンツをもとに、新しいサイトの最初のバージョンを構築します。最初にすべての決定をする必要はありません。最初のバージョンができたら、チャットを通じて形作り続けられます。

スタイルを選ぶ

Repaintはさまざまな情報源からデザインの方向性を取り入れられます。例えば、

現在のFramerデザイン
気に入っている別のウェブサイト
Repaintが生成したスタイルサンプル
Facebook、Instagram、Google Businessのコンテンツ
PDFやPowerPointなどのファイル
希望するスタイルの説明

Repaintはブランドカラーやロゴを維持しながらこれらの情報源を組み合わせられるため、サイトは今も自分のビジネスらしく感じられます。

結果を確認する

一般的な中小企業サイトの最初のバージョンは、生成に数分かかるのが普通です。ページ数やCMSアイテムが多いサイトの場合はもう少し時間がかかります。

最初のバージョンができたら、既存のFramerコンテンツが新しいレイアウトにどう収まっているかを確認できます。細部の調整が必要な箇所が出てくるのは普通のことで、チャットで対応できます。

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

ほとんどの調整は、サイトを作ったのと同じ会話の中で行われます。変更したい内容を説明すると、Repaintが結果を見せてくれます。意図と違っていた場合は、どこが違うのかを説明すればよいのです。

まずは全体の構造やビジュアルスタイルを固めておくとよいでしょう。これらの大きな選択はその後のすべてに影響するからです。土台がしっくりくれば、細かい部分の調整はそのあとの方が対応しやすくなります。最後にデスクトップとモバイルの両方を確認すれば、想定通りに対応していなかった箇所も見つけられます。

アニメーションは別途確認する価値があります。アニメーションはFramerの真骨頂であり、Repaintは完成したページのスクリーンショットから作業するため、動きだけは見ることができません。大切にしているスクロールエフェクト、ホバーの動き、トランジションはチャットで説明すれば、Repaintが再現してくれます。Framerのフォームは、送信内容をメールに送る新しいフォームに置き換えられます。サードパーティのサービスは、埋め込みコードやリンクを共有すれば、たいてい再接続できます。

SEOの確認

サイトの作られ方をどう保つかよりも、URLを保つことの方が重要です。検索順位は個々のページのURLに紐づいているため、サイトを移行する際に稼働中のURLを変えてしまうと、そのページがそれまでに獲得してきた実績が失われることがあります。

最後の確認として役立つのは、旧サイトと新サイトのパスを比較することです。一致しないものはRepaintが再現できます。Framerのページ設定でタイトルや説明文をカスタマイズしていた場合は、それらにも注意を払う価値があります。ウェブサイトを変更する際のSEOの全体的なプロセスについては、ウェブサイトリデザインSEOガイドをご覧ください。

ステップ4: 公開する

公開するまで、新しいサイトは自分だけが見られる下書きです。右上の「公開」をクリックすると、Repaintがsites.repaint.comで終わる無料のアドレスでサイトをオンラインにします。これは実際に動作するライブサイトなので、スマートフォンで開いたり、フィードバックを求めて他の人に共有したりできます。

以降は、公開するたびに最新の変更が同じRepaintアドレスに反映されます。これらの更新は新しいウェブサイトにのみ影響し、Framerサイトが変更されることは一切ありません。作業中は両方のサイトが別々のアドレスで公開されたままです。訪問者は、メインドメインを新しいサイトに切り替えるまで、引き続きFramerサイトを見続けます。

ステップ5: ドメインを接続する

最後のステップはドメインをRepaintに向けることです。Framerはエディター内でドメインを販売しているため、あなたのドメインもFramer経由で登録されているかもしれませんし、GoDaddy、Namecheap、Cloudflareといった外部のレジストラで登録されているかもしれません。いずれの場合も、ドメインは今の場所に登録されたままで構いません。更新が必要なのは、ウェブサイトの読み込み先を制御するレコードだけです。

ドメインを接続する準備ができたら、Repaintが正確なDNSレコードと、利用しているプロバイダー向けの手順を教えてくれます。ドメインの登録先に応じて、手順を一つ一つ案内してもらうこともできます。カスタムドメインの接続には有料プランが必要です。最新の詳細は料金ページをご覧ください。

変更は通常20分程度で反映されますが、まれにもう少し時間がかかることもあります。Repaintに確認を依頼すれば、新しいウェブサイトがドメインで有効になったタイミングを教えてくれます。切り替えがうまくいったら、そのサイトのFramerプランは解約できます。ドメインをFramer経由で登録している場合は、ドメインの更新契約はそのまま継続してください。ドメインの登録とサイトのプランは別物なので、一方を解約してももう一方には影響しません。

まとめ

Framerは美しいウェブサイトを作れますが、それを常に最新の状態に保つには、何かを変えるたびにプロ向けのデザインツールを操作する必要があります。Repaintは既存のコンテンツをインポートし、それをもとにウェブサイトをリデザインし、その後の変更はチャットでできるようにします。ドメインを切り替えると決めるまで、Framerサイトは公開されたままです。

よくある質問

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

コンテンツのインポートと最初のバージョンの生成には、通常3〜10分かかります。それ以降にかかる時間は、Framerサイトの規模とどれだけ変更したいかによります。多くの中小企業のウェブサイトは同日中に完成させられます。

今のFramerデザインをそのまま維持できますか？

はい。Repaintは公開中のFramerサイトを見た目の参考として使い、おおよそ同じ雰囲気を再現できます。Framerサイトの場合、主なギャップは通常アニメーションです。レイアウト、色、タイポグラフィはうまく引き継がれますが、アニメーションはRepaintが再現する前にチャットで説明する必要があります。デザインが動きに大きく頼っている場合、最初のバージョンは見た目はサイトに似ていても、アニメーションを追加し直すまでは静的な印象になります。

FramerのアニメーションやインタラクションはRepaintに移行されますか？

部分的に移行されます。FAQのドロップダウン、モバイルメニュー、ボタンのホバー状態といった分かりやすいインタラクションはRepaintが推測してくれます。ただし完成したページのスクリーンショットから作業するため、レイアウトほどにはアニメーションを把握できません。カスタムのスクロールエフェクトやトランジションは、自動的には移行されないのが普通です。元の動きをRepaintに伝えれば、それらを再現できます。

FramerのCMSブログやポートフォリオも移行できますか？

はい。RepaintはページをインポートするのとCMSコンテンツを同じ方法でインポートします。ブログ記事やポートフォリオ項目はテキストと画像とともに移行され、新しいサイトにも対応する記事レイアウトやポートフォリオレイアウトが用意されます。件数の多いコレクションの場合、まずいくつかの項目をインポートしてレイアウトを確認し、その後残りをバッチで移行するのがうまくいきやすい方法です。検索実績を守るために、新しいURLは旧URLと一致させる必要があります。

フォームは引き続き機能しますか？

RepaintはFramerのフォームを、送信内容をメールに送る新しいフォームに置き換えられます。別のサービスに接続していたフォームは、その接続を改めて設定する必要があります。ほとんどのサードパーティフォームツールは埋め込みコードを提供しているので、チャットでRepaintに共有できます。

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

部分的に可能です。Repaintはマーケティングページや見た目のストアフロントを再構築できますが、チェックアウトや決済処理には対応していません。それらには、ShopifyやStripeといった専用のコマースサービスが今後も必要です。埋め込みウィジェットを使っているショップであれば、埋め込みコードをRepaintに共有してください。