履歴を見るにはログインしてください

HtmlDrag

自由なドラッグ&ドロップと本格WYSIWYG編集
既存ページや AI 生成ページを HtmlDrag で開き、キャンバス上で最終調整できます
AI生成

AI生成

クラウド保存なしで、ファイル内容を高品質なHTMLに変換。

URLインポート

URLインポート

リンクを入力するだけで、あらゆるWebページを編集可能なプロジェクトに変換します。

HTMLアップロード

HTMLアップロード

HTMLファイルをインポートして、コードなしで視覚的に編集を開始できます。

コード貼り付け

コード貼り付け

HTMLコードを貼り付けるだけで、すぐにビジュアルデザインに変換できます。

スクロール
1 インポートして開始

あらゆるソースから開始

URLインポート、ローカルHTMLファイルのアップロードによるテンプレート修正、またはAIによるレイアウト生成から始めましょう。どの方法でも同じビジュアルエディターに統合され、白紙から始める不安はありません。

2 ビジュアル編集

真のドラッグ&ドロップの自由、コード不要

厳格なグリッドは忘れましょう。テキスト、画像、ボタンをキャンバス上のどこにでもドラッグできます。要素を自由に再配置し、思い描いた通りのデザインを作り上げる真の自由を体験してください。

3 編集タブ

Word文書のようにHTMLを編集

ダブルクリックしてテキストの変更、画像の交換、スタイルの調整ができます。直感的なツールバーですべての必須ツールにアクセスでき、学習コストなしですぐに始められます。

4 コンポーネントタブ

豊富なコンポーネントで作成

編集だけでなく、創造も。コンポーネントタブからボタン、図形、コンテナ、複雑なテーブルを挿入できます。リッチなレイアウトを構築したり、メールテンプレートにプロフェッショナルなテーブル構造を数秒で追加したりできます。

5 レイヤータブ

プロフェッショナルなレイヤー管理

複雑さを正確に管理します。レイヤーパネルを使用して、背景のロック、要素の非表示、DOMツリーの並べ替えが可能です。Photoshopのような深い制御力を、HTMLのために設計しました。

6 コレクションタブ

デザインシステムを構築

ヘッダー、フッター、カスタムブロックをコレクションに保存します。異なるHTMLプロジェクト間で再利用することで、一貫性を保ち、ワークフローを大幅に加速させます。

7 ショートカット

思考の速度で作業

Ctrl+C/V、複数選択、元に戻す/やり直しなどの慣れ親しんだショートカットを使用できます。右クリックで画像の即時置換や属性管理も可能。効率と自由がここにあります。

8 コードエディタ

必要なときにコードにアクセス

内蔵コードエディタに切り替えて、生のHTML、CSSクラスの微調整、またはカスタムスニペットの貼り付けが可能です。ビジュアル編集だけでは物足りないときに、完全な制御を提供します。

9 共有

すぐに共有可能なリンク

サーバー設定やデプロイなしで、リンクを即座に共有できます。クライアントの確認、チームのフィードバック、あるいは単に作品を見せるためでも、あなたのHTMLは数秒でオンラインになります。

10 ダウンロード

画像またはHTMLをダウンロード

思い通りにエクスポート。高品質な画像を無料でダウンロードするか、クリーンで本番環境で使えるHTMLコードを取得できます。エクスポートされたファイルは完全な互換性を持ち、複雑なメールテンプレートであっても再編集可能です。

AI生成

1つのファイルから、最初の編集可能な HTML 草案を作成

大事なのはファイル名ではなく、中にある実際の内容です

形式別の例を確認
01

Word・Markdown・TXT を HTML に

記事の下書き、製品ドキュメント、ヘルプセンター、SOP、求人票、キャンペーン企画、PRD 要約、長文メールなどに向いています。長い文章を、階層と読みやすさを持つ HTML に整理します。

02

Excel/XLSX・CSV を HTML に

価格表、商品カタログ、在庫一覧、KPI レポート、アンケート結果、店舗データ、業務台帳などに向いています。表の内容を、比較モジュールや要約、一覧構造として理解しやすく再構成します。

03

PPT/PPTX を HTML に

営業資料、資金調達用デッキ、提携提案、講義資料、社内研修、製品発表、ブランドストーリーなどに向いています。スライド単位の情報を、編集し続けられるプレゼン型 HTML に整理します。

04

JPG/PNG を HTML に

ポスター、商品ビジュアル、縦長画像、注釈付きスクリーンショット、デザイン参考、作品紹介などに向いています。静的な画像を、テキストや画像、レイアウトを後から調整できる HTML に変換します。

05

PDF を HTML に

履歴書、ポートフォリオ、マニュアル、講義資料、契約要約、調査レポート、ホワイトペーパーなどに向いています。修正しづらい PDF の内容を、編集可能な HTML に整理します。

HtmlDrag はどんな人向け?

HTMLページはあるけれど、フロントエンドのコードは触りたくない人向け。

インディー開発者 / SaaS創業者

テンプレートやAI生成HTMLから始めて、文章とレイアウトを仕上げる

エクスポートした、またはAI生成のランディングページを取り込み、公開前にセクション、見出し、CTA をビジュアルで調整できます。AIコーディングツールが出力したHTMLでフロントエンドに詳しくなくても、ここで最後の10%を仕上げられます。

マーケター / グロース担当

A/Bテスト用にキャンペーンランディングページをコピー&調整

既存のHTMLの上でレイアウト、オファー、メッセージを素早く調整し、開発者を待たずにより多くの実験を開始できます。メールマーケティングテンプレート(Stripoエクスポート、Outlook対応HTMLメール)、電子請求書、ビジネスレポートなど、最終調整が必要なHTML文書にも最適です。

デザイナー / クリエイター

CSSを書かずにレイアウトと見た目をコントロール

実際のHTMLページの上で、余白、タイポグラフィ、画像をビジュアルに微調整し、デザインファイルに近い仕上がりに。キャプチャしたページを個人制作やファンプロジェクトに仕立てるのにも最適で、CSSに触れる必要はありません。

また一つの「全部入り」サイトビルダーではありません

HtmlDragは既存のHTMLを仕上げるためのビジュアルツールとして、いま使っているツールの横に寄り添います。ホスティングを含むフル機能のプラットフォームではありません。

一から作るビルダー(Webflow、Wix…)

サイト構築のためのオールインワン

  • 長所:ホスティング、CMS、フォーム、解析、連携など、サイト全体を完結できます。
  • 短所:学習コストが高く、構造が固定的で、任意のHTMLページを簡単に取り込むことができません。
HtmlDrag

既存のHTMLランディングページを素早く仕上げる

  • サイトをゼロから作るのではなく、すでにあるHTMLの「最後の10%」の磨き込みに集中します。
  • URLインポート、HTMLアップロード、コード貼り付けから取り込み、実際のページ構造の上でそのままビジュアル編集できます。
  • 数分で使い始められます—ホスティング設定、DNS、CMS設計は不要です。

作成の準備はできましたか?

自由なドラッグ&ドロップと本格WYSIWYG編集

HtmlDrag

誰でも使えるドラッグ&ドロップHTMLエディター

© 2026 HtmlDrag. All rights reserved.