HTMLファイルをオンラインで視覚的に編集
ローカルの .html または .htm ファイルを開き、ゼロから再構築することなく視覚的に編集。
クリックして選択するか、ファイルをドラッグ＆ドロップ
.html / .htm 対応、最大 5MB（Pro: 10MB、Pro Max: 20MB）
ファイルは自動的にスキャンされますプレビュー
プレビューするにはファイルをアップロードしてください
テンプレート
実演デモ：ビジュアルキャンバスで HTML ファイルを直接編集
既存の HTML や AI 生成ファイルをブラウザで開き、テキストの修正、画像の差し替え、ドラッグによるレイアウト調整を行い、クリーンな本番コードを出力します。
HTMLファイルを、共有したくなるページへ
ページを取り込み、細部を整えて、共有や納品へ。
HTMLファイルを開く
手元のHTMLを開き、キャンバスで文字・画像・レイアウトを編集できます。
ページのデザインをそのまま画面へ
元のデザインを活かして読み込み、実際の見た目を確認できます。
思い描いたページに仕上げる
文字や画像、余白を変えながら、その場で仕上がりを確認できます。
すっきり書き出して、スムーズに納品
HTMLをダウンロードして、いつもの公開・納品の流れに進めます。
仕上げたページを、次のステップへ
HTMLをダウンロードして、いつもの公開・納品の流れに進めます。
準備を減らして、仕上げに集中
ページを取り込み、細部を整えて、共有や納品へ。
HTMLファイルを開く
手元のHTMLを開き、キャンバスで文字・画像・レイアウトを編集できます。
ページのデザインをそのまま画面へ
元のデザインを活かして読み込み、実際の見た目を確認できます。
画像と雰囲気を一新
キャンバスで画像やデザインを確認し、素材を差し替えて全体の印象を整えられます。
すっきり書き出して、スムーズに納品
HTMLをダウンロードして、いつもの公開・納品の流れに進めます。
次のページ更新をスムーズに
キャンペーンページやテンプレートを整え、クライアントに見せる一案を用意できます。
市販・オープンソース HTML テンプレートの迅速なカスタマイズ
VS Code や Node 環境を構築することなく、ダウンロードした HTML テンプレートを直接ドラッグ。ロゴ、見出し、料金表を視覚的に更新。
AI が生成したランディングページの仕上げ・手直し
ChatGPT、Claude、v0、DeepSeek などが出力した HTML 単一ページの微調整。ずれた要素、余白、タイポグラフィを直感的に手直し。
EDM（メルマガ）HTML テンプレートの微調整と表示検証
文字や画像、余白を変えながら、その場で仕上がりを確認できます。
手元のコンテンツから始めましょう
ファイルのアップロード、HTMLの貼り付け、URLの入力、AIでの作成から選べます。
HtmlDragを使う前に知っておきたいこと
使い始めから仕上げまで、よくある疑問にお答えします。
元のHTMLを書き出して、編集前のページを取り戻せます。 編集前のページには元のHTML、仕上げたページには編集後のHTMLを選んで書き出してください。
キャンバスで画像やデザインを確認し、素材を差し替えて全体の印象を整えられます。
HTMLをダウンロードして、いつもの公開・納品の流れに進めます。
気になるセクションから、文字・画像・表を少しずつ整えていけます。