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

はじめに

Carrdは1つのことに特化しています。1ページのウェブサイトを安く簡単に作れることです。ポートフォリオやローンチページ、リンクまとめページなら、1ページで十分なことがよくあります。しかしウェブサイトは大きくなっていくものです。やがてサービス紹介や料金、ブログのために2ページ目が欲しくなります。Carrdはページを追加できません。1ページのサイトしか作れないのです。

AIウェブサイトビルダーなら、その先まで進めます。やりたいことを言葉で説明すれば、AIが1ページでも20ページでもデザインして構築してくれます。既存のコンテンツを自動で取り込めるため、Carrdから成長させることはゼロからのやりなおしを意味しません。

このガイドでは、CarrdサイトをRepaintというAIツールでリデザインする方法をご紹介します。

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

最も直接的な理由は、Repaintがページ間をナビゲーションでつないだ、複数ページの本格的なウェブサイトを構築できることです。1ページの中でスペースを奪い合っていたすべての要素が、それぞれ専用のページを持って広がっていけます。

もう1つの理由は編集の仕組みです。CarrdはAIを使わない手作業のエディターです。すべての要素を自分で配置し、サイズを整え、スタイルを整える必要があります。Repaintでは、望む変更を説明するだけでAIがデザイン作業を行います。この違いは、サイトの規模が大きくなるほど効いてきます。1ページを手作業で更新するのは問題なくても、8ページとなると一苦労です。

そして乗り換えることは作り直すことを意味しません。Repaintは公開中のURLからCarrdサイトをインポートし、既存のテキストや画像を新しいサイトの出発点として使います。

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

Repaintは訪問者と同じように公開中のサイトにアクセスします。テキストを読み取り、画像をダウンロードし、デザインを把握するためにスクリーンショットを撮ります。そしてその内容をもとにRepaint上でサイトを再構築・拡張し、以降はAIとの会話で編集していきます。何かをエクスポートしたり、RepaintにCarrdアカウントへのアクセス権を与えたりする必要はありません。必要なのはURLだけです。

試してみることに何のリスクもありません。作業中もCarrdサイトは公開されたまま変更されず、ドメインを新しいサイトに切り替えるまで訪問者にはこれまで通り表示され続けます。Repaintが生成した結果が気に入らなければ、現在のサイトは手つかずのまま残っています。

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

まず、公開中のCarrdサイトのURLをコピーします。無料の.carrd.coアドレスでもカスタムドメインでも構いません。次に、

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

送信すると、Repaintがサイトをスキャンします。テキストを読み取り、画像を保存し、デザインを記録するためにスクリーンショットを撮ります。1ページサイトなので、スキャンはすぐに終わります。

1ページということは、本格的なウェブサイトに比べてRepaintが最初に手にする材料が少ないということでもあるため、ここで素材を増やしておくとよいでしょう。追加のテキストをチャットに貼り付けたり、画像やファイルをアップロードしたり、Google BusinessプロフィールやPDFなど他の情報源をRepaintに伝えたりできます。新しいサイトが元のサイトよりページ数を増やす予定であれば、この追加素材がその材料になります。

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

スキャンが終わると、Repaintは構築の前にいくつか質問をします。Carrdサイトの場合、主な判断ポイントは規模です。すべてを1ページにまとめたままデザインだけを一新することもできますし、コンテンツを複数ページに分けてメニューでつなぐこともできます。Carrdと違い、Repaintにはページ数の上限がないため、選択はサイトに実際に必要なものによって決まります。

現在のページで手狭になっているセクションを、独立したページにすることもできます。ブログや各サービスごとのページなど、これまでサイトになかったページを依頼することも可能です。Repaintは共有した素材からそれらを下書きします。何をしたいか迷っている場合は、Repaintに構成を提案してもらい、それに反応する形で進めることもできます。

スタイルを選ぶ

多くの場合、Repaintは構築前にいくつかのスタイルサンプルを生成するので、まだ見えていないものを説明するのではなく、実際の選択肢の中から選べます。スタイルを直接指定することもできます。選択肢は次の通りです。

• 生成されたスタイルサンプルの中から選ぶ
• 現在のサイトのミニマルな見た目を維持する
• 気に入っている別のウェブサイトに合わせる
• 希望するスタイルを自分の言葉で説明する

どれを選んでも、Repaintは色、フォント、ロゴを引き継ぐことで、新しいサイトが自分のものらしく感じられるようにできます。

結果を確認する

方向性が決まったら、Repaintがサイトを生成します。一般的なCarrdページ程度の規模なら数分、ページを増やす場合は少し時間がかかります。

完了すると、Repaintはプレビューを開きます。最初のバージョンには、見出しの表現が不自然だったり、画像の位置がずれていたりといった粗が残っていることがあります。これは想定内で、次のステップで修正します。元のページに埋め込みウィジェットを使っていた場合は、まずそれを確認してください。Repaintが新しいサイトにそれらを配置するには埋め込みコードが必要なので、チャットで共有してください。シンプルなフォームであれば、Repaint独自のフォームを構築することもでき、送信内容は直接メールに届きます。

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

Repaintでの編集はCarrdとは異なります。要素を選択して自分で調整するのではなく、変更したい内容をRepaintに伝えます。すると調整が加えられ、更新後のページを見せてくれます。意図と違う結果になった場合はその旨を伝えれば、もう一度試してくれます。小さな依頼も大きな依頼も同じチャットで扱え、誤字の修正からメニューへの新しいページの追加まで対応します。

個々のセクションを仕上げる前に、全体のスタイルを見直しておくとよいでしょう。スタイルの変更は全ページに一度に影響するため、後回しにするとすでに終えた細部の調整がやりなおしになることがあります。Repaintは既存のページを新しいコンテンツの手本としても使うため、今のサイトの見た目が良いほど、後で追加されるページもよい仕上がりになります。

スタイルが決まったら、サイトをページごとに確認していきます。テキスト、画像、リンク、そしてスマートフォンでの見え方をチェックしてください。

SEOの確認

検索トラフィックは、Carrdを離れること自体がアップグレードになる領域の1つです。Googleは個々のページをランク付けしますが、1ページのサイトにはページが1つしかありません。表示されうるあらゆる検索を、同じ1つのURLで答えなければなりません。コンテンツが複数の独立したページに分かれると、それぞれのページが自分自身の検索でランクインできるようになるため、拡張後のサイトは元のサイトよりも見つけてもらえるチャンスが増えます。

移行そのものによるリスクはあまりありません。1つだったサイトのURLは、単に新しいサイトのホームページになるだけです。リデザインを通じて検索トラフィックを守る方法を詳しく知りたい場合は、ウェブサイトリデザインSEOガイドをご覧ください。

ステップ4: 公開する

公開するまで、新しいサイトは自分だけが見られる下書きです。公開することで、sites.repaint.comで終わる無料のウェブアドレスでインターネット上に載ります。これは実際に動作するライブサイトなので、スマートフォンで開いたり、誰かにフィードバックを求めて送ったりできます。

公開してもCarrdサイトには影響しません。両方のサイトが同時に稼働し、通常のアドレスにアクセスした人には引き続き元のサイトが表示されます。編集と公開は何度でも好きなだけ繰り返せます。自分のドメインへの切り替えが最後のステップであり、それは自分が決めたときにしか起こりません。

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

Carrdサイトでカスタムドメインを使っている場合、最後のステップはそれを新しいサイトに向けることです。Carrdはドメインの登録を扱っていないため、ドメインはおそらくNamecheap、GoDaddy、Cloudflareといった会社に登録されています。その登録内容は変わりません。ドメインは、誰かがそのアドレスにアクセスしたときにどのサイトを読み込むかをブラウザに伝えるものです。現在は訪問者をCarrdに送っていますが、これをRepaintに送るように更新します。

変更するには、チャットでRepaintにドメインを接続したいと伝えてください。追加すべきDNSレコードと、利用しているレジストラ向けの手順を教えてくれます。うまくいかない場合は、画面に表示されている内容を伝えれば、Repaintが残りを案内してくれます。カスタムドメインの接続には有料プランが必要です。詳細は料金ページをご覧ください。

変更は通常20分程度で反映され、Repaintに確認を依頼すれば有効になったタイミングを教えてくれます。Carrdサイトが無料の.carrd.coアドレスだった場合は、向けるべきドメインがそもそもありません。新しいサイトにはすでに専用のアドレスがあり、ドメインは後からいつでも購入して接続できます。いずれの場合も、新しいサイトへの移行が落ち着いたら、Carrdのサブスクリプションを利用していれば解約できます。

まとめ

Carrdは1ページのウェブサイトを安く簡単に作れることで人気を得ました。1ページでニーズが満たせているなら、離れる理由はあまりありません。しかし成長するサイトには1ページ以上のものが必要で、それこそがCarrdには提供できないものです。Repaintは今あるものをインポートし、コンテンツが必要とするだけのページ数でリデザインし、その後もAIとの会話でサイトを形作り続けられます。

試してみることに何のリスクもありません。構築中もCarrdサイトは公開されたままで、ドメインを新しいサイトに向けるまで訪問者にはこれまで通り表示されます。結果が気に入らなければ、今のサイトをそのまま使い続けることができます。

よくある質問

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

1ページサイトのインポートと新しいバージョンの生成には通常数分かかります。新しいサイトが元のサイトよりページ数が多い場合でも同様です。時間の大半は確認と調整に使われ、多くの人が同日中に完了します。

サイトを1ページのままにしておくことはできますか？

はい。Repaintは1ページのサイトも構築できるので、リデザインは今あるページのより良いバージョンにするだけでも構いません。後で気が変わった場合も、新たにリデザインをやりなおすことなくページを追加できます。

移行にCarrdの有料プランは必要ですか？

いいえ。Repaintは公開中のURLからインポートするため、無料の.carrd.coアドレスもカスタムドメインと同じように扱えます。Carrdの有料機能は関係ありません。

自分のCarrdサイトはリンクまとめページです。それでも価値がありますか？

リンクをまとめた1ページで十分なら、Carrdはすでによい選択肢です。Repaintが意味を持つのは、そのリンクの先をポートフォリオや予約ページ、仕事の実績を示す本格的なサイトなど、もっと大きなものにしたい場合です。両者を併用することもできます。Carrdページをリンクまとめとして残し、その中で最も重要なボタンだけを本格的なRepaintサイトに向けている人もいます。

メール登録フォームはどうなりますか？

Repaintは独自のフォームを構築でき、送信内容はメールに届きます。フォームがMailchimpやConvertKitなどのツールを通じてメーリングリストに登録していた場合は、チャットで埋め込みコードを共有すれば、Repaintが新しいサイトにそれを配置します。購読者リストはニュースレターツール側にあり、ウェブサイト側にはないため、移行によって変わるものはありません。

埋め込みやウィジェットは引き続き機能しますか？

はい、ひと手間だけ必要です。カレンダー、プレイヤー、決済ボタンなどの埋め込みウィジェットは、いずれも埋め込みコードのスニペットから生まれています。そのスニペットをRepaintに共有すれば、新しいサイトに追加してくれます。アナリティクスなどのスクリプトも同様の仕組みです。

ドメインの登録を移す必要はありますか？

いいえ。ドメインは購入したレジストラに登録されたままです。登録は名前の所有権を意味するものであり、それは変わりません。変更するのは、訪問者をどこに送るかを制御するDNSレコードだけです。Repaintが正確なレコードと、利用しているレジストラ向けの手順を教えてくれます。

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

何も変わりません。Repaintはあなたのサイトをスキャンしたうえで、別のサイトを構築します。ドメインをCarrdから切り離すまでCarrdサイトは公開されたまま変わらず、切り離さなければそのまま稼働を続けます。

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

Repaintのサブドメインでのインポート、編集、公開はクレジットカード不要で無料です。カスタムドメインの接続には有料プランが必要で、料金は年払いで月額20ドルから、月払いで月額25ドルからです。これはCarrdの料金からすると大きな値上がりですが、その分違う種類のウェブサイトが手に入ります。1ページから、チャットで自分自身が育てて編集できる本格的なサイトへの移行です。

AIがミスをした場合はどうなりますか？

Repaintは変更のたびにサイトのバージョンを保存します。戻すよう依頼することもできますし、バージョン履歴を開いて自分で任意の時点に復元することもできます。安心して試すことができます。