2024 Aug 6

佐藤あゆみ

necco note

WeglotでSTUDIOサイトを多言語対応しよう！

Web Development

ウェブサイトを運営していて、「海外からの訪問者にも対応したいけど、どうやって多言語対応すればいいの？」と悩んだことはありませんか？特にSTUDIOの場合は、多言語に対応する機能がないため、どのようにして実現するかが課題となります。
そこで、今回は、翻訳サービスのWeglotを使って、STUDIOサイトを簡易的に多言語対応する方法をご紹介します。

右下に言語切り替えが表示され、英語を選択するとコンテンツを英語に翻訳できる

制約

カスタムコードを利用するため、STUDIOはStarter以上のプランが必要です。
Weglotは無料でも利用できますが、翻訳できる言語、文字数やPV数などの上限があるため、実用時にはサイト規模に応じて有料プランの契約をお勧めします。
翻訳後のテキストには、原則としてウェブフォントは適用されません。
言語スイッチャーはフローティング表示（fixed）のみ対応しています。
CMSを利用している場合、表示のタイミングによって、まれに一部テキストが翻訳されないこともあるようです。

Weglotとは

Weglotは、ウェブサイトを多言語対応するための翻訳プラットフォームです。Weglotはウェブサイトのコンテンツを自動的に検出し、翻訳テキストを生成してくれるため、手動で翻訳する手間を省けます。どのようなサイトにも対応していますので、もちろん、STUDIO以外のサイトでも利用できます。また、WordPressプラグインやShopifyアプリなど、他のプラットフォームに向けた連携もあります。

Weglot｜ウェブサイト翻訳と多言語SEOのソリューション

Weglotの利用方式について

Weglotでは、翻訳機能の導入方法として、（1）リバースプロキシを利用する方式と、（2）JavaScriptのみを利用する方式が用意されています。

本来であれば、リバースプロキシを利用するほうが何かと便利でおすすめなのですが、私が試した限りでは、STUDIOではリバースプロキシを利用する方式では翻訳機能を利用できませんでした。

利用できなかった例

サブドメイン型：ページの内容が全く翻訳されませんでした。
サブディレクトリ型：他の言語のページを表示しようとすると、必ず日本語ページにリダイレクトされてしまい、目的の言語のページを表示できませんでした。

このため、今回は（2）のJavaScriptのみを利用する方式をご紹介します。

JavaScriptのみを利用する方式のデメリット

JavaScriptのみを利用する方式のデメリットは「ページのコンテンツを同URLのまま動的に翻訳するため、翻訳版のページが検索エンジンにインデックスされない」ことです。

もし翻訳版のページを検索エンジンにインデックスさせたい場合は、他のサービスを試すか、もしくは手動で他の言語のページを作成してリンクし合う、という解決策になります。なお、同種の有名サービスの一つである、GTranslateは、STUDIOでは動作しないことを確認済です😞

Weglotに登録する

Weglotのサイトにアクセスし、「無料トライアル」をクリックします。

ウェブサイト翻訳サービス「WEGLOT」のホームページ。「ウェブサイトを翻訳する最も簡単な方法」というキャッチコピーと、サービスの機能説明、無料トライアルボタン、高評価のレビュースコアが表示されている。右上の「無料トライアル」ボタンに矢印が置かれている。

メールアドレスとパスワードを入力し、「Sign up」をクリックして、登録します。

登録が完了すると、Weglotからメールアドレスの確認メールが届きます。
メール文中の確認リンクをクリックしたら、手続きは完了です。

JavaScriptを利用してWeglotを導入する

登録が完了すると、新しく「プロジェクト」を作成する画面が表示されます。

プロジェクト名と、プロジェクトの説明文（任意）を入力して「Next」に進みます。
なお、これから設定する他の項目も含めて、後から設定画面でも変更できます。

言語設定

翻訳元のページの言語（ここでは日本語なのでJapanese）と、翻訳先の言語（ここではEnglish）を選択し、「Next」で次に進みます。

サイト設定

翻訳したいWebサイトのURLを入力します。
ここで、Nextボタンではなく「connect Weglot to your website without it」のリンクをクリックします。

コードをSTUDIOに配置する

Weglotに表示されている埋め込みコードを、STUDIOサイトに配置します。

STUDIOでサイトを開き、サイト設定を開いて、「カスタムコード」にコードをペーストします。
※head内でもbody内でもどちらでも動作します

サイトを更新（公開）する

コードを入力できたら、サイトを「更新（公開）」します。
公開処理が終わると、言語スイッチャーが画面の右下に表示されるようになります。

なお、カスタムコードはプレビューには反映されませんので、必ず公開サイトを確認します。

Weglotの設定を変更する

STUDIOで制作したサイトは、SPAという仕組みで構成されているため、Weglotのデフォルト設定のままでは、ページを遷移した後に、翻訳の処理がかかりません。ページ遷移後に翻訳の処理がかかるように、Weglotの設定を変更します。

Weglotの管理画面にアクセスし、以下の設定を行います。

Dynamic elementを追加する

設定（Settings）のApp Settingsをクリックし、「Add Dynamic」ボタンをクリックします。

モーダルが表示されるので、SELECTORに「body」と入力し、「Save」をクリックします。

上記の設定により、ページ遷移でページ（body）の中身が書きかわったタイミングで、きちんと翻訳処理をかけられるようになりました。

表示位置を整える

これまでの設定でページの翻訳ができるようになりましたが、デフォルト設定では言語スイッチャーが画面の下辺にピッタリとくっついていて少し見栄えが悪いので、カスタムCSSで調整します。

Language Switcherの「CUSTOM CSS」に下記のコードを入力し、Save changesボタンをクリックします。

.country-selector {
  margin-bottom: 16px;
}

注意：Switcher Editorは使わないようにしましょう。

同画面内に「Switcher Editor」ボタンがあり、これをクリックすると言語スイッチャーの見た目や表示位置を変更できるようになっていますが、この機能は使わないようにしましょう。

STUDIOに設置する場合、Switcher Editorで言語スイッチャーの位置を変更してしまうと、ページ遷移後に言語スイッチャーが表示されなくなってしまいます！

これは、Weglotがスイッチャーの要素を指定の場所に移動した後に、ページ遷移が行われることで、STUDIOによって指定の要素の内容が書き換えられ、スイッチャー要素が消滅してしまうために起こります。

翻訳内容を編集する

Weglotでは自動で翻訳してくれますが、固有名詞の翻訳など、調整したい箇所がある場合、手動での翻訳も追加できます。翻訳は、LanguagesとVisual Editorの2つの方法で編集できるようになっています。

Languagesから編集する

Languagesから編集すると、編集したい単語を検索できます。ページで利用されている単語がリストとして表示されるので、複数の翻訳をまとめて変更したい場合に便利です。

ビジュアルエディタで編集する

ビジュアルエディタを使うと、実際のページを表示しながら、翻訳語句を書き換えられます。ページを全体的にチェックしながら書き換えたい場合に便利です。

終わりに

今回は、STUDIOでWeglotを活用して多言語対応を行う手順についてご紹介しました。

こういったツールを利用しなくても、ブラウザの自動翻訳機能を使えば閲覧者側での翻訳は可能ですが、固有名詞など、どうしても誤訳が起きやすい部分があります。Weglotの翻訳編集機能があれば、そういった誤訳を少なくできます。

Weglot以外にも、こんな翻訳ツールが利用できたよ！という例があれば、ぜひ情報をお待ちしています。
（あわよくば、無料で試せるツールだと、私も気軽に試せるので助かります）

STUDIO関連記事

以下、STUDIOに関するその他の記事です。気になるものがあれば参考にしてみてください。

📮 お仕事のご依頼やご相談、お待ちしております。

お仕事のご依頼やご相談は、お問い合わせからお願いいたします。

🤝 一緒に働きませんか？

下記の職種を募集中です。より良いデザイン、言葉、エンジニアリングをチームで追求していける方をお待ちしております。詳細は採用情報をご覧ください。

フロントエンドエンジニア
アシスタントフロントエンドエンジニア

🗒 会社案内資料もご活用ください。

弊社のサービスや制作・活動実績、会社概要、ご契約など各種情報をまとめた資料をご用意しています。会社案内資料からダウンロード可能ですので、ぜひご活用ください。

（2024年8月時点）