HtmlDrag 活用事例
誰に向いているか、どう使うか、どんなページ課題を解決できるか
HtmlDrag はブラウザで動くビジュアル HTML エディターです。既存のフロントエンドプロジェクト、CMS、サイトビルダーを置き換えるものではなく、その間にある作業を補います。すでに Web ページ、HTML ファイル、コード片、資料、または AI が生成した初稿があるとき、コードを書かずに文言、画像、ボタン、表、モジュールの順番を調整し、外に出せる状態まで仕上げられます。
多くのページで止まりやすいのは、ゼロからのデザインではなく公開前の最後の一歩です。タイトルを少し短くする、メイン画像を新しいものに差し替える、ボタンを上に移動する、価格表を分かりやすくする、FAQ を追加する、CTA を明確にする。こうした修正のために毎回プロジェクト全体を開くのは効率的ではありません。HtmlDrag の価値は、具体的で目に見える、すぐ反映したい変更をブラウザ上で完了し、HTML として書き出して元の公開フローに戻せることです。
まだページがなく、手元にあるのが PDF 提案書、PPT 研修資料、Excel 価格表、Word 文書、Markdown メモ、TXT 原稿、JPG/PNG のスクリーンショット、あるいは短い製品説明だけの場合もあります。その場合は AI生成で構造化された HTML 草稿を作り、そこからキャンバス上で内容、見た目、読みやすさを磨けます。
1. HtmlDrag はどんなユーザーに向いているか
HtmlDrag のキャンバスと入口は、コードは書けるが小さな修正のたびに開発環境を立ち上げたくない人と、コードを書かないがページの見た目を直接コントロールしたいビジネス、デザイン、コンテンツ担当の両方を想定しています。
1. 個人開発者と SaaS 創業者
個人開発者や初期の SaaS 創業者は、プロダクト、デザイン、コピー、グロース、納品を同時に担当することがよくあります。プロダクト紹介ページ、ウェイトリスト、料金ページ、機能ページ、Product Hunt ローンチページ、ステータスページ、更新履歴ページは素早い調整が必要ですが、多くの変更は開発フローを丸ごと回すほど大きくありません。
HtmlDrag はこの最後の調整に向いています。hero コピーを変える、製品スクリーンショットを差し替える、CTA を上に移す、曖昧な訴求を削る、対象ユーザーの説明を足す、FAQ を調整する、HTML を書き出して自分のプロジェクトや静的ホスティングに戻す。メインサイトは使い慣れた技術スタックのままにして、軽量で一時的、検証が必要なページを HtmlDrag で整えられます。
2. マーケティング・グロースチーム
マーケティングやグロースの現場では、同じページに複数のバージョンが必要になります。広告クリック用は焦点を絞り、イベントページは日時と特典を強調し、チャネル別ページは言葉づかいを変え、A/B テストではタイトル、メイン画像、ボタン、証拠材料だけを変えたい。すべてを開発スケジュールに乗せると速度が落ちます。
HtmlDrag はランディングページ用の HTML エディターとして使えます。既存ページから 1 つのバージョンを作り、構造を残したままコンバージョンに影響する部分だけを変更できます。AI生成で初稿を作り、実際のビジネスに合うページへ手で調整する使い方もできます。
3. デザイナー、クリエイター、コンテンツチーム
すべてのページ修正にコードが必要なわけではありません。デザイナー、コンテンツ制作者、ブランド担当、運用担当は、文字が長い、画像が合わない、余白が詰まりすぎている、ボタンが目立たない、セクションの順番が自然でない、といった見え方を調整したいことが多いです。HtmlDrag なら、これらの修正をデザインファイルではなく実際の HTML 上で行えます。
4. フロントエンド開発者と技術協業メンバー
開発者は HtmlDrag を静的 HTML の調整や要件確認の道具として使えます。HTML 構造を確認し、AI が生成したページ片を整理し、非技術メンバーがまとめた草稿を実際のページに近い HTML にしてから、コードレビュー、レスポンシブ確認、API 連携、本番公開に進められます。
5. フリーランス、小規模スタジオ、クライアント納品チーム
フリーランスや小規模スタジオで負担になりやすいのは、細かな修正の繰り返しです。文言を 1 つ変える、画像を差し替える、ボタンを上げる、価格説明を足す、フッターの連絡先を直す。これらは具体的ですが、毎回開発フローに戻すとコストが大きくなります。
6. コンテンツ運用、ドキュメント、ナレッジベースチーム
コンテンツチームが持つ素材は、必ずしも Web ページ形式ではありません。チュートリアル草稿、ヘルプドキュメント、製品マニュアル、SOP、研修資料、イベント企画、PRD 要約、長いメール、社内告知、四半期レビュー、顧客事例。HtmlDrag では AI生成で見出し階層、段落、読みやすい流れを持つ HTML 草稿に整理し、キャンバス上でスクリーンショット、重要ポイント、ステップカード、行動ボタンを追加できます。
2. どの入口からキャンバスに入るか
HtmlDrag には主に 4 つの入口があります。URLインポート、HTMLアップロード、コード貼り付け、AI生成です。どれを選ぶかは、今手元に何があるかで決まります。
1. URLインポート：Web ページを編集可能な HTML 草稿にする
すでにオンラインページがある場合、最も速い方法は URLインポートです。リンクを貼ると、編集可能なページスナップショットが作成されます。元ページは上書きされず、コピー版の上で調整します。この入口は、自社サイト、許可を得たクライアントページ、社内の古いページ、前回イベントページの再利用に向いています。
利用時は、自分が権利を持つコンテンツ、または許可を得たコンテンツだけをインポートしてください。
→ 今すぐ URLインポート へ
2. HTMLアップロード：ブラウザでローカル HTML を編集する
ローカルに .html ファイルがある場合は、直接アップロードするのが一番簡単です。静的ランディングページ、古い HTML ページ、メールテンプレート、メール署名、Web ページ片、AI ツールが出力した HTML、ローカル demo ファイル、開発者が非技術メンバーへ確認用に渡す HTML に適しています。
→ 今すぐ HTMLアップロード へ
3. コード貼り付け：コード片を素早くプレビューして編集する
完全なファイルではなく HTML コード片だけがある場合、コード貼り付けが最も軽い入口です。AI 生成片のレンダリング確認、コンポーネントの検査、メール内テーブルの整列調整、クライアントから送られたソースの確認に使えます。
→ 今すぐ コード貼り付け へ
4. AI生成：資料やアイデアを編集可能な HTML にする
まだページがなく、資料や短い要件だけがある場合は AI生成を使います。PDF、PPT/PPTX、Excel/XLSX、CSV、Word、Markdown、TXT、JPG/PNG に対応し、添付なしでページ目的、対象ユーザー、重要情報、スタイルの好みを入力することもできます。
生成は終点ではありません。納品できるページには、実際のスクリーンショット、一般的すぎる文言の修正、CTA 調整、セクションの並べ替え、テンプレート感の削除、業務固有の詳細追加が必要です。これらは HtmlDrag のキャンバスで続けて行えます。
→ 今すぐ AI生成 へ
3. どんなページに使えるか
HtmlDrag は、複雑なインタラクションは不要でも、すばやく議論、確認、公開、納品したい静的ページに向いています。
1. 既存 HTML ページをオンラインで編集する
ページは公開後も必ず修正が必要です。メイン見出しを変える、主画像を変える、価格説明を調整する、FAQ の一部を上に移す、古い Logo を削除する、新機能紹介を追加する、場違いな表現を直す。これらは既存 HTML に対する小さな手術です。
HTMLアップロード、コード貼り付け、URLインポートのどれからでもキャンバスに入り、直接修正して書き出せます。ステータスページ、リリースノート、法務ページ、問い合わせページのように存在するが頻繁には変わらないページでは、この軽量な流れがチーム全体の時間を節約します。
2. SaaS ランディングページと製品紹介ページを修正する
SaaS のランディングページには、hero、価値提案、機能紹介、利用シーン、顧客証拠、料金表、FAQ、下部 CTA という基本構造があります。骨格は大きく変わらなくても、事業段階に合わせて内容は更新され続けます。
HtmlDrag は、骨格を保ったまま内容を反復する調整に向いています。Product Hunt 向けにファーストビューをより直接的にする、広告流入用に CTA を 1 つに絞る、B2B 顧客デモ向けに価格説明、契約条件、サービス約束を補う、といった使い方ができます。
この場面での実利は、構造がきれいなことです。書き出した HTML は意味構造が分かりやすく、h1、h2、alt テキスト、構造化データを残したり補ったりしやすいため、保守しづらい div の入れ子より既存プロジェクトに接続しやすくなります。
3. AI が生成した Web ページや HTML を調整する
AI はページ生成が速い一方で、実際の業務詳細が不足しがちです。コピーが一般的、スクリーンショットが仮データ、顧客 Logo がサンプル、FAQ が寄せ集めになっていることがあります。AI は 0 から 1 を作り、HtmlDrag は 1 から公開可能な状態へ整える役割です。
任意の AI ツールが出力した HTML を貼り付けてもよいですし、HtmlDrag の AI生成から始めても構いません。キャンバスに入ったら、一般的な文言を自社製品の説明に置き換え、サンプル画像を実際の画面に差し替え、顧客 Logo を実在するものにし、モジュールを並べ替え、AI だけでは知り得ない細部を補います。
4. ドキュメント、表、画像資料を HTML ページに整理する
多くの業務資料は PDF 提案書、PPT セールス資料、Excel 価格表、CSV 商品リスト、Word 契約草稿、Markdown 文書、TXT メモ、JPG/PNG の長い画像として保存されています。これらはそのままリンク共有するのに向いていません。
HtmlDrag の AI生成は、それらを編集可能、共有可能、書き出し可能な HTML ページに変換できます。その後キャンバスで磨きます。PDF 提案書を顧客がスマホで読めるプロジェクト紹介にし、Excel 価格表を見積ページにし、PPT 代理店資料を共有しやすい特集ページにし、長いマーケティング画像を編集可能な HTML ブロックに分解できます。
5. プロダクトローンチページと Product Hunt 初公開ページ
ローンチページは数秒で、製品が何か、誰の問題を解決するか、なぜ今見る価値があるか、次に何をすべきかを伝える必要があります。HtmlDrag はこの追い込み段階に向いており、同じ製品に対してローンチ版、広告クリック版、メール招待版、顧客デモ版を準備できます。
6. メール HTML、メール署名、軽量テンプレート
メール HTML では、主画像、Logo、CTA、イベント説明、フッターの配信停止リンクをよく変更します。HtmlDrag でメール HTML をアップロード、またはコードを貼り付けると、文言、画像、色、ボタン、レイアウトを視覚的に調整できます。完了後はきれいな HTML として書き出し、メール配信プラットフォームへ戻せます。
7. 顧客フィードバックと納品前の最後の微修正
顧客フィードバックはたいてい具体的です。ボタンを上に、画像を差し替え、タイトルを短く、価格表を FAQ の上に、返金説明を 1 行追加。こうしたフィードバックは位置、要素、文言を指しているため、HtmlDrag のキャンバスで直接選択して修正できます。
8. ドキュメント、チュートリアル、コンテンツページの整理
Notion、Yuque、Lark にある文書は、正式な製品ページやヘルプセンターページとしてそのまま使えるとは限りません。入門ガイド、製品比較、技術ホワイトペーパー、リソースダウンロード、講座紹介、共同 webinar 申込ページなど、独立ページとして扱いたい内容があります。
9. 古いページをより分かりやすいページに更新する
古いページは古いだけで、必ずしも悪いわけではありません。URLインポートで古いページをキャンバスへ取り込み、使える構造と文言を残し、古い内容を削除し、スクリーンショットと Logo を更新し、セクション順を調整し、モバイルでの読みやすさを補い、書き出して元ページに反映できます。URL や既存の入口、リンク関係を崩さず更新できます。
10. 社内プロトタイプと非公式ページ草稿
社内提案ページ、営業デモページ、顧客提案ページ、イベント草稿、製品議論用プロトタイプ、会議用の一時ページは、毎回要件、デザイン、開発、検収、公開のフルプロセスに乗せる必要はありません。HtmlDrag は、クリックでき、共有でき、フィードバックを受けられる具体的なページを先に作る用途に向いています。
→ どの入口から始めるか：URL があれば URLインポート、ファイルがあれば HTMLアップロード、コード片だけなら コード貼り付け、要件だけなら AI生成 へ。
4. 手元の資料に合わせて入口を選ぶ
1. Word、Markdown、TXT から HTML へ
記事草稿、製品ドキュメント、ヘルプセンター内容、SOP、職務説明、イベント企画、PRD 要約、プロジェクト振り返り、長いメール、告知草稿に向いています。AI生成が見出し階層、段落、重要文を整理し、その後キャンバスでスクリーンショット、ステップカード、CTA、段落長を調整できます。
→ 今すぐ AI生成 で Word / Markdown / TXT をアップロード
2. Excel/XLSX と CSV から HTML へ
価格表、製品カタログ、在庫リスト、KPI 週報、アンケート結果、店舗データ、業務台帳に向いています。表はプラン比較カード、見積ページ、機能比較表、運用サマリー、ランキングにできます。
→ 今すぐ AI生成 で Excel / CSV をアップロード
3. PPT/PPTX から HTML へ
営業資料、資金調達 BP、代理店向け提案、講座スライド、研修資料、製品発表原稿、ブランドストーリー PPT に向いています。スライドを HTML にすると、登壇用資料ではなく読者向けページとして再構成できます。
→ 今すぐ AI生成 で PPT / PPTX をアップロード
4. JPG/PNG から HTML へ
マーケティング長画像、イベントポスター、製品メイン画像、インフォグラフィック、スクリーンショット説明、デザイン参考、作品展示に向いています。画像を HTML にすると、文字を変え、色を替え、ボタンを再利用でき、一文字の修正ごとに画像を作り直す必要がありません。
→ 今すぐ AI生成 で JPG / PNG をアップロード
5. PDF から HTML へ
履歴書、ポートフォリオ、製品マニュアル、講義資料、契約概要、調査レポート、業界ホワイトペーパー、技術文書、プロジェクト提案書に向いています。PDF は印刷や保管に適していますが、スマホ閲覧や継続的な修正には向きません。HTML にすると共有、削除、並べ替え、CTA 追加がしやすくなります。
→ 今すぐ AI生成 で PDF をアップロード
6. カスタム入力で HTML を生成する
添付資料がなく、短い要件だけの場合はカスタム入力を使います。ページ目的、対象ユーザー、必須情報、スタイルの好みを入力すると、初稿 HTML が生成されます。
→ 今すぐ AI生成 へ。添付なしで要件だけ入力できます
5. キャンバスで具体的に何ができるか
HtmlDrag のキャンバスでは、コードを書かずに一般的なページ修正を行えます。すべてを万能にするのではなく、実際の納品で頻繁に発生する調整を画面上で終わらせることに重点があります。
1. オンライン Photoshop のようにページ要素を微調整する
要素を選択すると、テキスト、画像、ボタン、区画、余白、背景、配置、角丸、影、リンクなどを調整できます。ボタンが目立たない、画像が合わない、タイトルが長すぎるといったフィードバックを受けたとき、開発プロジェクトを開かずにキャンバス上で直せます。
2. ブロックをコピー＆ペーストして既存構造を再利用する
調整済みの価格カード、CTA エリア、顧客 Logo ウォール、FAQ ブロックは、同じページの別位置にも別ページにも再利用できます。同種のページをよく作る人にとって、これは繰り返し作業を減らす重要な機能です。
3. コンポーネントパネルでボタン、図形、コンテナ、表を挿入する
コンポーネントパネルには、ボタン、入力欄、折りたたみコンテナ、Tabs、アコーディオン、フッター領域、表、図形、SVG があります。見積ページ、メールテンプレート、業務レポート、製品比較ページの構造を補うのに使えます。
4. レイヤーパネルで複雑なページを管理する
ページが複雑になると、マウスで直接クリックしても目的の要素を選べないことがあります。レイヤーパネルでは背景をロックし、装飾要素を隠し、重なった内容を選択し、DOM 順序を調整できます。複雑なファーストビューや多層構造を扱いやすくします。
5. お気に入りで再利用可能なブロックを蓄積する
ブランドヘッダー、フッター、問い合わせボタン、製品カード、料金プラン、顧客レビュー、FAQ、イベント規約、免責文はお気に入りに保存できます。次のプロジェクトでは固有の内容だけを差し替えて再利用できます。
6. ショートカット操作で日常的な調整を速くする
コピー＆ペースト、複数選択、取り消しとやり直し、ダブルクリック編集、右クリックメニュー、パンとズーム、選択とドラッグなどの頻出操作により、反復手順を大きく減らせます。ページ数が増え、フィードバックが細かいほど重要になります。
7. 必要なときにコード編集へ切り替える
ビジュアル編集で大半の内容とレイアウトは処理できますが、統計スクリプト、カスタム meta、構造化データ、サードパーティ widget、aria 属性、パネルに出ていない CSS 属性などはコードが必要です。HtmlDrag はビジュアル編集とソースコード編集の切り替えに対応しています。
8. 画像とブランド素材をアップロードする
Logo、製品スクリーンショット、背景画像、顧客事例画像、イベント Banner、メールヘッダー画像をアップロードして差し替えられます。複数プロジェクト、複数製品、複数ブランドを扱うチームでは、素材管理が画像探しと再アップロードの時間を減らします。
9. 確認とフィードバック用に共有リンクを使う
キャンバスで修正したページは共有リンクを生成できます。顧客、同僚、上司はブラウザで完成状態を確認でき、ソフトのインストールもソースコードの確認も不要です。
10. 画像または HTML をダウンロードして次の納品に接続する
SNS、レポート、スライドには高解像度画像が必要なことがあります。公開、メールプラットフォームへのアップロード、開発者への引き継ぎには HTML ソースが必要です。HtmlDrag は画像と HTML の両方を書き出せます。書き出した HTML は Git に commit し、静的ホスティングへデプロイし、公式サイトのルートに接続し、メールプラットフォームへアップロードし、開発者へ渡せます。
11. デスクトップで完全な編集体験を得る
完全な編集体験にはデスクトップブラウザをおすすめします。スマートフォンは共有リンクの確認や短い文言修正には向いていますが、キャンバスのドラッグ、レイヤーパネル、複数パネル展開、コード編集、大きなファイルのダウンロードはデスクトップの方が適しています。
12. 草稿から納品までの最後の 10% を処理する
今ではゼロからページを作ること自体は難しくありません。AI、テンプレート、デザイン案でページは 70% まで進みます。本当に時間がかかるのは最後の 10〜20% です。タイトルを短くし、ボタンを目立たせ、最新版のスクリーンショットにし、表を揃え、FAQ の位置を直し、フッターリンクを補う。HtmlDrag が主に支えるのはこの最後の仕上げです。
6. よくあるワークフロー例
1. AI 初稿から納品可能なランディングページへ
出発点は AI生成 です。ページ目的、対象ユーザー、重要情報、トーンの好みを入力して初稿 HTML を生成します。キャンバスでは実際の製品スクリーンショットと顧客 Logo を追加し、一般的な文言を具体的な表現に変え、CTA を調整し、不要なモジュールを削除し、製品詳細を補います。
2. 古い Web ページから新版ページ草稿へ
出発点は URLインポート です。古いページを取り込み、使える構造と文言を残し、古い内容を削除し、スクリーンショットと Logo を更新し、セクション順を調整し、モバイルでの読みやすさを補います。
3. PDF 提案書から顧客向けデモページへ
出発点は PDF 提案書、営業資料、サービス見積表、プロジェクト資料です。アップロード後に AI生成 を使うと、システムが見出し階層、要点、表、画像を認識し、編集可能な HTML を生成します。その後、顧客名、サービス範囲、見積表、進行計画、次の行動を整理します。
4. Excel 価格表からプラン比較ページへ
出発点は Excel または CSV です。アップロード後、AI生成 は表情報をプラン比較カード、機能比較表、ランキングとして整理できます。
5. メールテンプレートから送信可能なバージョンへ
出発点はメール HTML ファイル、またはメール配信プラットフォームから出力した前回テンプレートです。HTMLアップロード または コード貼り付け でキャンバスに入り、Logo、主画像、メインタイトル、CTA、イベント情報、配信停止リンクを確認・修正します。
6. ドキュメント草稿からナレッジページへ
出発点は Notion、Yuque、Lark、Word、Markdown 文書です。Markdown としてコピーして AI生成 に進むか、Word として書き出してアップロードします。HTML 草稿ができたら、キャンバスでスクリーンショット、注意ボックス、ステップカード、行動ボタンを追加します。
7. 納品目的別の使い分け
1. 議論できるページ版をすばやく作る
プロジェクト初期に難しいのは、議論の対象を具体化することです。文書は抽象的で、スクリーンショットは断片的で、デザイン案は公開まで距離があります。HtmlDrag なら、具体的で見られ、できればクリックできるページ版を先に作り、チームが同じ対象を見ながら議論できます。
2. 顧客フィードバックを直接ページ修正に変える
顧客フィードバックは、具体的な要素と位置を指すことが多いです。HtmlDrag ではページそのものを直接修正し、共有リンクで確認してもらえるため、チャット履歴、スクリーンショット、添付ファイルのバージョン確認を減らせます。
3. 業務資料を共有しやすいページに整理する
多くの業務資料は PDF、PPT、Word、Excel、画像、テキストに散らばっています。存在はしていても広めにくい。ページ化すると、共有、メールへの埋め込み、ヘルプセンターへの接続、後続メンテナンスがしやすくなります。
4. 繰り返し使うブロックをブランド資産にする
同じ種類のページをよく作るなら、ブランドヘッダー、フッター、問い合わせボタン、製品カード、顧客レビュー、FAQ、イベント規約、免責文をお気に入り資産として蓄積し、次回そのまま再利用できます。
5. 静的草稿を開発者へ渡して公開につなげる
複雑なインタラクション、バックエンドロジック、API 接続、企業レベルの品質保証は引き続き開発者が担当する必要があります。ただし HtmlDrag で非技術メンバーが先にページ内容、視覚階層、素材位置を確認し、HTML を書き出して開発者へ渡すことで、工程化に入りやすくなります。
6. 一時ページを再利用可能なテンプレートにする
イベント申込ページ、製品予告ページ、講座募集ページ、社内通知ページ、顧客デモページは、最初は急ぎで作ることが多いですが、その中の申込ブロック、アジェンダ、登壇者紹介、パートナー紹介は再利用できます。
8. よくある質問
HtmlDrag でオンライン HTML 編集はできますか？
できます。クライアントをダウンロードする必要はなく、ブラウザで使えます。URLインポート、HTMLアップロード、コード貼り付け、AI生成の 4 つの入口に対応しています。キャンバスでは文字、画像、ボタン、表、セクション順を視覚的に変更し、完了後に共有または HTML 書き出しができます。
HtmlDrag はランディングページの修正に向いていますか？
向いています。SaaS ランディングページ、製品紹介ページ、広告クリックページ、イベント特集ページ、ウェイトリストページ、Product Hunt ローンチページでは、コピー、画像、ボタン、FAQ、セクション順を繰り返し調整するため、キャンバス上で直接修正できます。
HtmlDrag で AI 生成 HTML を編集できますか？
できます。任意の AI ツールから得た HTML を HtmlDrag に貼り付けることも、AI生成から直接始めることもできます。その後、コピー、スクリーンショット、Logo、セクション順、製品詳細を調整できます。
AI生成 はどんな素材を処理できますか？
PDF、PPT/PPTX、Excel/XLSX、CSV、Word、Markdown、TXT、JPG/PNG に対応し、添付なしでページ目的と要件だけを入力することもできます。生成後の HTML はキャンバス上で続けて編集できます。
HtmlDrag は URL を編集可能ページにできますか？
できます。URLインポートは編集可能なページスナップショットを作成し、元ページは上書きしません。自分が権利を持つ、または許可を得た内容だけをインポートしてください。
書き出した HTML は既存プロジェクトに組み込めますか？
できます。書き出されるのは標準 HTML です。Git に commit し、Vercel/Netlify/Cloudflare Pages にデプロイし、公式サイトのルートへ組み込み、メールプラットフォームへアップロードし、ヘルプセンターに接続し、静的プロトタイプとして開発者へ渡せます。
完全な編集体験にはデスクトップが必要ですか？
デスクトップブラウザの使用をおすすめします。スマートフォンは共有リンクの確認や小さな文字修正に向いていますが、キャンバスのドラッグ、レイヤーパネル、コード編集、大きなファイルのダウンロードはデスクトップの方が適しています。
9. どこから始めるか
まず機能範囲を知りたい場合は 製品機能 を、具体的な流れを学びたい場合は 使い方ガイド を、クレジット、メンバーシップ、書き出し、アカウントについて確認したい場合は よくある質問 をご覧ください。
すでに Web ページ、HTML ファイル、コード片、資料一式、または短いページ要件があるなら、ドキュメントを読み終える必要はありません。URLインポート、HTMLアップロード、コード貼り付け、AI生成 のいずれかから始め、キャンバスで小さな修正を 1 つ行い、共有リンクを生成し、HTML を 1 回書き出せば、HtmlDrag の主要な流れを体験できます。