【プロジェクト画面】2-3-1.プレビュー / 編集

目次

#概要

管理画面の中に実際のサイトを表示して、翻訳結果を確認しながら、その場で修正できる画面です。

翻訳後のサイトの表示確認
パソコン表示・スマートフォン表示の切り替え
テキストの修正
画像の差し替え
見た目（CSS）の調整

画面は大きく3つの部分に分かれています。

上部のツールバー … 表示するページやデバイスを指定します
中央のプレビュー … 翻訳後のサイトが表示されます
右側の「編集機能」パネル … 翻訳の確認・修正を行います

#使い方

#確認したいページを表示する

画面上部左端のボタンから、確認したいドメインを選びます
その右の入力欄に、確認したいページのパスを入力します（トップページの場合は空欄のまま）例：https://autolingual.io/about を確認したい場合 → about と入力
「表示」ボタンを押します

読み込み中は「プレビュー読み込み中・・・」と表示されます。

#表示言語・デバイスを切り替える

言語の切り替え方法は2つあります。

プレビュー内のサイトに表示されている言語切り替えウィジェット
編集機能パネルの「言語切替」

どちらで切り替えても、プレビューの表示と編集機能パネルの内容が連動して切り替わります。

画面右側の「デバイス」で PC / SP を切り替えると、パソコン表示とスマートフォン表示を見比べられます。

#テキストを修正する

編集機能パネルの「テキスト」タブに、そのページのテキストが一覧で表示されます。件数は「全131件」のように表示されます。

各項目は上に翻訳前の文章、矢印（↓）の下に翻訳後の文章が並ぶため、対訳を見比べながら確認できます。

左上のラベルは、その翻訳がどうやって作られたかを表します。

ラベル	意味
初回翻訳	自動翻訳された、そのままの状態です
AI校正済み翻訳	AIがより自然な表現に整えた状態です

修正したい項目を選ぶと編集画面が開き、翻訳文の書き換え、フォントサイズの変更、テキストの非表示ができます。

#画像を差し替える

編集機能パネルの「画像」タブから、言語ごとに別の画像へ差し替えられます。画像内に文字が入っている場合（バナーなど）に、その言語用の画像を用意して置き換えられます。

画像の中の文字をAIに翻訳させる「画像AI翻訳」も利用できます。

#見た目（CSS）を調整する

編集機能パネルの「CSS」タブから、言語ごとに見た目を調整できます。翻訳すると文章の長さが変わるため、「英語にするとボタンから文字がはみ出す」といった場合の調整にお使いください。

　例：英語表示のときだけボタンとナビゲーションを調整する

クラス名をカンマ（,）で区切って並べると、複数の箇所に同じ設定をまとめて適用できます。「適用言語」で English を選んでおけば、このCSSは英語表示のときだけ読み込まれるため、CSSの中に言語の指定を書く必要はありません。

※さらに細かい微調整やレイアウトの修正にはCSS編集機能がご利用いただけます。

【プロジェクト画面】CSS編集

#目的の項目を探す

各タブの右上にある「フィルター」から、確認したい項目だけに絞り込めます。

テキストの絞り込み条件

翻訳ステータス（初回翻訳／AI校正済み翻訳）／編集済みテキスト／titleタグ・descriptionタグ／翻訳API／リンクを含むテキスト

画像の絞り込み条件

編集済み画像／未編集画像

まだ手を入れていない箇所を探すときは「初回翻訳」、すでに直した箇所を見返すときは「編集済みテキスト」で絞り込むと効率的です。

#修正内容を反映する

編集画面で内容を書き換えたら、「公開」ボタンを押すと反映されます。その際、どこまで反映するかを選べます。

項目	選択肢
適用ページ	このページのみに反映／全てのページに反映
適用言語	特定の言語のみ／全ての言語

サイト全体で共通のヘッダーやフッターを直す場合は「全てのページに反映」を選ぶと、1回の修正ですべてのページに反映されます。

#よくあるご質問・困ったときは

Q. プレビューがうまく表示されません

特に以下の場合においては、プレビュー表示がうまくされない場合があります。ライブプレビュー機能をご利用ください。

何かしらのセキュリティ機能により、外部サーバーからのアクセスを遮断している場合
ログインなど何かしらの認証を伴うページ

プレビュー画面は、Autolingualのサーバーがお客様のサイトを取得して表示する仕組みのため、上記のようなページでは正しく表示できないことがあります。ライブプレビューは実際のサイトをそのまま開くため、これらのページでも確認・編集が可能です。画面下部の「ライブモードを開く」からご利用いただけます。

Q. リンクをクリックしてもページが移動しません

編集操作を優先するため、プレビュー内のリンクは無効になっています。別のページを確認したい場合は、上部ツールバーのパス入力欄にページを指定して「表示」を押してください。ページ間を移動しながら確認・編集したい場合は、ライブモードをご利用ください。

Q. ドメインが選べません（グレーの取り消し線）

現在のプランで使えないドメイン、またはワイルドカード（*）を含むドメインです。複数ドメインのご利用にはBusinessプラン以上が必要です。

Q. CSSを設定しても反映されません

サイト側で優先度の高い指定がされている場合、上書きされないことがあります。その場合は値の後ろに !important を付けてお試しください。

Q. 修正しようとしたら確認メッセージが出ました

「未公開の編集内容があります」と表示された場合、公開していない修正が残っています。修正を残したい場合は「戻る」を選び、先に公開してください。

Q. 辞書登録・翻訳テキスト管理とどう使い分ければよいですか

翻訳を修正する方法は複数あり、目的によって適した画面が異なります。詳しくは【Tips】辞書登録、プレビュー編集、ライブ編集の使い分けについてをご覧ください。

#ご注意いただきたい点

プレビュー画面での操作が、お客様のサイトそのものを書き換えることはありません。 修正した翻訳は、公開後に訪問者へ表示されます
スクリプトタグを設置していない状態でも利用できます（ライブモードは設置が必要です）
CSS編集機能のご利用にはLiteプラン以上が必要です
SVG形式の画像はAI翻訳に対応していません
一度行った修正は、編集画面の「編集を削除する」「元言語のリンクに戻す」から元に戻せます