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

5月 27, 2025 5月 27, 2025

小瀧

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

グローバルな時代、地域密着のビジネスであっても「外国人観光客」「海外取引先」「インバウンド集客」など、多言語対応の必要性は年々高まっていますよね。

浜松の観光施設や飲食店でも、英語や中国語ページを設けるケースが増えてきました。

でも、よくあるのが「言語切り替えがどこにあるか分からない」という声。

そう、言語切り替えボタンが分かりにくいと、それだけで離脱されてしまうこともあるんです。

そこで今回のテーマは、「見やすくて、押しやすくて、わかりやすい」——三拍子そろった言語切り替え用トグルボタンの作り方。

ライブラリに頼らず、HTML＋CSS＋JavaScriptだけで実装できるシンプルな方法をご紹介します。

WordPressでも実装しやすく、ちょっとしたカスタマイズでお店のブランディングに合ったデザインにも対応可能！
ぜひ、あなたのサイトにも取り入れて、より多くのユーザーに親しまれるWeb体験を作っていきましょう。

言語切り替えボタンってどうあるべき？

まず前提として、「言語切り替えボタン」は以下のような要素を満たしている必要があります。

見つけやすい場所にある
一目で切り替えの目的が分かる
ワンクリックでスムーズに動作する

特に観光客や外国人ユーザーがアクセスするサイトでは、ファーストビューにボタンがあることや、フラグアイコンで視認性を上げる工夫が効果的です。

HTML＋CSS＋JavaScriptでトグル式言語切り替えボタンを作ろう

以下では、英語⇔日本語を切り替えるトグルボタンのサンプルを紹介します。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

HTML構造

<div class="lang-switch">
  <button id="langToggle" aria-label="言語を切り替え">
    <span id="currentLang">JP</span>
  </button>
</div>

CSSスタイル

.lang-switch {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 999;
}

#langToggle {
  background: #3498db;
  color: #fff;
  border: none;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s ease;
}

#langToggle:hover {
  background: #2c80b4;
}

JavaScriptでページ遷移を制御

document.getElementById('langToggle').addEventListener('click', function () {
  const currentLang = document.getElementById('currentLang').innerText;
  
  if (currentLang === 'JP') {
    window.location.href = '/en/'; // 英語ページへ遷移
  } else {
    window.location.href = '/'; // 日本語トップに戻る
  }
});

※URLはサイト構成に合わせて /en/ などに変更してください。

ブラウザの言語設定から自動判定してリダイレクトする方法

基本の考え方

ユーザーのブラウザ設定は、navigator.language または navigator.languages で取得できます。
この値を元に、英語・日本語などの言語コードに応じてページを振り分けるという仕組みです。

実装コード

以下のコードをトップページ（例：index.html）のhead内またはbody内の先頭に入れることで、初回アクセス時に判定・自動リダイレクトできます。

  (function () {
    // リダイレクト済みでないかをチェック（Cookieなどで判定可能）
    if (sessionStorage.getItem('langRedirected')) return;

    // ブラウザの言語設定を取得
    const userLang = navigator.language || navigator.userLanguage;

    // 英語（en）だったら英語ページへ、それ以外は日本語とする
    if (userLang.startsWith('en')) {
      window.location.href = '/en/';
    }

    // フラグ立て（同セッション中は再リダイレクトしない）
    sessionStorage.setItem('langRedirected', 'true');
  })();