2026年には、Lovable、Bolt.new、v0 のようなツールによって、ランディングページやプロダクトサイト、MVP向けのフロントエンドを素早く生成することが非常に簡単になりました。しかし、最初のドラフトができたあとに現れるのは、もっと実務的な問題です。コードに戻らずに、そのページをどう編集し続けるのか？
これこそが、AI生成サイトにおける本当の「最後の一歩」です。多くの場合、ページ自体はすでに存在しています。ゼロから作り直したいわけではありません。やりたいのは次のようなことです。
- 公開中のページをURLから取り込む
- 邪魔なポップアップやオーバーレイを削除する
- テキストと視覚的な強調を調整する
- 画像を差し替えて位置を整える
- 選択した要素をまとめて移動する
- 入力エリアやプロンプトボックスの文言を調整する
このチュートリアルを具体的にするために、公開例として lovable.dev を使用します。内容をコピーすることが目的ではなく、他のAI生成ランディングページにも応用できる、正確なビジュアル編集フローを示すことが目的です。
なぜ今このワークフローが重要なのか
2026年の検索意図は、「どのAIビルダーを使うべきか？」から、「もうページは生成した。では、どうやって本当に仕上げるのか？」へと移っています。その仕上げ作業は、たいてい小さくても効果の大きい編集です。
- コピーの磨き込み：ポジショニングをより明確にし、キーワードの焦点を合わせる
- ポップアップの整理：バナーやオーバーレイが編集作業を妨げないようにする
- 画像の差し替え：プレースホルダーっぽさをなくし、ブランドらしい見た目にする
- レイアウト調整：最終的なページを「生成されたまま」ではなく「意図して整えたもの」に見せる
だからこそ、ビジュアル編集は、マーケターやインディー創業者、小規模チームにとって、AI生成後の最も実用的なワークフローのひとつになっています。
なぜ lovable.dev をライブデモに使うのか
この解説で lovable.dev が適している理由は、公開されていて視覚的にわかりやすく、AI生成後に人がよく手を入れたくなる要素を含んでいるからです。
- 編集しやすいヒーローセクションのテキスト
- 差し替えや再配置ができる画像エリア
- 削除したくなる実際のCookie通知やオーバーレイ
- マイクロコピーが重要な入力・プロンプト系エリア
ステップごとに見る：AI風のライブサイトをビジュアル編集する方法
ステップ1：公開URLを取り込む
HtmlDrag を開き、URL Import を選んで、編集したいページのURLを貼り付けます。この例では次を使います。
https://lovable.dev/
取り込みが完了すると、そのライブページは編集可能なキャンバスとしてエディタに読み込まれます。生成コードを追いかけたり、元のビルダーを開き直したりする代わりに、見たままの状態で扱えます。
ステップ2：最初にポップアップとオーバーレイを片付ける
多くのライブページには、Cookie通知、フローティングバナー、サポートウィジェットなどが表示されています。本番環境では意味がありますが、デザインを編集したいときには邪魔になります。ひとつずつ手動で閉じる代わりに、組み込みのクリーンアップ機能を使います。
結果はすぐに見えます。視覚的なノイズが消え、ページがずっと編集しやすくなります。
ステップ3：テキストを編集し、背景色も調整する
ページが整ったら、最も影響の大きい要素から始めます。ヒーローコピーです。見出しをクリックして文言を編集し、必要に応じて視覚的な強調も調整します。この例では、テキスト背景色も変更して、メッセージの一部をより目立たせています。
これは、AI生成ページには文言だけでなく、視覚的な階層や強弱についても人間の判断が必要であることをよく示しています。
ステップ4：新しい画像をアップロードし、位置を調整する
テキストだけを変えても十分とは限りません。元のページのビジュアルが弱かったり、もっと適切なプロダクト画像を入れたい場合は、画像挿入フローを開いて新しいアセットをアップロードします。
挿入後は、レイアウトの中でちょうどよい位置に来るまで、画像をビジュアルに動かして調整します。コード内でパスやCSS、コンテナの整列をいじるよりずっと速い方法です。
ステップ5：選択した要素や画像をまとめて移動する
問題が単一の要素ではなく、まとめて動かしたい複数要素にあることもあります。カードや画像を個別に調整する代わりに、選択したグループを一度に動かすことができます。
これは、ギャラリー、機能ブロック、あるいはAIビルダーがまとめて生成したコンテンツ群を整えるときに特に便利です。
ステップ6：入力エリアの文言を更新する
入力系エリアのマイクロコピーは、多くのチームが思っている以上に重要です。プロンプトボックスの文言、補助テキスト、短い操作ラベルは、製品の第一印象を大きく左右します。以下の例では、まずプロンプトエリアを選択し、その後で文言を簡潔にしています。
ほんの小さな文言変更でも、UIをより明快で、より汎用的すぎない印象にできます。
手動編集 vs ビジュアル編集
| 作業 | 手動でコードを触る場合 | ビジュアル編集の場合 |
| ライブサイトを取り込む | ソースファイルを開くか、公開済みコードを調べる | URLを貼り付けて、そのままページを取得する |
| ポップアップとオーバーレイを削除する | 邪魔な要素を手動で一つずつ閉じる・削除する | 1回のクリーンアップ操作で先に進める |
| テキストの強調を整える | コード内で文言を変え、スタイルを別で調整する | テキストを選んで、その場で内容と見た目を調整する |
| 画像を差し替えて動かす | アセット、パス、レイアウト規則、余白を更新する | ビジュアルにアップロードし、その場で再配置する |
| まとまったコンテンツを調整する | 複数ブロックを組み替え、再度レイアウトを確認する | 選択した要素をまとめて移動する |
| プロンプトボックスや入力エリアの文言を編集する | プロジェクト内で正確なノードやコンポーネントを探す | クリックして編集し、その場ですぐ確認する |
このワークフローが特に役立つ人
- インディー創業者：公開前に生成済みランディングページを仕上げたい人
- マーケター：コード詳細よりも、コピー・レイアウト・CTAの明確さを重視する人
- フリーランスや小規模エージェンシー：クライアント向けに素早く調整したい人
- 非技術チーム：AI生成ページを受け取ったあとも最終的な主導権を持ちたい人
FAQ
これは lovable.dev にしか使えませんか？
いいえ。lovable.dev はこの記事で使っている公開例にすぎません。同じ方法は、他のライブサイト、エクスポートしたHTMLページ、そして Lovable・Bolt・v0 が生成した多くのランディングページにも使えます。
ライブURLを使うべきですか？ それともHTMLをアップロードすべきですか？
ページがすでに公開されているなら、ライブURLを使うのがたいてい最速です。きれいに書き出されたHTMLのエントリーファイルがあるなら、アップロードでも同じように使えます。
なぜ編集前にポップアップを削除するのですか？
オーバーレイ、Cookieバナー、フローティングウィジェットが要素選択を妨げ、レイアウト作業を遅くするからです。先に整理しておくと、ずっと見やすい編集面になります。
編集できるのは見出しや画像だけですか？
いいえ。上で示したように、入力エリアの文言、グループ化された要素、その他の可視コンテンツにも最後の仕上げを加えることができます。
まとめ
AIビルダーは最初のドラフトを素早く作るのが得意です。しかし、公開できるページは、たいてい単なる初稿では終わりません。クリーンアップ、視覚的な強調、アセット差し替え、そしてマイクロコピーの調整が必要です。
すでにAI生成のライブページがあり、最後の仕上げだけが必要なら、htmldrag.com でビジュアル編集するほうが、コードワークフローを丸ごと開き直すよりずっと速いことが多いです。