--- title: "【プロジェクト画面】2-3-1.プレビュー / 編集" description: "概要 管理画面の中に実際のサイトを表示して、翻訳結果を確認しながら、その場で修正できる画面です。 翻訳後のサイトの表示確認 パソコン表示・スマートフォン表示の切り替え テキストの修正 画像の差し替え 見た目（CSS）の調整 画面は大きく…" url: "https://docs.autolingual.io/help/dashboard/8e6f0527" category: "管理画面の使い方" lang: "ja" updated: "2026-09-16T14:04:00.000Z" --- # 【プロジェクト画面】2-3-1.プレビュー / 編集 ![](https://docs.autolingual.io/generated-assets/95de560903cf.png) ### **概要** 管理画面の中に実際のサイトを表示して、翻訳結果を確認しながら、その場で修正できる画面です。 - 翻訳後のサイトの表示確認 - パソコン表示・スマートフォン表示の切り替え - テキストの修正 - 画像の差し替え - 見た目（CSS）の調整 画面は大きく3つの部分に分かれています。 - 上部のツールバー … 表示するページやデバイスを指定します - 中央のプレビュー … 翻訳後のサイトが表示されます - 右側の「編集機能」パネル … 翻訳の確認・修正を行います --- ### 使い方 #### **確認したいページを表示する** 1. 画面上部左端のボタンから、確認したいドメインを選びます 2. その右の入力欄に、確認したいページのパスを入力します（トップページの場合は空欄のまま） 例： を確認したい場合 → about と入力 3. 「表示」ボタンを押します 読み込み中は「プレビュー読み込み中・・・」と表示されます。 #### **表示言語・デバイスを切り替える** 言語の切り替え方法は2つあります。 - プレビュー内のサイトに表示されている言語切り替えウィジェット - 編集機能パネルの「言語切替」 どちらで切り替えても、プレビューの表示と編集機能パネルの内容が連動して切り替わります。 画面右側の「デバイス」で **PC / SP** を切り替えると、パソコン表示とスマートフォン表示を見比べられます。 #### **テキストを修正する** ![](https://docs.autolingual.io/generated-assets/c0517d8e09e7.png) 編集機能パネルの「テキスト」タブに、そのページのテキストが一覧で表示されます。件数は「全131件」のように表示されます。 各項目は上に翻訳前の文章、矢印（↓）の下に翻訳後の文章が並ぶため、対訳を見比べながら確認できます。 左上のラベルは、その翻訳がどうやって作られたかを表します。 | ラベル | 意味 | | -------- | ------------------ | | 初回翻訳 | 自動翻訳された、そのままの状態です | | AI校正済み翻訳 | AIがより自然な表現に整えた状態です | | 編集済みテキスト | お客様が手作業で修正した状態です | 修正したい項目を選ぶと編集画面が開き、翻訳文の書き換え、フォントサイズの変更、テキストの非表示ができます。 #### **画像を差し替える** ![](https://docs.autolingual.io/generated-assets/5d44b7df78a2.png) 編集機能パネルの「画像」タブから、言語ごとに別の画像へ差し替えられます。画像内に文字が入っている場合（バナーなど）に、その言語用の画像を用意して置き換えられます。 画像の中の文字をAIに翻訳させる「画像AI翻訳」も利用できます。 #### **見た目（CSS）を調整する** ![](https://docs.autolingual.io/generated-assets/393563897e33.png) 編集機能パネルの「CSS」タブから、言語ごとに見た目を調整できます。翻訳すると文章の長さが変わるため、「英語にするとボタンから文字がはみ出す」といった場合の調整にお使いください。 　例：英語表示のときだけボタンとナビゲーションを調整する クラス名をカンマ（`,`）で区切って並べると、複数の箇所に同じ設定をまとめて適用できます。 「適用言語」で English を選んでおけば、このCSSは英語表示のときだけ読み込まれるため、CSSの中に言語の指定を書く必要はありません。 ※さらに細かい微調整やレイアウトの修正にはCSS編集機能がご利用いただけます。 [**【プロジェクト画面】CSS編集**](https://docs.autolingual.io/help/dashboard/aabe9118) #### **目的の項目を探す** 各タブの右上にある「フィルター」から、確認したい項目だけに絞り込めます。 ***テキストの絞り込み条件*** 翻訳ステータス（初回翻訳／AI校正済み翻訳）／編集済みテキスト／titleタグ・descriptionタグ／翻訳API／リンクを含むテキスト ***画像の絞り込み条件*** 編集済み画像／未編集画像 まだ手を入れていない箇所を探すときは「初回翻訳」、すでに直した箇所を見返すときは「編集済みテキスト」で絞り込むと効率的です。 #### **修正内容を反映する** 編集画面で内容を書き換えたら、「公開」ボタンを押すと反映されます。その際、どこまで反映するかを選べます。 | 項目 | 選択肢 | | ----- | -------------------- | | 適用ページ | このページのみに反映／全てのページに反映 | | 適用言語 | 特定の言語のみ／全ての言語 | サイト全体で共通のヘッダーやフッターを直す場合は「全てのページに反映」を選ぶと、1回の修正ですべてのページに反映されます。 --- ### **よくあるご質問・困ったときは** **Q. プレビューがうまく表示されません** 特に以下の場合においては、プレビュー表示がうまくされない場合があります。ライブプレビュー機能をご利用ください。 - 何かしらのセキュリティ機能により、外部サーバーからのアクセスを遮断している場合 - ログインなど何かしらの認証を伴うページ プレビュー画面は、Autolingualのサーバーがお客様のサイトを取得して表示する仕組みのため、上記のようなページでは正しく表示できないことがあります。 ライブプレビューは実際のサイトをそのまま開くため、これらのページでも確認・編集が可能です。画面下部の「ライブモードを開く」からご利用いただけます。 **Q. リンクをクリックしてもページが移動しません** 編集操作を優先するため、プレビュー内のリンクは無効になっています。 別のページを確認したい場合は、上部ツールバーのパス入力欄にページを指定して「表示」を押してください。 ページ間を移動しながら確認・編集したい場合は、ライブモードをご利用ください。 **Q. ドメインが選べません（グレーの取り消し線）** 現在のプランで使えないドメイン、またはワイルドカード（`*`）を含むドメインです。複数ドメインのご利用にはBusinessプラン以上が必要です。 **Q. CSSを設定しても反映されません** サイト側で優先度の高い指定がされている場合、上書きされないことがあります。 その場合は値の後ろに `!important` を付けてお試しください。 **Q. 修正しようとしたら確認メッセージが出ました** 「未公開の編集内容があります」と表示された場合、公開していない修正が残っています。修正を残したい場合は「戻る」を選び、先に公開してください。 **Q. 辞書登録・翻訳テキスト管理とどう使い分ければよいですか** 翻訳を修正する方法は複数あり、目的によって適した画面が異なります。 詳しくは[【Tips】辞書登録、プレビュー編集、ライブ編集の使い分けについて](https://docs.autolingual.io/help/dashboard/c23a35aa) をご覧ください。 --- ### **ご注意いただきたい点** - **プレビュー画面での操作が、お客様のサイトそのものを書き換えることはありません。** 修正した翻訳は、公開後に訪問者へ表示されます - スクリプトタグを設置していない状態でも利用できます（ライブモードは設置が必要です） - CSS編集機能のご利用にはLiteプラン以上が必要です - 一度行った修正は、編集画面の「編集を削除する」「元言語のリンクに戻す」から元に戻せます ---