--- title: "言語切り替え時のちらつき防止設定" description: "言語を切り替えた際、翻訳が完了する前に元言語のテキストが一瞬表示される「ちらつき」が発生することがあります。本機能は、翻訳の準備が完了するまでページ全体を非表示にし、翻訳済みの内容が表示可能になったタイミングでページを表示します。こ…" url: "https://docs.autolingual.io/help/features-and-settings/83882c8f" category: "各種機能・設定" lang: "ja" updated: "2026-08-11T06:54:00.000Z" --- # 言語切り替え時のちらつき防止設定言語を切り替えた際、翻訳が完了する前に元言語のテキストが一瞬表示される「ちらつき」が発生することがあります。本機能は、翻訳の準備が完了するまでページ全体を非表示にし、翻訳済みの内容が表示可能になったタイミングでページを表示します。 ### こんな場合におすすめ - 言語切り替え時に、元言語のテキストが一瞬見えてしまう - 初回表示時に翻訳前のコンテンツが見えてしまう ### 設定方法サーバーサイド翻訳機能の利用有無によって、設定手順が異なります。 [サーバーサイド翻訳機能](https://docs.autolingual.io/help/features-and-settings/4ba69032) | サイトの構成 | 必要な作業 | | ------------------- | ------------------------------------- | | サーバーサイド翻訳機能を利用している | 弊社担当者による切り替え作業 | | サーバーサイド翻訳機能を利用していない | サイトの `` 先頭にコードを追加する or CSSを追加する | #### サーバーサイド翻訳機能を利用している場合弊社担当者による切り替え作業が必要ですので、ご利用をご希望の場合、お伝えいただけましたら幸いです。 #### サーバーサイド翻訳機能を利用していない場合以下のいずれかのコードをサイトの ``\*\* \*\*タグの先頭に追加してください。 ##### CSS で追加する場合 ```html ``` ##### JavaScript で追加する場合 ```html ``` **重要:** コードは必ず `` の先頭に配置してください。`` の後半に置くと、ページの一部が先に描画されてしまい、ちらつき防止の効果が弱くなります。 ### 動作の仕組み 1. ページ読み込み時、追加した CSS（またはサーバーサイド翻訳有効時はサーバーが注入した CSS）により、ページ全体が一時的に非表示になります 2. Autolingual SDK が翻訳を適用し、DOM の更新が落ち着いたタイミングでマスクを自動的に解除します 3. SDKが読み込まれない場合やエラーが発生した場合でも、最大3秒後にはページが表示されます（安全装置） ### よくある質問 #### SSR 利用時と非 SSR 利用時、両方の設定が必要ですか？いいえ、どちらか一方のみで問題ありません。 - サーバーサイド翻訳利用時 → 弊社担当者による切り替え（コード追加不要） - サーバーサイド翻訳非利用時 → `` 先頭にコードを追加する #### ページが表示されるまでどのくらいかかりますか？翻訳の完了タイミングに依存します。通常は翻訳完了後すぐに表示されます。 SDK が正常に動作しない場合でも、最大 3 秒後にはページが表示されます。 #### 検索エンジンのクローラーに影響はありますか？マスクは `visibility: hidden` を使用しており、DOM 上のコンテンツ自体は存在します。サーバーサイド翻訳配信時は翻訳済み HTML がサーバーから返されるため、SEO への影響は限定的です。 #### 特定のページだけ無効にできますか？現時点では、プロジェクト単位（SSR 時）またはサイト全体（コード追加時）での設定となります。ページ単位での ON/OFF はサポートしていません。