1. アカウントとログイン

HtmlDragを使用する前に、アカウントを作成する必要があります。迅速に開始できるよう、複数の登録およびログイン方法を提供しています。

1.1 登録

HtmlDragはメール登録を使用します。いくつかの基本情報を入力するだけでアカウントを作成できます。登録が成功すると、自動的にログインしてホームページにリダイレクトされます。

メール登録

登録ページで、以下の手順を完了してアカウントを作成してください：

• メールアドレスを入力: 頻繁に使用するメールアドレスを入力してください。これはログインIDおよび通知チャネルとして機能します。形式が正しいことを確認してください（例：[email protected]）。
• パスワードを設定: パスワードは文字と数字を含み、8〜32文字の長さである必要があります。アカウントを保護するために強力なパスワードを使用することをお勧めします。
• パスワードを確認: 両方の入力が一致することを確認するためにパスワードを再入力してください。
• ニックネームを設定（任意）: ニックネームをカスタマイズできます。空白のままにすると、システムが自動的にデフォルトのニックネームを生成します。
• 利用規約に同意: 「利用規約とプライバシーポリシーを読み、同意します」にチェックを入れ、「登録」ボタンをクリックして登録を完了します。

登録ページ：メールアドレスと基本情報を入力してアカウントを作成

メール認証とクレジット特典

登録が成功すると、システムは確認メールを受信トレイに送信します。メール認証を完了すると、AIジェネレーターやURLインポート機能に使用できるボーナスクレジットを受け取ることができます。メールが届かない場合は、迷惑メールフォルダを確認してください。3分後に「再送信」をクリックして別の確認メールをリクエストできます。

ヒント： メール認証を完了すると、ボーナスクレジットを獲得できるだけでなく、完全な体験が解除され、アカウントのセキュリティが強化されます。

1.2 ログイン

HtmlDragは複数のログイン方法をサポートしています。好みに応じて最も便利なオプションを選択してください。

メールとパスワードでログイン

登録したメールアドレスとパスワードを使用してログインします：

1. ログインページにメールアドレスを入力します
2. パスワードを入力します（目のアイコンをクリックしてパスワードの表示を切り替えます）
3. 「次へ」ボタンをクリックしてログインを完了します

ログインに成功すると、自動的にホームページにリダイレクトされ、作成を開始できます。

サードパーティログイン（Google / GitHub）

より迅速にアクセスするには、GoogleまたはGitHubアカウントを使用してログインできます：

• Googleでログイン: 「Googleでログイン」ボタンをクリックします。Google認証ポップアップでアカウントを選択し、認証を確認します。
• GitHubでログイン: 「GitHubでログイン」ボタンをクリックします。GitHubの認証ページにリダイレクトされます。確認後、自動的にHtmlDragに戻ります。

ログインページ：メール/パスワードおよびサードパーティアカウントをサポート

ヒント： GoogleまたはGitHubログインを使用すると、自動的にアカウントが作成されます。別途登録する必要はありません。最初のサードパーティログイン時に、システムが自動的にリンクされたアカウントを作成します。

パスワードをお忘れですか

パスワードを忘れた場合は、ログインページの右下にある「パスワードをお忘れですか？」リンクをクリックして、パスワードリセットプロセスに入ります（セクション1.3を参照）。

1.3 パスワードをお忘れですか

パスワードを忘れた場合は、メール認証コードを使用してリセットできます。プロセス全体はリダイレクトなしで単一のページで完了します。

パスワードリセットプロセス

以下の手順に従ってパスワードをリセットしてください：

1. メールアドレスを入力: 登録時に使用したメールアドレスを入力します
2. 認証コードを取得: 「コードを送信」ボタンをクリックします。システムは6桁の認証コードを含むメールを送信します
3. 認証コードを入力: 受信した6桁のコードを認証コードフィールドに入力します
4. 新しいパスワードを設定: 新しいパスワードを入力します（文字と数字を含み、8〜32文字の長さである必要があります）
5. 新しいパスワードを確認: 一致することを確認するために新しいパスワードを再入力します
6. 「パスワードをリセット」をクリック: パスワードリセットを完了します。成功メッセージが表示された後、自動的にログインページにリダイレクトされます

パスワードをお忘れですか：メール認証コードでリセット

認証コードの有効期限

認証コードには有効期限があります。メールを受け取ったらすぐに使用してください。コードの有効期限が切れた場合は、「再送信」ボタンをクリックして新しいコードをリクエストできます（再送信する前にカウントダウンが終了するのを待つ必要があります）。

注： メールアドレスがシステムに登録されていない場合、認証コードは送信できません。登録時に使用したメールアドレスを入力していることを確認してください。

2. プロフィール

プロフィールは、アカウント情報、作品、注文を管理するための中心的なハブです。右上のアバターをクリックしてアクセスします。

プロフィール：アカウント、作品、注文を一箇所で管理

2.1 プロフィール設定

プロフィール設定モジュールでは、アバター、ニックネーム、メールアドレス、自己紹介、パスワード設定などの基本的なアカウント情報を管理できます。

アバターを変更

アバターエリアの「アバターを変更」ボタンをクリックし、アップロードするローカル画像ファイルを選択します。システムは自動的に新しいアバターを切り取って保存します。

ニックネームを変更

ニックネームの横にある編集ボタンをクリックし、新しい名前を入力して「保存」をクリックします。ニックネームはすべての作品とコメントに表示されます。

メール管理

メールセクションには、現在のメールアドレスと認証ステータスが表示されます：

• 認証済み: メールアドレスが認証され、すべての機能が利用可能です
• 未認証: 「確認メールを送信」をクリックして認証を完了し、ボーナスクレジットを獲得します
• メールアドレスを変更: 最初に現在のメールアドレスを認証し、新しいメールアドレスを入力して変更を完了する必要があります

自己紹介

自己紹介エリアに自己紹介を入力し（推奨：200文字以内）、「保存」をクリックして更新します。

パスワードを変更 / パスワードを設定

「パスワードを変更」ボタンをクリックして、パスワード設定ダイアログを開きます：

• パスワードを設定しているユーザー: 現在のパスワードを入力し、新しいパスワード（文字と数字を含む8〜32文字）を設定します
• パスワードを設定していないユーザー: 新しいパスワードを直接設定します。設定後、メールアドレスとパスワードでログインできます

アカウントを削除

アカウントを削除するには、ページ下部の「アカウントを削除」ボタンをクリックします。セキュリティのため、メール認証コードで本人確認を行う必要があります。

注： 削除リクエストを送信した後、アカウントは保持期間（通常30日）に入り、その間はログインできません。この期間が過ぎると、システムは作品、クレジット、履歴を完全に削除します。

プロフィール：アバター、ニックネーム、メール、パスワードを管理

2.2 ストレージ使用量

ストレージ使用量モジュールにはアカウントのストレージ消費量が表示され、残りの容量を把握して作品制作を計画するのに役立ちます。

ストレージ概要

上部のセクションには、以下の全体的な使用状況が表示されます：

• 使用中: 現在使用中のストレージ容量
• 合計: アカウントのストレージ制限（Proユーザーは大容量を利用可能）
• 残り: 新しい作品を作成するための利用可能な容量
• 保存された作品: 現在保存されている作品数と制限

ストレージの内訳

システムはストレージを3つのタイプに分類します：

• HTMLコンテンツ: 作品のウェブページコードが使用する容量
• 画像リソース: アップロードされた画像ファイルが使用する容量
• その他のリソース: その他の添付ファイルが使用する容量

作品数制限

FreeとProのユーザーには、作品数制限が異なります。制限に達した場合、新しい作品を作成する前に、一部の作品を削除するか、プランをアップグレードする必要があります。

ストレージの更新とアップグレード

更新ボタンをクリックしてストレージ情報を更新します。ストレージ容量を増やすには、「ストレージをアップグレード」をクリックして料金ページにアクセスし、適切なプランを選択してください。

ヒント： アカウントのストレージがいっぱいになるか、作品数が制限に達すると、システムは新しい作品の作成を凍結します。アップロード権限を復元するには、一部の作品を削除するか、プランをアップグレードしてください。

2.3 ファイル

ファイル管理モジュールには、作成したすべての作品が表示され、表示、編集、共有、削除の操作がサポートされています。

作品リストとフィルター

作品はカードまたはリストとして表示されます。以下を使用してフィルタリングできます：

• 検索: 作品コードまたはタイトルを入力して検索
• タイプフィルター: AI生成、ファイルアップロード、URLスナップショット、コード貼り付けなどでフィルタリング
• 期間: 開始日と終了日を選択して、特定の期間の作品をフィルタリング
• 並べ替え: 新しい順、古い順、いいね数順、または閲覧数順で並べ替え

ファイル管理：すべての作品を表示、フィルタリング、管理

作品の表示と編集

作品カードの「表示」ボタンをクリックしてプレビューします。プレビューインターフェースでは、次のことができます：

• 作品タイトルを編集（タイトルをダブルクリックして編集）
• 「編集」をクリックしてビジュアルエディターに入り、編集を続行
• 作品の保存履歴を表示し、特定のバージョンに復元

共有ステータス管理

Proユーザーは作品を共有し、他のユーザーがリンクを介して閲覧できるようにすることができます：

• 共有を有効化: 「共有」ボタンをクリックして、7日間有効な共有リンクを生成します
• 共有を更新: 既に共有されている作品のリンクを更新し、有効期限をリセットできます
• 共有を停止: 「共有を停止」をクリックして、リンクを直ちに無効にします

作品を削除

作品カードの「削除」ボタンをクリックして削除します。誤って削除しないように、システムは2つの確認ダイアログを表示します：

1. 最初の確認：この作品を削除するかどうかを尋ねます
2. 2番目の確認：削除は元に戻せないことを通知します

ヒント： 一度に最大3つのレコードを削除できます。作品を削除すると、そのストレージ容量が解放されます。

2.4 クレジット

クレジット履歴モジュールには、消費および獲得記録を含むアカウントのクレジット取引履歴が表示されます。

クレジット取引履歴

クレジット記録は、以下の情報を含む表に表示されます：

• 日付: クレジットの変更が発生した日時
• タイプ: クレジット変更の操作タイプ
• ポイント変更: 追加（プラス）または差し引かれた（マイナス）クレジット
• 説明: 変更の詳細な説明

日付範囲フィルターを使用して、特定の期間の記録を表示できます。

クレジットタイプ

• AI生成: AI生成機能の使用時に消費されたクレジット
• URLインポート: URLインポート機能の使用時に消費されたクレジット
• 登録報酬: 登録およびメール認証後に新規ユーザーに付与されるクレジット
• プラットフォームボーナス: プラットフォームから贈られたクレジット
• 毎月のギフト: Proユーザー向けの月間クレジット割り当て
• クレジットチャージ: クレジット購入によって取得されたクレジット
• 管理者調整: 管理者によって手動で調整されたクレジット

クレジット履歴：クレジット取引の詳細を表示

ヒント： Proユーザーは毎月追加のクレジットを受け取ります。クレジットは、AI生成やURLインポートなどの有料機能に使用できます。

2.5 注文履歴

注文履歴モジュールには購入履歴と支払い記録が表示され、注文の照会と管理が容易になります。

注文管理

注文リストには購入記録が表示されます。次のことができます：

• 注文ステータスと詳細を表示
• フィルターを使用して特定の注文をすばやく見つける
• 保留中の注文の支払いを続行
• 不要になった注文を閉じるか削除する

ヒント： 支払いに問題が発生した場合は、現在の注文を閉じて新しい注文を行うことができます。

2.6 ポートフォリオ

ポートフォリオページは、すべての作品を表示および管理するための専用スペースです。サイドバーまたはユーザーメニューからすばやくアクセスできます。

作品表示

ページにはすべての作品がカードとして表示され、それぞれに以下が含まれます：

• サムネイルプレビュー: 迅速な識別のための作品の視覚的プレビュー
• 作品タイトル: 作品名を表示、クリックして編集
• 作成時間: 作品が作成された日時を記録
• 共有ステータス: 作品が現在共有されているかどうかを表示

ポートフォリオ：すべての作品を一箇所で表示および管理

クイックアクション

各作品カードには便利なアクションボタンがあります：

• 編集: ビジュアルエディターに入り、作成を続行
• 共有: 共有リンクを生成または管理（Proのみ）

3. サイドバーナビゲーション

HtmlDragは、コンテンツをエディターにインポートする複数の方法を提供し、ゼロからの作成から二次加工までのすべてのシナリオをカバーしています。左側のサイドバーを使用して、エントリーポイントをすばやく切り替えます。

サイドバーナビゲーション：さまざまな作成エントリーポイントへのクイックアクセス

3.1 ホーム

ホームはHtmlDragのデフォルトのエントリーポイントであり、AIジェネレーターを備えています。ここにコンテンツを入力して、プロフェッショナルなWebデザインをすばやく生成します。

3.2 URLインポート

URLインポートを使用すると、任意の公開Webページリンクを入力でき、システムが自動的にページコンテンツを取得して編集可能な作品を生成します。これは、既存のWebデザインをすばやく取得してさらに編集するための理想的な方法です。

URLを入力

取得したいWebページのアドレスを入力フィールドに貼り付けます。公開されているhttp/httpsリンクのみがサポートされており、プライベートまたはローカルアドレスは許可されていません。

URLインポート：URLを入力し、Webページを即座にキャプチャ

クレジット控除の確認

「取得を開始」をクリックすると、クレジット控除確認ダイアログが表示され、この操作に必要なクレジット、現在のクレジット残高、および毎月のボーナスクレジットが表示されます。毎月のボーナスクレジットが最初に差し引かれ、残りのコストは現在のクレジットから差し引かれます。

取得の進行状況とステータス

確認後、システムはページコンテンツの取得を開始します。中断を避けるため、取得中はページを離れないでください。取得が成功すると、自動的にエディターにリダイレクトされます。

ヒント：

一部のウェブサイトは取得できません: ログイン認証が必要なウェブサイトや、複雑なフロントエンドフレームワーク（一部のSPAアプリケーションなど）を使用しているウェブサイトは、取得できないか、不完全になる場合があります。

オーディオ/ビデオウェブサイト: オーディオおよびビデオウェブサイトの動的コンテンツは正しく取得されない場合があります。

ページが大きすぎます: ページコンテンツがサーバーの許容サイズを超えると、取得に失敗する場合があります。代わりによりシンプルなページを試してください。

3.3 HTMLアップロード

HTMLアップロード機能を使用すると、ローカルのHTMLファイルをHtmlDragにインポートできます。システムはセキュリティスキャンを実行し、編集可能な作品を生成します。これは、さらに編集が必要な既存のHTMLテンプレートやメールデザインに最適です。

ファイル形式とサイズ制限

.htmlおよび.htmファイル形式をサポートしています。単一のファイルサイズはシステム制限を超えてはなりません（具体的な制限についてはアップロードインターフェースを参照）。アップロードされたファイルは高度な処理を受けるため、元のファイルと比較して実際の保存サイズが大幅に増加する可能性があります。十分な残容量があることを確認してください。

HTMLアップロード：ドラッグアンドドロップまたはクリックしてHTMLファイルをアップロード

セキュリティスキャン

システムはアップロードされたファイルのセキュリティをスキャンし、潜在的な悪意のあるスクリプト、危険なタグ、および疑わしい外部リソースを検出して削除します。リスクレベル（低、中、高、重大）に基づいて、システムは適切な警告を表示するか、保存をブロックします。

注： 悪意のあるコードを含むファイルをアップロードしないでください。悪意のあるアップロードはアカウント停止につながる可能性があります。

プレビューと保存

ファイルが解析された後、プレビューエリアで結果を確認できます。確認後、「作品を保存」をクリックして作品をアカウントに保存し、いつでもビジュアルエディターに入って編集できます。

3.4 コード貼り付け

コード貼り付け機能を使用すると、HTMLコードを直接貼り付けることができ、システムはセキュリティスキャンを実行してビジュアルデザインに変換します。これは最も柔軟なインポート方法であり、開発者やコードを正確に制御する必要があるユーザーに適しています。

HTMLコードを貼り付け

HTMLコードをコード入力エリアに貼り付けます。オプションで作品タイトルを入力できます（空白のままにすると、システムはデフォルト名「無題の作品」を使用します）。

コード貼り付け：HTMLコードを直接貼り付けて編集を開始

セキュリティスキャン

ファイルアップロードと同様に、システムは貼り付けられたコードに対してセキュリティ検出を実行します。コードのリスクレベルが高すぎる場合、システムセキュリティポリシーはこのコンテンツの処理を拒否します。コードを確認して再試行してください。

注： 悪意のあるコードやスクリプトを貼り付けないでください。悪意のある使用はアカウント停止につながる可能性があります。

プレビューを生成して保存

コードを入力した後、「プレビューを生成」ボタンをクリックします。コードがセキュリティチェックに合格すると、プレビューが自動的に生成されます。結果を確認した後、「作品を保存」をクリックして作品をアカウントに保存します。

3.5 AI生成

AI生成は実際の素材から始めると効果的です。PDF、PPT/PPTX、Excel/XLSX、CSV、Word、Markdown、TXT、JPG/PNG、または自由入力を用意し、要約、製品紹介、募集、講座、社内説明、データ要約など目的を明確にします。

1. 素材をアップロードするか要件を書き、対象、用途、見た目を補足します。
2. AI に見出し、段落、リスト、カード、セクションへ整理させます。
3. 内容、階層、画像、表、テキスト順を確認します。
4. HtmlDrag で文字、画像、ブロック、色、レイアウトを調整します。
5. 保存、共有、HTML ダウンロードを行います。

素材ごとに適した整理方法が異なります。

3.6 料金プラン

料金プランページでは、サブスクリプションとクレジットチャージを管理します。自分に最適なプランを選択して、より多くのクリエイティブな可能性を解き放ちましょう。

サブスクリプションプラン

HtmlDragは、Pro と Pro Max のサブスクリプションプランを提供しています。購読後は、有効なサブスクリプション期間中に含まれる特典を利用できます：

Pro: HTML編集、AI生成、共有、エクスポートの一連のワークフローを必要とする通常のクリエイター向け。

Pro Max: より高頻度なAI制作、大きなプロジェクト、より高い利用上限が必要な方向け。

サブスクリプションはチェックアウト画面に表示される請求サイクルに従って更新されます。アカウントまたは決済プロバイダーから更新を管理またはキャンセルできます。

料金プラン：自分に最適なプランを選択

クレジットチャージ

AI生成やURLインポート機能の一時的な使用のみが必要な場合は、クレジットをチャージすることを選択できます。購入したクレジットに有効期限はなく、不足したらいつでもチャージできます。待つ必要はありません。

機能比較

FreeとProの主な違いは以下の通りです：

機能	Free	Pro
AIコンテンツ生成	✓	✓
全テンプレート＆スタイル	✓	✓
ビジュアルエディター	✓	✓
PNGとしてダウンロード	✓	✓
HTMLとしてダウンロード	✗	✓
作品を共有	✗	✓
リアルタイムコード編集	✗	✓
月間クレジット	基本枠	プレミアム枠
保存容量	基本容量	大容量

クレジット使用ガイド

各AI生成は固定量のクレジットを消費します。Freeユーザーは基本的な月間ボーナスクレジットを受け取り、Proユーザーはより多くを受け取ります。購入したクレジットに有効期限はなく、不足したらいつでもチャージできます。枠の回復を待つ必要はありません。

3.7 履歴

左側のサイドバーにある「マイ作品」（履歴）は、過去の作品へのクイックアクセスを提供します。すべての編集記録を時系列で一覧表示します。

クイック選択＆編集

リスト内の任意の記録をクリックすると、すぐにエディターに読み込まれ、再インポートすることなく中断したところから再開できます。

プレビューウィンドウの詳細

履歴記録にマウスを合わせると、そのプレビューウィンドウが表示されます。プレビューウィンドウでは、次のことができます：

• タイトルを直接編集: タイトルテキストをクリックして、作品名を即座に変更します。
• 共有ステータスを表示: アイコンは、作品が現在共有されているかどうかを示します。
• クイックアクション: 編集、削除、その他のショートカットにアクセスします。

履歴：過去の作品のクイックプレビューと管理

4. ビジュアルエディター

HtmlDragの核心は、コードを編集することなく、実際のHTML環境で直接作業できる強力なWYSIWYGエディターです。

4.1 エディターインターフェース概要

エディターは、左側のナビゲーションと作品履歴、中央のキャンバスプレビューエリア、右側の機能パネルというクラシックな3列レイアウトを採用しています。上下のバーには、作品のアクションと編集コントロールがあります。

エディターインターフェース：左ナビゲーション、中央キャンバス、右パネル

左ナビゲーションと履歴

左側のナビゲーションは、クイックアクセスポイントを提供します。「マイ作品」をクリックすると、作品履歴リストが展開され、すばやく移動や切り替えができます。共有された作品には、共有ステータスの管理に役立つ「共有済み」バッジが表示されます。

中央キャンバスエリア

キャンバスは、ページ要素を直接選択、ドラッグ、編集できるライブプレビューウィンドウです。下部のズームコントローラーを介してズームとパン操作をサポートしています。すべての編集はリアルタイムで反映されます。

右パネル（編集 / コンポーネント / レイヤー / ライブラリ）

右側のパネルには、4つのタブがあります：編集（スタイル調整とモード切り替え）、コンポーネント（新しい要素の挿入）、レイヤー（レイヤーリストと一括操作）、ライブラリ（個人用コンポーネントライブラリ）。任意のタブをクリックして機能を切り替えます。

上部タイトルバーとアクション

上部バーには現在の作品タイトルが表示され（ダブルクリックして編集）、右側には共有、画像としてダウンロード、HTMLとしてダウンロードのアクションボタンがあります。一部の機能にはProの権限が必要です。

下部ツールバー

下部ツールバーには、プレビュー（新しいウィンドウで開く）、元に戻す、やり直し、プレビューの更新、最後に保存した状態の復元、初期HTMLの復元、および保存ボタンがあり、主要な編集コントロールを提供します。

4.2 基本操作

HtmlDragは直感的な視覚的操作を提供します。ホバー、シングルクリック、ダブルクリック、右クリックでほとんどの編集タスクをカバーします。

要素認識

キャンバス上の任意の要素にマウスを合わせると、システムが自動的にそれを検出し、破線の境界線を表示して、操作可能な要素をすばやく識別できるようにします。認識には、テキスト、画像、ボタン、コンテナ、その他のHTML要素が含まれます。

要素認識：ホバー時に破線の境界線が表示されます

ドラッグモード

任意の要素をシングルクリックしてドラッグモードに入ると、8つのサイズ変更ハンドルが付いた選択境界線が表示されます。要素をドラッグして位置を変更したり、コーナーハンドルをドラッグして比例して拡大縮小したり、エッジハンドルをドラッグして一方向にサイズ変更したりできます。選択中、右側の「編集」パネルには調整用の要素スタイルプロパティが表示されます。

ドラッグモード：クリックして選択、自由に移動およびサイズ変更

編集モード

テキスト要素をダブルクリックして編集モードに入ると、カーソルがテキスト内に配置され、直接編集できます。編集モードでは、右側のパネルにフォント、サイズ、色、太字、斜体などのテキストスタイルツールが表示されます。要素の外側をクリックするか、Escを押して編集モードを終了します。

編集モード：ダブルクリックして入り、テキストを直接編集

コンテキストメニュー

選択した要素を右クリックしてコンテキストメニューを開くと、コピー、貼り付け、ライブラリに追加、リンク編集、レイヤー操作、ロック、非表示、削除などにすばやくアクセスできます。詳細は4.9 コンテキストメニューを参照してください。

複数選択

Shiftを押しながら複数の要素をクリックして、一括操作のためにまとめて選択します。複数選択モードでは、右側のパネルに整列ツール（左/右/上/下の端を揃える、水平/垂直方向に中央揃え、水平/垂直方向に分布）が表示され、レイアウトをすばやく整理できます。

複数選択：Shiftを押しながらクリックして複数の要素を選択

4.3 「マイ作品」ショートカットバー

左側の「マイ作品」ショートカットバーを使用すると、作品リストを展開/折りたたんだり、作品間をすばやく切り替えたりして、複数の作品間のスムーズな移行を促進できます。

展開と折りたたみ

左上の「マイ作品」ボタンをクリックして、サイドバーの作品リストを展開します。もう一度クリックするか、サイドバーの外側をクリックして折りたたみます。展開すると、履歴作品のサムネイルとタイトルを視覚的に閲覧できます。

作品の切り替え

リスト内の任意の作品カードをクリックすると、そのコンテンツがすぐにエディターに読み込まれます。これにより、ホームページやプロフィールに戻ることなく、さまざまなデザイン案をすばやく比較および修正できます。

4.4 キャンバスショートカット

キーボードショートカットをマスターすると、編集効率が大幅に向上します。キャンバスエリアでサポートされている主なショートカットは次のとおりです：

アクション	ショートカット
ズーム	Ctrl / Cmd + マウスホイール
パン（移動）	Space + マウスドラッグ
複数選択	Shift + クリック
コピー	Ctrl / Cmd + C
貼り付け	Ctrl / Cmd + V
元に戻す	Ctrl / Cmd + Z
削除	Delete / Backspace

4.5 右パネル - 編集タブ

「編集」タブは最も頻繁に使用されるエリアであり、モード切り替えと豊富なスタイル調整ツールを提供します。要素を選択した後、パネルは要素タイプに基づいて編集オプションをインテリジェントに表示します。

編集タブ：モード切り替えとスタイルツール

モード切り替え

パネルの上部には、エディターのインタラクション動作を制御するための4つのモードスイッチがあります。各スイッチは独立してオンまたはオフにでき、現在の状態を示すメッセージ通知が表示されます。

モード	説明
コンポーネント編集	有効にすると、インタラクティブな機能コンポーネント（ボタン、フォーム入力など）を選択して調整できます。無効にすると、テキストコンテンツのみを編集できます。正確なフォーム要素の操作が必要なシナリオに最適です。
リンクナビゲーション	有効にすると、編集モードでリンクされた要素をクリックすると、ターゲットURLに直接移動します。無効にすると、ナビゲーションがブロックされ、リンク要素自体を編集できます。注：この設定は、プレビューまたはダウンロードされたリンク機能には影響しません。
削除モード	有効にすると、コンテキストメニューを使用せずにクリックするだけで要素を削除できます。無効にすると、通常の編集モードに戻ります。複数の要素をすばやくクリアするのに最適です。
装飾レイヤー	有効にすると、空のコンテナや装飾要素（ボーダーコンテナ、背景レイヤーなど）を識別して編集できます。無効にすると、実際のコンテンツを持つ要素のみが認識されます。複雑なページレイアウトの場合、この機能を有効にすると、装飾要素をより細かく制御できます。

ヒント： コンポーネントの編集を可能にするため、編集中はリンクナビゲーションがデフォルトで無効になっています。リンクをたどるには、編集パネルの「リンクナビゲーション」スイッチをオンにしてください。コンテンツを保護するため、編集モードではフォームの送信もブロックされます。

テキストスタイル

テキスト要素を選択するか、編集モードに入ると、パネルには以下の書式設定オプションを含む包括的なテキストスタイルツールが表示されます：

テキストスタイル：フォント、サイズ、色の設定

機能	説明
フォント	システムフォント、英語フォント（Inter、Roboto、Open Sansなど）、中国語フォント（SimSun、SimHei、Microsoft YaHei、Source Han Sansなど）から選択します。
フォントサイズ	12pxから72pxまでの複数のプリセットサイズ、またはカスタムサイズを手動で入力します。
文字色 / 背景色	カラーピッカーを使用してテキストの色と背景のハイライトを設定します。キャンバスカラーピッカーもサポートしています。
太字、斜体、下線、取り消し線	太字、斜体、下線、取り消し線効果をワンクリックで切り替えます。
配置	左揃え、中央揃え、右揃え、両端揃えの4つのテキスト配置オプション。
行の高さ、文字間隔、段落間隔	行の高さ（1倍〜3倍）、文字間隔、段落間隔を微調整して、タイポグラフィを最適化します。
上付き文字、下付き文字	数学の公式や化学表記などのために、選択したテキストを上付き文字または下付き文字として書式設定します。
箇条書き、番号付きリスト	テキストを順序なし（箇条書き）または順序付き（番号付き）リストにすばやく変換します。
インデント制御	インデントを増減して、段落の階層を調整します。

要素スタイル

任意の要素を選択した後、要素スタイルツールを使用してその外観を調整します：

機能	説明
ボーダースタイル	ボーダーの種類（なし、実線、破線、点線）、幅（1px〜10px）、色を設定します。「ボーダーをクリア」をクリックして、すべてのボーダーをすばやく削除します。
角丸半径	4つの角すべての半径を調整して、角丸長方形や円形効果を作成します。
不透明度	スライダーを使用して、要素の不透明度（0%〜100%）を調整し、透明効果を作成します。
影	4つの影プリセット（なし、軽い影、中程度の影、深い影）で、すばやく奥行き効果を追加します。
位置とサイズ	要素のX/Y座標と幅/高さの値を正確に設定します。
縦横比をロック	有効にすると、幅を調整すると高さも自動的に比例してスケーリングされます。

画像スタイル

画像要素を選択した後、表示オプションを調整し、画像を置き換えます：

機能	説明
画像フィット	4つのフィットモード：contain（比例してスケーリング）、cover（塗りつぶし）、fill（ストレッチ）、none（元のサイズ）。
位置	9グリッドポジショナーを使用して、コンテナ内の画像の配置を設定します（左上、上中央、右上、左中央、中央、右中央、左下、下中央、右下）。
画像を置換	新しいローカル画像をアップロードするか、URLを入力して置換します。ローカルアップロードは、JPG、PNG、 GIF、WebPなどの一般的な形式をサポートしています。

テーブルスタイル

テーブルまたはテーブルセルが選択されている場合、専用のテーブル編集ツールが利用可能になります。詳細な手順については、4.10 テーブル編集を参照してください。

テーブルスタイル：行/列の操作、ボーダー、セルの設定

機能	説明
行/列操作	上/下に行を挿入、左/右に列を挿入、または行/列を削除します。
セルの配置	セルコンテンツの水平方向の配置（左、中央、右）と垂直方向の配置（上、中、下）を設定します。
ボーダースタイル	テーブルのボーダーの幅、スタイル（実線、破線など）、色を調整します。
セルの背景	セルの背景色を設定します。ヘッダーや重要なデータを強調表示するのに最適です。
結合/分割	隣接するセルを選択して1つに結合します。結合されたセルは元の複数のセルに分割できます。

リンク編集

任意の要素にクリックナビゲーションリンクを追加したり、既存のリンクを編集したりします：

機能	説明
リンクを挿入 / 編集	ターゲットURLを入力して、選択した要素にクリックナビゲーションを追加します。http/httpsリンクをサポートしています。
リンクを削除	要素からリンクを削除し、通常の要素に戻します。システムは実行前に削除されるリンクの数を確認します。

整列ツール（複数選択）

複数の要素が選択されている場合、パネルには整列および分布ツールが表示され、要素のレイアウトをすばやく整理できます：

機能	説明
左 / 右 / 上 / 下の端を揃える	選択したすべての要素を、最も左/右/上/下の要素の端に揃えます。
水平 / 垂直方向に中央揃え	選択したすべての要素の中心点を水平または垂直に揃えます。
水平 / 垂直方向に分布	選択した複数の要素を水平または垂直に等間隔で配置します。

4.6 右パネル - コンポーネントタブ

「コンポーネント」タブには、さまざまな要素タイプのクイック挿入オプションがあり、新しいコンテンツをキャンバスにすばやく追加できます。ボタンをクリックして、対応するコンポーネントを挿入します。

コンポーネントタブ：ワンクリックでさまざまな要素を挿入

コンポーネント	説明
テキストを挿入	編集可能なテキストブロックをキャンバスに挿入します。挿入後にダブルクリックして編集モードに入り、コンテンツを変更します。
ボタンを挿入	スタイル設定済みのボタン要素を挿入します。ボタンのテキストを編集し、クリックリンクを追加できます。
画像を挿入	ローカルアップロードまたはURL入力をサポートする画像アップロードダイアログを開きます。単一ファイルサイズと一括アップロードの制限が適用されます。詳細はアップロードインターフェースを参照してください。
アイコンを挿入	矢印、図形、記号、ソーシャル、装飾、一般の6つのカテゴリを持つアイコンピッカーを開きます。挿入する前にアイコンの色とサイズを設定します。
テーブルを挿入	テーブルサイズセレクターを開きます。ホバーして行と列（例：3×4テーブル）を選択し、クリックして挿入します。
リンクを挿入	リンクされたテキスト要素をキャンバスに挿入します。リンクURLと表示テキストを入力します。
長方形 / 円を挿入	基本的な図形要素を挿入します。要素スタイルツールを使用して、装飾やレイアウトのためにボーダー、背景色、半径、その他のプロパティを調整します。

4.7 右パネル - レイヤータブ

「レイヤー」タブには、キャンバス上のすべての編集可能な要素のリストビューが表示され、フィルタリング、一括操作、正確な位置決めをサポートします。複雑なページ要素を管理するための強力なツールです。

レイヤータブ：レイヤー管理と一括操作

要素カードリスト

パネルには、すべての管理可能な要素がカードとして表示されます。各カードには、要素のタグタイプ（例：DIV、IMG、SPAN）とレイヤーレベルが表示され、テキスト要素にはコンテンツのプレビューが表示されます。装飾レイヤー要素には「装飾」バッジが付いています。各カードの右側には、クイックロック/ロック解除および非表示/表示アイコンが表示されます。

フィルターオプション

フィルターボタンをクリックして、要素の状態（以下のオプション）でリストをフィルタリングします：

フィルター	説明
すべて	すべての管理可能な要素を表示
ロック済み	ロックされた要素のみを表示
ロック解除済み	ロック解除された要素のみを表示
非表示	非表示の要素のみを表示
表示中	表示されている要素のみを表示

一括操作

カードリストで複数の要素を選択した後、一括処理のために一括操作ボタンを使用します：

操作	説明
すべて選択 / 選択を反転	すべての要素をすばやく選択するか、現在の選択を反転します
選択したものをロック / ロック解除	選択した要素を一括ロックまたはロック解除します。ロックされた要素は編集または移動できません
選択したものを非表示 / 表示	選択した要素を一括非表示または表示します。非表示の要素はキャンバス上では見えませんが、HTMLには残ります
選択したものを削除	確認プロンプト付きで、選択した要素を一括削除します

精度切り替え

レイヤータブには、要素認識の精度を制御するための精度切り替えがあります：

状態	説明
精度オン	自動重複排除、重複カードを減らすためにホスト要素のみを表示
精度オフ	すべての候補要素（インラインフラグメントを含む）を表示、正確なインライン要素操作に最適

カードをクリックして特定

任意の要素カードをクリックすると、キャンバスが自動的にスクロールして対応する要素が強調表示され、ページ上の特定のコンポーネントをすばやく見つけやすくなります。これは、複雑なページレイアウトや階層化されたページレイアウトで作業する場合に特に便利です。

4.8 右パネル - ライブラリタブ

「ライブラリ」タブは、頻繁に使用する要素やコンポーネントを保存してさまざまな作品で再利用できる個人用コンポーネントライブラリであり、創造的な効率を高めます。

ライブラリタブ：個人用コンポーネントライブラリ

お気に入りコンポーネントリスト

パネルには、保存されたすべてのコンポーネントがカードとして表示され、それぞれにサムネイルと名前が表示されます。サムネイルは保存時に自動生成されます。名前のないコンポーネントは「無題」として表示されます。

お気に入りを検索

検索ボックスを使用して、保存されたコンポーネントを名前ですばやく見つけます。入力するとリストがリアルタイムでフィルタリングされます。

お気に入りコンポーネントを挿入

ライブラリカードの「挿入」ボタンをクリックして、そのコンポーネントを現在のキャンバスに追加します。挿入されたコンポーネントは、通常どおり編集および調整できます。

お気に入りの名前変更 / 削除

各ライブラリカードには、「名前変更」と「削除」のオプションがあります。名前を変更すると、後でコンポーネントを見つけやすくなります。削除すると、保存されたコンポーネントが完全に削除されます。注意して使用してください。

ライブラリに追加する方法

キャンバス上の任意の要素を選択し、コンテキストメニューから「ライブラリに追加」を選択して、その要素とその子要素をコンポーネントとして保存します。成功すると「ライブラリに追加されました」という確認が表示されます。

4.9 コンテキストメニュー

選択した要素を右クリックするとコンテキストメニューが開き、一般的なアクションにすばやくアクセスできます。メニューの内容は、選択した要素のタイプに基づいて動的に調整されます。

コンテキストメニュー：一般的なアクションへのクイックアクセス

メニュー項目	説明
コピー / 貼り付け	選択した要素をクリップボードにコピーするか、クリップボードの内容をキャンバスに貼り付けます。作品間のコピーと貼り付けをサポートしています。
ライブラリに追加	選択した要素を個人用ライブラリに保存して、他の作品で再利用できるようにします。
リンクを追加/編集/削除	要素にクリックナビゲーションリンクを追加するか、既存のリンクを編集/削除します。削除時には確認が求められます。
画像を置換	画像要素の場合にのみ表示されます。ローカルアップロードまたはURL画像ですばやく置き換えます。
上に移動 / 下に移動	積み重ね順序での要素の位置を調整します。上に移動すると手前に来ます。
最前面へ移動 / 最背面へ移動	要素をすべての要素の直接前または後ろに移動します。
ロック / ロック解除	ロックされた要素は編集や移動ができず、誤った変更を防ぎます。ロックを解除して編集可能性を復元します。
非表示 / 表示	HTML内には残したまま、要素をキャンバスから一時的に隠します。「表示」で可視性を復元します。
削除	選択した要素を完全に削除します。複数の要素が選択されている場合、数が表示されます。

テーブル固有のメニュー

テーブルセルを右クリックすると、メニューに追加のテーブル固有の操作が表示されます：

メニュー項目	説明
行を削除	現在のセルを含む行全体を削除します（最後の行は削除できません）
列を削除	現在のセルを含む列全体を削除します（最後の列は削除できません）

4.10 テーブル編集

テーブルまたはテーブルセルが選択されている場合、右側のパネルには、包括的なテーブルスタイルおよび構造調整機能を備えた専用のテーブル編集ツールが表示されます。

テーブル編集：行/列の操作とスタイル設定

行と列の操作

テーブルエディターパネルの「行と列」セクションでは、以下を提供します：

操作	説明
上 / 下に行を挿入	現在の行の上または下に新しい行を挿入します
行を削除	現在選択されている行を削除します（最後の行は削除できません）
左 / 右に列を挿入	現在の列の左または右に新しい列を挿入します
列を削除	現在選択されている列を削除します（最後の列は削除できません）

セルの結合 / 分割

複数の隣接するセルを選択した後、「セルを結合」を使用して1つにまとめます。結合されたセルの場合、「セルを分割」を使用して元の複数のセルに戻します。

セルの配置

セルコンテンツの配置を2次元で設定します：

次元	オプション
水平	左、中央、右
垂直	上、中、下

ボーダースタイル

以下を含むテーブルボーダーの外観をカスタマイズします：

プロパティ	説明
ボーダー幅	ボーダーの太さを設定
ボーダースタイル	実線、破線、点線、二重線、なし
ボーダー色	カラーピッカーでボーダーの色を選択

「適用」をクリックして変更を保存します。

セルの背景

カラーピッカーを使用してセルの背景色を設定します。ヘッダーや重要なデータ行を強調表示するのに最適です。

4.11 ズームコントロールとビューポート

キャンバス下部のズームコントローラーは、ズームとビューポートサイズの調整を提供し、さまざまなデバイスサイズで作品をプレビューするのに役立ちます。

ズームコントロール：キャンバスズームとビューポートサイズを調整

拡大 / 縮小 / リセット

「+」および「−」ボタンを使用してキャンバスビューを拡大または縮小するか、Ctrl/Cmd + マウスホイールを押したままにしてすばやくズームします。パーセンテージ番号をクリックしてデフォルトのズームにリセットします。スペースキーを押しながらドラッグしてキャンバスをパンします。

ビューポートサイズプリセット

ビューポートセレクターをクリックしてプレビューサイズを切り替え、さまざまなデバイスでの表示をシミュレートします：

ビューポートサイズ	説明
自動	コンテンツサイズに合わせる、ほとんどのシナリオに適しています
デスクトップ 1920×1080 (デフォルト)	フルHDデスクトップモニター
デスクトップ 1440×900	一般的なラップトップ画面
デスクトップ 1366×768	人気のあるラップトップ解像度
デスクトップ 1280×720	HD解像度
タブレット 1024×768	標準的なタブレットデバイス
モバイル 375×812	iPhoneおよび同様のモバイルデバイス

プレビューパッチ

特殊な構造を持つHTMLページの場合、表示を最適化するために3つのプレビューパッチが利用可能です。パッチを有効または無効にすると、自動保存され、プレビューが更新されます：

パッチ	説明
USP — 超高層ページの安定化	超高層または境界のないキャンバスを最適化し、ジッターを減らします。複雑/境界のない静的ファイルに適しています
UFP — ビューポート幅の固定	ビューポート幅を制限し、複雑なレイアウトの正しい表示を復元します
SHP — 異常なサイズの最適化	互換性を向上させるために、異常な構造のHTMLを最適化します

ヒント： パッチに顕著な効果が見られない場合は、最初に「初期HTMLの復元」を試してから、パッチを再度有効にしてください。

4.12 HTMLエディター

HTMLエディターを使用すると、作品の完全なHTMLソースコードを直接表示および編集できます。微調整やカスタムコードの追加が必要な上級ユーザーに最適です。この機能はProのみです。

HTMLエディター：ソースコードを直接編集（Pro）

完全なHTMLの表示 / 編集

HTMLエディターを開くと、完全なHTMLソースコード（<!DOCTYPE html>を含む）が表示されます。コードを直接編集できます。保存すると変更が適用されます。

検索と置換

Ctrl+Fを使用して検索を開き、キーワードを入力してコードをすばやく見つけます。Ctrl+Hを使用して置換を開き、テキストを一括置換します。ツールバーには一致数（例：「3 / 15」）が表示され、個別に置換またはすべて置換のオプションがあります。

行へ移動

Ctrl+Gまたはツールバーのジャンプ機能を使用して行番号を入力し、その行にすばやく移動します。大きなHTMLファイルに便利です。

大文字と小文字を区別

検索中に「大文字と小文字を区別」オプションを有効にして、大文字と小文字を区別するコンテンツを正確に一致させます。

行の折り返し

行の折り返しが有効になっている場合、長いコード行は自動的に折り返され、水平スクロールなしで表示されます。

コピー / 保存

「HTMLをコピー」をクリックして、完全なソースコードをクリップボードにコピーします。編集後、保存をクリックして変更を適用します。コンテンツが空であるか、構文エラーが含まれている場合は、適切なメッセージが表示されます。

注： HTMLコンテンツがストレージ制限を超えると、保存時に「ストレージ容量不足のため、この編集を保存できません」と表示されます。不要なコンテンツを削除するか、プランをアップグレードして容量を増やしてください。

4.13 下部ツールバー

下部ツールバーには、プレビュー、元に戻す/やり直し、復元、保存機能など、エディターの主要なアクションボタンがあります。

下部ツールバー：プレビュー、保存、復元

プレビュー（新しいウィンドウで開く）

プレビューボタンをクリックして、新しいウィンドウで作品の完全なプレビューを開き、実際の表示結果を確認します。プレビューページには、これが再利用不可能なリンクを使用した編集段階のプレビューであることをユーザーに思い出させる一時的なプレビュー通知が表示されます。

元に戻す / やり直し

元に戻すは最後の操作を元に戻します。やり直しは元に戻した操作を復元します。複数の元に戻す/やり直しステップをサポートしています。Ctrl+Z（元に戻す）およびCtrl+Y（やり直し）でも利用できます。

プレビューを更新

更新をクリックすると、プレビューエリアがリロードされます。システムは最初に現在のコンテンツを保存し、次にキャンバスを更新して最新の状態を表示します。広範な編集の後に表示を同期するのに便利です。

最後に保存した状態を復元

作品を最後に手動で保存した状態に復元します。保存されていない編集はすべて失われます。注意して使用してください。システムは実行前に確認を求めます。

初期HTMLを復元

作品のHTMLを最初に作成されたときの元の状態に復元します。すべての編集履歴が消去されます。このアクションは元に戻せません。重要なコンテンツをバックアップしていることを確認してください。

保存

現在のすべての変更を手動で保存します。システムは自動保存もサポートしていますが、データの安全性を確保するために、重要な編集の後は手動で保存することをお勧めします。完了すると「保存に成功しました」と表示されます。

4.14 上部ツールバー

上部ツールバーには作品情報とクイックアクションボタンが表示され、共有およびダウンロード機能にすばやくアクセスできます。

上部ツールバー：タイトル、共有、ダウンロード

作品タイトル（ダブルクリックして編集）

上部には現在の作品タイトルが表示されます。タイトルエリアをダブルクリックして編集モードに入り、名前を変更します。タイトルを空にすることはできません。成功すると「タイトルが正常に更新されました」と表示されます。無題の作品は「無題の作品」として表示されます。

共有ボタン

共有ボタンをクリックして作品の共有を有効にし、アクセス可能なリンクを生成します。詳細は4.16 共有機能を参照してください。この機能はProのみです。

ダウンロードボタン

右側には「画像としてダウンロード」と「HTMLとしてダウンロード」ボタンがあります。詳細は4.15 作品をダウンロードを参照してください。

4.15 作品をダウンロード

HtmlDragは柔軟なエクスポートオプションを提供しており、共有、アーカイブ、またはさらなる開発のために、作品を画像または標準HTMLファイルとしてダウンロードできます。

上部バーの「画像としてダウンロード」ボタンをクリックして、キャンバスコンテンツ全体の高品質PNG画像を生成してダウンロードします。これは、デザインのショーケース、ソーシャルメディア共有、またはプレビューに最適です。

HTMLとしてダウンロード

Proユーザーは、作品を標準のHTMLソースファイルとしてエクスポートできます。「HTMLとしてダウンロード」ボタンをクリックすると、2つのオプションが表示されます：

• 現在のHTMLをダウンロード: エディターで行ったすべての修正と調整を含みます。見たままが得られます。
• 元のHTMLをダウンロード: 作品が最初に作成されたときの元のコードを、その後の編集なしでエクスポートします。

ダウンロードオプション：現在の編集済みバージョンまたはオリジナルバージョンを選択

4.16 共有機能

共有機能を使用すると、作品への公開アクセス可能なリンクを生成でき、作品の共有が簡単になります。共有ページではアクセス統計も提供されます。この機能はProのみです。

共有設定：リンクとステータスの管理

設定と管理

• 共有を有効化: 共有ボタンをクリックして、一意の共有リンクを生成します。最初に有効にすると、「共有が有効になりました。リンクがクリップボードにコピーされました」と表示されます。
• 有効期限: 共有リンクはデフォルトで7日間有効です。共有ダイアログで具体的な有効期限を確認できます。
• 時間を更新: リンクの有効期限が切れそうな場合や延長したい場合は、「リンクを更新」をクリックして有効期間をリセットします。
• 共有を停止: 「共有を停止」をクリックして、現在のリンクを即座に無効にし、それ以上のアクセスを防ぎます。
• リンクをコピー: コピーボタンをクリックして、共有リンクをクリップボードにコピーします。

共有ページと統計

共有リンクを開いた訪問者は、独立したプレゼンテーションページを見ることができます。右側のサイドバーには、以下の作品情報が表示されます：

• タイトルと作者: ニックネームと作品タイトルが表示されます。
• 統計: 閲覧数といいね数を表示して、人気を追跡できます。
• 有効期限: 共有リンクの有効期限が表示されます。

共有ページ：訪問者ビューと統計

注： 作品がポリシー違反で通報され、確認された場合、システムはその作品の共有を無効にし、「この作品は通報され確認されたため、システムにより共有が無効化されました」というメッセージを表示する場合があります。

5. その他の機能

主要な編集機能に加えて、HtmlDragは最新情報の入手や私たちとのコミュニケーションに役立つメッセージおよびフィードバック機能も提供しています。

5.1 メッセージ

メッセージモジュールは、アカウントステータス、支払いリマインダー、メンバーシップ期限切れアラート、機能更新など、重要なシステム通知を受信します。

メッセージ：システム通知とアラートを受信

システムメッセージリスト

メッセージリストは時系列順に並べ替えられ、タイトル、概要、作成日時、有効期限が表示されます。メッセージをクリックして詳細を表示したり、アクション（例：「支払いを続ける」、「今すぐ更新」）を実行したりできます。

未読フィルター

右上の「未読のみ」ボックスをチェックすると、未読メッセージをすばやくフィルタリングでき、重要な通知に集中できます。

すべて既読にする

「すべて既読にする」ボタンをクリックすると、現在のリスト内のすべてのメッセージが即座に既読としてマークされ、赤いドットインジケーターがクリアされます。

メッセージの詳細

メッセージカードをクリックして、完全な通知内容を表示します。注文やメンバーシップのメッセージの場合、詳細には便利なクイックアクションボタンが含まれていることがよくあります。

5.2 フィードバック

問題が発生した場合や提案がある場合は、フィードバックモジュールを介して送信してください。問題をより適切に説明するために画像をアップロードできます。

フィードバック：問題や提案を送信

フィードバックリストとステータス

リストには、送信履歴と現在のステータスが表示されます：

• 進行中: フィードバックが送信され、管理者の確認を待っています。
• 返信済み: 管理者が返信しました。クリックして表示します。
• クローズ: フィードバックはアーカイブまたは解決されました。それ以上の返信は許可されていません。

新しいフィードバックを送信

「新しいフィードバック」をクリックし、内容を入力します（必須、10文字以上）。スクリーンショットを提供するために「画像をアップロード」（各最大2MB）できます。完了したら「フィードバックを送信」をクリックします。

フィードバックの詳細と会話

リストアイテムをクリックして、メッセージと管理者の返信を含む完全な会話履歴を表示します。上部にはフィードバックIDと添付ファイルが表示されます。

返信を続ける

「進行中」または「返信済み」のフィードバックの場合、下部の入力ボックスを使用して詳細情報を提供するか、解決するまで管理者に返信します。

6. システムのヒント

使用中に、システムアラートや制限に遭遇する場合があります。ここでは、一般的なシステムのヒントの説明と提案を示します。

6.1 HTML検出アラート

インポート品質とエディターの安定性を確保するために、システムはURLとファイルを自動的にスキャンし、潜在的な問題を警告します。

ローカルリソース検出

ページにローカルパス（例：file://やC:/）が含まれている場合、リソースは読み込まれません。提案: すべてのリソースが公開HTTP/HTTPSリンクを使用していることを確認してください。

画像直リンク保護

一部のサイトは画像への外部アクセスをブロックしています。提案: 「画像を置換」を使用してローカルファイルをアップロードするか、公開サービスでホストしてください。

動的レンダリングページ（SPA）

完全にJavaScript（SPA）に依存しているページは、動的DOMが直接キャプチャされないため、空または不完全な状態でインポートされる場合があります。提案: ブラウザからレンダリングされたHTMLをコピーして「コード貼り付け」を使用してください。

外部フォント / アイコンライブラリ

CORSヘッダーがないフォントやアイコンは正しく表示されない場合があります。提案: エディターでシステムフォントやライブラリアイコンに置き換えてください。

埋め込みコンテンツ（iframe）

セキュリティ上の理由から、一部のiframeコンテンツはブロックされるか、インタラクティブでない場合があります。システムは可能な限りプレースホルダーを保持します。

6.2 ストレージと制限

HtmlDragはプランに基づいてリソース割り当てを適用します。「ストレージ制限に達しました」または「作品数制限に達しました」というアラートが表示される場合があります。

ストレージ制限に達しました

容量が不足している場合、編集内容を保存したりファイルをアップロードしたりすることはできません。解決策:

• 「ポートフォリオ」内の古いアイテムを削除してスペースを解放します。
• ダイアログの「今すぐアップグレード」をクリックして、Proで容量を増やします。

作品数制限

Freeユーザーには、保存できる作品数に制限があります。古い作品を削除するか、アップグレードしてこの制限を増やしてください。

画像アップロード制限

システムは単一ファイルサイズと一括制限を確認します。「ファイルサイズが制限を超えています」または「一括サイズを超過しました」と表示された場合は、画像を圧縮するか、より小さなバッチでアップロードしてください。Proユーザーはより高い制限を享受できます。

6.3 セキュリティスキャン

組み込みのセキュリティスキャンは、URLのインポート、ファイルのアップロード、またはコードの貼り付け時にコンテンツのリスクを自動的に評価し、アカウントを保護します。

リスクレベル

XSS、悪意のあるスクリプト、危険なタグなどの脅威に基づいて、リスクは次のように分類されます：

• 低リスク: 軽微な警告。通常は続行しても安全です。
• 中リスク: 潜在的な問題。注意して進めてください。
• 高リスク: 重大なリスク。ソースが信頼できる場合のみ続行してください。
• 重大リスク: マルウェアやフィッシングコンテンツが含まれています。即座にブロックされます。

セーフモード

一定のリスクがあるファイルの場合、システムは自動サニタイズなどの「安全対策」を提供します。「セーフモードで続行」を選択すると、システムはレイアウトと編集可能性を維持しながら危険なコードを削除します。