HtmlDrag の使用方法: HTML のインポート、編集、調整、エクスポート
このガイドでは、素材の開始から完成した HTML 結果に至るまでの実際のワークフローに従います。既存のページのインポート、パブリック URL のキャプチャ、AI リファイン の使用、サポートされているファイルの編集可能な HTML への変換、視覚的な編集、作業内容の保存、共有、エクスポートの方法を学びます。
⚡ 重要な事実の概要と 4 ステップのクイックスタート (HtmlDrag ワークフロー)
- 主な目的: 既存の HTML、AI 生成コード、ライブ Web ページ用のビジュアルな「ラストマイル」エディター。コードを書き直す必要はなく、ドラッグ、ドロップ、コピーの編集、レイアウトの調整、画像の交換を視覚的に行うだけです。
- 4 ステップのクイックスタート ワークフロー: ステップ 1 インポート (HTMLアップロード / コード貼り付け / Webページクローン / AI作成) → ステップ 2 視覚的な洗練 (ダブルクリックしてコピーし、要素をドラッグし、右側のパネルでテーブルとスタイルをカスタマイズします) → ステップ 3 ターゲットを絞った AI の改良 (特定の要素を選択し、ページ全体を再生成せずに AI にローカライズされた編集を促す) → ステップ 4 プラットフォームに依存しないエクスポート (ベンダー ロックインのない、純粋な運用準備が整った HTML コードをダウンロードします)。
- 5 つの主要なインポート方法: • Webページを複製 (公開 Web ページを編集可能なプロジェクトにキャプチャします); • HTML をアップロード (ローカルの .html ファイルをキャンバスにドロップします); • コードを貼り付け (ChatGPT/Claude/v0 からの AI コードのインスタント ビジュアル レンダリング); • AI リファイン (既存のページに対するプロンプト主導のローカライズされた編集)。 • ファイルを HTML に変換 (ドキュメントと画像を編集可能なレイアウトに変換します)。
- ゼロベンダーロックイン: エクスポートされたプロジェクトは 100% 標準 HTML/CSS のままです。いつでも独自のサーバー、Vercel、Netlify にデプロイしたり、コードベースに直接統合したりできます。
1. コンテンツを HtmlDrag に取り込む
すでに持っているマテリアルに一致する開始パスを選択してください。 HTML をアップロードしてコードを貼り付けると、視覚的に編集するために既存のページが開きます。 Web ページのクローン作成は、公開 Web ページをキャプチャします。 AI リファイン は、インポートされたページで対象を絞った編集を実行します。 ファイルを HTML に変換 は、サポートされているドキュメントと画像を編集可能な HTML ドラフトに変換します。
1.1 ホームワークスペース
ホーム ワークスペースには、既存の HTML 用の HTML エディター、インポートされたページへの対象を絞った変更用の AI リファインメント、およびソース素材から編集可能なページを生成するための ファイルを HTML に変換 という主要な開始クレジットがまとめられています。開始点と一致するエントリを選択し、エディターまたはプレビュー ワークスペースで続行します。
1.2 Webページを複製
Web ページのクローン作成は、公開 Web ページをキャプチャし、その結果を編集可能なプロジェクトに変換します。これは、ライブ参照ページはあるが、元の HTML ファイルがない場合に便利です。
パブリック URL を入力してください
開ける Webページを複製、パブリックを貼り付けます http:// または https:// アドレスを入力し、クリックします クローン。プライベート ネットワーク アドレス、ローカル ファイル パス、およびプライベート ログインが必要なページはサポートされていません。
Web ページのクローン作成: 公開 Web ページのアドレスを貼り付けてクローンを開始します。
キャプチャしたページを確認する
キャプチャが完了したら、プレビューまたはエディターのワークスペースでページを確認します。外部アセット、保護された画像、または JavaScript のみのコンテンツは正確に再現できない場合があります。結果が不完全な場合は、レンダリングされた HTML を貼り付けるか、代わりに元の HTML をアップロードしてください。
1.3 HTML をアップロード
使用 HTML をアップロード すでに持っている場合 .html または .htm ファイルを作成し、ページを最初から再構築せずに視覚的な変更を加えたいと考えています。
既存の HTML ファイルを選択します
選ぶ HTML をアップロードをクリックし、HTML ファイルをクリックまたはアップロード領域にドラッグします。ソース ページはエディターの開始点のままです。 HtmlDrag はページを静的なスクリーンショットに変換しません。
HTML のアップロード: 既存の .html または .htm ファイルを選択またはドラッグします
インポート結果を確認する
セキュリティ チェックと解析ステップが完了したら、プレビューまたはエディタを開いて、編集する前にレイアウト、テキスト、画像、リンク、外部リソースを確認します。
1.4 コードを貼り付け
使用 コードを貼り付け HTML がコード アシスタント、ローカル エディター、電子メール、または別のブラウザー タブにある場合。
レンダリングされた HTML を貼り付けます
ページに必要な構造とスタイルを含む完全な HTML をコード領域に貼り付け、[ エディタを開く。ページが AI ツールによって生成された場合は、ページの説明ではなく、視覚的に調整したいバージョンを貼り付けます。
コードを貼り付け: HTML ソース コードを挿入し、エディターで開きます。
リソースと安全上の注意を確認する
HtmlDrag は、インポートされたコンテンツを開く前にチェックします。スクリプト、ローカル リソース、外部フォント、またはブロックされた埋め込みに関する警告を確認し、ページがエディターで引き続き正しく表示されることを確認します。
1.5 対象を絞った AI の改良
AI リファイン は、焦点を絞った指示で既存のページを変更するためのものです。アップロードされた HTML ページ、貼り付けられたコード、またはキャプチャされた URL から開始し、ページの無関係な部分の再構築を AI に依頼することなく、何を変更するかを AI に指示します。
AI リファインメント: ターゲットを絞った編集のソースとして既存のページを選択します
絞り込みワークスペースを開く
AI リファイン エントリを選択し、ページのプレビューが読み込まれるまで待ちます。ワークスペースではページの横に説明領域が表示されるため、注意が必要なコンテンツを正確に選択できます。
AI リファインメント: 選択されたページが処理中です
変更の範囲を選択します
使用 クリックして選択してください 個々の要素または エリア選択 地域のために。ページにさらに多くの選択余地が必要な場合は、全画面モードに切り替えることもできます。次に、選択したコピーの修正、画像の置換、フォーカスされた視覚領域の調整など、要求された変更をプロンプト ボックスに説明します。
AI の改良: 命令が影響を与える要素をマークします。
確認して編集を続ける
結果の準備ができたら、更新されたプレビューを元のページと比較します。変更が正しい場合は、エディターで開いてさらに視覚的に編集します。十分に正確でない場合は、無関係な要素を変更する代わりに、選択範囲を狭めるか、命令を書き直してください。
AI の改良: 結果を確認し、エディターまたはプレビューで開きます。
1.6 AI でファイルを編集可能な HTML に変換
ファイルを HTML に変換 ソース素材から編集可能な HTML ページを作成します。これは、既存の HTML ではなく、PDF、Word ドキュメント、PPT/PPTX プレゼンテーション、Excel/XLSX スプレッドシート、CSV、Markdown またはテキスト ファイル、または画像を開始点とする場合に便利です。
ファイルから HTML へ: ドキュメント、スプレッドシート、プレゼンテーション、または画像から開始します。
ソースファイルをアップロードする
開ける ファイルを HTML に変換、ソース ファイルを添付し、何を構築するかを説明する短い手順を追加します。プロンプトでは、ページの目的、対象読者、トーン、構造、または視覚的な方向を指定できます。
ファイルを HTML に変換: ソース ファイルを添付し、必要なページを記述します。
コンテンツが整理されるまで待ちます
HtmlDrag は、まずソース素材を読み取り、そのコンテンツ階層を特定し、ページ レイアウトを計画します。長い文書、表、スライド、画像の処理には、異なる時間がかかる場合があります。
ファイルを HTML に変換: ソースは HTML ページに組み立てられています。
ファイルから HTML へ: システムは階層、レイアウト、コンポーネントを編成します。
編集可能な結果を確認する
ページの準備ができたら、プレビューを確認して選択します AI リファイン、 エディタで開く、 共有、 または HTMLをダウンロード 必要に応じて。出力は編集可能な HTML ページであり、同じビジュアル編集ワークフローを続行できます。
ファイルを HTML に変換: 生成された HTML ページはすぐに確認および編集できます。
2. ビジュアルエディターのコア機能
HtmlDrag の中心となるのは、実際の HTML 環境で直接作業できる強力な WYSIWYG エディタであり、コード編集の必要がなくなります。
2.1 エディターインターフェイスの概要
ビジュアル エディターは、キャンバス、ナビゲーション、右側のコントロール パネル、保存またはエクスポートのアクションを組み合わせたものです。選択した要素の輪郭がキャンバス上に表示され、右側のパネルには現在の選択に適用されるコントロールが表示されます。
ビジュアル エディター ワークスペース: 要素を選択して調整し、プロジェクトを保存またはエクスポートします。
左側のナビゲーションと履歴
左側のナビゲーションは、メイン ワークスペースと保存されたワークエリアを切り替えます。これを使用して、ホーム エントリ クレジットに戻るか、既存のプロジェクトを開きます。
中央のキャンバス領域
キャンバスには、インポートまたは生成された HTML ページが表示されます。要素を直接選択し、ページが複雑な場合は選択ツールを使用し、さらにスペースが必要な場合はズームまたは全画面コントロールを使用します。
右パネル (編集 / コンポーネント / レイヤー / ライブラリ)
右側のパネルには、選択した要素の編集、コンポーネントの挿入、レイヤー リストでの要素の検索、ライブラリから保存したコンポーネントの再利用を行うためのコントロールが含まれています。
上部と下部のアクション
上部の領域には、プロジェクトのタイトル、共有、画像、および HTML エクスポート アクションが表示されます。下部のコントロールは、プレビュー、復元、更新、およびバージョンの保存アクションを提供します。
2.2 基本操作と選択
エディターは、直接選択、領域選択、全画面表示、および集中編集をサポートしています。加えたい変更をカバーする最小の選択から始めます。
選択ビュー: 焦点を当てた変更を適用する前に、選択した要素を確認します。
要素の認識
使用 クリックして選択してください ページ上の 1 つの要素を選択します。エディターは要素のアウトラインを表示し、そのタグまたはコンテンツを選択状態で表示します。
エリア選択とフルスクリーン
使用 エリア選択 いくつかの近くの要素が同じ視覚領域に属している場合。使用 全画面表示 複雑なレイアウトを選択、確認、または調整するためにページにさらに多くのスペースが必要な場合。
全画面選択: 複雑なページでもより広いスペースで作業できます
ドラッグモードと編集モード
選択した要素の位置を変更するにはドラッグ モードを使用し、テキストまたはサポートされている要素のコンテンツを変更するには編集モードを使用します。右側のコントロールは、現在の選択に従って更新されます。
要素のロック、非表示、および削除
要素コントロールまたはコンテキスト メニューを使用して、誤って編集されないように要素をロックしたり、レイアウトの確認中に要素を非表示にしたり、現在の HTML から要素を削除したりできます。削除する前に選択内容を確認してください。以前の状態に戻す必要がある場合は、「元に戻す」または「復元」を使用します。
コンテキストメニュー
選択した要素を右クリックすると、コピー、貼り付け、ライブラリへの要素の追加、リンクの編集、レイヤー操作、ロック、非表示、削除などのクイック アクションにアクセスできます。
複数選択
複数の要素を一緒に確認または調整する必要がある場合は、複数選択を使用します。変更を適用する前に選択要素リストを確認し、影響を受けるべきでない項目を選択から削除してください。
2.3 キャンバスのショートカット
キーボード ショートカットをマスターすると、編集効率が大幅に向上します。キャンバス領域でサポートされている主なショートカットは次のとおりです。
| アクションショートカット | |
| ズーム | Ctrl / Cmd + マウスホイール |
| パン | スペース + マウスドラッグ |
| 複数選択 | Shift + クリック |
| コピー | Ctrl / Cmd + C |
| ペースト | Ctrl / Cmd + V |
| 元に戻す | Ctrl / Cmd + Z |
| 消去 | 削除 / バックスペース |
2.4 右パネル - 「編集」タブ
「編集」タブは最も頻繁に使用される領域で、モードの切り替えや豊富なスタイル調整ツールが提供されます。要素を選択すると、パネルには要素のタイプに基づいて編集オプションがインテリジェントに表示されます。
「編集」タブ: モード切り替えとスタイルツール
モード切り替え
パネルの上部には、エディターの対話動作を制御する 4 つのモード スイッチがあります。各トグルは個別にオンまたはオフにでき、現在の状態を示すメッセージ通知が表示されます。
| モード説明 | |
| コンポーネントの編集 | 有効にすると、インタラクティブな機能コンポーネント (ボタン、フォーム入力など) を選択して調整できます。無効にすると、テキスト コンテンツのみを編集できます。正確なフォーム要素の操作が必要なシナリオに最適です。 |
| リンクナビゲーション | 有効にすると、編集モードでリンクされた要素をクリックすると、ターゲット URL に直接移動します。無効にするとナビゲーションがブロックされるため、リンク要素自体を編集できます。注: この設定は、プレビューまたはダウンロードされたリンクの機能には影響しません。 |
| 削除モード | 有効にすると、コンテキスト メニューを使用せずに要素をクリックするだけで要素を削除できます。無効にすると、通常の編集モードが再開されます。複数の要素を素早くクリアするのに最適です。 |
| 装飾層 | 有効にすると、空のコンテナーと装飾要素 (境界線コンテナー、背景レイヤーなど) を識別して編集できます。無効にすると、実際のコンテンツを持つ要素のみが認識されます。複雑なページ レイアウトの場合、この機能を有効にすると、装飾要素をより細かく制御できるようになります。 |
ヒント: 編集中はコンポーネントを編集できるよう、リンクナビゲーションは初期状態で無効になっています。リンクを開くには、編集パネルで「リンクナビゲーション」を有効にしてください。編集モードでは、コンテンツ保護のためフォーム送信もブロックされます。
テキストスタイル
テキスト要素を選択するか、編集モードに入ると、パネルには次の書式設定オプションを備えた包括的なテキスト スタイル ツールが表示されます。
テキストスタイル: フォント、サイズ、色の設定
| 機能説明 | |
| フォント | システム フォント、英語フォント (Inter、Roboto、Open Sans など)、および中国語フォント (SimSun、SimHei、Microsoft YaHei、Source Han Sans など) から選択します。 |
| フォントサイズ | 12 ピクセルから 72 ピクセルまでの複数のプリセット サイズ、またはカスタム サイズを手動で入力します。 |
| 文字色・背景色 | キャンバス カラー ピッカーのサポートにより、カラー ピッカーを使用してテキストの色と背景のハイライトを設定します。 |
| 太字、斜体、下線、取り消し線 | ワンクリックで太字、斜体、下線、取り消し線の効果を切り替えます。 |
| 位置合わせ | 4 つのテキスト配置オプション (左、中央、右、両端揃え)。 |
| 行の高さ、文字間隔、段落間隔 | 行の高さ (1 倍から 3 倍)、文字間隔、段落間隔を微調整して、タイポグラフィを最適化します。 |
| 上付き文字、下付き文字 | 選択したテキストを数式、化学表記などの上付き文字または下付き文字として書式設定します。 |
| 箇条書き、番号付きリスト | テキストを順序なし (箇条書き) または順序付き (番号付き) リストにすばやく変換します。 |
| インデント制御 | インデントを増減して段落階層を調整します。 |
要素のスタイル
要素を選択した後、要素スタイル ツールを使用して外観を調整します。
| 機能説明 | |
| ボーダースタイル | 境界線の種類 (なし、実線、破線、点線)、幅 (1px ～ 10px)、および色を設定します。 「境界線をクリア」をクリックすると、すべての境界線がすぐに削除されます。 |
| コーナー半径 | 四隅すべての角の半径を調整して、角丸長方形または円形の効果を作成します。 |
| 不透明度 | スライダーを使用して要素の不透明度 (0% ～ 100%) を調整し、透明効果を実現します。 |
| 影 | 素早い奥行き効果を実現する 4 つのシャドウ プリセット (なし、ライト シャドウ、ミディアム シャドウ、ディープ シャドウ)。 |
| 位置とサイズ | 要素の X/Y 座標と幅/高さの値を正確に設定します。 |
| アスペクト比をロックする | 有効にすると、幅を調整すると高さが自動的に比例して拡大縮小されます。 |
画像スタイル
画像要素を選択した後、表示オプションを調整し、画像を置き換えます。
| 機能説明 | |
| 画像のフィット | 4 つのフィット モード - 含む (比例的に拡大縮小)、カバー (塗りつぶし)、塗りつぶし (ストレッチ)、なし (元のサイズ)。 |
| 位置 | 9 グリッド ポジショナーを使用して、コンテナ内の画像の配置を設定します (左上、中央上、右上、左中央、中央、右中央、左下、中央下、右下)。 |
| 画像を置き換える | 新しいローカル イメージをアップロードするか、置き換える URL を入力します。ローカル アップロードでは、JPG、PNG、GIF、WebP、およびその他の一般的な形式がサポートされます。 |
テーブルスタイル
表または表のセルを選択すると、専用の表編集ツールが使用可能になります。詳細な手順については、を参照してください。 4.10 テーブルの編集。
表のスタイル: 行/列の操作、境界線、セルの設定
| 機能説明 | |
| 行/列の操作 | 行を上/下、列を左/右に挿入、または行/列を削除します。 |
| セルアライメント | セルの内容の水平方向の配置 (左、中央、右) と垂直方向の配置 (上、中央、下) を設定します。 |
| ボーダースタイル | 表の境界線の幅、スタイル（実線、破線など）、および色を調整します。 |
| セルの背景 | セルの背景色を設定します。ヘッダーや重要なデータを強調表示するのに最適です。 |
| 結合/分割 | 隣接するセルを選択して 1 つに結合します。結合されたセルは分割して元のセルに戻すことができます。 |
リンク編集
クリックして移動するリンクを任意の要素に追加するか、既存のリンクを編集します。
| 機能説明 | |
| リンクの挿入/編集 | ターゲット URL を入力して、選択した要素にクリック ナビゲーションを追加します。 http/https リンクをサポートします。 |
| リンクを削除 | 要素からリンクを削除し、通常の要素に戻します。システムは実行前に削除するリンクの数を確認します。 |
整列ツール (複数選択)
複数の要素が選択されている場合、パネルには、要素のレイアウトをすばやく整理するのに役立つ配置ツールと配分ツールが表示されます。
| 機能説明 | |
| 左/右/上/下の端を揃える | 選択したすべての要素を要素の左端/右端/上端/下端に揃えます。 |
| 水平方向/垂直方向の中央揃え | 選択したすべての要素の中央のクレジットを水平または垂直に揃えます。 |
| 水平方向/垂直方向に配置 | 選択した複数の要素を水平または垂直に等間隔で配置します。 |
2.5 右パネル - 「コンポーネント」タブ
[コンポーネント] タブには、さまざまな要素タイプのクイック挿入オプションが用意されており、新しいコンテンツをキャンバスに迅速に追加できます。ボタンをクリックして、対応するコンポーネントを挿入します。
「コンポーネント」タブ: ワンクリックでさまざまな要素を挿入
| コンポーネントの説明 | |
| テキストの挿入 | 編集可能なテキスト ブロックをキャンバスに挿入します。挿入後にダブルクリックして編集モードに入り、コンテンツを変更します。 |
| 挿入ボタン | 事前にスタイル設定されたボタン要素を挿入します。ボタンのテキストを編集し、クリック リンクを追加できます。 |
| 画像の挿入 | ローカルアップロードまたはURL入力をサポートする画像アップロードダイアログを開きます。単一ファイルのサイズとバッチ アップロードの制限が適用されます。詳細については、アップロード インターフェイスを参照してください。 |
| アイコンの挿入 | 矢印、図形、シンボル、ソーシャル、装飾、共通の 6 つのカテゴリを含むアイコン ピッカーを開きます。挿入する前にアイコンの色とサイズを設定します。 |
| テーブルの挿入 | テーブル サイズセレクターを開きます。カーソルを合わせて行と列 (例: 3×4 表) を選択し、クリックして挿入します。 |
| リンクを挿入 | リンクされたテキスト要素をキャンバスに挿入します。リンク先のURLを入力し、テキストを表示します。 |
| 長方形/円の挿入 | 基本的な形状要素を挿入します。要素スタイル ツールを使用して、装飾やレイアウトの境界線、背景色、半径、その他のプロパティを調整します。 |
2.6 右パネル - [レイヤー] タブ (DOM ツリー)
[レイヤー] タブには、キャンバス上のすべての編集可能な要素のリスト ビューが表示され、フィルタリング、バッチ操作、および正確な配置をサポートします。これは、複雑なページ要素を管理するための強力なツールです。
[レイヤー] タブ: レイヤー管理とバッチ操作
エレメントカードリスト
パネルには、管理可能なすべての要素がカードとして表示されます。各カードには要素のタグ タイプ (DIV、IMG、SPAN など) とレイヤー レベルが表示され、テキスト要素にはコンテンツのプレビューが表示されます。装飾レイヤー要素には「装飾」バッジが付けられます。クイックロック/ロック解除および非表示/表示アイコンが各カードの右側に表示されます。
フィルターオプション
フィルター ボタンをクリックして、次のオプションを使用して要素の状態別にリストをフィルターします。
| フィルター説明 | |
| 全て | 管理可能な要素をすべて表示 |
| ロックされています | ロックされた要素のみを表示 |
| ロック解除済み | ロックされていない要素のみを表示 |
| 隠れた | 非表示の要素のみを表示 |
| 見える | 表示可能な要素のみを表示 |
バッチ操作
カード リストで複数の要素を選択した後、一括操作ボタンを使用して統一処理を行います。
| 操作説明 | |
| すべて選択/選択を反転 | すべての要素をすばやく選択するか、現在の選択を反転します |
| 選択したものをロック / 選択したものをロック解除 | 選択した要素をバッチでロックまたはロック解除します。ロックされた要素は編集または移動できません |
| 選択項目を非表示 / 選択項目を表示 | 選択した要素をバッチで非表示または表示します。非表示要素はキャンバス上には表示されませんが、HTML には残ります。 |
| 選択したものを削除 | 選択した要素を確認プロンプト付きで一括削除する |
精密トグル
[レイヤー] タブには、要素認識の精度を制御するための精度切り替えがあります。
| 状態説明 | |
| 精度オン | 自動重複排除。重複カードを減らすためにホスト要素のみを表示します。 |
| 精度オフ | すべての候補要素 (インライン フラグメントを含む) を表示し、正確なインライン要素操作に最適です |
カードをクリックして検索します
任意の要素カードをクリックすると、キャンバスが自動的にスクロールされ、対応する要素が強調表示されるため、ページ上の特定のコンポーネントを簡単にすばやく見つけることができます。これは、複雑なページ レイアウトや階層化されたページ レイアウトを操作する場合に特に便利です。
2.7 右パネル - [ライブラリ] タブ (お気に入り)
「ライブラリ」タブは個人用コンポーネント ライブラリで、頻繁に使用する要素やコンポーネントを保存して、さまざまなプロジェクト間で再利用できるため、クリエイティブな効率が向上します。
「ライブラリ」タブ: 個人コンポーネントライブラリ
お気に入りのコンポーネントリスト
パネルには、保存したすべてのコンポーネントがカードとして表示され、それぞれにサムネイルと名前が表示されます。サムネイルは保存時に自動生成されます。名前のないコンポーネントは「無題」として表示されます。
お気に入りを検索
検索ボックスを使用すると、保存されたコンポーネントを名前ですばやく検索できます。入力すると、リストがリアルタイムでフィルタリングされます。
お気に入りのコンポーネントを挿入
ライブラリ カードの [挿入] ボタンをクリックして、そのコンポーネントを現在のキャンバスに追加します。挿入したコンポーネントは通常どおりに編集および調整できます。
お気に入りの名前変更/削除
各図書館カードには、「名前変更」および「削除」オプションがあります。名前を変更すると、後でコンポーネントを見つけやすくなります。削除すると、保存されたコンポーネントが完全に削除されます。使用には注意が必要です。
ライブラリに追加する方法
キャンバス上の任意の要素を選択し、コンテキスト メニューから [ライブラリに追加] を選択して、その要素とその子をコンポーネントとして保存します。成功すると、「ライブラリに追加されました」という確認メッセージが表示されます。
2.8 コンテキストメニュー
選択した要素を右クリックするとコンテキスト メニューが開き、一般的なアクションにすばやくアクセスできます。メニューのコンテンツは、選択した要素タイプに基づいて動的に調整されます。
コンテキスト メニュー: 一般的なアクションへのクイック アクセス
| メニュー項目説明 | |
| コピー/ペースト | 選択した要素をクリップボードにコピーするか、クリップボードの内容をキャンバスに貼り付けます。作業をまたいだコピー＆ペーストをサポートします。 |
| ライブラリに追加 | 選択した要素を個人ライブラリに保存して、他のプロジェクトで再利用します。 |
| リンクの追加/編集/削除 | クリックして移動するリンクを要素に追加するか、既存のリンクを編集/削除します。削除すると確認が求められます。 |
| 画像を置き換える | 画像要素のみに表示されます。すぐにローカルアップロードまたは URL 画像に置き換えます。 |
| 上に移動 / 下に移動 | 重なり順で要素の位置を調整します。上に移動すると前に進みます。 |
| 前面に移動 / 背面に移動 | 要素をすべての要素の前面または背面に直接移動します。 |
| ロック/ロック解除 | ロックされた要素は編集または移動できないため、誤って変更されることはありません。編集可能に戻すにはロックを解除します。 |
| 非表示/表示 | 要素を HTML 内に保持したまま、キャンバスから一時的に非表示にします。 「表示」は可視性を回復します。 |
| 消去 | 選択した要素を完全に削除します。複数の要素を選択すると、その数が表示されます。 |
テーブル別メニュー
テーブルのセルを右クリックすると、メニューに追加のテーブル固有の操作が表示されます。
| メニュー項目説明 | |
| 行の削除 | 現在のセルを含む行全体を削除します (最後の行は削除できません) |
| 列の削除 | 現在のセルを含む列全体を削除します (最後の列は削除できません) |
2.9 テーブルの編集
表または表のセルを選択すると、右側のパネルに、包括的な表のスタイル設定および構造調整機能を備えた専用の表編集ツールが表示されます。
表の編集：行・列の操作とスタイル設定
行と列の操作
テーブルエディターパネルの「行と列」セクションには、以下が含まれます。
| 操作説明 | |
| 行を上/下に挿入 | 現在の行の上または下に新しい行を挿入します |
| 行の削除 | 現在選択されている行を削除します（最後の行は削除できません） |
| 列を左/右に挿入 | 現在の列の左側または右側に新しい列を挿入します |
| 列の削除 | 現在選択されている列を削除します (最後の列は削除できません) |
セルの結合/分割
隣接する複数のセルを選択した後、「セルの結合」を使用してそれらを1つに結合します。結合されたセルの場合は、「セルの分割」を使用して元の複数のセルに戻します。
セルアライメント
セルの内容の配置を 2 次元で設定します。
| 寸法オプション | |
| 水平 | 左、中央、右 |
| 垂直 | 上、中、下 |
ボーダースタイル
以下を含む表の境界線の外観をカスタマイズします。
| プロパティの説明 | |
| 枠線の幅 | 枠線の太さを設定する |
| ボーダースタイル | 実線、破線、点線、二重、なし |
| 枠線の色 | カラーピッカーで境界線の色を選択します |
「適用」をクリックして変更を保存します。
セルの背景
カラー ピッカーを使用してセルの背景色を設定します。ヘッダーや重要なデータ行を強調表示するのに最適です。
2.10 ズームコントロールとビューポートのプリセット
キャンバスの下部にあるズーム コントローラーを使用すると、ズームとビューポート サイズを調整できるため、さまざまなデバイス サイズで作業をプレビューするのに役立ちます。
ズーム コントロール: キャンバスのズームとビューポート サイズを調整します。
ズームイン/ズームアウト/リセット
「+」および「-」ボタンを使用してキャンバス ビューを拡大または縮小するか、Ctrl/Cmd + マウス ホイールを押したままにしてすばやくズームします。パーセント値をクリックすると、デフォルトのズームにリセットされます。スペースを押したままドラッグしてキャンバスをパンします。
ビューポート サイズのプリセット
ビューポート セレクターをクリックしてプレビュー サイズを切り替え、さまざまなデバイスでの表示をシミュレートします。
| ビューポート サイズ説明 | |
| 自動 | コンテンツのサイズに合わせて、ほとんどのシナリオに適しています |
| デスクトップ 1920×1080 (デフォルト) | フルHDデスクトップモニター |
| デスクトップ 1440×900 | 一般的なノートパソコンの画面 |
| デスクトップ 1366×768 | 一般的なノートパソコンの解像度 |
| デスクトップ 1280×720 | HD解像度 |
| タブレット 1024×768 | 標準的なタブレット端末 |
| モバイル 375×812 | iPhone および同様のモバイルデバイス |
パッチのプレビュー
特殊な構造を持つ HTML ページの場合、表示を最適化するために 3 つのプレビュー パッチを使用できます。パッチを有効または無効にすると、プレビューが自動保存され、更新されます。
| パッチの説明 | |
| USP — 非常に縦長のページを安定化します | 非常に高いキャンバスまたは境界のないキャンバスを最適化し、ジッターを軽減します。複雑な/境界のない静的ファイルに適しています |
| UFP — ビューポートの幅を修正する | ビューポートの幅を制限し、適切な複雑なレイアウト表示を復元します。 |
| SHP — 異常なサイズを最適化する | 互換性を向上させるために異常に構造化された HTML を最適化します。 |
ヒント: パッチの効果がはっきりしない場合は、まず「初期 HTML を復元」を試してから、パッチを再度有効にしてください。
2.11 HTMLソースエディタ
HTML エディターを使用すると、作業の完全な HTML ソース コードを直接表示して編集できます。微調整やカスタム コードの追加が必要な上級ユーザーに最適です。この機能は Pro のみです。
HTML エディター: ソース コードを直接編集 (Pro)
完全な HTML の表示/編集
HTML エディターを開くと、完全な HTML ソース コード (<!DOCTYPE html> を含む) が表示されます。コードを直接編集できます。保存すると変更が適用されます。
検索と置換
Ctrl+F を使用して検索を開き、キーワードを入力してコードをすばやく見つけます。 Ctrl+H を使用して、バッチ テキスト置換の置換を開きます。ツールバーには、一致数 (例: 「3 / 15」) が表示され、個別またはすべて置換のオプションが表示されます。
ラインに移動
Ctrl+G またはツールバーのジャンプ機能を使用して行番号を入力すると、その行にすばやく移動できます。これは、大きな HTML ファイルの場合に便利です。
大文字と小文字を区別する
大文字と小文字を区別するコンテンツを正確に一致させるには、検索中に「大文字と小文字を区別する」オプションを有効にします。
ワードラップ
ワードラップを有効にすると、長いコード行が自動的に折り返され、水平スクロールなしで表示されます。
コピー/保存
[HTML をコピー] をクリックして、完全なソース コードをクリップボードにコピーします。編集後、「保存」をクリックして変更を適用します。コンテンツが空であるか、構文エラーが含まれている場合は、適切なメッセージが表示されます。
注: HTML コンテンツがストレージ上限を超えると、保存時に「ストレージ容量が不足しているため、この編集内容を保存できません」と表示されます。不要なコンテンツを削除するか、プランをアップグレードして容量を増やしてください。
2.12 下部ツールバー
下部のツールバーには、プレビュー、元に戻す/やり直し、復元、保存機能などのエディターの主要なアクション ボタンが表示されます。
エディター ワークスペース: プレビュー、復元、更新、バージョンの保存のための下部コントロール
プレビュー (新しいウィンドウで開きます)
プレビュー ボタンをクリックすると、新しいウィンドウで作業の完全なプレビューが開き、実際の表示結果が表示されます。プレビュー ページには、これが再利用不可能なリンクを含む編集段階のプレビューであることをユーザーに通知する一時的なプレビュー通知が表示されます。
元に戻す/やり直す
元に戻すは、最後の操作を元に戻します。やり直しは、元に戻した操作を復元します。複数の元に戻す/やり直しのステップをサポートします。 Ctrl+Z (元に戻す) および Ctrl+Y (やり直し) でも利用できます。
プレビューを更新
「更新」をクリックすると、プレビュー領域が再ロードされます。システムはまず現在のコンテンツを保存し、次にキャンバスを更新して最新の状態を表示します。大幅な編集を行った後に表示を同期するのに役立ちます。
最後に保存した状態を復元する
作業を最後に手動で保存した状態に復元します。保存されていない編集内容はすべて失われます。使用には注意が必要です。実行する前に、システムにより確認が求められます。
初期HTMLを復元する
作品の HTML を最初に作成したときの状態に戻します。編集履歴はすべて消去されます。この操作は元に戻すことができません。重要なコンテンツを必ずバックアップしてください。
保存
現在の変更をすべて手動で保存します。システムは自動保存もサポートしていますが、データの安全性を確保するために、重要な編集後は手動で保存することをお勧めします。完了すると「保存に成功しました」と表示されます。
2.13 上部のツールバー
上部のツールバーには作業情報とクイック アクション ボタンが表示され、共有およびダウンロード機能にすばやくアクセスできます。
エディター ワークスペース: HTML ダウンロード、画像エクスポート、共有用のトップ コントロール
プロジェクトのタイトル (ダブルクリックして編集)
上部には現在のプロジェクトのタイトルが表示されます。タイトル領域をダブルクリックして編集モードに入り、名前を変更します。タイトルを空にすることはできません。成功すると「タイトルが正常に更新されました」と表示されます。名前のないプロジェクトは「無題の作品」として表示されます。
共有ボタン
共有ボタンをクリックして作業共有を有効にし、アクセス可能なリンクを生成します。見る 4.16 共有機能 詳細については。この機能は Pro のみです。
ダウンロードボタン
右側には「画像としてダウンロード」ボタンと「HTMLとしてダウンロード」ボタンがあります。見る 4.15 HTMLのエクスポートとダウンロード 詳細については。
3. プロジェクト管理、共有、エクスポート
編集後、クリーンな HTML ファイルをエクスポートしたり、パスワード付きの安全なプレビュー リンクを生成したり、プロジェクト ワークスペースでプロジェクトのバージョンを管理したりできます。
3.1 HTMLのエクスポートとダウンロード
使用 HTMLをダウンロード 右上のツールバーにある をクリックして、エディターで確認したバージョンをエクスポートします。エクスポート ダイアログでは、編集されたページが元のソースから分離され、コピーと AI ハンドオフのオプションも提供されます。
HTML のエクスポート: 編集したソースまたは元のソースを選択し、HTML をコピーするか、AI に送信します。
編集されたHTML
の 編集されたHTML タブでは、キャンバス上で行われた変更を含む現在のバージョンがエクスポートされます。
オリジナルのHTML
の オリジナルのHTML タブでは、最初のバージョンを比較または復元する必要があるときに、最初にインポートされたソースを利用できるようにしておきます。
HTMLをコピーしてAIにエクスポート
HTMLをコピー 現在のソースをクリップボードにコピーします。 AIへのエクスポート 別の AI ワークフローが現在の HTML を読み取り、編集結果から続行できるようにハンドオフ リンクを作成します。
3.2 共有機能とパブリック プレビュー
共有機能では、現在の作品のパブリック リンクが作成されるため、他の人はエディターに入ることなく作品を閲覧できます。以下のスクリーンショットは、リンクを公開する前に利用できる共有設定を示しています。この機能は Pro ユーザーが利用できます。
プロジェクトを共有: リンクの長さを選択し、どの通知またはサイドバーを表示するかを決定します
共有設定を選択します
クリック 共有 7 日、30 日、90 日、またはプランの残りの期間など、利用可能な期間を選択します。共有リンクは、プランの有効期限を超えて存続することはできません。
表示オプション
共有ページの安全に関する通知を非表示にするかどうか、および右側のサイドバーを非表示にするかどうかを選択できます。これらのオプションは、プロジェクト内の編集可能なソースではなく、訪問者のビューに影響します。
ページの共有とアクセス
共有後、生成されたリンクをコピーし、レビュー担当者またはクライアントに送信します。ページが公開されなくなったら、共有コントロールに戻ってリンクを更新したり、共有を停止したりできます。
3.3 マイプロジェクトのショートカットバー
左側の「マイ プロジェクト」ショートカット バーを使用すると、プロジェクト リストを展開/折りたたんだり、プロジェクト間をすばやく切り替えたりできるため、複数の作成間のスムーズな移行が容易になります。
展開と折りたたみ
左上の「マイ プロジェクト」ボタンをクリックして、サイドバーの作業リストを展開します。もう一度クリックするか、サイドバーの外側をクリックしてサイドバーを折りたたみます。展開すると、履歴プロジェクトのサムネイルとタイトルを視覚的に参照できます。
プロジェクトの切り替え
リスト内の任意のプロジェクト カードをクリックすると、そのコンテンツがエディターにすぐにロードされます。これにより、ホームページやプロフィールに戻ることなく、さまざまなデザイン ドラフトをすばやく比較して変更することができます。
3.4 バージョン履歴スナップショット
左側のサイドバーの「マイ プロジェクト」(履歴) から、過去の作品に簡単にアクセスできます。すべての編集記録が時系列でリストされます。
クイック選択と編集
リスト内の任意のレコードをクリックすると、そのレコードがエディターにすぐにロードされ、再インポートせずに中断したところから続行します。
プレビューウィンドウの詳細
履歴レコードの上にマウスを置くと、そのプレビュー ウィンドウが表示されます。プレビュー ウィンドウでは、次のことができます。
- タイトルを直接編集する: タイトルのテキストをクリックすると、プロジェクト名を即座に変更できます。
- 共有ステータスの表示: アイコンは、作品が現在共有されているかどうかを示します。
- クイックアクション: 編集、削除、その他のショートカットにアクセスします。
履歴: 過去のプロジェクトのクイック プレビューと管理
3.5 プロジェクト管理と組織
プロジェクト管理モジュールには、作成したすべてのプロジェクトが表示され、表示、編集、共有、削除の操作がサポートされます。
ワークリストとフィルター
プロジェクトはカードまたはリストとして表示されます。以下を使用してフィルタリングできます。
- 検索：作品コードまたはタイトルを入力して検索します
- タイプフィルター: AI ジェネレーター、ファイルのアップロード、Web ページのクローン、コードを貼り付けなどでフィルターします。
- 日付範囲: 開始日と終了日を選択して、特定の期間のプロジェクトをフィルタリングします
- 並べ替え：新しい順、古い順、いいね数、閲覧数で並べ替えます
プロジェクト管理: すべてのプロジェクトを表示、フィルタリング、管理します
プロジェクトの表示と編集
プロジェクト カードの [表示] ボタンをクリックしてプレビューします。プレビュー インターフェイスでは、次のことができます。
- プロジェクトのタイトルを編集します（編集するにはタイトルをダブルクリックします）
- 「編集」をクリックしてビジュアルエディタに入り、編集を続けます。
- 作品の保存履歴を表示し、特定のバージョンに復元します
共有状況の管理
Pro ユーザーはプロジェクトを共有し、リンクを介して他の人が閲覧できるようにすることができます。
- 共有を有効にする: 「共有」ボタンをクリックすると、7日間有効な共有リンクが生成されます。
- 共有を更新する: すでに共有されているプロジェクトのリンクを更新して、有効期間を更新できます。
- 共有を停止する: 「共有を停止」をクリックすると、リンクがすぐに無効になります。
プロジェクトの削除
プロジェクトカードを削除するには、プロジェクトカードの「削除」ボタンをクリックします。誤って削除されることを防ぐために、システムは 2 つの確認ダイアログを表示します。
- 最初の確認: この作品を削除するかどうかを尋ねます
- 2 番目の確認: 削除は元に戻せないことを通知します
ヒント: 一度に削除できるレコードは最大 3 件です。作品を削除すると、その作品が使用していたストレージ容量が解放されます。
プロジェクト ページは、すべての作品を表示および管理するための専用スペースです。サイドバーまたはユーザー メニューからすぐにアクセスできます。
作品展示
このページには、すべてのプロジェクトがカードとして表示され、それぞれに次の内容が含まれます。
- サムネイルプレビュー: 作品を視覚的にプレビューして簡単に識別できます
- プロジェクトタイトル: プロジェクト名を表示します。クリックして編集します
- 作成時間：作品が作成されたときの記録
- 共有状況: 作品が現在共有されているかどうかを示します
プロジェクト: すべての作品を 1 か所で表示および管理します
クイックアクション
各プロジェクト カードには、便利なアクション ボタンが用意されています。
- 編集: ビジュアル エディターに入り、作成を続行します。
- 共有: 共有リンクを生成または管理します (Pro のみ)
4. システムのヒントとトラブルシューティング
使用中に、システムのアラートや制限が発生する場合があります。ここでは、一般的なシステムに関するヒントの説明と提案を示します。
4.1 HTML 検出とホットリンク アラート
インポートの品質とエディターの安定性を確保するために、システムは URL とファイルを自動的にスキャンし、潜在的な問題について警告します。
ローカルリソースの検出
ページにローカル パスが含まれている場合 (例: file:// または C:/)、リソースは読み込まれません。 提案: すべてのリソースがパブリック HTTP/HTTPS リンクを使用していることを確認してください。
画像ホットリンク保護
一部のサイトでは、画像への外部アクセスをブロックしています。 提案: 「画像の置換」を使用して、ローカル ファイルをアップロードするか、公共サービスでホストします。
ダイナミック レンダリング ページ (SPA)
JavaScript (SPA) に完全に依存しているページは、動的 DOM が直接キャプチャされないため、空または不完全としてインポートされる場合があります。 提案: ブラウザから表示された HTML をコピーして「コードを貼り付け」を使用します。
外部フォント/アイコンライブラリ
CORS ヘッダーが欠落しているフォントまたはアイコンは正しく表示されない場合があります。 提案: エディターでシステム フォントまたはライブラリ アイコンに置き換えます。
埋め込みコンテンツ (iframe)
セキュリティのため、一部の iframe コンテンツはブロックされているか、非対話型である場合があります。システムは可能な場合にはプレースホルダーを保持します。
4.2 ストレージと使用制限
HtmlDrag は、プランに基づいてリソース クォータを適用します。 「ストレージ制限に達しました」または「作業制限に達しました」というアラートが表示される場合があります。
ストレージ制限に達しました
スペースが不足している場合、編集内容を保存したり、ファイルをアップロードしたりすることはできません。 解決:
- 「プロジェクト」内の古い項目を削除して、スペースを解放します。
- Pro でより多くの容量を取得するには、ダイアログで [今すぐアップグレード] をクリックします。
プロジェクト数の制限
無料ユーザーには保存されるプロジェクトの数に制限があります。古いプロジェクトを削除するか、アップグレードしてこの制限を増やしてください。
画像のアップロード制限
システムは、単一ファイルのサイズとバッチ制限をチェックします。 「ファイル サイズが制限を超えています」または「バッチ サイズを超えています」と表示される場合は、画像を圧縮するか、小さいバッチでアップロードしてください。プロ ユーザーはより高い制限を享受できます。
4.3 セキュリティサンドボックスとサニタイズ
組み込みのセキュリティ スキャンは、URL のインポート時、ファイルのアップロード時、またはコードを貼り付け時にコンテンツのリスクを自動的に評価し、アカウントを保護します。
リスクレベル
XSS、悪意のあるスクリプト、危険なタグなどの脅威に基づいて、リスクは次のように分類されます。
- 低リスク: マイナーな警告。通常は安全に続行できます。
- 中リスク: 潜在的な問題。慎重に進んでください。
- 高リスク: 重大なリスク。ソースが信頼できる場合にのみ続行してください。
- 重大なリスク: マルウェアまたはフィッシング コンテンツが含まれています。すぐにブロックされました。
セーフモード
リスクのあるファイルについては、システムは自動サニタイズなどの「安全対策」を提供します。 「セーフ モードで続行」を選択すると、システムはレイアウトと編集可能性を維持しながら危険なコードを削除します。
4.4 システム通知とメッセージ
メッセージ モジュールは、アカウント ステータス、支払いリマインダー、サブスクリプション有効期限アラート、機能更新などの重要なシステム通知を受け取ります。
メッセージ: システム通知とアラートを受信します。
システムメッセージ一覧
メッセージ リストは時系列で並べ替えられ、タイトル、概要、作成時間、有効期限が表示されます。メッセージをクリックして詳細を表示するか、アクションを実行します (例: 「支払いを続行」、「今すぐ更新」)。
未読フィルター
右上の [未読のみ] チェックボックスをオンにすると、未読メッセージをすばやくフィルタリングできるため、重要な通知に集中できます。
すべて既読としてマーク
[すべて既読としてマーク] ボタンをクリックすると、現在のリスト内のすべてのメッセージが即座に既読としてマークされ、赤い点のインジケーターが消えます。
メッセージの詳細
メッセージ カードをクリックすると、通知の全内容が表示されます。注文または購読メッセージの詳細には、便宜を図るためのクイック アクション ボタンが含まれることがよくあります。
4.5 フィードバックとサポート
問題が発生した場合や提案がある場合は、フィードバック モジュール経由で送信してください。画像をアップロードして、問題をより詳しく説明できます。
フィードバック: 問題や提案を送信します。
フィードバックリストとステータス
リストには、提出履歴と現在のステータスが表示されます。
- 進行中: フィードバックが送信され、管理者のレビューを待っています。
- 返信しました: 管理者が応答しました。クリックして表示します。
- 閉店: フィードバックはアーカイブまたは解決されました。それ以上の返信は許可されません。
新しいフィードバックを送信する
[新しいフィードバック] をクリックし、内容を入力します (必須、10 文字以上)。 「画像をアップロード」（それぞれ最大 2MB）してスクリーンショットを提供できます。完了したら、「フィードバックを送信」をクリックします。
フィードバックの詳細と会話
リスト項目をクリックすると、メッセージや管理者の返信を含む完全な会話履歴が表示されます。上部にはフィードバック ID と添付ファイルが表示されます。
返信を続ける
「進行中」または「返信済み」フィードバックの場合は、下部にある入力ボックスを使用して詳細情報を提供するか、解決されるまで管理者に返信してください。
フィードバックを送信するときは、関連するスクリーンショットやファイルを添付して、要望をより正確に伝えられます。フィードバックの詳細ページでは、管理者の返信と会話履歴も確認でき、対応状況を追跡できます。
すべてのフィードバックを大切に受け止め、できるだけ早く対応します。ご参加とご支援に感謝します。
5. アカウント、クレジット、サブスクリプション (付録)
アカウント設定、ログインセキュリティ、クレジット残高、サブスクリプションプランを管理します。
5.1 サインアップ
HtmlDrag は電子メール登録を使用します。いくつかの基本的な詳細を入力するだけでアカウントを作成できます。登録が成功すると、自動的にサインインされ、ホームページにリダイレクトされます。
メール登録
登録ページで次の手順を実行してアカウントを作成します。
- メールアドレスを入力してください: よく使用する電子メール アドレスを入力します。これは、ログイン認証情報および通知チャネルとして機能します。電子メールの形式が正しいことを確認してください。例:
[email protected]。 - パスワードを設定する: パスワードには、8 ～ 32 文字の長さの文字と数字の両方を含める必要があります。アカウントを保護するために強力なパスワードを使用することをお勧めします。
- パスワードを認証する: パスワードを再入力して、両方のエントリが一致していることを確認します。
- ニックネームの設定（オプション）：ニックネームをカスタマイズできます。空白のままにすると、システムによってデフォルトのニックネームが自動的に生成されます。
- 規約に同意する：「利用規約とプライバシーポリシーを読んで同意します」にチェックを入れ、「登録」ボタンをクリックすると登録が完了します。
登録ページ: メールアドレスと基本情報を入力してアカウントを作成します
メール認証とクレジット特典
登録が成功すると、システムは確認メールを受信箱に送信します。メール認証が完了すると、AI ジェネレーターと Web ページのクローン機能に使用できるボーナス クレジットを受け取ります。電子メールが届かない場合は、スパム フォルダーを確認してください。 3 分後に「再送信」をクリックすると、別の確認メールをリクエストできます。
ヒント: メールアドレスの確認を完了すると、ボーナスクレジットを獲得できるだけでなく、すべての機能を利用でき、アカウントの安全性も高まります。
5.2 サインイン
HtmlDrag は複数のサインイン方法をサポートしています。好みに応じて最も便利なオプションを選択してください。
メールアドレスとパスワードによるサインイン
登録した電子メールとパスワードを使用してサインインします。
- サインインページにメールアドレスを入力してください
- パスワードを入力します (目のアイコンをクリックしてパスワードの表示を切り替えます)
- 「続行」ボタンをクリックしてサインインを完了します
サインインに成功すると、ホームページに自動的にリダイレクトされ、そこで作成を開始できます。
サードパーティのサインイン (Google / GitHub)
すばやくアクセスするには、Google または GitHub アカウントを使用してサインインします。
- Googleでサインイン：「Googleでサインイン」ボタンをクリックします。 Google 認証ポップアップでアカウントを選択し、認証を確認します。
- GitHub でサインインする：「GitHubでサインイン」ボタンをクリックします。 GitHub の認証ページにリダイレクトされます。確認すると、自動的に HtmlDrag に戻ります。
サインインページ: 電子メール/パスワードおよびサードパーティアカウントをサポート
ヒント: Google または GitHub でログインするとアカウントが自動的に作成されるため、別途登録する必要はありません。初めて外部サービスでログインすると、システムが連携アカウントを自動的に作成します。
パスワードを忘れた場合のリンク
パスワードを忘れた場合は、「パスワードをお忘れですか?」をクリックしてください。サインイン ページの右下にあるリンクをクリックして、パスワード リセット プロセスに入ります (セクション 1.3 を参照)。
5.3 パスワードを忘れた場合とリセットする場合
パスワードを忘れた場合は、電子メール確認コードを使用してリセットできます。プロセス全体はリダイレクトなしで 1 つのページで完了します。
パスワードのリセットプロセス
パスワードをリセットするには、次の手順に従ってください。
- メールアドレスを入力してください: 登録時に使用したメールアドレスを入力してください
- 確認コードを取得する：「コードを送信」ボタンをクリックします。システムから 6 桁の確認コードが記載された電子メールが送信されます
- 確認コードを入力してください: 受信した6桁のコードを認証コード欄に入力します。
- 新しいパスワードを設定する: 新しいパスワードを入力します (8 ～ 32 文字の文字と数字を含める必要があります)
- 新しいパスワードを確認します: 新しいパスワードを再入力して、一致していることを確認します。
- 「パスワードをリセット」をクリックします：パスワードのリセットを完了します。成功メッセージが表示された後、自動的にサインイン ページにリダイレクトされます。
パスワードを忘れた場合: 電子メール確認コードによるリセット
検証コードの有効性
確認コードには有効期限がありますので、メール受信後は速やかにご使用ください。コードの有効期限が切れた場合は、[再送信] ボタンをクリックして新しいコードをリクエストできます (再送信する前に、カウントダウンが終了するまで待つ必要があります)。
注: メールアドレスがシステムに登録されていない場合、確認コードは送信できません。登録時に使用したメールアドレスを入力していることを確認してください。
5.4 プロファイル設定
プロファイル設定モジュールを使用すると、アバター、ニックネーム、電子メール、自己紹介、パスワード設定などの基本的なアカウント情報を管理できます。
アバターの変更
アバターエリアの「アバター変更」ボタンをクリックし、アップロードするローカル画像ファイルを選択します。システムは新しいアバターを自動的に切り取って保存します。
ニックネームの変更
ニックネームの横にある編集ボタンをクリックし、新しい名前を入力して、[保存] をクリックします。あなたのニックネームはすべてのプロジェクトとコメントに表示されます。
電子メール管理
電子メール セクションには、現在の電子メール アドレスと検証ステータスが表示されます。
- 確認済み: メールアドレスは確認されており、すべての機能が利用可能です
- 未検証: 「認証メールを送信」をクリックして認証を完了し、ボーナスクレジットを獲得してください
- メールアドレスを変更する: まず現在のメールアドレスを確認してから、新しいメールアドレスを入力して変更を完了する必要があります
バイオ
自己紹介欄に自己紹介を入力し (推奨: 200 文字以内)、「保存」をクリックして更新します。
パスワード変更/パスワード設定
[パスワードの変更] ボタンをクリックして、パスワード設定ダイアログを開きます。
- 既存のパスワードを持つユーザー：現在のパスワードを入力し、新しいパスワードを設定します（文字と数字を含む8〜32文字）
- パスワードを持たないユーザー：新しいパスワードを直接設定します。設定後はメールアドレスとパスワードでサインインできます
アカウントの削除
アカウントを削除するには、ページの下部にある「アカウントを削除」ボタンをクリックしてください。セキュリティのため、電子メール確認コードで本人確認を行う必要があります。
注: アカウント削除を申請すると、通常 30 日間の保持期間に入り、その間はログインできません。期間終了後、システムはプロジェクト、クレジット、履歴を完全に削除します。
プロフィール: アバター、ニックネーム、電子メール、パスワードを管理します
5.5 ストレージの使用量
ストレージ使用量モジュールには、アカウントのストレージ消費量が表示され、残りのスペースを把握し、それに応じて作成を計画するのに役立ちます。
ストレージの概要
上部のセクションには、次のような全体的な使用状況が表示されます。
- 使用済み：現在使用中のストレージ容量
- 合計: アカウントのストレージ制限 (Pro ユーザーはより大きな容量を利用できます)
- 残り: 新しいプロジェクトを作成するための空き容量
- 保存されたプロジェクト: 現在保存されているプロジェクトの数と制限
ストレージの内訳
システムはストレージを次の 3 つのタイプに分類します。
- HTMLコンテンツ: プロジェクトの Web ページ コードによって使用されるスペース
- 画像リソース：アップロードした画像ファイルが使用する容量
- その他のリソース: 他のアタッチメントが使用するスペース
プロジェクト数の制限
無料ユーザーとプロユーザーには、作業数の制限が異なります。制限に達した場合は、新しいプロジェクトを作成する前に、いくつかのプロジェクトを削除するか、プランをアップグレードする必要があります。
ストレージのリフレッシュとアップグレード
[更新] ボタンをクリックしてストレージ情報を更新します。さらに多くのストレージ容量が必要な場合は、「ストレージのアップグレード」をクリックして価格ページにアクセスし、適切なプランを選択してください。
ヒント: アカウントのストレージがいっぱいになるか、作品数の上限に達すると、新しい作品を作成できなくなります。不要なプロジェクトを削除するか、プランをアップグレードしてアップロード権限を復元してください。
5.6 クレジットと使用履歴
クレジット履歴モジュールには、消費および収益記録を含む、アカウントのクレジット取引履歴が表示されます。
クレジット取引履歴
信用記録は、次の情報を含む表に表示されます。
- 日付：クレジットチェンジ発生時
- タイプ：クレジット変更の操作タイプ
- クレジットの変更: クレジットの追加 (プラス) または減算 (マイナス)
- 説明：変更内容の詳細説明
日付範囲フィルターを使用して、特定の期間のレコードを表示できます。
クレジットの種類
- AIジェネレーター：AIジェネレーター機能使用時に消費するクレジット
- Webページを複製: Web ページのクローン機能を使用するときに消費されるクレジット
- 登録報酬: 登録とメール認証後に新規ユーザーに付与されるクレジット
- プラットフォームボーナス：プラットフォームから贈られたクレジット
- マンスリーギフト: Pro ユーザー向けの月間クレジット枠
- クレジットトップアップ：クレジット購入により獲得したクレジット
- 管理者調整: 管理者が手動で調整したクレジット
信用履歴: 信用取引の詳細を表示します
ヒント: Pro ユーザーには毎月追加のクレジットが付与されます。クレジットは AI生成器や Webページを複製などの有料機能に利用できます。
5.7 注文履歴と請求
注文履歴モジュールには購入履歴と支払い記録が表示され、注文のクエリと管理が簡単になります。
注文管理
注文リストには購入記録が表示されます。あなたはできる：
- 注文ステータスと詳細を表示する
- フィルターを使用して特定の注文をすばやく見つける
- 未決注文の支払いを継続する
- 不要になった注文を閉じるか削除する
ヒント: 支払いに問題がある場合は、現在の注文を閉じて新しい注文を作成できます。
5.8 価格設定とサブスクリプションプラン
[価格設定] ページでは、サブスクリプションとクレジットのチャージを管理します。自分に最適なプランを選択して、よりクリエイティブな可能性を解き放ちましょう。
定期購入プラン
HtmlDrag では、Pro および Pro Max サブスクリプション プランを提供しています。購読後は、有効な購読期間中、含まれている特典を使用できます。
プロ: 完全な HTML 編集、AI 生成、共有、エクスポートのワークフローを必要とする通常のクリエイター向け。
プロマックス: より重い AI の作成、大規模なプロジェクト、およびより高い使用制限向け。
サブスクリプションは、チェックアウト時に表示される請求サイクルに従って更新されます。アカウントまたは支払いプロバイダーから更新を管理またはキャンセルできます。
価格設定: 最適なプランをお選びください
トップアップクレジット
AI 生成または Web ページのクローン機能を一時的に使用するだけの場合は、クレジットをチャージすることを選択できます。購入したクレジットには有効期限がなく、不足している場合はいつでも補充でき、待つ必要はありません。
機能の比較
Free と Pro の主な違いは次のとおりです。
| 機能 Free/Pro | ||
| AIコンテンツの生成 | ✓ | ✓ |
| すべてのテンプレートとスタイル | ✓ | ✓ |
| ビジュアルエディター | ✓ | ✓ |
| PNG としてダウンロード | ✓ | ✓ |
| HTMLとしてダウンロード | ✗ | ✓ |
| プロジェクトを共有する | ✗ | ✓ |
| ライブコード編集 | ✗ | ✓ |
| 毎月のクレジット | 基本的な割り当て | プレミアム割り当て |
| ストレージ容量 | 基本容量 | 大容量化 |
クレジット利用ガイド
AI の各世代は固定量のクレジットを消費します。無料ユーザーは基本的な毎月のボーナス クレジットを受け取りますが、プロ ユーザーはさらに多くのボーナスを受け取ります。購入したクレジットには有効期限がなく、不足した場合はいつでも補充でき、クォータの回復を待つ必要はありません。
HtmlDrag を使ってみる
既存の HTML ページ、パブリック URL、AI リファイン のプロンプト、またはサポートされているファイルから始めます。 HtmlDrag は、ソース素材からビジュアル編集、共有可能なプレビュー、またはクリーンな HTML エクスポートに移行するのに役立ちます。
このガイドでは、HTML のアップロード、コードを貼り付け、Web ページのクローン、AI 改良、HTML へのファイル、テキストと画像の編集、テーブル、コンポーネント、レイヤー、リンク、要素のロックと削除、保存、共有、HTML エクスポートについて説明します。