プラカンブログSTAFF BLOG

2017.08.31

簡単に多言語対応できるGoogleウェブサイト翻訳ツールの設置方法

外国語に明るくはないですが、海外ドラマや映画は字幕派のOHMATAです。
今回は東京五輪に向けて需要が高まりそうな「簡単に多言語対応できるGoogleウェブサイト翻訳ツールの設置方法」をご紹介したいと思います。
デモページもありますよ!

Googleにログインして「ウェブサイト翻訳ツール」にアクセス

今すぐウェブサイトに追加をクリックします。

ウェブサイト翻訳ツール – Google 翻訳

ウェブサイト情報を入力

サイトのURLと、サイト内で使われている言語を選択します。
今回テストで作成したページは日本語なので、日本語と選択しました。

プラグイン(オプション)の設定

次はオプションの設定です。
ここで翻訳したい言語を選んだり、表示の種類を選んだりその他の設定ができます。
各項目については以下で説明します。

翻訳する言語

「すべての言語」を選択すると、現在Googleが対応している言語すべてに翻訳することができます。
しかし種類が多く、そこまでの翻訳を求めていない時や数種類だけで良い場合はこちらで言語を指定することができます。
※2017年6月27日現在、ジャワ語にチェックを入れてもジャワ語が出ない問題があります(すべての言語にするとジャワ語も出ます)。

表示モード

表示は「インライン」「タブ」「自動」の3つから選べます。

自動

自動を選ぶと、訪問者のデフォルト言語がページの言語と異なる場合(今回は日本語以外の言語だった場合)、自動的に翻訳バナーが表示され、プルダウンリストは表示されません。
翻訳バナーの見た目については以下の画像をご確認ください。

インライン

インラインを選択するとプルダウンで表示されます。

画像の通り、縦は「Powered by Google~」がプルダウンの下に、横はプルダウンの横に「Powered by Google~」が配置されます。
プルダウンリストのみにすると「Powered by Google」の文字は入らず、プルダウン部分にGoogleマークが表示されます。
今回は「プルダウンリストのみ」を選択しました。

タブ

タブを選択すると、右側に出る表示例のようにウィンドウに翻訳のタブが出るみたいなのですが、テストでコードを貼り付けてみたところ普通のプルダウンリストで出てきました…。
現時点でのバグのようなもので今後は改善されるかもしれません。

詳細設定

ユーザーの言語がページの言語と異なる場合に自動的に翻訳バナーを表示する

翻訳バナーは以下のようなウィンドウの上に出て来る帯のことです。
チェックをつけると違う言語のユーザーがアクセスした時にこの帯が自動的に出るようになります。

ページに複数の言語のコンテンツが含まれている

ページの中に複数の言語のコンテンツが含まれる場合はこちらにチェックをいれます。
日本語のみだと翻訳言語の中に「日本語」は出ませんが、複数言語がある場合は「日本語」が翻訳言語の中に現れます。

Google アナリティクスを使用して翻訳トラフィックを追跡する

翻訳されたページをGoogle Analyticsで追跡できます。
使用したい場合はプロパティIDが必要になります。

デモページ

  • 翻訳する言語「すべての言語」
  • 表示モード「プルダウンリストのみ」
  • 詳細設定「ページに複数の言語のコンテンツが含まれている」

以上の設定で作成したデモページがこちら(別ウィンドウで開きます)

注意点など

テキストでコーディングする必要があります

多言語サイトとして公開したい場合、文字の部分はテキストでコーディングする必要があります。
画像のAltも翻訳されますが、Altを見なければ日本語のままですし、最近はAltがポップアップで出ないブラウザもあります。
また、デザインが凝っているとその分コーディングが大変なので、デザインする際は気をつけた方が良いと思います。

英語圏など日本語以外のユーザーがアクセスした時の挙動を確認したい場合

英語圏の人がアクセスした場合を確認したい場合は、ブラウザの言語設定を英語にしただけでは確認できないかもしれません。私の設定の仕方が悪かったのか、ChromeとFirefoxでは確認できませんでした。
私はOSの言語を英語に設定して確認しましたが、設定するのも戻すのも時間や手間がかかりおすすめできません。Googleを信じましょう。
ちなみに、OSを英語にした場合はちゃんと「言語を選択」の部分が英語で表示されます。まだブログを書く前だったので、スクリーンショットを撮り忘れたのが悔やまれます…。

翻訳時の表示崩れ

日本語で収まりが良いデザインでも、他の言語になると長文になり表示が崩れる可能性があります。
表示が崩れても良しとするか、崩れないデザインにするか等、色々と想定してから制作した方が良いと思います。

完璧な翻訳ではない

翻訳ツールではありますが、あくまで無料のサービスですので正確さについては保証できません。
ちゃんとした翻訳が必要な場合は、プロの方に翻訳をお願いして言語別のサイトを制作されることをおすすめします。

レスポンシブサイトの場合、表示モード「プルダウンリストのみ」に注意

表示モードの「プルダウンリストのみ」は翻訳する言語を「すべての言語」にした時や翻訳させたい言語が多い時に、選択する言語を表示したiframeがコンテンツ幅からはみ出してしまうことがあり、スマホでは見切れが発生して翻訳させたい言語が全て表示されない場合があります。
簡単な回避策として表示モードを「インラインの縦か横」にするか「自動」にする方法があります。

不具合がある場合も

上の方でも書きましたが、ジャワ語が出ないという現象がありました。
調べてみたのですが、同じ現象にあってる方がなく解決法は見つかりませんでした…(ジャワ語にピントを合わせた方が少ないせいもあると思います)。
また、表示モードのタブがタブでない件も恐らく不具合かと思われます。
Googleのサポートも日本語は対応していないようなので、英語が苦手な私は問い合わせできなかったのですが、恐らくしばらくすると解消されると思います。

まとめ

無料のサービスなので不具合があっても仕方がないというデメリットはありますが、簡単に多言語対応できますので、プロに翻訳をお願いするほど費用や予算がない場合はとても便利なツールだと思います。
喋った言葉をすぐに翻訳してくれるほんやくコンニャクみたいな機械もできたようですし、気軽に海外の方とお話できる世界になればいいなと思います。

参考サイト

この記事は、OHMATA が書きました。