Smartcat Website Translator：その機能と仕組み

SmartcatのWebsite Translatorは、CMS、バックエンド、コードベースを変更することなくウェブサイトを翻訳するスクリプトベースのローカライズツールです。

複数のURLを持つ言語別サイトを作成する代わりに、ブラウザ上でレンダリングされたページに直接処理を適用します。サイトに小さなJavaScriptスニペットを追加し、対象言語を選択するだけで、ページが自動的に翻訳され、海外の訪問者に提供されます。

翻訳されたコンテンツはCDNに保存されており、訪問者がサイトを読み込む際に動的に表示されます。

翻訳はバックエンドではなく、レンダリング済みのウェブサイト上で行われるため、通常、エンジニアの大きな関与なしに導入できます。つまり、Smartcatを使えば、コンテンツチームやマーケティングチームが翻訳業務を自ら行うことが可能です。

Smartcatの翻訳機能は、要するに - ユーザーがブラウザ上で目にする内容を翻訳するものです。

ユーザーがサイトにアクセスすると、ブラウザはHTML、CSS、JavaScriptに基づいてページをレンダリングし、これらを組み合わせて最終的な画面を表示します。

このレンダリングされたページは、DOM（Document Object Model ）と呼ばれる構造として存在し、翻訳ツールはこの構造を扱います。

サイトに追加された小さなJavaScriptスニペットが、ページの読み込み時に実行されます。このスニペットは訪問者の言語設定を検出し、SmartcatのCDNから該当する翻訳を取得して、ページ上の表示テキストを置き換えます。ユーザーは手動で言語を切り替えることができ、サイト内を移動する際も設定は維持されます。

翻訳システム全体がブラウザレイヤーで動作するため、ウェブサイトのバックエンドスタックは関係ありません。 サイトがWordPress、Shopify、Webflow、Reactフロントエンド、あるいは古いレガシーシステムで構築されているかどうかにかかわらず、ブラウザ上で表示される限り、翻訳ツールは正常に動作します。

また、スクリプトは最初のページ読み込み後も停止しません。現代のウェブサイトでは、すべてのコンテンツを最初から読み込むことはありません。クリック後にモーダルが表示されたり、APIからデータを取得してドロップダウンが展開されたり、フォーム送信後にバリデーションメッセージが表示されたりする場合があります

つまり、ページを一度スキャンして終了するのではなく、スクリプトはDOMに新しいテキストノードが出現するのを継続的に監視し、レンダリングされるたびにそれらを翻訳します。

Smartcatのセットアップ手順は、想像以上に簡単です。

サイトのURLを入力し、対象言語を選択すると、プロジェクトが開始されます。その後、Smartcatはレンダリングされたページをプロキシ経由で取得し、翻訳を行うことで、独自のインターフェース内にサイトのプレビュー版を生成します

次に、コンテンツチームは 翻訳されたページを確認し、編集を行い、最終版を承認することができます。

翻訳が承認されると、Smartcatはそれらを軽量なJSONアセットとして自社のCDNに公開します。その後、ライブサイトで翻訳を有効にするには、ウェブサイトのページヘッダーに1つのJavaScriptスニペットを追加する

その後、ユーザーがサイトにアクセスするたびに、翻訳されたコンテンツがCDNから取得され、訪問者の希望する言語で提供されます。

詳細な設定ガイドはこちら。

Smartcatのアーキテクチャには、従来の翻訳手法に比べていくつかの大きな利点があります。具体的には以下の通りです：

従来のウェブサイト翻訳ツールにおける最大の不満点の一つは、その対応範囲の狭さです。メインページのコンテンツは翻訳されますが、インタラクティブな要素は翻訳されないことがよくあります。

フォームは元の言語のまま、助動詞はそのまま表示され、ドロップダウンメニューや検証メッセージは翻訳されません。そのため、訪問者からは、サイトが部分的にしか翻訳されていないように見えます。

SmartcatのTranslatorはレンダリング済みのDOM上で直接動作するため、ページの初回読み込み後に表示されるコンテンツも処理可能です。これには、モーダル、ポップアップ、通知、ドロップダウンなどの動的にレンダリングされるUI要素や、ページが操作可能になった後にJavaScriptフレームワークによってレンダリングされるあらゆるコンポーネントが含まれます

つまり、ページの静的なスナップショットを翻訳するのではなく、スクリプトがインターフェースに表示される新しいテキストを継続的に監視し、レンダリングされる際に翻訳を行うのです。

Smartcat は、翻訳済みコンテンツを自社のサーバーから直接配信するのではなく、CDNを通じて配信しています。

その結果、翻訳アセットは軽量でキャッシュされ、訪問者に近いエッジロケーションから配信されるため、大規模な多言語サイトであっても高速な配信が可能になります。

これは、耐障害性を意味します。翻訳が公開されれば、Smartcatがダウンして一時的に利用できなくなっても、翻訳は引き続き機能します。

また、このシステムでは、すべてのページを事前に翻訳しておく必要はありません。

訪問者が翻訳されていないコンテンツにアクセスすると、スクリプトがオンデマンドで翻訳を生成し、それをキャッシュして、次回の訪問時に再利用します。そのため、それ以降のすべての訪問者は、キャッシュされたバージョンを即座に取得できます。Smartcatはこの仕組みを「クラウディング」と呼んでいます

唯一のトレードオフは、新しいコンテンツや更新されたコンテンツを初めて閲覧する際に生じる、わずかなレイテンシ（翻訳の遅延）です。

Smartcatは、Google、DeepL、Gemini、ChatGPT、Claude、Apple、Amazon、Microsoftなど、複数の翻訳プロバイダーに対応しており、独自のロジックを用いて各言語ペアに最適なプロバイダーを選択します。

ウェブサイトでは、一貫して再利用される必要がある専門用語、ブランド固有の名称、業界用語がよく使われます。こうした用語は、翻訳の際に意味が失われてしまうことがよくあります。

Smartcatは翻訳メモリに対応しており、特定の用語を言語をまたいで一貫して再利用することができます。また、LLMエンジン向けにトーンやスタイルに関するカスタムプロンプトを設定し、翻訳内容を微調整することも可能です。

ウェブサイトには、ヘッダー、フッター、ナビゲーションメニュー、バナーなど、ページ全体に共通して表示されるセクションがあります。

st-shared-section 属性を使用すると、チームは共有セクションを定義でき、繰り返し使用される要素を一度翻訳するだけで、あらゆる場所で一貫して再利用できるようになります。

表示される本文以外にも、SmartcatではSEOに影響を与える要素を翻訳するオプションも提供しています。

ページタイトル、説明文、画像のalt属性、プレースホルダーテキスト、ARIAラベル、hreflangタグなど、サイトのメタデータも翻訳されます。

一部のウェブサイトには、翻訳処理の対象とすべきではない個人情報や機密情報が含まれている場合があります。

この問題に対処するため、Smartcatでは、サイト管理者がページの特定のセクションを翻訳対象から明示的に除外することができます。

st-ignore 属性でマークされた要素は、その内部のコンテンツとともに、翻訳システムによって完全にスキップされます。 これにより、チームはアカウントデータ、支払い情報、社内ツール、その他の機密性の高いインターフェース領域を、翻訳ワークフローから切り離すことができます。

データ処理をより厳格に管理したいサイトでは、オンデマンド翻訳機能を完全に無効にし、事前に公開された翻訳アセットのみに依存することも可能です。

どの翻訳モデルにも一長一短があります。Smartcatのスクリプトベースのアプローチには、前述したようにいくつかの利点がありますが、主に動作するブラウザ環境に起因する制約も存在します。

最大の障害の一つは、クロスドメインのiframeです。

サイトにサードパーティ製の予約ツール、決済フォーム、組み込み型スケジュール管理ツール、または外部ウィジェットが埋め込まれている場合、ブラウザのセキュリティルールにより、スクリプトが内のコンテンツにアクセスすることはできません。

この制限は、ブラウザベースの翻訳システム全般に当てはまります。唯一の回避策は、iframe内に翻訳スクリプトを別途インストールすることですが、これは埋め込み元のソースも管理している場合にのみ可能です。

レイアウトもまた、特にアラビア語やヘブライ語のようなRTL言語において、よくある特殊なケースです。Smartcatは、ブラウザのネイティブなRTLサポートを利用してページの方向を切り替えることはできますが、サイトのCSSを書き換えることはできません。

固定幅のコンテナ、ハードコーディングされた配置、あるいは左右の配置を前提としたレイアウトは、翻訳されたテキストが長くなったり、インターフェースが左右反転したりすると、表示が崩れることがよくあります。

ドイツ語やフランス語などの言語でも、テキスト展開時に同様の問題が発生します。コンテキストエディタを使用すれば、レビュー時にこうした問題を特定しやすくなりますが、根本的なレイアウトの修正はSmartcatの機能の範囲外です。レイアウトの修正については、ウェブサイトの所有者またはエンジニアリングチームが対応する必要があります。

訪問者がまだ翻訳されていないコンテンツにアクセスすると、システムは翻訳を生成してキャッシュし、その後表示します。

2回目以降の訪問者はキャッシュされたバージョンを即座に受け取れますが、初回訪問時にはわずかな遅延が生じる場合があります。

Cloudflareなどのボット対策システムは、リクエストがAWSのIPアドレスから送信され、自動トラフィックのように見えるため、セットアップ中にSmartcatのプレビューの読み込みをブロックすることがあります。この問題を解決するには、Smartcatの固定IPアドレスをホワイトリストに登録してください。

Reactなどのフレームワークで構築されたシングルページアプリケーションでは、翻訳後のHTML構造が正しく保持されていない場合、レンダリングの競合が発生することがあります。

DOMにコンテンツを挿入するブラウザ拡張機能も、翻訳レイヤーが処理しようとするノイズの原因となる可能性があります。Smartcatでは、既知の拡張機能に対するフィルタやソース言語の検出機能により、この問題を軽減しています。

Smartcat Website Translatorは、すべてのサイトに対応しているわけではありません。

これは、既存のインフラを再構築することなく、複数の言語に対応する必要があるチームにとって最も有用です。

これには、海外のユーザーを対象とするSaaS製品、コンテンツ量の多いウェブサイト、およびエンジニアリングのリリースサイクルに縛られずにローカライズを進めたいと考えている新規市場への進出企業などが含まれます。

ページ数がごくわずかだったり、対象言語が1～2つしかない小規模なサイトの場合、シンプルなCMSプラグインや手動での作業フローで十分であることがよくあります。

コンテンツの量、対応言語数、更新頻度が増加するにつれ、Smartcatのようなブラウザレイヤー型翻訳システムの利点が明らかになります。

そこで、ウェブサイト用の翻訳ツールをお探しで、コードベースの変更や重複URLの管理といった手間をかけたくない場合は、 ぜひ Smartcat Website Translator をご検討ください。