STUDIOでの多言語対応！Weglotを使った手順とポイント

先に結論として、STUDIOとWeglot（他の翻訳ツールも含め）の組み合わせでの多言語対応には制限があります。サブドメインでは無事動作しましたが、サブディレクトリでの設置はWeglotのサポートをやりとりしましたが、ちゃんと動きませんでした。また、アクセス解析（GA4）にも課題があります。

STUDIOを利用して多言語対応は可能ですか？どのような方法がありますか？
というご質問を良く頂くようになりました。STUDIOの導入が増えていること、及び大企業への導入が進んでいることも要因だと思っています。

この記事では、STUDIOでの多言語対応の実情について、実際に弊社が行っている方法と合わせて紹介させていただきます。翻訳ツールとしてはWeglotを利用していていますが、他のツールでもできること、制限事項は同様だと思います。

4/9　アップデート
Weglotのサポートと何度も何度もやり取りをして、結果的にSubdomains（サブドメイン）方式にて無事動作するようになりました。詳しくは5.2にて解説しています。

STUDIOとWeglotによる具体的な設置例や課題のみを知りたい方は目次から「5.2 STUDIOとWeglotを使った多言語対応サイトの作成例」へと飛んでください。

1. はじめに

1.1 Webサイトの多言語対応の重要性

現代のビジネスはグローバル化が進んでおり、会社案内のようなパンフレットはもちろん、商品やサービスのカタログを多言語で展開することが必要となっています。また、世界に発信、世界からアクセスしてもらえるウェブサイトはまず最初に多言語対応することは最初に手をつけるのが良いと思います。ここで重要となるのが今利用しているホームページ作成ツールで多言語対応がどこまでできるのか。ここではホームページ制作ツール（CMS）としてSTUDIO、翻訳ツールとしてWeglotを利用した方法を紹介します。

STUDIOは日本発のノーコードCMSツールです。コーディング不要で、直感的な操作でデザイン性に優れたウェブサイトを作ることができます。

一方、WeglotはWebサイトやECサイトの多言語翻訳を可能にするツールです。数多くの言語に翻訳でき、サブディレクトリ型での構築も可能なためグローバルSEOの観点でも安心です。

多言語対応はユーザー体験を向上させ、海外からのアクセスを増やすだけでなく、SEOにも繋がります。そのため、STUDIOとWeglotの組み合わせはビジネス展開において非常に価値のある手段となります。

2. STUDIOとは？

STUDIO公式サイト

2.1 STUDIOの基本的な概要と特徴

STUDIOはウェブサイト作成ツールの一つで、コーディング知識がなくても誰でも簡単にオリジナルのウェブサイトをデザインできます。また、ノーコードで完全オリジナルのデザインにて構築できるのはもちろん、デザイン性に優れたテンプレートも提供されており、その点お魅力です。

しかし、そのままでは多言語対応の運用が難しいため、この問題を解決するために「Weglot」のような翻訳ツールとの組み合わせが有効です。これにより、STUDIOで作成されたウェブサイトを容易に多言語対応にすることが可能となります。

STUDIOとWeglotの組み合わせは、多言語対応ウェブサイトの作成をよりシンプルで効率的なものにします。

2.2 STUDIOでの多言語対応

残念ながら現時点おいて、STUDIOによる多言語対応の機能は提供されていません。そのため、現時点での多言語対応の方法として大きく2つです。

1. 各ページについて必要な言語の分だけページを用意する（超アナログな多言語対応）

2. 外部の翻訳ツールを利用する

1については、各言語に翻訳されたページを必要な言語の数だけアナログに作る、ということになります。各言語間の移動については、ヘッダーまたはフッターのメニュー等を利用して遷移できるように作ります。

2については、Weglotのような各種翻訳ツールと連携をすることによりシステム的に多言語対応を行います。どのツールを利用するにせよ、設置方法については基本的に同じで、翻訳ツールから提供されるコードをGTM（Google Tag Manager）経由またはヘッダー領域に貼り付けることで実装することになります。

詳しくはそれぞれこの後の第5章「5. 実践例: STUDIOでの多言語対応」にて解説します。

3. Weglotとは？

Weglot公式サイト

3.1 Weglotの基本的な概要

Weglotは、あなたのビジネスが成長・飛躍（アクセスを増やす）する手伝いをする、高品質な多言語化ツールです。Weglotは自社サイトのベースとなる日本語に加えて、新たな言語を追加することで、海外からのアクセスを獲得することにより、新規顧客の獲得や売上の増加を実現します。また、各言語の翻訳をこちらが意図した表現でしっかりと準備することにより、訪問者がブラウザの拡張機能を利用した自動翻訳を行う場合に比べて、コンバージョン率の改善にも繋がります。

Weglotを使用すると、ウェブサイトを新しい言語へと簡単に翻訳し、表示することが可能です。また、訪問者の好きな言語へ自動的にリダイレクトする機能や、サブドメインまたはサブディレクトリによる多言語サイトの構築による多言語SEO、プロの翻訳者へ依頼できる機能も備わっています。

さらに、ShopifyやWordPressなど他の多数のプラットフォームとの連携にも対応しており、統合翻訳ソリューションとして機能します。Weglotはどんな言語でもコンテンツを検出し、翻訳します。そして、翻訳を簡単に編集したり、プロの翻訳者に依頼するための管理画面も提供しています。

3.2 多言語翻訳の利便性と特徴

Weglot翻訳ツールは、その使いやすさと高度な自動翻訳機能で注目を集めています。特筆すべきは次の3つの特徴です。

1. 自動翻訳と手動翻訳の併用: Weglotは、指定した言語に自動的に翻訳するだけでなく、独自の翻訳を追加する機能も備えています。これにより、より正確な翻訳が可能となります。

2. 100以上の言語対応: 100以上の言語への翻訳が可能で、世界中のユーザーに対応することができます。

3. SEO対策: 翻訳ページはGoogleに適切にインデックスされ、多言語SEOをサポートします。これにより、各国の検索エンジンでも上位表示を目指すことが可能です。

これらの特徴により、Weglot翻訳ツールは、多言語対応のウェブサイト作成における強力なパートナーと言えます。

4. WeglotをSTUDIOで利用する方法

4.1 WeglotとSTUDIOの連携方法

Weglot翻訳ツールは誰でも簡単に導入できます。まずは以下の手順（ウィザード）に沿って登録から始めてみましょう。

1. Weglotの登録方法
Weglotの公式ウェブサイトにアクセスしてグローバルメニューにある「無料トライアル」をクリックします。Weglotにて利用したいメールアドレスとパスワードを入力し、「Sign up」をクリックすると登録完了です。次にそのメールアドレス宛に認証用のメールが届きますのでメールに記載されている「Confirm my email」というボタンをクリックしアカウントの認証を行います。

2. プロジェクトの作成
メールの認証が完了するとプロジェクト作成画面に遷移します。
PROJECT NAMEは適切にわかりやすいものを入れてもらうとして、WEBSITE TECHNOLOGYという欄にSTUDIOはありませんので、Otherを選択して進んでください。

3．プロジェクトのセットアップ
続いて、Weglotを設置するドメイン名やそのサイトの元の言語（=Japanese）を選択肢、多言語として用意した言語を選択します。この際、1つでも5つでも極論100言語でも可能ですが、料金との兼ね合いもありますので必要な言語数のみを選ぶようにしてください。
また、URL Typeという欄で「Subdomains(サブドメイン)」か「Subdirectories(サブディレクトリ)」かを選択することになりますが、？？？となった方はこの後のDNS設定等が少しハードルが高いと思いますので社内のIT担当者など詳しい方に相談してください。

4．DNSのセットアップ
選択したURL Typeによって、DNS設定の内容が異なります。
サブドメインの場合には翻訳する言語の数だけCNAMEの設定を、サブディレクトリの場合にはWeglotの利用しているcloudflare？を利用した仕組みを使うための設定を行います。

この点についてはDNSの仕組みを理解していることが重要です。特にサブディレクトリの場合にはAレコードの振り先をSTUDIOサーバーから変更することになりリスクがありますので、慎重に検討・設定してください。利用しているドメイン管理サービス（お名前.comやムームードメインなど）によっても管理画面の設定が異なりますので、この場でのDNS設定の解説は省略させていただきます。

慣れている方であればウィザードに沿って設定していくことで問題なく設定できると思いますし、WeglotのDNS設定のドキュメントもありますので問題ないかと思います。

4.2 サブドメイン方式で設置する際の推奨

サブドメイン方式を選択した際に、Weglotが発行するJavascript code snippetをSTUDIO側に設置する必要があります。

GA4や広告計測タグなど最近ではGoogle Tag Manager（GTM）経由で設置（発火）させることが一般的ですが、GTM側があらかじめ準備しているメジャーなタグの場合はGTM経由で問題ないと思いますが、「カスタム HTML タグ」として設置するような場合には発火のタイミングの関係等でうまくいかないケースも出てくると思います。（GTMを熟知してるエンジニアの方は別として）

タグを設置するツール側からサイトの<head></head>内に設置が推奨されているような場合にはGTM経由ではなく、CMSから直接<head></head>領域に貼り付けるほうが正しく動作することあると思います。GTMは便利ですし、各種タグやコードスニペットを個別にCMSの<head>に貼ることによる管理上の煩雑さを解消するために生まれた画期的な仕組みですので可能ならGTMに統一が良いのですが、それ推奨されないツールもある、ということだけは頭の片隅においておくと何かのときに役立つかもしれません。

↓　STUDIOでの設置箇所についてだけ、補足させていただきます。

以上のステップで、Weglot翻訳ツールをあなたのウェブサイトに導入する準備が整いました。最初にウィザードが出てきますので、基本的にはその流れに乗ることで簡単に設置できます。ただ、Weglotの製品サイトは日本語化されているのですが、管理画面側は英語のみのため必要に応じてブラウザの拡張ツールによる翻訳も活用しながら進めていただければと思います。

5. 実践例: STUDIOでの多言語対応

5.1 STUDIOのみ（外部ツールを利用しない）での作成例

こちらの方法はシンプルに、必要な言語数分のページを作り、グローバルメニューまたはフッターにて各言語間の移動ができるようにボタン（または類似するもの）を設置する、というアナログな作り方です。

当然ですが、日本語ページと他の言語のページが連動しているわけではないので、作成時はもちろん日本語ページを修正したときには該当する他の言語のページについても全て手作業で更新していくことになります。

対象のサイトがコーポレートサイトで、会社概要だけ英語ページがあれば良い、またはトップと会社概要とサービスページ及びお問い合わせページのみ英語があれば良い、基本的にはほとんど更新はしない、というような場合にはこの方法でも全く問題ないと思います。

弊社のお客様でもこの方法で実装させていただいているサイトはたくさんあります。

例1）株式会社フーディソン様
・IT+内の制作実績ページ
・フーディソン様の英語ページのトップ

例2）株式会社３４６様
・IT+内の制作実績ページ
・３４６様の英語ページのトップ

また、弊社もこの作り方のページを実際に用意しています。（Weglotによる多言語化を実装している今となっては削除しても良いのですが、お客様に説明するときのために残してあります。）

例3）弊社（株式会社アイティプラス）
・弊社の英語ページのトップ

↓　STUDIOのページ管理画面、単純にページとして英語ページを作っています

↓　グローバルメニューに設置した言語切替ボタンです。

↓　フッターメニューに設置した言語切替ボタンです。

5.2 STUDIOとWeglotを使った多言語対応サイトの作成例

今ご覧いただいたいる弊社のサイトはまさにSTUDIOとWeglotの組み合わせにより多言語対応を行っています。（ただし、現在はブログには表示していません。主にトップページや会社概要など静的ページに設置しています。）

↓　弊社のトップページです。右下にWeglotの言語切替メニューを表示しています。

そのままだとその下のHubspoのチャットボタンと被ってしまうので、Weglotの管理画面にてCSSを設定してチャットボタンの上に来るように調整しています。

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

方式としては「サブディレクトリ」にて実装しています。以前はサブドメインにて実装していました。

結果的にサブドメイン方式に戻しました。

言語としては英語と韓国語（スペイン語から変更）と繁体字、簡体字の4つ、日本語と合わせて5言語になります。

• 日本語　https://www.itplus.co.jp/

• 英語　https://en.itplus.co.jp/

• 韓国語　https://ko.itplus.co.jp/

• 簡体字　https://zh.itplus.co.jp/

• 繁体字　https://tw.itplus.co.jp/

実は、以下の課題があったのですが、無事解決しました！！！
サブドメインはこの後↓に記載するアップデート情報で解決できますが、サブディレクトリだと解決できませんでした。

とあるページで言語を切り替えたときに、必ず選択した言語のトップページに飛んでしまう

もともとは「サブドメイン」にて実装していたのですが、「言語を切り替えたときに、必ず選択した言語のトップページに飛んでしまう」ということが分かり、サポートと色々やり取りする中でサブディレクトリを勧められて切り替えた経緯があります。結果的にそれでもまだ問題は解決されておらず。。。

4/9　アップデート
Weglotのサポートと何度も何度もやり取りをして、結果的にSubdomains（サブドメイン）方式にて無事動作するようになりました。

下層ページにて言語を切り替えると、切り替えた言語のトップページに必ず飛ばされてしまう（切り替え下層ページの翻訳言語ページに遷移しない）という事象が発生していました。なぜそうなってしまうのか、こちらの予測も含めSTUDIOの仕組みを伝えていたのですが、メールのやり取りをしている間に1週間が経ちサポートの担当者が変わってしまうことで再度最初から説明しなければならないなど予想以上に時間が掛かりました。

でも皆さん、今後は大丈夫です！
STUDIOにサブドメイン方式でWeglotを設置し、もし私と同じ動作になってしまう場合（基本的になるはずですが）サポートに以下を伝えてください。

You can tell the Weglot support team that it's a behavior you met on another website, and it was fixed with a Javascript option called: "Listen for dynamic push state."

ただ、Weglotの名誉のためにもハッキリさせておくと、Weglot側に問題があるというわけではなくSTUDIOというツール自体の仕組みが特殊なために起こっている事象です。HTML/CSSで書かれているようなクラシカルなものは当然、WordPressやShopifyなどのCMSではサクッと多言語化できます。

なぜ、STUDIOが特殊なのか、サブドメインとサブディレクトリによる違いは何なのか、ということを書き出すと別の記事が書けてしまうのでこの場では割愛させていただきます。

6.まとめ

以上、STUDIOでの多言語サイトの作り方とWeglotを組み合わせた多言語対応の手順について解説しました。これらの方法にいより自分のサイトを多言語で表示させることが可能になります。

現時点においては、完全なる多言語対応サイトが必要な場合には、他のCMSを検討するべきだと思いますが、CMSとしてSTUDIOを前提にすると今回の方法になるかと思います。

※サブドメインでのGA4での完全な計測はできませんが、一部可能です。
Weglotの以下のヘルプが参考になります。
Can I use Google Analytics on my translated version(s)?