多言語サイトの「表示言語切り替え」の実装方法は？実装のポイントも｜Webサイト制作 / CMS・MAツール｜LeadGrid（リードグリッド）

海外の新規顧客を獲得しようと考えた時、Webサイトを多言語対応にすることは必須です。ただ「表示の切り替えはどうすればよいのだろう」とお悩みではありませんか？

本記事では、多言語サイトの「表示言語切り替え」の実装方法とそのポイントについて解説します。この記事を通じて、自社サイトをより使いやすくするための参考にしましょう。

多言語サイトとは

多言語サイトとは、複数の言語に対応したWebサイトのことを指します。具体的には英語、日本語、スペイン語など、ユーザーが自由に選択できるように設定されたサイトです。

例えば旅行会社のWebサイトがあるとします。世界中からそのサイトを訪れる人がいるとき、英語しか対応していないと、日本語やスペイン語を話す訪問者は情報を理解するのが難しいでしょう。しかしそのサイトが多言語に対応していれば、訪問者は表示切替え機能により、自分の理解できる言語を選択して情報を容易に得ることができます。

多言語サイトの作り方

多言語対応のWebサイトを制作する方法については、主に二つのパターンがあります。一つ目は新規制作もしくはリニューアルの場合、二つ目は既存のWebサイトを多言語対応させるケースです。

【新規制作もしくはリニューアルする場合】

新規作成・リニューアルでの多言語サイト制作フローは以下の通りです。

1. 対応言語設定：まず自社の製品やサービスを提供したい市場で使われている言語を決定します
2. ペルソナ設計：次にその言語を話す顧客のプロフィール（ペルソナ）を作成します。これにより、Webサイトのコンテンツとデザインが顧客のニーズに合致するようにします
3. 競合調査・キーワード設計：同じ市場で活動している競合企業を調査し、自社が優位に立つための戦略を練ります。また検索エンジン最適化(SEO)の観点から見て重要なキーワードを特定します
4. デザイン：ペルソナと市場調査に基づいてWebサイトのデザインを行います
5. コンテンツ制作・翻訳：サイト上に掲載するコンテンツを作成し、それを対象言語に翻訳します
6. 開発：Webサイトの開発を行い、すべての機能が正常に動作するか確認します
7. 公開・運用・改善：サイトを公開し、運用を開始します。その後、ユーザーフィードバックやアナリティクスのデータを基に改善を繰り返します。

【既存のWebサイトを多言語対応させる場合】

既存のWebサイトを多言語化するケースでの制作フローは次の通りです。

1. 翻訳する言語、ページ設定：対応したい言語と、その言語で表示するページを設定します
2. 翻訳：設定したページのコンテンツを新たな言語に翻訳します
3. URL設定：各言語でのページに対して適切なURLを設定します。これにより検索エンジンが各ページを正しく認識し、ユーザーに対して適切な言語のページを表示することができます

上記で箇条書きされている項目の詳細は下記の記事で紹介されています。

関連記事：多言語サイトの制作方法は？フローやポイント、おすすめツールも紹介

多言語サイトの表示言語切り替えの実装方法

多言語サイトにおける表示言語切り替えの実装方法は以下の3つです。

• 対応言語をすべて表示する
• プルダウンで言語切り替えを行う
• 言語切り替えボタンを配置する

対応言語をすべて表示する

最もシンプルな方法は、サイトが対応するすべての言語を一覧表示することです。例えば、英語、日本語、スペイン語などの言語名をサイトの見える場所にリスト表示し、ユーザーがその中から選べるようにするような方法です。

この方法は対応言語の数が少なければユーザーにとっても直感的で、自分の言語をすぐに見つけられる利点があります。反面、対応言語の数が多ければ自分の言語が見つけづらくなり、かえってユーザビリティを損ねる可能性もあります。

プルダウンで言語切り替えを行う

もう一つの一般的な方法は、プルダウンメニューを使用することです。これは、サイトが対応するすべての言語を一つのドロップダウンメニューにまとめ、ユーザーが選べるようにする方法です。この方法の利点は、画面上のスペースを節約できる点にあります。

スペースの節約効果は対応言語が多ければ多いほど、実感しやすいでしょう。

言語切り替えボタンを配置する

また対応言語がふたつしかない場合、トグルスイッチ（ON・OFFの切り替えスイッチ）のような言語切り替えボタンを配置する方法もあります。この方法はユーザーがそのボタンをクリックすることで言語を切り替えるする方法です。日本語⇔英語のようなサイトにおすすめです。

表示言語切り替えの実装ポイント

表示言語切り替えを実装する際のポイントを以下7つ紹介します。

• その国の言語で表示し、記号やマークを利用しない
• 見つけやすい場所に設置する
• デフォルトのプルダウンは日本語で表記しない
• Webサイトの言語切り替えを自動で行わない
• ユーザー入力欄でカナ／かな入力欄は非表示にする
• 地域化対応（ローカライゼーション）に対応する
• 海外向けのSEO対策を準備する

その国の言語で表示し、記号やマークを利用しない

言語切り替えの選択肢をその国の言語で表示することが重要です。例えば「Japanese / English / Korean」と表示するのではなく「日本語 / English / 한국어」と表示しましょう。その国の言語で表示することで、ユーザーは自分の言語をすぐに認識できます。

また言語切り替え機能のマークや記号はなるべく使わないようにしましょう。これらの記号は、言語によっては理解しづらい可能性があります。特に国旗をマークとして利用しているサイトもありますが、あまりいい例ではありません。国旗はあくまで場所を示すもので、同じ国であっても使用言語が違うケースもあるので相応しくありません。

逆もまたしかりで、仮に英語切替機能のマークにアメリカの国旗を使った場合、カナダやオーストラリアなど他の英語圏のユーザーは離れてしまうでしょう。

見つけやすい場所に設置する

言語切り替え機能はユーザーがすぐに見つけられる場所に設置することが重要です。

一般的にはヘッダーやフッターなど、目立つ位置に設置すると良いでしょう。これにより、ユーザーはサイトを探索する際に、自分の言語にすぐに切り替えることができます。

ちなみに文字コンテンツがメインのサイトの場合はヘッダーに切り替え機能が置かれることが多く、画像や動画のコンテンツがメインのサイトではフッターに置かれるケースが多いです。

ただし、翻訳する言語数が多い場合はスペースを取られてしまうという難点もあります。そこで言語数が多い場合はドロップダウンリストを採用しましょう。ドロップダウンリストの表示には地球のアイコンと合わせて「Language」と表示するのが親切です。

デフォルトのプルダウンは日本語で表記しない

プルダウンメニューを使用する場合、デフォルトの表示を日本語で設定しないでおきましょう。なぜなら日本語を理解できないユーザーにとっては、日本語で表示されたプルダウンメニューは理解できないからです。

ここでは国際的に広く理解されている英語をデフォルトに設定することを推奨します。もしくはプルダウンの横に地球儀マークや「あA」などのアイコンを置きましょう。スマートフォンなどで言語を切り替える際に使用されるマークなので、切り替え機能を主張するには十分機能します。

Webサイトの言語切り替えを自動で行わない

言語切り替えを自動で行う機能は避けることが推奨されます。自動的な言語切り替えはユーザーのブラウザ設定や地域情報に基づくため、ユーザーの期待と異なる結果をもたらす可能性があります。

例えば、海外在住の日本人や日本語を学んでいる海外の方などは、日本語のサイトを見たいのに、自動的に切り替えられてしまうと困惑するかもしれません。そのため、ユーザー自身が選べるようにすることが、最もユーザーフレンドリーな設定といえるでしょう。

またSEOの観点でも、言語の切り替えを自動で行うのは良くありません。というのもGoogleのクローラーは様々な場所からサイトにアクセスしてページ情報を認識するので、ターゲットとしている地域とGoogleがサイトの属性として認識した地域に、ずれが発生する可能性があるのです。

ユーザー入力欄でカナ／かな入力欄は非表示にする

一般的な日本のサイトでは、Webサイト上にお問い合わせフォームやECサイトの決済情報入力フォームがある場合、カタカナまたはひらがなの入力が必須です。しかし海外の方にカタカナやひらがなは理解できません。そこでカナ／かな入力は非表示にすることで、海外の方がスムーズに入力できるよう対応しましょう。

地域化対応（ローカライゼーション）に対応する

地域化対応（ローカライゼーション）とは、特定の対象言語や国・地域によって表記ルールを合わせたり、現地の風土や文化に合わせた翻訳やデザイン・レイアウトに対応することを指します。

地域化対応（ローカライゼーション）の詳細や成功事例については、下記記事をご参考ください。

関連記事：日本と海外でWebデザインに違いはある？現地でも通用するWebサイトにするコツを紹介

海外向けのSEO対策を準備する

日本でのSEO対策と海外に向けたSEO対策は方法が異なります。そしてきちんと海外に向けたSEO対策を行えば、インバウンド集客はもちろん海外進出時のプロモーションにも効果的です。

海外向けのSEO対策の方法については、下記記事をご参考ください。

関連記事：多言語サイトでのSEOのポイント5選｜Google公式情報を元に解説

多言語サイトは実績の豊富なLeadGridで制作しよう

この記事では多言語サイトの切り替えの実装方法について紹介しました。この記事を参考に、ユーザビリティの高い多言語サイトをデザインしましょう。

また多言語サイトは実績の豊富な会社に依頼がおすすめです。多言語サイト制作は表示切り替えの他にもリンクの設計や多言語サイトならではのSEOなど、詰まりやすいポイントがたくさんあります。実績が豊富な制作会社に依頼することで、適切なアドバイスを受けやすくなるのです。

LeadGridは多言語サイトの実績豊富な制作会社である株式会社GIGが、Web制作の際に利用するCMSです。LeadGridで作られたサイトはデザイン性が高いことに定評があり、切り替え機能を含むサイト全体としてユーザビリティの高い、そしてユーザーの目を引くデザインをご提案します。

• LeadGridの詳細はこちらから
• LeadGridのデモはこちらから
• LeadGridの制作事例はこちらから
• お問い合わせはこちらから