コード不要でAIサイトを編集｜SiteDropのビジュアルエディタ

AIなら、数分で見事なウェブサイトを作れます。では、電話番号を変えたいときは？営業時間を更新したいときは？ヒーローの見出しの誤字を直したいときは？これまでの答えは、コードエディタでHTMLファイルを開き、何百行ものマークアップの中を探し回ることでした。

これは、ユーザーの皆さまから寄せられた最大の悩みでした。そして今日、それはなくなりました。SiteDropに、文書を編集するようにウェブサイトを編集できるビジュアルエディタが加わりました。文字をクリックして、変えるだけ。それで公開に反映されます。コードも、再デプロイも、ファイルの再アップロードも必要ありません。

更新の問題

この話は、以前にも書きました。AIでサイトを作るのは簡単でも、更新が大変という問題です。この問題は現実のもので、どのツールで作ったかにかかわらず、AIが作ったすべてのウェブサイトに当てはまります。

AIが作るウェブサイトは、たいていHTMLファイル1つで、300〜500行のコードになることもよくあります。変えたい文字は、CSSのクラス名、コンテナのdiv、SVGアイコン、インラインスタイルの間に埋もれています。3か所に出てくる電話番号を更新するだけの簡単な変更でも、次の作業が必要です。

1. コードエディタでファイルを開く。
2. 古い文字をすべて探す（見落としがないことを祈りながら）。
3. 周りのHTMLを壊さないように、慎重に編集する。
4. ファイルを保存する。
5. サイトを公開しているところに、もう一度アップロードする。

技術に詳しくない事業者さん、つまりAIサイト作成ツールが想定している人たちにとって、これは致命的です。サイトは5分で作れても、助けなしには更新できないのですから。

ビジュアルエディタのしくみ

SiteDropのビジュアルエディタは、ダッシュボードに直接組み込まれています。開くと、訪問者が見るのと同じ姿で、公開中のサイトが表示されます。そこに編集用のオーバーレイが重なっていて、文字を直接変えられます。

クリックして編集

見出し、段落、ボタンの文字、営業時間、電話番号など、どの文字でもクリックすると、その場に編集欄が現れます。変更を入力すると、プレビューがリアルタイムで更新されます。満足したら保存すれば、公開に反映されます。

安全で、確実

内部では、安全で確実な操作のしくみが使われています。すべての編集は、自由なHTMLの書き換えではなく、正確で再現できる操作として記録されます。つまり、次のようになります。

• うっかり壊す心配がない：編集できるのは文字の内容だけで、HTMLの構造は編集できません。<div> をうっかり消したり、CSSのクラスを壊したりすることはありません。エディタが、設計の段階でそれを防ぎます。
• HTMLのサニタイズを組み込み：すべての編集は、適用される前にサニタイズされます。たとえ誰かが試みても、スクリプトの注入も、壊れたマークアップも、XSSの脆弱性もありません。
• 再現できる操作：すべての変更は、生のHTMLの差分ではなく、構造化された操作として保存されます。そのため、編集を元に戻したり、再生したり、確認したりでき、矛盾した状態になることもありません。
• 確定的な出力：同じ仕様と同じ操作なら、エディタは常に同じ結果を出します。競合状態も、マージの衝突も、予想外の書き換えもありません。

SiteForgeのサイトと連携

ビジュアルエディタは、SiteDropのSiteForgeコンパイラエンジンで作ったウェブサイトと、シームレスに連携するよう設計されています。SiteForgeのサイトは、手書きのHTMLではなく、構造化された仕様からコンパイルされるため、エディタはすべての文字が元の仕様のどこにあるのかを正確に把握しています。ビジュアルエディタでヒーローの見出しを編集すると、仕様が更新され、サイトが再コンパイルされます。そのため、デザイン上の保証（タイポグラフィ、余白、コントラスト）は、自動的に保たれます。

何を編集できる？

ビジュアルエディタは、事業者さんがいちばんよく行う変更に、意図的に絞られています。

• 見出しと本文：誤字の修正、メッセージの更新、キャッチコピーの変更。
• 連絡先：電話番号、メールアドレス、住所。
• 営業時間：サイトを再生成せずに、スケジュールを更新できます。
• ボタンの文字とCTA：「今すぐ予約」を「無料で見積もり」や「今すぐお電話を」に変えられます。
• 料金とサービスの説明：メニュー、料金表、サービス一覧の更新。
• お客さまの声やレビュー：新しいお客さまの声の追加や、既存のものの更新。

画像については、SiteDropのフォトスタジオが差し替えを担当します。画像の枠をクリックして、自分の写真をアップロードするだけ。文字と画像には、それぞれ専用の編集の流れがあります。

通常のウェブサイト作成ツールではだめ？

WixやSquarespaceを使えばいいのでは、と思うかもしれません。でも、それらのツールでは、デザインの質と編集のしやすさのどちらかを選ばなければなりません。Wixのテンプレートは、Wixのテンプレートの見た目。Squarespaceのテンプレートは、Squarespaceのテンプレートの見た目です。

SiteDropは、あなたの事業、業界、ブランドに合わせた、オーダーメイドのAIサイトのデザインの質と、シンプルな文書エディタの編集のしやすさを、両方お届けします。

ワークフロー

SiteDropの全体の流れは、今はこうなっています。

1. サイトを作る：事業についていくつかの質問に答えます。SiteDropが、SiteForgeエンジンで、合わせたAI画像つきのプレミアムなオーダーメイドのサイトを作ります。
2. 写真を差し替える：フォトスタジオで、AI画像を自分のプロの写真に置き換えます。気に入ったものは、そのままでも構いません。
3. 文字を編集する：ビジュアルエディタで、いつでもどの文字でも更新できます。コードも、再アップロードも、待ち時間もありません。
4. 公開する：サイトは、HTTPS、グローバルCDN、動く問い合わせフォーム、独自ドメインつきで公開されます。更新はすぐに反映されます。

ゼロから、プレミアムで完全にカスタマイズされた公開サイトまで、かかるのは何日ではなく数分です。そのあとの更新は、数秒で終わります。

まとめ

AIでサイトを作るのは、もともと簡単な部分でした。大変だったのは、更新を続けることです。SiteDropのビジュアルエディタは、その大変な部分も簡単にします。安全で確実なインライン編集で、どんな事業者さんも、メッセージを編集するのと同じくらい自然にサイトを更新できます。

コードはいりません。再アップロードもいりません。電話番号を1つ変えるために、開発者に電話する必要もありません。