Google翻訳の「ウェブサイト翻訳ツール」を簡単埋め込み！設置方法と使い方

8月 11, 2025 9月 11, 2025

小瀧

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

海外からのアクセスが増えてきたとき、まず検討したいのがサイトの多言語対応です。
しかし、すべての文章を人力で翻訳するのはコストも時間もかかります。
そこで手軽に導入できるのが、Googleが提供している「ウェブサイト翻訳ツール」です。

このツールを使えば、ページ上に言語切替メニューを設置でき、訪問者はワンクリックで希望の言語に翻訳できます。
本記事では、Google翻訳のウェブサイト翻訳ツールを埋め込む具体的な手順と、実務での注意点を詳しく解説します。

1. Google翻訳ウェブサイト翻訳ツールとは？

「ウェブサイト翻訳ツール（Website Translator）」は、Google翻訳のAPIを使って、ページ内テキストを自動翻訳する小さなウィジェットです。
指定した場所にスクリプトタグを埋め込むだけで、サイト訪問者が表示言語を選べるようになります。

主な特徴

100以上の言語に対応
無料で利用可能
HTMLやCMSに簡単に追加できる
自動翻訳なのでメンテナンス負担が少ない

ただし、自動翻訳ゆえに完全な精度ではない点は理解しておく必要があります。
重要なページや法律関連文章は、可能なら人間による翻訳を併用しましょう。

WEBデザイン

多言語サイトをもっとスマートに！言語切り替えトグルボタンの実装方法を解説

多言語対応サイトで欠かせない「言語切り替えトグルボタン」。JavaScriptとHTML＋CSSで簡単に実装する手順をわかりやすく解説します。WordPressなどにも応用OK！...

2. 導入前に確認しておくこと

導入する前に、以下の点を確認しておくとスムーズです。

対象ページの文字コードがUTF-8かどうか
→ 日本語サイトの場合、ほとんどがUTF-8ですが、Shift_JISなど古いエンコードは文字化けの原因になります。
翻訳メニューの設置位置
→ ヘッダー、サイドバー、フッターなど、ユーザーが見つけやすい位置に配置すると効果的です。
デザインとの調和
→ Google翻訳ツールはデフォルトデザインが固定されています。CSSで大きなカスタマイズはできません。

3. 埋め込み手順

Step 1: Google翻訳のスクリプトを読み込む

HTMLのbodyタグ内、翻訳メニューを表示したい場所に以下を追加します。

<div id="google_translate_element"></div>

<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'ja', // 元のページの言語コード
    includedLanguages: 'en,zh-CN,fr,es', // 表示する言語をカンマ区切りで指定（空欄なら全言語）
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE
  }, 'google_translate_element');
}
</script>

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>