#wovn #スクリプト #多言語化 #web制作 #海外進出
【1分で解説！】WOVNスクリプト方式の全体像
WOVNは、既存のWebサイトにコードを追加するだけで多言語翻訳機能を実装できるSaaSサービスです。その導入方式は大きく3種類に分かれますが、なかでも最も手軽なのが「スクリプト方式」です。 スクリプト方式の仕組みはシンプルです。HTMLの
タグ内にWOVNが発行する1行のコードスニペットを貼り付けるだけで、サイト全体の多言語化が完了します。専用サーバーのセットアップも、バックエンドのコード改修も不要で、エンジニアがいない環境でも数分で導入できるのが最大の特徴です。ただし、「最速・最シンプル」である一方で、重要な制約もあります。翻訳処理がブラウザ側（クライアントサイド）で実行されるため、Googleなどの検索エンジンに翻訳後のコンテンツが正しくインデックスされません。つまり、海外向けのSEO対策としては機能しないという点は、導入前にしっかり把握しておく必要があります。
本記事では、WOVNスクリプト方式の動作の仕組みから、管理画面でのコード取得手順、Google タグマネージャー（GTM）経由での挿入方法、そしてライブラリ方式・プロキシ方式との使い分け基準まで、実務に即した情報をまとめています。「WOVNを検討しているが、どの方式を選べばよいかわからない」と感じているWeb担当者やエンジニアの方に、具体的な判断基準を提供することを目的としています。
WOVNとは？多言語化サービスの基本情報
WOVNは、Wovn Technologies株式会社（本社：東京都港区）が提供するWebサイト多言語化SaaSです。既存サイトへの最小限の設定変更で、英語・中国語（簡体・繁体）・韓国語・タイ語など79言語への翻訳機能を追加できる点が強みです。 翻訳エンジンとしてはGoogle Translate、Microsoft Translator、DeepL、Mirai Translatorなど複数のエンジンに対応しており、用途や言語ペアに応じて使い分けることが可能です。また、管理画面から翻訳結果を手動で修正したり、固有名詞の扱いを統一する「用語集」を登録したりといった品質管理機能も備えています。
対応ブラウザはGoogle Chrome、Firefox、Safari、Edge（Chromiumベース・IEモードとも）と主要なものをすべてカバーしており、モバイルブラウザにも対応しています。利用量の管理については、翻訳文字数・翻訳ページ数・PV数に上限が設定されており、プランに応じた制限があります。
WOVNが他の翻訳ツールと異なるのは、単なる機械翻訳の貼り付けにとどまらず、言語切替ウィジェットのデザインカスタマイズや、翻訳後のレイアウト崩れへの対応、さらにSEO対応に特化した導入方式（後述のライブラリ方式・プロキシ方式）まで提供している点です。国内では大手企業から中堅・中小企業まで幅広い導入実績があり、海外展開を検討する企業にとっての選択肢として存在感を高めています。
スクリプト方式の仕組みを理解する
翻訳処理はどこで行われるか
WOVNの導入方式を理解する上でまず押さえておきたいのは、「翻訳処理がどこで実行されるか」という違いです。スクリプト方式・ライブラリ方式・プロキシ方式の3種類は、この処理場所によって区別されます。 スクリプト方式では、翻訳処理がユーザーのブラウザ上で実行されます。ユーザーがサイトにアクセスすると、まず日本語の元ページが読み込まれ、その後にWOVNのスクリプトが動作して翻訳文をWOVNのサーバー（CDN）にリクエストします。取得した翻訳テキストでHTMLの文字列を差し替え、最終的に翻訳済みのページがブラウザ上に表示されるという流れです。 この一連の処理はWOVN側のスクリプトが自動的に担うため、サイト運営者が個別に翻訳APIを叩いたり、翻訳結果をデータベースに保存したりといった実装は必要ありません。
翻訳テキストの収集と蓄積
WOVNが初めてサイトのテキストを翻訳する際のフローも把握しておくと実装時の理解が深まります。埋め込まれたスクリプトがHTMLから翻訳対象テキストを自動抽出し、管理画面から任意の言語への翻訳を実行すると、その翻訳結果がWOVNのサーバー・CDNに保存されます。以降のアクセスでは、このCDNに蓄積された翻訳データが呼び出される仕組みです。
この設計により、同一コンテンツへの2回目以降のアクセスは高速で処理されます。ただし、サイトのコンテンツが更新されるたびに、新しいテキストを翻訳・登録する作業が必要になる点は運用上のポイントとして理解しておきましょう。
スクリプトコードの取得手順（管理画面操作）
WOVN管理画面からコードスニペットを取得する
スクリプト方式を導入するための手順は大きく2ステップに分かれます。まずWOVN管理画面にログインし、プロジェクトトークン（コードスニペット）を取得します。次に、そのコードをサイトのHTMLに埋め込みます。
管理画面でのプロジェクトトークン取得の具体的な手順は次の通りです。WOVN管理画面にログイン後、「プロジェクト設定」または「インストール」のページを開きます。そこに表示されているコードスニペットをコピーします。このスニペットは以下のような形式になっています。
<script src="https://wovn.global.ssl.fastly.net/widget/XXXXXXXX.js"></script>
XXXXXXXXの部分がお客様固有のプロジェクトトークンです。このトークンにより、どのWOVNプロジェクトに紐づいた翻訳データを使用するかが識別されます。
HTMLのheadタグへの挿入方法
取得したコードスニペットは、サイトの全ページに共通するHTMLテンプレートの
タグ内に貼り付けます。具体的には以下のようなイメージです。<head>
<meta charset="UTF-8">
<title>サイトタイトル</title>
<!-- WOVNスクリプト -->
<script src="https://wovn.global.ssl.fastly.net/widget/XXXXXXXX.js"></script>
</head>
WOVNは
内のなるべく早い位置（他のスクリプトより前）への配置を推奨しています。これは、ページ読み込みのできるだけ早い段階でWOVNスクリプトを起動し、翻訳処理の遅延を最小化するためです。WordPress環境であれば、functions.phpでスクリプトをwp_headにenqueueする方法が一般的です。Next.js（App Router）環境では、layout.tsxの相当箇所にScriptコンポーネントとして追加する形で対応します。microCMSとNext.jsを組み合わせた環境での実装事例として、microCMSが自社ブログで紹介している導入事例があります。app/layout.tsx内でWOVNのスクリプトタグを追加するだけで、CMSで管理しているコンテンツも含めたページ全体の多言語化が実現できることが確認されています。コードの変更量が最小限に抑えられるため、既存の開発フローを大きく変えずに導入できる点が評価されています。
Google タグマネージャー（GTM）経由での導入手順と注意点
GTMを使ったスクリプト挿入の手順
WOVNスクリプトをGoogle タグマネージャー（GTM）経由で配信する方法も公式にサポートされています。GTMを導入済みの環境では、HTMLを直接編集することなくWOVNを追加できるため、非エンジニアのWeb担当者でも対応しやすい選択肢です。 GTMでの設定手順は以下の通りです。まずGTMにログインし、対象のコンテナを開きます。「タグ」メニューから「新規」を選択し、タグの種類として「カスタムHTML」を選びます。取得したWOVNのコードスニペットをそのままカスタムHTMLのフィールドに貼り付け、トリガーを「All Pages（すべてのページ）」に設定します。設定後はプレビューモードで動作確認を行い、問題がなければ公開します。
GTM経由の際に注意すべき点
GTM経由での挿入には、いくつか注意すべき点があります。まず、GTMは非同期でスクリプトを読み込む設計であるため、WOVNスクリプトの実行タイミングが直接headタグに記述した場合よりも遅くなる可能性があります。これにより、ページ読み込み直後に一瞬だけ元の言語（日本語）が表示されてしまう「フラッシュ・オブ・オリジナル・コンテンツ（FOOC）」が発生しやすくなります。
また、GTMコンテナ自体の読み込みが完了するまでWOVNが動作しないため、低速な通信環境では翻訳表示の遅延がより顕著になることがあります。ユーザー体験を重視する場合は、可能な限りHTMLのheadタグへ直接挿入する方法を選択することが推奨されます。GTM経由の導入は、サイト管理の権限上HTMLを直接編集できない場面や、他のマーケティングタグと一元管理したい場合に適した選択です。
スクリプト方式のメリットとデメリット
メリット：最速・最シンプルな導入
スクリプト方式の最大のメリットは、導入の手軽さです。HTMLに1行を追加するだけで完了するため、開発工数をほぼゼロに近い形で多言語化を実現できます。
具体的なメリットをまとめると次の通りです。まず、サーバー側の設定変更が不要なため、インフラ担当者やシステム管理者と調整する必要がありません。次に、CMSの種類やフレームワークを問わず、HTMLが出力されるページであれば原則として導入可能です。WordPressはもちろん、Wixや各種ノーコードツールで構築されたサイトでも機能します。さらに、導入後の管理画面での翻訳チェックや修正も比較的シンプルで、専任のエンジニアがいない体制でも運用が成立しやすいです。
実際に、D2CグループがWordPressサイトにWOVNをスクリプト方式で導入した事例では、実装そのものは数時間で完了し、管理画面での翻訳確認とレイアウト調整に大部分の時間を割くことができたと報告されています。技術的な参入障壁が低い点が改めて確認できる事例です。
デメリット：海外SEOには対応できない
一方で、スクリプト方式には構造上、避けられない制約があります。最大のデメリットは「海外SEOに対応できない」という点です。 スクリプト方式は翻訳処理をブラウザ側で実行するため、GoogleなどのクローラーがページをクロールしてHTMLを取得した段階では、まだ翻訳処理が行われていません。クローラーには元の日本語コンテンツのみが認識され、英語や中国語などの翻訳コンテンツは検索エンジンにインデックスされないことになります。 つまり、「英語で検索してきた海外ユーザーに、翻訳済みのページを検索結果として表示させる」という用途にはスクリプト方式は機能しません。海外ユーザーへの流入を検索経由で獲得したい場合には、後述のライブラリ方式またはプロキシ方式を選択する必要があります。
また、ページ表示後にスクリプトが動作して翻訳を差し替えるという処理フローの都合上、一瞬だけ元の言語（日本語）が表示されてしまうという視覚的な問題（FOOC）も発生することがあります。訪問者に違和感を与えないためには、この点も考慮した上で方式を選択することが重要です。
ライブラリ方式・プロキシ方式との使い分け基準
3つの方式の特徴を比較する
WOVNの導入方式はスクリプト・ライブラリ・プロキシの3種類があり、それぞれの特性を理解した上で選択する必要があります。 スクリプト方式は前述の通り、HTMLに1行を追加するだけで機能します。SEO対応はできませんが、最も短時間で導入できます。 ライブラリ方式は、自社のWebサーバー上にWOVNのライブラリ（PHP・Java・Ruby・C#・WordPressプラグインなど）を組み込む方式です。翻訳処理がサーバーサイドで行われるため、翻訳済みのHTMLがクローラーに認識されます。言語別URLの発行（パス形式・サブドメイン形式・クエリ形式）やhreflang属性の自動付与によるSEO対策が可能ですが、サポートされる開発言語やフレームワークに制限があり、導入工数も大きくなります。
プロキシ方式は2022年4月にリリースされた比較的新しい方式で、サーバーへのライブラリインストールなしにSEO対応の多言語化を実現できます。DNSやリバースプロキシの設定変更でWOVNのプロキシサーバーを経由させることで、WOVNサーバー上で翻訳済みHTMLを生成してユーザーに返します。サーバー環境への依存度が低く、ライブラリが対応していない言語や環境でも導入できるのが強みです。一方、WOVN側のプラットフォーム障害の影響を受ける可能性がある点はリスクとして把握しておく必要があります。
どの方式を選ぶべきか
用途別の選択基準は次のように整理できます。 まず、社内向けシステムやイントラネット、ツールのUI翻訳など、SEOが不要な用途にはスクリプト方式が最適です。開発コストを最小化しながら迅速に多言語対応できます。
次に、海外ユーザーへの検索流入を獲得したい、グローバルなSEO施策を展開したいという場合には、ライブラリ方式またはプロキシ方式を選択する必要があります。サーバー環境に応じた言語・フレームワークへの対応可否でライブラリ方式が選べるならそちらを、対応が難しければプロキシ方式を検討するという流れが現実的です。
また、現時点では社内向けに素早く展開しつつ、将来的に海外SEOを強化したいという段階的な戦略を取る場合は、まずスクリプト方式で導入し、その後プロキシ方式やライブラリ方式へ移行するというアプローチも実務では選択されています。
実際の導入事例
microCMS ＋ Next.jsでのスクリプト方式導入
HeadlessCMSのmicroCMSを提供する株式会社microCMSは、自社ブログにてNext.js（App Router）で構築したWebサイトへのWOVN導入手順を詳細に公開しています。
同社の事例では、WOVN管理画面でプロジェクトを作成してスクリプト（プロジェクトトークン）を取得し、app/layout.tsx内にScriptコンポーネントとして埋め込む手順が紹介されています。CMSで管理しているコンテンツも含めてページ全体に翻訳が適用されることを確認しており、既存の開発フローを大きく変えずにWOVNを導入できることが実証されています。Vercelにデプロイした環境でも動作確認済みであり、クラウドホスティング環境でのスクリプト方式の有効性を確認できる事例です。
株式会社D2CのWordPress事例
株式会社D2Cのエンジニアチームは、自社が運用するWordPressサイトへのWOVN導入経験を技術ブログで共有しています。スクリプト方式を選択した理由として、サーバー環境への影響を最小化しながら最短で多言語化できる点が挙げられています。また、WOVNのスクリプト・ライブラリ・プロキシの各方式の動作フローを自ら調査・整理した上で、サイトの用途（SEO不要な管理ツールへの翻訳機能追加）に照らしてスクリプト方式が適切と判断した過程も共有されており、実務での方式選定の参考になります。
株式会社PLAYのWOVN調査レポート
HuluやTVerなどの大型動画配信サービスを支える株式会社PLAYの開発チームは、多言語翻訳サービスの選定調査としてWOVNを詳細に分析したレポートを公開しています。3方式の動作フロー・メリット・デメリットを整理した技術的な比較は、WOVN導入を検討するエンジニアにとって有益なリソースです。特に、翻訳処理がどのレイヤー（ブラウザ・サーバー・プロキシ）で行われるかという観点でWOVNの仕組みを体系的に整理している点が評価されています。
よくある質問（FAQ）
Q1. スクリプト方式を導入したのに、翻訳が表示されません。何を確認すればよいですか？
まず管理画面でプロジェクトトークンを確認し、HTMLに埋め込んだコードのトークンと一致しているかを確認してください。次に、スクリプトが全ページの
タグ内に正しく配置されているかをソースコードで確認します。特にWordPressの場合、キャッシュプラグインがHTMLをキャッシュしていてスクリプトが反映されていないケースがあるため、キャッシュをクリアすることも有効です。また、WOVNの管理画面で対象ページが「翻訳対象」として登録されているか、翻訳言語が有効になっているかも合わせて確認してください。Q2. スクリプト方式は海外向けのGoogleやBingの検索結果に表示されますか？
表示されません。スクリプト方式はブラウザ側でJavaScriptを実行して翻訳するクライアントサイドレンダリングであるため、検索エンジンのクローラーが取得するHTMLには翻訳前のコンテンツしか含まれていません。海外の検索エンジンで翻訳済みのページを検索結果に表示させるためには、ライブラリ方式またはプロキシ方式への変更が必要です。海外への検索流入獲得を重視する場合は、導入段階からこの点を考慮した方式選択をおすすめします。
Q3. 現在スクリプト方式を使っていますが、後からプロキシ方式に移行できますか？
はい、移行は可能です。プロキシ方式へ移行する場合は、まずWOVN管理画面でプロキシ方式の設定を行い、DNS設定やリバースプロキシの変更によってリクエストをWOVNのプロキシサーバーへ転送するよう設定します。その上で、既存のスクリプトタグはHTMLから削除します。なお、プロキシ方式への移行は設定変更の内容が複雑になるため、WOVN公式のサポートを活用しながら進めることをおすすめします。翻訳データ自体はWOVN管理画面に蓄積されているため、翻訳のやり直しは不要です。
まとめ：WOVNスクリプト方式の活用と、次のステップへ
WOVNのスクリプト方式は「HTMLに1行追加するだけ」という圧倒的なシンプルさで、多言語化の技術的ハードルを大幅に下げてくれる方式です。社内ツール・イントラネット・SEOを必要としないランディングページなど、検索流入を意識しない用途であれば、現状考え得る最速・最小コストの多言語化ソリューションと言えます。
一方で、本格的な海外展開においては、「海外のユーザーが現地の言葉で検索したときに自社サイトを見つけてもらう」というプロセスが重要です。この点でスクリプト方式は機能しないため、事業成長のフェーズに合わせてライブラリ方式やプロキシ方式への移行を検討する必要が出てきます。
そして、ここで一つ重要な視点があります。WOVNを含む既存サイトの翻訳・多言語化ツールは、あくまで「既存の日本語サイトを翻訳する」アプローチです。一方、海外展開で実際に成果を出すためには、現地の言語・文化・検索ニーズに合わせた「ローカライズされたページ」を持つことが不可欠です。
株式会社Leapが提供する多言語Webサイト制作サービスは、翻訳にとどまらず、東南アジア・東アジア・アメリカなど各ターゲット市場の特性に合わせたページを新規構築することで、現地での検索流入獲得から問い合わせ転換まで一貫して設計します。WOVNのスクリプト方式でスピーディに多言語対応をスタートしながら、次のフェーズとしてローカライズ戦略を本格化させていく——そのステップアップを検討されている方は、ぜひLeapのサービス内容もご覧ください。
