--- title: "【プロジェクト画面】2-3-2.ライブモード（ライブプレビュー/ライブ編集機能）" description: "概要ライブモードでは、導入対象サイトを開きながら、実際にAutolingualを利用して多言語化した際の挙動を確認し、翻訳テキストの編集や画像置き換え、リンクの編集などの各種修正をすることができます。ライブモードには、以下の2つのモ…" url: "https://docs.autolingual.io/help/dashboard/a5f7229a" category: "管理画面の使い方" lang: "ja" updated: "2026-09-30T09:12:00.000Z" --- # 【プロジェクト画面】2-3-2.ライブモード（ライブプレビュー/ライブ編集機能） ### 概要ライブモードでは、導入対象サイトを開きながら、実際にAutolingualを利用して多言語化した際の挙動を確認し、翻訳テキストの編集や画像置き換え、リンクの編集などの各種修正をすることができます。ライブモードには、以下の2つのモードがあります。 - **ライブプレビューモード**：プロジェクトが非公開設定であっても、サイトを公開した場合の挙動や翻訳結果を確認できます。 - **ライブ編集モード**：対象サイトを開いた状態で、各種テキスト・画像・リンクの編集ができます。編集できる対象は、テキスト・画像・リンク・CSSの4種類です。 --- ### 使い方 #### 起動の前提条件ライブモードを起動するには、以下の2点を満たしている必要があります。 - 対象サイトに、Autolingualスクリプトタグが埋め込まれていること（公開の必要はありません）。 - [導入スクリプトタグの埋め込み方](https://docs.autolingual.io/help/getting-started/7c4a9e2f) - 対象サイトのプロジェクトを含むワークスペースにログイン中であること。 - ログイン中のユーザーが、対象プロジェクトのワークスペースに所属している必要があります。所属していない場合、ライブモードは起動できません。 - 対象のドメインが、プロジェクトに登録されているドメインであること。 #### 起動方法 ##### 方法1：ボタンから起動するプレビュー画面下部にある『ライブモードを開く』ボタンをクリックします。 ![](https://docs.autolingual.io/generated-assets/6fa7507981cd.png) ##### 方法2：URLを直接入力する下記のURLを直接ブラウザで入力いただくことでも起動できます。 ```html http://livepreview.autolingual.io/key?projectId={projectId}&host={host}&path={path}&al-editor-lang={languageCode} ``` 各パラメータの内容は以下のとおりです。 - **projectId** - プロジェクトID - projectIdは、対象プロジェクトのスクリプトタグの末尾のidとなります - スクリプトタグが``であった場合、 project\_idは`da7bb190-3c6d-b108-1fd5-789b778bd4e3`となります - **host** - プロジェクトに紐づいているドメイン - **path** - ライブモードの初期表示パス - **languageCode** - ライブモードの初期表示言語（お客さんのサイトの言語ではなく、ライブモードのUI自体の言語） - 省略可能です。省略した場合は、ブラウザに保存された前回の設定、それもなければ日本語で表示されます。なお、このURLを叩いた際にも、対象プロジェクトを含むワークスペースにログインしていることがライブモード起動のためには必要です。 #### モードの切り替えと終了ライブモードが起動されると、対象サイトの下部に以下のようなライブモードモーダルが表示されます。 ![](https://docs.autolingual.io/generated-assets/846a4e603e74.png) このモーダル上で、ライブプレビューモードとライブ編集モードの二つのモードを切り替えることができます。現在どちらのモードで動作しているかは、モーダル上の『ライブ編集モード中』『ライブプレビューモード中』の表示で確認できます。ページ数の上限超過で翻訳が停止しているページでは『ページ数上限により停止中』と表示され、ライブ編集モードには切り替えられません。ライブ編集モード中にこのページへ移動した場合は、ライブプレビューモードに切り替わります。通常通りのサイトを確認したい場合、『終了』ボタンを押下することで、ライブモードを終了させることができます。 ##### モーダルの表示位置の変更サイトの画面下部中央に固定表示の要素（追従バナーやチャットボタンなど）がある場合、ライブモードモーダルがその要素を覆ってしまい、確認や編集ができないことがあります。その場合は、『終了』ボタンの右隣にある矢印アイコン（↑）をクリックすると、モーダルが画面上部に移動します（アイコンにマウスを重ねると『画面上部に移動』と表示されます）。上部にある間はアイコンが ↓ に変わり、クリックすると画面下部に戻ります。選択した位置はブラウザに記憶され、次回ライブモードを開いたときも同じ位置で表示されます。 #### ライブプレビューモードでできることライブプレビューモードでは、プロジェクトが非公開設定になっていても、言語切り替えウィジェットが表示され、言語の切り替えをすることができます。サイトを公開した場合にどのような挙動になるかや、翻訳結果の確認をすることができます。 ![](https://docs.autolingual.io/generated-assets/3106b8ba381c.png) #### ライブ編集モードでできることライブ編集モードでは、対象サイトを開いた状態で、各種テキスト・画像・リンクの編集をすることができます。プレビュー編集機能（[【プロジェクト画面】2-3-1.プレビュー / 編集](https://docs.autolingual.io/help/dashboard/8e6f0527) ）での編集が難しい要素においても、編集が可能です。 ##### 編集範囲の選択以下のスクリーンショットのように、編集したい要素の上をホバーすることによって、編集範囲を選択することができます。 ![](https://docs.autolingual.io/generated-assets/6a026e181b9f.png) ##### テキストの編集テキストを含む要素を選択すると、以下のような編集モーダルが表示されます。このモーダル上で、テキストの編集を行い『公開』ボタンを押下することで、テキストの編集が可能です。 ![](https://docs.autolingual.io/generated-assets/8c9666454556.png) テキスト編集モーダルでは、翻訳テキストの書き換えのほかに以下の操作ができます。 - **フォントサイズの変更**：翻訳後のテキストが長くなりレイアウトが崩れる場合などに調整できます。 - **テキストの非表示**：特定の言語でのみテキストを非表示にできます。 - **編集の削除**：『編集を削除する』で、編集内容を取り消して機械翻訳の状態に戻せます。 ※フォントサイズと表示設定は、titleタグ・descriptionタグには適用されません。 ##### 画像の編集画像を含む要素を選択すると、以下のような編集モーダルが表示されます。このモーダル上で、置き換えたい画像をアップロードし『公開』ボタンを押下することで、画像の編集が可能です。 pictureタグの画像は、表示中の画像（source / img）が初期選択され、置き換え対象の候補を選べます。 ![](https://docs.autolingual.io/generated-assets/b354e5598436.png) 画像編集モーダルでは、以下の操作もできます。 - 画像AI翻訳：画像内に含まれる文字をAIが翻訳した画像を生成します。生成後に『翻訳内容を確認して調整する』から、箇所ごとの訳文修正・処理の切替（翻訳／そのまま／削除）・追加指示を入れて再生成できます。 - **元言語の画像に戻す**：置き換えを取り消し、元言語の画像に戻します。 - **画像の非表示**：特定の言語でのみ画像を非表示にできます。アップロードできる画像の条件は以下のとおりです。 - 形式：JPEG、PNG、WebP - サイズ：5MB以下 ##### リンクの編集リンクを含む要素を選択すると、以下のような編集モーダルが表示されます。このモーダル上で、リンクの編集を行い『公開』ボタンを押下することで、リンクの編集が可能です。 ![](https://docs.autolingual.io/generated-assets/705fe2abd999.png) 『元言語のリンクに戻す』ボタンで、編集を取り消して元言語のリンクに戻すこともできます。 ##### 公開範囲の指定各編集モーダルでは、編集内容をどこまで反映するかを『公開範囲』で指定できます。 - **表示中のページのみに反映**：現在開いているページだけに適用します。 - **全てのページに反映**：サイト全体の同じテキスト・画像に適用します。また、『他の言語にも編集を適用』を選択すると、複数の翻訳言語へ同じ編集をまとめて適用できます。他の言語にすでに個別の設定がある場合は、上書き確認のダイアログが表示されます。 ##### 編集機能パネル（一覧からの編集）ライブ編集モードでは、画面上の要素を直接クリックする以外に、『編集機能』パネルから一覧で編集することもできます。パネルには以下の3つのタブがあります。 - **テキスト**：ページ内の翻訳テキストの一覧 - **画像**：ページ内の画像の一覧 - **CSS**：適用されているCSSの一覧一覧の項目にホバーすると、対応するページ上の要素がハイライトされるため、どの項目がどこに対応しているかを確認できます。一覧はフィルターで絞り込むことができます。主なフィルター条件は以下のとおりです。 - テキスト翻訳ステータス（初回翻訳／AI校正済み翻訳／編集済みテキスト） - テキスト翻訳適用範囲（titleタグ／descriptionタグ／翻訳API） - 画像編集ステータス（編集済み画像／未編集画像） - リンク（リンクあり／編集済みリンクあり）フィルターの各条件には該当件数が表示され、『条件をクリア』で全解除できます。元言語を表示中は『テキスト翻訳ステータス』『画像編集ステータス』の絞り込みと、各項目のステータス表示は表示されません。翻訳先の言語に切り替えてご利用ください。 titleタグ・descriptionタグはテキスト一覧の先頭に項目として表示され、一覧から直接編集できます（フォントサイズと表示設定は適用されません）。 ##### 編集UIの表示言語の変更『編集機能』パネルのタイトル横にある歯車アイコンから、編集UI自体の表示言語（日本語／英語）を変更できます。この設定は、サイトの表示言語とは独立しています。 --- ### よくある質問・困ったら **Q.ライブモードが起動しない** 「起動の前提条件」を満たしているかご確認ください。特に以下の点が原因となるケースが多くなっています。 - 対象サイトにAutolingualスクリプトタグが埋め込まれていない - 対象プロジェクトを含むワークスペースにログインしていない - ログイン中のユーザーが、対象プロジェクトのワークスペースに所属していない - 指定したドメインが、プロジェクトに登録されていない **Q.ライブモードのURLを再読み込みしたらエラーになった** ライブモード起動用のURL（`/key`）に含まれる認証キーは**一度きり有効**で、発行から**5分**で期限切れになります。ブラウザの戻る／再読み込みで同じURLを開き直すとエラーになりますので、その場合はプレビュー画面の『ライブモードを開く』ボタンから、あらためて起動し直してください。 **Q.ライブモードのモーダルはサイト訪問者にも見えてしまいますか？** いいえ、表示されません。ライブモード起動の前提として、対象サイトのAutolingualプロジェクトへのログインが必須であるため、サイトを閲覧しているエンドユーザーにはこのモーダルは表示されません。 **Q.プロジェクトが非公開でも翻訳結果を確認できますか？** はい、確認できます。ライブプレビューモードでは、プロジェクトが非公開設定になっていても言語切り替えウィジェットが表示され、言語を切り替えて翻訳結果を確認できます。 **Q.『翻訳対象外ページ』と表示されて編集ができない** ページ除外設定などにより、そのページが翻訳の対象外になっています。翻訳対象外のページでは、ライブ編集モードに切り替えることはできません。対象にしたい場合は、プロジェクト設定の除外設定をご確認ください。 **Q.CSS編集で「アップグレードが必要です」と表示される** CSS編集機能のご利用には、Liteプラン以上へのアップグレードが必要です。 **Q.モーダルがサイトの固定要素と重なって操作できない** 『終了』ボタンの右隣にある矢印アイコン（↑）で、表示位置を画面上部に切り替えてください。 **Q.編集した内容がすぐに画面に反映されない** 編集モーダルで選択している言語と、サイトの表示言語が異なっている場合があります。『公開』ボタン押下時には、サイトの表示言語が編集対象の言語へ自動的に切り替わり、編集結果を確認できるようになっています。 **Q.ライブ編集機能と、他の編集機能はどう使い分ければよいですか？** ライブ編集機能とプレビュー編集機能や辞書登録機能の使い分けについては、以下ドキュメントも併せてご参照ください。 [【Tips】辞書登録、プレビュー編集、ライブ編集の使い分けについて](https://docs.autolingual.io/help/dashboard/c23a35aa) **Q.細かいレイアウトの調整をしたい** さらに細かい微調整やレイアウトの修正にはCSS編集機能がご利用いただけます。 [【プロジェクト画面】2-3.(補足)CSS編集](https://docs.autolingual.io/help/dashboard/aabe9118) ### ご注意いただきたい点 - ライブモードの起動には、対象サイトへのAutolingualスクリプトタグの埋め込みと、対象プロジェクトを含むワークスペースへのログインの両方が必要です（サイトの公開は不要です）。 - ライブモード起動用URLの認証キーは**一度きり・発行から5分間のみ有効**です。URLを保存して使い回すことはできません。 - URLパラメータの`al-editor-lang`（languageCode）は、**ライブモードのUI自体の言語**を指定するものです。お客様のサイトの表示言語を指定するものではありませんのでご注意ください。 - ライブ編集モードでの各種編集は、編集モーダル上で『公開』ボタンを押下することで反映されます。押下しないと編集内容は反映されません。 - 編集内容が未公開の状態で言語を切り替えるなどの操作を行うと、編集内容は破棄されます。確認ダイアログが表示された場合はご注意ください。 - 『公開範囲』で「全てのページに反映」や「他の言語にも編集を適用」を選択すると、表示中のページ・言語以外にも編集が反映されます。意図しない箇所への反映にご注意ください。 - 画像のアップロードは、JPEG・PNG・WebP形式、5MB以下のものに限られます。 - Basic認証で保護された画像は取得できません。ブラウザでBasic認証を完了してから、あらためてお試しください。 - フォントサイズと表示設定は、titleタグ・descriptionタグには適用されません。 - CSS編集機能のご利用にはLiteプラン以上のプランが必要です。