既存HTMLやAI生成HTMLを、写真を編集するようにビジュアル編集
HtmlDragは、開発者、マーケター、デザイナーが実際のHTMLに対する最後のビジュアル調整を完了できるよう支援します。 要素を選択し、AIで狙った部分だけを微調整し、ベンダーロックインなしで編集・共有・書き出しを続けられるクリーンなHTMLを保てます。
1. プロダクトの位置づけ
HtmlDragとは？
HtmlDragは、 標準HTMLを出力するビジュアルエディターです。サーバーへの依存を強制するサイトビルダーとは異なり、効率的な納品を重視し、特定のプラットフォームに縛られたくないユーザー向けに設計されています。
HtmlDrag ベンダーロックインを拒否します。既存HTMLページの「最後の10%の仕上げ」に注力しています。AIで生成したランディングページ、Webから取得した競合分析用スナップショット、デザイナーから納品された静的ページなどを、HtmlDrag上でドラッグとクリックにより整えられます。 出力は標準的でセマンティックなHTMLコードであり、Vercel、Netlify、従来型のサーバーなどへそのままデプロイできます。
主な価値提案：
コードの所有権はあなたにあります： コードはHtmlDragの実行環境に依存しません。いつでもダウンロードして離れ、どこへでも移行できます。
FigmaのようにWebページを編集： 従来の「コードビュー」の制約から解放され、直感的なドラッグ、ズーム、レイヤー操作を使えます。
AI生成後のシームレスな引き継ぎ： ChatGPTやClaudeが生成したHTMLコードを直接貼り付け、AI出力の細部を正確にビジュアル調整できます。
SEOとパフォーマンスを優先： 生成コードはクリーンで、不要なJSの注入がなく、高速な読み込みと検索エンジンへの親和性を確保します。
⚡ 要点をすばやく確認（ダイレクトサマリー）：
- 主な目的： 既存、AI生成、インポートしたHTMLページの「最後の10%の仕上げ」に特化したビジュアルWYSIWYGエディターです。
- 主な違い： Wix、Webflow、Squarespaceとは異なり、HtmlDragは 独自ランタイムを必要とせず 、Vercel、Netlify、Apache、Nginxなど、あらゆるホストで使えるクリーンで持ち運び可能なHTMLを生成します。
- 狙った部分の AI リファイン： 自然言語の指示で選択した要素やセクションだけを変更し、ページの他の部分を書き直したり壊したりしません。
- インポート方法： Webページを複製（ワンクリック複製）、ローカルファイルのアップロード（.html/.htm）、コードの直接貼り付け、AIによる「ファイルを HTML に変換」（PDF、Word、PPT、Excel、画像）に対応します。
2. 主なワークフロー：HtmlDragでできること
HtmlDragは、ページや素材が用意された後の3つの成果をつなぎます。HTMLをビジュアル編集する、特定の部分をAIで改善する、対応ファイルを納品可能なHTMLページに変換する、という流れです。
ビジュアルHTMLエディター：既存ページを直接編集
既存のHTMLファイルを開く、AIコーディングツールのコードを貼り付ける、Webページを取り込む、といった方法で始められます。ページをゼロから作り直すのではなく、レンダリングされたHTMLを直接編集します。
- コンテンツ： ページ内のテキスト、見出し、リンク、画像、テーブルを編集できます。
- レイアウト： 結果を確認しながら、要素の移動、サイズ変更、整列、挿入、複製、削除を行えます。
- 構造： レイヤーとDOMツリーで入れ子になった要素を選択し、対象をロックして、複雑なページも管理しやすくできます。
- コードとの連携： コードを直接制御したいときは、ビジュアル編集とHTMLソースを切り替えられます。
結果は標準HTMLとして残り、特定のサイトビルダー内でしか動かないページにはなりません。ビジュアル編集後は、バージョンを保存し、プレビューを共有し、クリーンなページをデプロイ用に書き出せます。
HTMLエディター：既存のHTMLファイルを選んでビジュアル編集を開始
AI リファイン：HTMLの狙った部分を微調整
AI リファインは、既存ページの選択した部分を変更するための機能です。レイアウト全体を捨てて作り直すものではありません。従来のAIコーディングでは小さな修正でも文書全体が再生成され、コンテキストの欠落、レイアウト崩れ、トークンの浪費につながりがちです。HtmlDragでは対象要素を選択または範囲選択し、変更内容を具体的に説明するだけで、現在のHTMLに局所的で非破壊な更新を適用できます。
- 範囲を正確に指定： 変更が必要な要素またはコンポーネントグループだけを対象にします。
- 自然言語プロンプト： 文言、余白、色、レイアウト、レスポンシブ表示の要件を指定できます。
- すぐに反復： バージョンを並べて比較し、ビジュアル編集を続けるか、要望をもう一度調整できます。
ChatGPT、Claude、v0で生成したページの構造は整っているものの、ブランド、文言、レスポンシブレイアウトを正確に調整したい場合に特に役立ちます。
ホームの AI リファイン：HTMLソースを選んでから変更内容を指定
AIでファイルを編集可能なHTMLに変換
HTMLではなく文書、画像、その他の対応ファイルから始める場合、HtmlDragはその内容を構造化されたHTMLページに変換し、同じビジュアル編集フローを続けられるようにします。
重要なのは、静的なプレビューに変換するだけではない点です。生成されたページを確認、調整、AIで微調整し、共有や書き出しに備えられます。
「ファイルを HTML に変換」：素材から始めて編集可能なHTMLページへ進む
3. コンテンツをHtmlDragに取り込む
開始地点に合った入力方法を選びます。Webページを複製、HTML をアップロード、コードを貼り付ける方法は既存コンテンツをビジュアルエディターに取り込みます。アイデアから始める場合はAI Creatorで初稿を作成できます。
入口1： Webページを複製（Website Cloner）
あらゆるWebサイトをデザイン用キャンバスに変える
気に入ったWebページのレイアウトがありますか？競合ページのリデザインを分析したいですか？URLを入力すると、HtmlDragのサーバーサイドレンダリングエンジンがページ全体を取得し、編集可能なHTMLプロジェクトに変換します。従来の「要素を検証」を超え、継続的に編集できます。
主なポイント：
- 高精度な再現：CSSスタイル、背景画像、レイアウト構造をインテリジェントに解析し、元のデザインをできるだけ忠実に再現します。
- リソースのローカル化：外部画像やフォントをローカル参照またはBase64に自動変換し、リンク切れを防ぎます。
- 安全なクリーンアップ：元サイトのトラッキングスクリプト、広告コード、潜在的なセキュリティリスクを自動的に除去します。
利用シーン：
- ピクセル単位の競合分析：優れたWebページのレイアウト実装を分解して確認できます。
- 旧サイトの再構築：ソースコードを失った古いWebサイトのコンテンツをURL取得で復元し、更新できます。
- インスピレーションの収集：UIコンポーネント素材の自分用ライブラリを構築できます。
技術メモ： ：サーバーサイドレンダリング（SSR）と、ほとんどのシングルページアプリケーション（SPA）の取得に対応します。非常に複雑なCanvasアニメーションや厳格なCSPで保護されたサイトでは、再現度が異なる場合があります。
Webページを複製：URLを入力して編集可能なページのコピーを取得
入口2： HTML をアップロード
ローカルHTML資産を再活用
ハードディスクに眠っているHTMLファイルをブラウザへドラッグすると、すぐに現代的な編集環境で扱えます。10年前のアーカイブプロジェクトでも、マーケティングツールから書き出したメールテンプレートでも、HtmlDragが正確に解析します。
主なポイント：
- インテリジェントな構造認識：HTML5文書の構造を自動認識し、HeadとBodyの内容を区別します。
- メールテンプレートに対応：テーブルレイアウトとインラインCSSを特に最適化してサポートし、メールマーケティング（EDM）制作の大きな課題に対応します。
- スタイル分離サンドボックス：Shadow DOMまたはIframeの分離技術を使い、インポートしたファイルのスタイルがエディターUIの影響を受けないようにします。
利用シーン：
- メールマーケティング（EDM）制作：MailchimpやStripoから書き出したテンプレートを微調整できます。
- 静的レポートの編集：Python/Rで生成したHTMLデータ分析レポートを編集できます。
- レガシーシステムの保守：開発環境を一式構築せず、古いプロジェクトの静的ページをすばやく修正できます。
入口3： コードを貼り付け（Raw Code）
AIコードジェネレーターとの最適な橋渡し
ChatGPT、Claude、v0.devが生成したコードは優れていますが、どう微調整すればよいでしょうか？HtmlDragに直接貼り付ければ、「コードモード」から「デザインモード」へシームレスに切り替えられます。
主なポイント：
- 即時レンダリングパイプライン：HTML/CSSコードを貼り付けると、ミリ秒単位でビジュアル表示できます。
- Tailwind CSS対応：コードにTailwind CDNが含まれていれば、対応するユーティリティクラスを正しくレンダリングします。
- スニペットの組み合わせ：異なるコードスニペットを何度でも貼り付け、1つの完成したページに組み合わせられます。
利用シーン：
- AI支援開発：AI生成コードをコピー → HtmlDragでビジュアル微調整 → 完成品を書き出し。
- UIコンポーネントのデバッグ：BootstrapやBulmaのコンポーネントコードをすばやくプレビューして修正できます。
- 共同レビュー：同僚のコードスニペットを実環境でプレビューできます。
コードを貼り付け：HTMLコードを貼り付けて即時レンダリングとプレビュー
入口4： AIで作成ワークスペース
アイデアや素材から編集可能な下書きへ
AIで作成ワークスペースは、プロンプトによる作成、テンプレート、既存HTML入力、ファイルからHTMLへの変換を1か所にまとめます。ページを生成し、ビジュアル編集へ進める下書きを作成または開くためのワークスペースです。
主なポイント：
- プリセットサイズの選択：カバー、バナー、ソーシャルメディアなど、用途に合う一般的なキャンバスサイズを選べます。
- スタイルテンプレートの選択：組み込みのデザインスタイルで、ゼロから設計せずにビジュアル効果をすぐ切り替えられます。
- すぐに編集可能：生成またはインポートした下書きをビジュアルエディターでドラッグ、置換、調整できます。
ヒント： AIで作成は ビジュアル下書きを作成するのに便利です。初稿ができたら手動編集を続けるか、狙った変更に適した微調整フローを使えます。
AIで作成ワークスペース：ページテンプレートを選び、編集可能な下書きから続ける
4. ビジュアルエディターの主な機能
HtmlDragの中心にあるのは、実際のHTML環境を直接操作できる強力なWYSIWYGエディターです。面倒なコード編集から解放されます。
4.1 自由なドラッグ＆ドロップレイアウト
文書フローの制約を超えて、好きな場所に配置
従来のHTML要素は文書フローに制約され、位置を調整するにはCSSの変更が必要です。HtmlDragは絶対位置指定のドラッグ＆ドロップに対応し、PPTやPhotoshopのように要素を自由に動かせます。
- スマート選択：要素をクリックすると、青い編集枠と8つのリサイズハンドルが表示されます。
- 自由移動：押したままドラッグして、要素をリアルタイムに移動できます。
- 正確なサイズ変更：角のハンドルをドラッグし、縦横比を維持するか自由に拡大縮小します。
- 複数選択：
Shiftを押しながら複数の要素をクリックするか、範囲選択してまとめて移動します。 - コピー＆貼り付け:
Ctrl+C / Ctrl+Vページ間で要素をすばやく複製できます。
ビジュアルエディターのキャンバス：実際のHTML要素を選択、移動、サイズ変更、スタイル調整
4.2 ダブルクリックでテキスト編集
Word文書のようにWebテキストを編集
テキスト領域をダブルクリックして編集モードに入ります。コード内の位置を探す必要はなく、ページ上で直接内容を変更できます。
- リッチテキスト対応：太字、斜体、色、リンクなどをワンクリックで設定できます。
- リアルタイムプレビュー：編集内容がページにすぐ表示されます。
- 元のスタイルを維持：テキストを変更しても既存のCSSスタイルは壊れません。
4.3 画像の置換と調整
ワンクリックで画像を置換し、ドラッグでサイズ変更
ページ上の画像をクリックし、ローカルファイルや新しい画像URLにすばやく置き換えます。オレンジのハンドルをドラッグすると、リアルタイムプレビューを見ながらサイズを変更できます。
- ローカルアップロード：JPG、PNG、WebP、GIFなど一般的な形式に対応します。
- URL置換：画像リンクを直接貼り付けて置き換えられます。
- 比率ロック：元の縦横比を維持するか、自由に調整できます。
画像編集：画像の置換、オンラインソースの利用、キャンバス上での調整
4.4 ビジュアルスタイル調整
CSSコーディング不要、クリックで設定
要素を選択し、プロパティパネルから直感的にスタイルを調整できます：
| 調整可能なプロパティ | 説明 |
|---|---|
| マージンとパディング | 4方向を個別に調整 |
| 背景色 | カラーピッカーまたは16進数を直接入力 |
| タイポグラフィ | フォントサイズ、行の高さ、色、配置 |
| 境界線と角丸 | 幅、色、スタイル、角の丸み |
| シャドウ | Box Shadowをビジュアル設定 |
| 不透明度 | 不透明度スライダーで調整 |
4.5 レイヤー管理とDOMツリー
PhotoshopのようにHTML構造を管理
複雑な入れ子構造では、直接クリックすると正確に選べないことがあります。レイヤーパネルには完全なDOMツリーが表示され、複雑なdiv階層の中から対象を正確に選択できます。
- ビジュアルDOM構造：HTMLノードをツリー表示し、親子関係を明確にします。
- 正確な配置：隠れている要素や小さなアイコンも簡単に選べます。
- 非破壊操作：非表示・ロック機能で構造を壊さずに編集を補助します。
- 名前の変更：レイヤーに名前を付けて構造を分かりやすく整理できます。
レイヤーとDOMツリー：入れ子になったページ要素を探し、ロック、非表示、整理
4.6 内蔵HTMLソースエディター
細かく制御したいときはいつでもコードビューへ
HtmlDragはビジュアル編集を重視しながら、コードを扱えるユーザー向けにソース編集入口も用意しています。ツールバーの「コード」ボタンをクリックすると、ポップアップでHTML/CSSを表示・編集できます。
- 構文ハイライト：読みやすい色付きコード
- リアルタイム同期：コードを変更するとキャンバスがすぐ更新されます。
- 競合なし：ビジュアル編集とコード編集をシームレスに切り替えられます。
ソースエディター：ビジュアル操作だけでは足りないときにHTMLコードへ切り替え
4.7 要素のお気に入り登録と再利用
お気に入りのブロックを「ライブラリ」に保存してプロジェクト間で再利用
編集中に美しいブロックを見つけたら「ライブラリ」に保存できます。次に新しいプロジェクトを作成するとき、作り直さず直接挿入できます。
- ワンクリック保存：要素やブロックを選択し、右クリックして「ライブラリに追加」を選びます。
- お気に入り管理：保存した要素の表示、名前変更、削除を行えます。
- プロジェクト間で利用：保存した要素を新しいプロジェクトに直接挿入できます。
4.8 ビューポートサイズのプリセット
キャンバスサイズを切り替えて異なる画面幅をプレビュー
HtmlDragには、モバイル（375px）、タブレット（1024px）、デスクトップ（1280px～1920px）などのビューポートプリセットがあり、各デバイスでの表示をすばやく確認できます。
- 複数のプリセット：モバイルからデスクトップまで、7種類の一般的な画面サイズを内蔵しています。
- 元のサイズに自動フィット：インポートしたコンテンツから元のキャンバスサイズを自動判定します。
- プレビュー中も編集：サイズを切り替えた後も、すべての編集操作を続けられます。
5. 保存、共有、書き出し
プロジェクトはあなたのものです。HtmlDragはプラットフォームに縛られないオープンな書き出し方法を提供します。
5.1 標準HTMLを書き出し（クリーンエクスポート）
あなたのコードを完全に自由に
HtmlDragとWixやSquarespaceの最大の違いです。プラットフォームに縛り付けません。「ダウンロード」をクリックすると、どこにでもデプロイできるクリーンなHTMLファイルを取得できます。
- ランタイム依存なし：書き出したページはHtmlDragのJSライブラリを読み込まずに動作します。
- セマンティック構造の保持：編集時にheader、article、footerなど元のセマンティックHTMLタグをできるだけ保持し、SEOにも役立てます。
- 2つのダウンロードモード:
- 現在のHTMLをダウンロード：すべての編集内容を含み、エディター補助マーカーを自動的に除去します。
- 元のHTMLをダウンロード：比較用にインポート時の元コードを保持します。
5.2 オンライン共有
リンク1つですぐに誰とでも共有
サーバーをデプロイしたくない場合は、HtmlDragのオンライン共有機能を使えます。一時アクセスリンクを生成し、ログインなしで閲覧できるよう顧客、同僚、友人に送れます。
- 即時生成：「共有」をクリックすると、リンクがすぐに準備されます。
- 有効期限の管理：リンクはデフォルトで7日間有効で、いつでも更新できます。
- プライバシー管理：共有をいつでも取り消して、リンクを即座に無効化できます。
オンライン共有：共有リンクから編集済みページをプレビュー
5.3 画像を書き出し
デザインアーカイブやSNS共有のためにWebページを画像として保存
ページを画像として保存したい場合、HtmlDragでは長いページを含む全ページをPNG画像として書き出せます。
- フルページスクリーンショット：1画面だけでなく、長いページ全体をキャプチャできます。
- 明瞭な表示：ページのテキスト、画像、スタイルを完全に保持します。
- 利用シーン：デザインアーカイブ、SNS共有、顧客向け提案資料の表示
6. 従来ツールとの比較
HtmlDragと従来型オンラインサイトビルダーの比較
| 比較項目 | 従来型SaaSビルダー | HtmlDrag |
|---|---|---|
| 主な位置づけ | プラットフォーム上でサイト全体を構築するためのホスティングサービスを提供 | あらゆるソースのHTMLを変更するための編集ツールを提供 |
| コードの所有権 | コードは暗号化または難読化されていることが多く、独立したデプロイ用に書き出しにくい | 完全に透明 —ソースコードを書き出せ、プラットフォームに依存しない |
| 外部インポート | 通常は外部HTMLのインポートに対応せず、独自テンプレートに限定される | 高い互換性 —AI Creator、Webページを複製、ファイルアップロード、コード貼り付けに対応 |
| 長期コスト | 継続的な購読が必要で、やめるとサイトはオフラインになる | ロックインなし —書き出したファイルを無料・有料を問わず任意のサーバーでホストできる |
HtmlDragとローカルのプロ向けコードエディターの比較
| 比較項目 | プロ向けコードエディター | HtmlDrag |
|---|---|---|
| 導入のハードル | HTML/CSS構文を理解し、開発環境を設定する必要がある | ハードルなし —スライドのようにドラッグとダブルクリックで編集 |
| フィードバック速度 | コードを書く → 保存 → ブラウザを更新 | リアルタイムフィードバック、WYSIWYG、ミリ秒単位の応答 |
| 変更効率 | レイアウト調整にはCSSプロパティの手計算が必要 | 直感的な操作：ドラッグで位置とサイズを変更 |
| 利用シーン | 大規模プロジェクト開発、ロジックプログラミング | 高速プロトタイピング、ランディングページ調整、文言・画像の変更 |
7. 主なメリットと価値
HtmlDragを選ぶ理由
- 非常に軽量：重い開発ツールをダウンロードする必要はありません。ブラウザで開いてすぐ使え、どこでもコードを変更できます。
- プライバシーを保護：データを尊重します。ビジュアル編集はブラウザ内でローカルに実行されます。クラウドサービスを使うのはWebページの複製とAI生成だけです。オンライン共有しない限り、編集済みコードはアップロードされません。
- 依存なしで納品：書き出したHTMLファイルはHtmlDragのライブラリやサービスに依存しません。完全にあなたのもので、商用利用や任意の環境へのデプロイが可能です。
8. シナリオと対象ユーザー
個人開発者／Webマスター
シナリオ：ランディングページとMVPをすばやく作成
- AIでスタート：AIで製品紹介の初稿を作り、テンプレート探しを省略します。
- すばやい微調整：購入したHTMLテンプレートのテキストや画像を、コード行に触れずドラッグ＆ドロップで変更できます。
- SEO最適化：ビジュアル画面でページタイトル、説明、構造を直接編集し、検索エンジンへのインデックスを改善します。
EC／マーケティングチーム
シナリオ：頻繁なキャンペーンページとメールマーケティング
利用シーン：
- ピクセル単位の競合分析：競合のランディングページをワンクリックで取得し、ローカルで構造を分解して文言を調整し、キャンペーンの切り口やオファーをすばやく検証します。
- メールテンプレートの微調整：マーケティングツールから書き出したHTMLメールを取り込み、余白やフォントを調整して各メールクライアントで正しく表示します。
- 複数バージョンのテスト：ランディングページのヒーローセクションを複数作り、文言と画像の組み合わせをテストします。
UI/UXデザイナー
シナリオ：高精度プロトタイプの納品とデザインQA
- デザインQA：エンジニアから納品されたHTMLページ上で余白、フォントサイズ、色を直接調整し、修正済みスタイルを開発者へ書き出してコミュニケーションコストを削減します。
- ノーコードのWebサイト制作：開発者に頼らずポートフォリオサイトを作り、ビジュアル効果を完全に自分で管理できます。
教育・研修／ナレッジコマース
シナリオ：教材の作成と配布
- インタラクティブ教材：画像、テキスト、動画を含むHTML教材を作成し、専用リーダーなしで学生へ直接配布できます。
- 1ページの情報サイト：特定の講座や資料パッケージの紹介ページをすばやく作成し、コミュニティで共有できます。
HtmlDragを使い始める
HtmlDragは十分な無料クォータを提供します。新規ユーザーは登録時にボーナスクレジットを受け取り、
AI生成とWebページ複製を試せます。ビジュアル編集は完全無料で、無制限に利用できます。