更新したいページがすでに公開されていても、元のHTMLファイルが手元にないことがあります。過去のキャンペーンを見直したり、以前のプロジェクトの静的ページを再利用したり、ソースを管理する開発者が不在のまま新しいメッセージを準備したりする場合です。表示されているページは役立ちますが、見出しや画像、CTAを変えるために全セクションを作り直す必要はありません。
その場合は、作業する権限のあるURLから始めます。URLインポートでは、アクセス可能なページを編集できる作業コピーとして取り込み、実際のレイアウトを確認し、必要な部分だけを視覚的に変更し、プレビュー後にHTMLを引き渡せます。指定URLで公開中のサイト自体を編集する機能ではありません。
このガイドでは、コードを書き直さずにURLから既存ページを編集する方法を説明します。デモではFirefoxの公開マーケティングページをHtmlDragに作業コピーとして取り込みます。Firefoxのページは手順の出発点にすぎず、ここで行う変更はインポートしたプロジェクト内にだけ残り、元サイトは更新されません。
URLしかなくてもWebページを編集できますか？
アクセス可能なページなら可能です。完全な公開httpまたはhttps URLをビジュアルHTMLエディターに入力し、編集可能なプロジェクトを作成して、表示されたページ上で作業します。コードベースを探す前に、見出し、補足文、画像、色、余白、CTAなど表示部分を直したい場合に便利です。
重要なのは作業コピーと元のWebサイトを区別することです。URLインポートで確認・調整できるページは作れますが、本番サーバーへのアクセス権を得たり、自動公開したり、ライブページを更新したりはしません。デプロイ、フォーム、分析などの機能は通常のリリース手順で検証します。
URLインポートを出発点にするべきケース
実際に手元にあるソースがWebアドレスならURLインポートを使います。すでに有用な階層、ナビゲーション、画像、セクション構成があり、最後の見た目の調整だけが必要なページには、空のページから始めるより適しています。
- アクセス可能なWebページが出発点ならURL Importを使います。
- ローカルの
.htmlまたは.htmファイルがあるならUpload HTMLを使います。 - AIツールや同僚、既存プロジェクトからHTMLをコピーしたならPaste Codeを使います。
取り込む前に、所有または利用許可のあるページを選び、完全な公開URLから始めます。ログイン専用領域、個人データに依存するページ、ライブダッシュボード、非常にインタラクティブなアプリ画面は視覚的な仕上げには向きません。公開されたシンプルなランディングページの方が確認しやすく、結果も検証しやすくなります。
WebページのURLを編集可能なHTMLプロジェクトに取り込む方法
手順はシンプルです。
URLを貼り付ける → アクセス可能なページを取得する → 全体レイアウトを確認する → 意図した視覚変更を行う → プレビューする → 作業コピーを出力する
1. 新しいテンプレートではなくページURLから始める
URL Importを開き、公開ページのアドレスを貼り付けます。この例ではhttps://www.firefox.com/en-US/を使います。この段階ではまだ何も変更していません。URLは、どの表示ページをプロジェクトにするかをエディターに伝えるだけです。
2. ページを作業コピーに変換する
インポートを開始したら、移動せず取得が完了するまで待ちます。この取得段階で、アクセス可能なページから編集可能なプロジェクトが作られます。すべてのリモートスクリプト、ダウンロード、ライブサービスが再現されるという意味ではありません。公開ページをビジュアルHTMLの作業に渡す段階です。
3. 編集前に取り込んだページを確認する
ページがキャンバスに表示されたら、何かを選択する前に全体を見ます。取り込んだFirefoxの例では、ヘッダー、ヒーロー、補足文、CTA、イラスト、機能カードが保たれています。最初の確認で、すでに機能している部分と、局所的な変更で効果が出る場所を判断できます。
ページを作り直す代わりに最後の視覚調整を行う
最後の調整は、すべてを変える作業ではありません。まず訪問者が最初に読むメッセージを確認し、それを分かりやすくする補足要素を見直し、すでに機能している部分は残します。そうすれば、取り込んだページの意味を保ったまま判断をレビューできます。
見出しと視覚的な階層から始める
ヒーロー見出しはページの主な約束を伝えるため、最初に確認するのに適しています。キャンバス上で見出しを直接選び、周囲の文と画像との関係を確認し、テキストコントロールで変更を試します。例では見出しを選択し、色を検討しています。
色やサイズを変えても読み順は保つ必要があります。次の画面では、見出しが大きくなり一部が赤く、最後の語が白いままです。目立つ変更でも、コントラスト、余白、ヒーロー全体とのバランスを確認してください。
補足カードを一つの要素ずつ確認する
ヒーローが整ったら、それを補強するコンテンツを確認します。セクション全体ではなく、必要なカード見出し、段落、アイコンだけを選択します。取り込んだページではPrivacy as a standardカードを個別に選択し、カード群を文脈として残しています。
セクションを作り直さず古い画像を置き換える
視覚的な仕上げは文章だけに限りません。対応している画像要素を選択し、コンテキストメニューから画像の置き換えを実行します。セクション構造と周囲の文を保ったまま、より適切なアセットを試せます。
ここでは、作業コピー内の元イラストを山の画像に置き換えています。山がすべてのページに合うという意味ではありません。デプロイレビュー前に、実際のレイアウトでトリミング、視覚的な重さ、周囲の文章、セクションとの関係を判断するための例です。
セクションの階層とCTAの扱いを確認する
ヒーローの変更だけで判断を終えないでください。ページ下部の見出しは読み進めた後に現れるため、別の強調が必要な場合があります。文脈の中で選択し、サイズ、色、配置、余白を確認してから変更の効果を判断します。
主CTAも同じように確認します。訪問者が内容を理解した後でも見つけやすく、行動を促すメッセージを圧倒しないことが大切です。テキスト、サイズ、コントラスト、位置を確認するのにビジュアルエディターが役立ちます。リンク先やダウンロード、フォーム、決済などの動作は、最終環境で別途テストしてください。
確認したページをプレビューして出力する
納品前に、選択状態から離れて訪問者の視点でページ全体を確認します。見出し、補足メッセージ、機能セクション、CTA、モバイル表示まで通して見ます。単体では良い変更でも、別の場所で不自然な改行、弱いコントラスト、つながらないCTAを生むことがあります。
引き渡す準備ができたら、必要なバージョンの出力オプションを使います。このワークフローの出力ダイアログではEdited HTMLとOriginal HTMLが分かれているため、現在のキャンバス結果と最初のソースを意識して選べます。
ページ全体のプレビューが最後の視覚チェックです。この例では、全体構造を保ったままヒーローと画像が変更されています。作業コピー全体をプレビューすることで、局所的な変更がページ全体に合わなくなっていないか確認できます。
URLインポートで置き換えられないもの
URLインポートは表示HTMLの仕上げには有効ですが、すべての本番作業に代わるものではありません。サーバーアクセスやアプリの動作に依存するものは、通常の手順で検証してください。
- フォーム送信、決済、ログイン、アカウント固有のコンテンツ。
- 分析、同意ツール、リダイレクト、ダウンロード、外部連携。
- スクリプトによる操作、ライブデータ、cross-originの埋め込み、Canvas、保護されたリソース。
- 最終デプロイ、QA、公開承認。
ログインが必要、取得がブロックされる、または動的すぎて信頼できるコピーにならない場合は、実際のHTMLファイルかソースコードから始めます。目的はすべてのサイトを一つのツールに押し込むことではなく、仕上げたいページに対して安全で速い出発点を選ぶことです。
よくある質問
URLを貼り付ければライブサイトを編集できますか？
アクセス可能なページの編集可能な作業コピーは作れます。そのプロジェクトへの変更が元のライブサイトを更新することはありません。公開するときは、通常のデプロイまたは引き渡し手順に従ってください。
HTMLソースを開かずにページの文章を更新できますか？
対応している表示テキストなら、レンダリングされたページ上で選択してその場で編集できます。編集後は、周囲のレイアウト、画像、CTAとのつながりを確認してください。
URLを取り込んだ後で画像を置き換えられますか？
取り込んだ画像が対応要素なら、選択して画像置き換え操作を使えます。出力前にトリミング、サイズ、コントラスト、周囲の文章との関係を確認します。
すべてのURLインポートは元ページと完全に同じになりますか？
必ずしもそうではありません。ログイン制限、ボット対策、外部フォントやアセット、遅延読み込み、動的データ、スクリプト、iframe、その他のcross-origin動作が取得結果に影響します。プレビューで確認し、HTMLファイルまたはソースコードの方が信頼できる場合はそちらに切り替えます。
まとめ
有用なページがすでにオンラインにあるなら、そのURLが最も実用的な出発点になることがあります。アクセス可能なページを作業コピーに取り込み、機能している構造を保ち、意図した視覚変更を少数行い、出力前に結果を確認しましょう。
HtmlDragのURL Importは、既存ページを最後の調整のための編集可能なHTMLプロジェクトに変えます。ページを作り直したり、すべてのコードを書き直したりせずに、表示テキスト、画像、階層、CTAを整えられます。