多言語対応WEBサイトの作り方｜メリットとサイトの準備【前編】

デジタル社会を迎え、企業の規模を問わずグローバル市場で活躍できるようになっている現代。自社サイトを多言語対応にすることは、もはや選択肢ではなく必須の要件となっています。

そこで本企画では前後編に分けて、初心者にもわかりやすく、多言語対応サイトを作成するための具体的な手順とポイントを解説します。

日本語、英語だけでなく複数の言語に対応することで、グローバルなビジネス展開を支援し、より多くのユーザーにリーチする方法を学んでください。

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

近年、GoogleChromeをはじめとするWEBブラウザには、多言語をユーザーの任意の言語に変換するシステムが実装されています。

この機能は日本以外でも同様に広まっています。そのため、「日本向けの日本語サイトを作ってさえいれば、この機能を使うことで、海外の見込み客もサイトの内容を理解できるのではないか？」と考える気持ちは理解できます。しかし、実はそれほど単純な話ではありません。

海外の顧客にしっかりと自社のビジネスを伝えるためには、やはりその国の言語に対応したWEBサイトを制作する必要があるのです。まずは、その理由について解説します。

多言語対応サイトが必要な理由

多言語対応サイトの制作は、グローバル市場での競争力を高めるために重要な企業戦略です。

Google翻訳をはじめとする自動翻訳ツールは確かに手軽に利用できますが、その反面、以下の点で現時点では不十分と言わざるを得ません。

• 翻訳の精度：自動翻訳は文脈を正確に理解せず機械的に翻訳するため、誤訳や意味が通じない訳語を生成する場合がある。おかしな文章が表示されてしまうようでは、ブランドイメージの低下や誤解を招くリスクに繋がる
• 文化的適応：自動翻訳は文化的背景を考慮せず、現地の風習や言葉遣いに適応できないため、特定の地域や文化に配慮したコンテンツを提供することができない
• SEO対策：SEOの観点では、各言語ごとに適切なキーワードを使用する必要があるが、自動翻訳はこれを考慮せずに翻訳するため、検索エンジン最適化が十分に行われない

多言語対応サイトを制作するメリット

自動翻訳ツールの限界を理解した上で、上記の課題を乗り越えられる多言語対応WEBサイトを作成することは非常に重要です。

安易に自動翻訳ツールに頼るのではなく、専門の翻訳者やローカライズ（その地域のユーザーの文化などを考慮した翻訳作業）ツール・サービスを活用して、高品質なコンテンツを提供することで、次のようなメリットが享受できるのです。

海外市場の開拓

• 新たな顧客層の獲得：多言語対応により、現地語で情報を提供することにより、海外の潜在顧客にリーチしやすくなる。これにより、新しい市場でのビジネス展開が期待できる
• 信頼性の向上：顧客は自分の母語で情報を得られることで、企業に対する信頼感が増し、信頼できる情報源として認識されることで、ブランドロイヤリティが向上する

ユーザーエクスペリエンスの向上

• 使いやすさ：ユーザーが自分の母語でサイトを利用できることで、操作が直感的になり、サイトの滞在時間やコンバージョン率が向上する
• カスタマーサポート：多言語対応のカスタマーサポートを提供することで、ユーザーが抱える問題を迅速に解決し、顧客満足度を高めることができる

競争優位性の確保

• 差別化：多言語対応は競合他社との差別化要素となり、競争優位性を確保できる
• グローバルなブランド認知：多言語対応サイトは、国際的なブランド認知を高める手段としても有効である

多言語対応WEBサイト制作のステップ（設計～デザイン）

このように多くのメリットがある多言語対応WEBサイトですが、実際にはどのように考え、どのように制作していけばよいのでしょうか。

前編となる今回は、サイトの設計からデザインなど、制作のための下準備段階を中心に解説します。

ステップ1：ドメインの決定

WEBサイトを制作するには、一つひとつのサイトに割り振られたドメインを取得する必要がありますが、多言語対応WEBサイトを構築する際には、特別なドメイン戦略を考えなければなりません。

ここでは3つの戦略を紹介しますが、それぞれの利点と欠点を理解し、目的に応じた最適な選択をすることが重要です。

これらのポイントを考慮し、最適なドメインとURL構造を選定することで、効果的な多言語対応サイトを構築することができます。

サブドメイン

自社が日本国内で使用しているドメインに対して、ドメインの前に海外向け日本サイトであることを表すサブドメインを設定し、これまでのドメインを利用して多言語のサイトを作成します。

• 例：en.example.com
• 利点：SEOの効果を既存のドメインから引き継ぎやすい。管理が一元化され、サーバー設定が簡単
• 欠点：場合によっては独立したサイトと見なされてしまい、SEOの効果が分散する可能性がある

サブディレクトリ

既存のドメインに対して、新しいコンテンツ（ページ）として他の言語に対応したディレクトリを設定し、子サイトのように運用する方法です。

• 例：example.com/en/
• 利点：既存のドメインのSEO効果を共有できる。設定が比較的簡単で、URL構造が分かりやすい
• 欠点：大規模なサイトになると管理が複雑になる可能性がある

国別コードトップレベルドメイン（ccTLD）

国別に特別に指定された「国別コードトップレベルドメイン（ccTLD）」を取得することにより、訴求したい国に対応した新しいサイトを作成します。

• 例：example.jp（.jp＝日本の国別コードトップレベルドメイン）
• 利点：特定の国や地域向けの信頼性が高まる。地域ごとに独立したSEO対策が可能
• 欠点：ドメインの取得や管理のコストがかさむ場合がある。また、国ごとにドメインを取得する必要があるため実装には手間がかかる

ステップ2：各言語ページのURL設計

多言語対応サイトを構築する際には、各言語ページのURL構造を慎重に設計する必要があります。ここではその注意点を解説します。

明確で一貫性のある構造

各言語のURLは明確で一貫性を保つように設計します。例えば、英語ページなら「/en/」、フランス語ページなら「/fr/」とすることで、ユーザーにも検索エンジンにも分かりやすくなります。

Hreflangタグの設定

各言語ページにHreflangタグ（Webページの言語と地理的ターゲットを指定するために使用されるHTML属性）を設定することで、検索エンジンに対して特定の言語と地域向けのページであることを明示します。これにより、適切な地域のユーザーにページが表示されやすくなります。

自動リダイレクトの回避

ユーザーのIPアドレスやブラウザ設定に基づいて自動的にリダイレクトすることは避け、ユーザー自身が言語を選択できるようにすることが推奨されます。これにより、ユーザーエクスペリエンスが向上します。

ステップ3：CMS選定とプラグイン設定

WEBサイトを制作するには、制作会社などに依頼して完全にオリジナルのサイトを用意する場合を除いて、何らかのCMS（コンテンツ管理システム）を利用することをおすすめします。

ここでは、多言語対応のWEBサイトを制作する場合におすすめのCMSとそのプラグインについて解説します。

WordPress（CMS）

• 特徴：世界中で広く使用されているオープンソースのCMS。プラグインが豊富で、多言語対応も簡単に行える
• 多言語対応プラグイン：WPML、Polylang、Weglotなど
• 利点：コミュニティが大きく、サポートが充実している。テーマやプラグインの選択肢が多い

Wix（CMS）

• 特徴：直感的なドラッグ＆ドロップエディタを備えたクラウドベースのWEBサイトビルダー
• 多言語対応機能：Wix Multilingual機能を使用して、多言語対応ページを簡単に作成できる
• 利点：使いやすさ、カスタマーサポートの充実、デザインの自由度が高い

WPML（WordPress用プラグイン）

40以上の言語にワードプレスで構築されたサイトを少ない手間で運営できるようにするプラグインです。

企業サイトやブログなど、さまざまな用途で使用でき、翻訳管理に高度な機能を提供してくれます。

Polylang（WordPress用プラグイン）

Polylangはワードプレス用の多言語化プラグインです。このプラグインをインストールすることで、WEBサイトを2カ国語以上に切り替えることができるようになります。

ただし、言語別の管理画面が自動生成されるわけではありません。基本となる言語（例えば、日本語）でサイトの内容やコンテンツ、タグやカテゴリーなどを作成し、あとは多言語化したいところを他の言語で作成して関連付けていく、という仕組みです。

また、注意すべきは自動翻訳機能がついているわけではないという点です。あくまでも2カ国語以上でコンテンツをそれぞれ作成し、その多言語コンテンツを関連付けてWEB上に公開するためのツールなので注意してください。

Weglot（WordPressおよびその他のプラットフォーム用プラグイン）

WEGLOTは、同名のクラウド翻訳管理ツールを提供するフランスの会社で、2016年に創業したテック・スタートアップです。自動翻訳では、DeepL・Google翻訳・Microsoft翻訳・Yandex翻訳の4つのソースを使用して、世界100ヶ国語以上に対応しています。

2021年11月現在、グローバルで50,000サイト以上のWebサイトで導入されているため、インストールや運用に関する情報源も多く、効率的に多言語対応サイトを構築し、管理することができます。

ステップ4：デザインとレイアウトの設計

多言語に対応したWEBサイトを制作するには、コンテンツの内容が多言語対応されていること以外にも、デザインやレイアウトもその国の言語に合わせた調整が必要となります。

その注意点について、モバイル対応時の状況も合わせて以下に解説します。

各言語のユーザーに合わせたデザイン調整

多言語サイトを構築する際には、各言語のユーザーに合わせてデザインを調整することが重要です。これにより、ユーザーエクスペリエンスを向上させることができます。以下のポイントに注意してください。

ローカライズ

各地域や文化に合わせたデザイン要素を取り入れることも、その国のユーザーにより受け入れてもらうためには重要な施策です。

例えば、最適な色彩、レイアウト、画像の選択などが文化によって異なる場合もありますし、ローカルの祝日やイベントに合わせたデザインの調整も効果的です。

言語の特性

言語によっては、文字の長さやフォントサイズが異なるため、レイアウトの調整が必要です。例えば、英語と比較してドイツ語などのテキストは長くなる傾向にあります。

また、右から左に読む言語（例：アラビア語やヘブライ語）を導入する場合は、そのためのデザイン調整も重要です。

モバイル対応とレスポンシブデザインの実装

現在のWEBサイトは、さまざまなデバイス（PC、タブレット、スマートフォン）でアクセスされるため、レスポンシブデザインの実装は不可欠です。

ここで解説する内容の多くは、日本でWEBサイトを制作する際も共通するものですが、復習のためにも改めて確認しておいてください。

レスポンシブデザインの基本

レスポンシブデザインとは、ユーザーが使用するデバイスに応じてWEBサイトのレイアウトが動的に変化するデザイン手法です。

WEBサイトをレスポンシブデザインに対応して制作することで、PCやスマホなど、タブレットなどいずれのデバイスでも最適な閲覧体験を提供できます。

多くの場合、CSSメディアクエリを使用して、異なる画面サイズに応じたスタイルを適用することで、同じHTMLコードで異なるデバイスに対応できます。

モバイルファーストのアプローチ

原則として、はじめにモバイルデザインを設計し、その後でデスクトップ向けに拡張するモバイルファーストのアプローチが推奨されています。これにより、利用者の最も多いモバイルユーザーにより快適な体験を提供できます。

PCのブラウザよりもモバイル画面サイズのデザイン・開発を優先して注力することで、タッチ操作を考慮した大きなボタンや、縦スクロールを主体としたレイアウトなど、現在のSEO的にも重要とされる様々な施策に対応しやすくなります。

ブレイクポイントの設定

レスポンシブデザインでは、画面サイズの変化に応じてレイアウトを調整するためのブレイクポイントを設定します。

ブレイクポイントとは、「どの幅で表示を切り替えるか」ということを表しており、年々新しいデバイス製品が登場し画面サイズのバリエーションが増える中では、重要な設定ポイントです。

国によって流通しているデバイスの主流は異なると考えられますが、一般的なブレイクポイントは、スマートフォン（320px-480px）、タブレット（768px）、デスクトップ（1024px以上）で設定します。

各ブレイクポイントで異なるCSSスタイルを適用し、デバイスごとに最適なデザインを提供してください。

画像とメディアの最適化

画像やメディアファイルのサイズを圧縮し、ページの読み込み速度を向上させます。これにより、モバイルデバイスでもスムーズな閲覧が可能です。

レスポンシブ画像技術（例：srcset属性）を使用して、異なる画面サイズに応じた画像を提供します。

これらのポイントを考慮して、各言語のユーザーに最適なデザインを提供し、様々なデバイスでの閲覧体験を向上させることができます。

>>「後編／多言語対応WEBサイトのコンテンツ作成～公開と運用」へ続く