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

はじめに

Canvaを使えば、シンプルなウェブサイトを簡単にデザインして公開できます。すでにプレゼン資料やSNS用の画像、マーケティング素材の制作に使っているなら、同じビジュアルツールを使って、別のプラットフォームを覚えることなくランディングページや小規模なビジネスサイトを作ることができます。

しかしサイトを拡張しようとすると、限界がはっきりしてきます。Canvaはコンテンツをビジュアル的に配置する仕組みを中心に作られており、シンプルなページではうまく機能しますが、大規模なサイトになると管理が難しくなります。ページを増やす、ナビゲーションや共通セクションの一貫性を保つ、カスタム機能を追加するといった作業は、エディターが想定していた範囲をすぐに超えてしまいます。

幸い、サイトを手作業で作りなおす必要はありません。AIツールが公開中のCanvaサイトをスキャンし、テキストや画像を収集し、既存のデザインを新しいサイトの出発点として活用できます。

このガイドでは、CanvaサイトをRepaintに移行する方法をご紹介します。Repaintでは、AIとの会話でサイトを管理し、より高度な機能を追加し、時間をかけてサイトを拡張し続けることができます。

なぜAIを使ってCanvaサイトを再構築するのか？

Canvaは、小規模なサイトをすばやくオンラインに公開するのに役立ちます。Repaintは、その最初のバージョンを完全なウェブサイトへと仕上げるために設計されています。

Repaintでは、次のことができます。

• シンプルなサイトから拡張する。 ページ、ナビゲーション、共通セクションを追加できます。
• 本格的な機能を追加する。 フォーム、計算ツール、インタラクティブなツールを組み込めます。
• サイト全体を一括変更する。 繰り返し使うコンテンツやスタイルをすべてのページで更新できます。
• SEOを改善する。 メタデータ、URL、リダイレクト、パフォーマンスを管理できます。

最大の利点は、単にRepaintが別のデザインを作れるということではありません。最初のデザインが完成したあと、サイト全体をより柔軟に管理できる点にあります。

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

Canvaには、他のウェブサイトビルダーにインポートできる完全なエクスポート機能がありません。その代わり、RepaintはURLから公開中のサイトをスキャンします。Repaintは各ページを巡回し、テキストを読み取り、画像を保存し、現在のデザインを把握するためにスクリーンショットを撮ります。そしてその素材を新しいサイトの出発点として活用します。

元のデザインに近い形で再現することも、ブランドとコンテンツだけを引き継ぐことも、移行を機に構成を改善し、機能を追加し、新しいビジュアルの方向性を選ぶこともできます。始めるには、CanvaサイトのURLをRepaintに渡すだけです。

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

まず、再構築したい公開中のCanvaサイトを開き、そのURLをコピーします。次に、

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

これで再構築が始まります。Repaintは公開中のサイトをスキャンし、見つかったテキストや画像を取り込み、現在のデザインを把握するためにスクリーンショットを撮ります。Canvaの編集用リンクではなく、公開サイトのURLを使ってください。無料のCanvaドメインでも問題ありません。サイトがカスタムドメインを使っている場合は、そちらのURLを使ってください。

Repaintがサイトをスキャンしたら、再構築の計画について質問を始めます。事前に準備するものは何もありません。

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

Repaintは制作を始める前に、Canvaサイトから何を残したいか、何を変えたいか、新しいサイトをより大きく、より機能的にするかどうかについて、いくつか質問をします。

これには通常、数回のやりとりが必要です。何をしたいか迷っている場合は、Repaintがスキャンしたサイトをもとに方向性を提案できます。

コンテンツの計画

最もシンプルな方法は、元のサイトと同じコンテンツとページを再現することです。

ただし、Canvaサイトは多くの場合シンプルで、1ページのスクロール構成で作られています。これを機に、一部のセクションを別ページにすべきか、足りないものがないか、Canvaでは実現できなかった機能がサイトに必要かどうかを検討するとよいでしょう。

お問い合わせページ、サービスページ、ブログ、料金情報、フォーム、その他のインタラクティブな要素を追加することもできます。Repaintは元のコンテンツを保ちながら、それをより完全なサイトへと拡張できます。

スタイルの計画

Canvaは明確なビジュアルの参照をRepaintに提供するため、元のデザインを好きなだけ保つことができます。次のことができます。

• 既存のブランドに合わせる
• 別のウェブサイトのスタイルに従う
• カスタムのビジュアルの方向性を説明する
• Repaintに決めてもらう

同じデザインを保つ場合でも、Repaintはブラウザの幅に合わせてCanvaの構成全体を拡大縮小するのではなく、よりレスポンシブなサイトとして再構築できます。

計画を確認する

生成を始める前に、Repaintはどのページを作るか、どんなコンテンツで、どんな機能とビジュアルの方向性にするかを正確に書き出します。内容を確認して、最終的な修正があれば加えてください。

計画を承認すると、Repaintが新しいサイトを構築します。

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

計画を承認すると、Repaintがサイトの構築を開始します。各ページを処理する様子が進捗メッセージとして表示されます。小規模なサイトなら通常は数分です。ページや画像、インタラクティブな機能が多い大規模なサイトは、5〜10分かそれ以上かかることもあります。

完成したら、結果を確認して元のCanvaサイトと比べてみてください。最初のバージョンには、テキストの折り返し方が違う、画像の位置がずれている、セクションに余白が必要といった、いくつかの違いがあるかもしれません。

Canvaのレイアウトは、従来のレスポンシブなウェブサイトというよりも、ビジュアルの構成物のように作られています。Repaintはそのデザインを、あらゆる画面サイズに自然に対応するよう変換するため、一部のセクションは位置までぴったり一致しないことがあります。気になる点があれば、次のステップで調整できます。

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

最初のバージョンが完成したら、Repaintとの会話で変更を加えることができます。変更したいことを伝えると、Repaintがサイトを更新し、その結果を確認できます。

たとえば、次のような依頼ができます。

• セクションを高くしたり低くしたりする
• 色やフォントを変える
• コンテンツを移動または削除する
• 新しいページを追加する
• お問い合わせフォームを作成する
• テキストを書きなおす
• 画像を差し替えたり生成したりする

まず、全体的なビジュアルスタイルを確認しましょう。細部に時間をかける前に、色、タイポグラフィ、余白、レイアウトが適切に感じられるか確認してください。後で大きくスタイルを変更すると、サイト全体に影響し、それまでの調整作業がやりなおしになることがあります。

中心となるビジュアルスタイルが決まったら、各ページを見ながら細部を確認できます。テキストが正確か、画像が適切な位置にあるか、リンクが機能するか、デスクトップとモバイルの両方で見栄えがよいかを確認しましょう。

Canvaの一部のエフェクトは、改めて説明する必要があるかもしれません。元のサイトにアニメーションや重なり合う要素、変わった配置があった場合は、それらの部分にどう動いてほしいかをRepaintに伝えてください。構成全体を拡大縮小するのではなく、さまざまな画面サイズで機能する形でエフェクトを再現できます。

SEOの確認

Canvaサイトがすでに公開されていた場合、一部のページが検索結果に表示されたり、トラフィックを獲得していたりするかもしれません。コンテンツを別のURLに移すと、検索エンジンは各URLを別々のページとして扱うため、そのトラフィックが失われる可能性があります。

サイトのページタイトル、ディスクリプション、見出し、内部リンク、URL構造を確認するようRepaintに依頼しましょう。すでにトラフィックを獲得しているページについては、現在のURLをRepaintに伝えると、可能な限りパスを保持したり、変更が必要な場合はリダイレクトを作成したりできます。

デザインが整い、コンテンツが正確で、RepaintがSEOの設定を確認したら、公開の準備が整いました。

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

サイトの準備が整ったら、右上の「公開」ボタンをクリックしてください。Repaintがサイトをオンラインにし、誰とでも共有できるライブURLを発行します。URLはhttps://xxxxxx-xxxxxx-xxxxxx.sites.repaint.comのような形になります。

これで、スマートフォンで開いたり、フィードバックを求めて誰かに送ったり、通常のブラウザでテストしたりできる、実際のウェブサイトが手に入ります。

この時点では、元のCanvaサイトもまだ公開されています。Repaintで公開しても既存の訪問者には何も影響はなく、新しいサイトを確認している間、両方のバージョンをオンラインのままにしておけます。

また、他のデザイン作業のためにCanvaの使用をやめる必要もありません。引き続きCanvaでグラフィックや画像、マーケティング素材を作成し、それらの素材をウェブサイトで使いたいときにRepaintにアップロードできます。

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

自分のURLを使う準備ができたら、「サイト設定 > ドメイン」に移動し、「カスタムドメインを接続」をクリックしてください。これには有料プランが必要です。料金の詳細はこちらでご確認ください。

ドメインはCanvaサイト自体とは独立しています。Canvaで登録されている場合も、GoDaddy、Namecheap、Cloudflareなど別のプロバイダーで登録されている場合もあります。ドメインを移管する必要はありません。設定を更新してRepaintを指すようにするだけです。

初めての場合は、Repaintに手順を案内してもらいましょう。ご利用のドメインプロバイダーに合わせて、何を変更すべきかを教えてくれます。

設定の変更が反映されるまで数時間かかることがあります。Repaintにドメインが確認済みと表示されたら、自分のドメインでサイトが公開されています。そのあと、古いCanvaサイトを非公開にできます。

まとめ

Canvaを使えば、シンプルなウェブサイトを簡単に公開できますが、サイトにもっと多くのページ、より良いレスポンシブ対応、カスタム機能が必要になると制約が出てきます。Repaintを使えば、既存のURLからサイトを再構築し、残したいコンテンツやブランドを保ちながら、新しいバージョンをAIとの会話で管理できます。

よくある質問

Canvaのままサイトを使い続けてはいけないのですか？

Canvaは、特にデザインが主役のシンプルなランディングページや小規模なサイトではうまく機能します。より大規模なサイト、より高度な機能、より細かいSEOの制御、さまざまな画面サイズに自然に対応するレイアウトが必要になると、制約が目立つようになります。

Repaintは、より完全なウェブサイトプラットフォームを提供します。複数のページを管理し、ナビゲーションや共通セクションの一貫性を保ち、フォームやインタラクティブな機能を追加し、AIとの会話でサイト全体を一括変更できます。

RepaintでCanvaサイトを再構築するのにどのくらい時間がかかりますか？

ほとんどのCanvaサイトは、スキャン、計画、生成にわずか数分しかかかりません。正確な時間は、サイトのページ数や、計画段階でどれだけ変更したいかによって異なります。生成後、公開までの時間は、どれだけ調整したいかによって変わります。

新しいサイトはCanva版と同じ見た目になりますか？

なり得ます。元のデザインを再現するようRepaintに依頼すれば、Canvaサイトのスクリーンショット、テキスト、画像、色、タイポグラフィを参照に使います。同じブランドを保ちながらレイアウトを変えることも、移行を機にまったく異なるビジュアルの方向性を作ることもできます。

新しいサイトはモバイルやさまざまな画面サイズでより良く表示されますか？

はい。Canvaサイトは、ブラウザの幅に合わせてデスクトップの構成を拡大縮小し、モバイルのブレークポイントで縦並びのレイアウトに切り替わります。このため、画面によってはタイポグラフィや余白が小さすぎたり大きすぎたりすることがあります。Repaintは、タイポグラフィ、余白、カラム、コンポーネントを画面サイズごとに個別に調整できるため、従来のレスポンシブなウェブサイトのように動作します。

RepaintはCanvaサイトのすべてのページを移行できますか？

Repaintは1つの公開URLから始めて、サイトからリンクされているページをたどるため、すべてのページを個別に送信する必要はありません。スキャン後、Repaintが新しいサイトを構築する前に、どのページを残すか、削除するか、まとめるか、拡張するかを決められます。

Canvaのアニメーションや重なり合う要素はどうなりますか？

Repaintは公開中のサイトと静的なスクリーンショットをもとに作業します。FAQのドロップダウン、メニュー、ボタンなど、明らかなインタラクションは通常推測できます。スクロールに合わせて要素が現れるといった、スクリーンショットに映らないアニメーションは自動的には移行されないことがありますが、元の動作を説明してRepaintに再現を依頼できます。重なり合う要素も、画面サイズにわたってより確実に対応する形で再構築できます。

フォーム、ボタン、リンクは引き続き機能しますか？

Repaintは新しいサイトの一部としてリンクを保持し、ボタンを再構築できます。Canvaのネイティブフォームはそのまま移行されませんが、Repaintは独自のフォームシステムを使って再構築できます。Canvaサイトが別のサービスの埋め込みフォームを使っている場合は、その埋め込みコードをRepaintに共有すると、同じフォームを新しいサイトに追加できます。

Canvaサイトになかったページや機能を追加できますか？

はい。Canvaサイトはあくまで出発点です。サービスページ、ブログ、お問い合わせフォーム、計算ツール、連携機能、その他のインタラクティブな機能を追加するようRepaintに依頼できます。1ページのスクロール式Canvaページのセクションを、完全なナビゲーションを備えた別々のページに分けることもできます。

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

Repaintが新しいサイトを構築する間、何も変わりません。Canva版はオンラインのまま、通常どおり機能します。Repaintのサイトが完成したら、一時的なRepaintのURLで公開し、ドメインを変更する前に確認できます。乗り換えないと決めた場合は、Canvaサイトに何も変更を加える必要はありません。

Canva経由で接続したドメインを引き続き使えますか？

はい。新しいドメインを購入したり、Repaintに移管したりする必要はありません。ドメインのDNS設定を更新して、CanvaではなくRepaintのサイトを指すようにするだけです。ドメインをCanva経由で購入した場合は、その設定をCanvaで管理できます。別のプロバイダーで購入した場合は、そのプロバイダーで変更を行います。

RepaintでCanvaサイトを再構築するのにかかる費用は？

サイトのスキャン、新しいバージョンの生成、編集、公開は無料です。無料プランの主な制限は、使用量に上限があること、カスタムドメインを使えないこと、サイトにRepaintのバッジが表示されることです。有料プランは年払いで月額20ドルから、月払いで月額25ドルからです。有料プランには、使用量の拡張、カスタムドメインのサポート、「Made in Repaint」バッジの非表示が含まれます。