ENT+（エントプラス）

こんにちは！コーダーのアキモトです。
今回は多言語サイトの作り方に関して、ポイントなどをまとめました！

多言語サイトとは

そもそも多言語サイトとは、自国以外の言語でも利用できるようにしているサイトのことを指します。
私たちで言うと基本は日本語のサイトを用意すると思うのですが、プラスして海外向けに英語や中国語なども制作するような形ですね。
弊社ではゲームのサイト制作も多いので、ローカライズする国や地域向けに多言語サイトを用意することも多いです。

ただ、関わったことのある方はご存知の通り、ボリュームにもよりますがサイト制作は日本語だけでも大変なものです…！プラスして複数言語を制作するとなると単純計算で「×言語数」の手数と時間がかかります。
これは制作側はもちろんですが、クラアント側も翻訳原稿の用意や確認事項が増えますので双方にとっても大変であると言えます。
また、厄介なことにSEOや個人情報保護の観点から各国で対応すべき内容が異なるので、そういった点も理解と注意が必要です。

多言語サイトはなぜ必要か

インターネットで世界中どこからでもどこへでもアクセスできてしまう昨今ですが、世界中で話者の少ない日本語だけでは海外へのアピール・広告効果は期待できません。
多言語サイトに対応するということは、海外展開を視野に入れている企業やコンテンツにとって必要不可欠であると言えます。

多言語サイトのメリット

多言語サイトは先述の通り費用も時間もかかります。ので、もちろんそれ相応のメリットがあります！
以下、大きく3つをご紹介します。

1. 認知度の向上が期待できる

ビジネスをしていて海外展開などを見込んでいる場合には、先にも触れた通り、日本語サイトだけではPR効果はほとんど期待できません。
現在、または今後ターゲットにしていきたい国や地域があるのであれば、そこを拠点にしている人たちにとっての母国語のサイトを用意することによって自社アピールの機会が増え、結果的に認知度向上の手助けになるはずです。

2. ブランディング効果が期待できる

WEBサイトは企業やお店、コンテンツの”名刺”のようなものです。
特にここ近年はSNSなどを活用し低コストで集客・広告効果を向上させている企業やブランドなども多いです。もちろん、それで効果が期待できるのも事実ですが、だからこそきちんとコストをかけて多言語サイトを用意していれば、その姿勢自体が『積極性』『安心感』『将来性』へのアピールとなります。
これは海外だけではなくグローバル展開を目指している国内の企業、個人にも好印象を与えるので、結果的にブランディング効果につながると言えます。

3. 国外からの集客効果が期待できる

皆さんも旅行前などはインターネットで下調べをしませんか？その場合、大体英語サイトから情報を得ることになると思います。
翻訳機能もありますが、機械翻訳だとニュアンスが掴めなかったり文法が変だったりでなんだか嫌になっちゃう…なんて思いをした方もいらっしゃるのではないでしょうか。
それと全く同じことを外国人観光客の方も思うということです。さらに世界から見たら、日本語はかなり特殊な言語に入ります。なので、せめて世界の公用語である英語サイトだけでも用意しておけば格段に情報キャッチをしてもらいやすくなります。
見知らぬ土地で母国語の情報は安心感がありますよね。誰しもお金と時間を使って観光に行く以上、失敗したくないですから…（笑）
最近はコロナ禍も落ち着き、外国人観光客も戻ってきましたよね。もしグローバルに集客をしていきたいのであれば、用意することをオススメします！

制作の手順

基本的には日本語サイトを軸として、言語分を翻訳し複製していくというのが考え方ですが、それはあまりにも時間がかかるのでWordPressなどのCMSを使用して設計する場合が実際には多いと思います（多言語化に特化したプラグインも多数存在するため）。
ただ、そちらを踏まえても基本が大切なので今回はCMSなどは使わない、プレーンな制作にフォーカスします。

1. 必要な言語を洗い出す

まずは、どの国や地域に対して訴求していきたいかを中心に必要な言語を決めましょう。
何度も言うようですが、言語を増やせばそれだけコストがかかります。とりあえずで闇雲に選んでいくのは避けたほうが良いでしょう。

2. コンテンツを整理する

軸となる日本語サイトでは必要だけど、他言語では不要なページや要素があったり、仕様自体を変える必要があったりする場合がほとんどですので、どこが削られるのか、変わるのか、変える必要があるのか…を予め洗い出し、整理した仕様書やワイヤーフレームなどを用意することが重要です。
その後のデザインも開発の設計も二度手間が減りスムーズになります。

3. 翻訳原稿の用意

注意点としては機械翻訳をそのまま掲載してしまうのはNG（精度が上がったとは言うもののネイティブの方からすると不自然さがまだまだ残るのでマイナスイメージにしかなりません…）です。
Googleのガイドラインでも機械翻訳の使用はスコア減点のペナルティ対象となる可能性があります。また、デザイン上どうしても大体この文字数までに収めたい、なども発生する可能性がありますのでそういった場合は原稿の調整などが必要になる可能性もあります。

4. URL構造の決定

多言語制作構築の上でまず必要なのは外国語のURL構造をどうするか、です。これを決めないと構築環境の設計ができません。
こちらは以下3つの手法があります。

国別ドメイン（ccTLD *1 を使用）

アメリカの場合：（例）xxxx.us
多言語展開する国が決まっているサイトにおいてはメリットとなりますが、対象の国コードの地域以外ではターゲティングが出来ないため、例えば英語圏全体（アメリカやイギリスなど）に展開していきたい場合には不向きです。

注1：ccTLD -country code Top Level Domain
国内トップレベルドメインと言い、各国に割り当てられた固有のドメインとなります。日本の場合は「.jp」です。
こちらを用いた場合、検索エンジンはサイトがそのドメインに対応する国のものであると判断します。

サブドメイン（gTLD *2 を使用）

英語の場合：（例）en-xxxx.com
サブドメインを使用して各言語のサイトを作ることが可能で、それぞれの言語で構築・分割できる点がメリットと言えますが、サイト自体が分かれるため構築や管理の手間が増えてしまう点がデメリットと言えます。

注2：gTLD -generic Top Level Domain
こちらはどこの国にも属していないドメインで、一般的に地理的制限をなしに世界のどこからでも使用（登録）が可能です。
「.net」や「.com」、「.info」などが該当します。地理的制限がないので検索エンジンはドメイン名だけではどの地域に対応したサイトか判断ができません。

サブディレクトリ

英語の場合：（例）xxxx.com/en
こちらは同一ドメイン（ドメイン自体には上記gTLDを使用）の中で各言語用の（英語なら「ドメイン/en」など）の下層ディレクトリを作成する方法です。同じドメイン内で全言語のファイルを管理できるため構築面においてもメリットが大きいです！
ユーザビリティの観点から「言語切り替えボタン」は必須と言えます。

諸々踏まえると、監理のしやすさとSEOの観点という両面でも「サブディレクトリ」で構築するのがおすすめです。
弊社でも扱うことが多いです。次点で「サブドメイン（gTLD）」でしょうか。もちろん、ケースバイケースですのでクライアントとメリット・デメリットを踏まえて話し合い、決定できるといいですね。
なお、パラメータでの設定は非推奨ですので使わないようにしましょう。

4. 言語ごとの書き換えや設定

構築にあたって、言語ごとで書き換えを行うべき箇所がありますので簡単にご紹介します。また、フォントにも注意が必要です。WEBフォントを使用する場合、日本語と英語は大抵問題ありませんが、繁体字などは適宜font-familyを変更/追加する必要があるかと思います。

headタグ

HTMLファイル（Webページ制作で使用される言語）内の最上部にあるページの文章情報を定義するためのタグです。サイトのタイトル、ページタイトル、どの言語で書かれているのかなどが該当します。

<html>タグ
ページ内の言語を定義します。

日本語の場合：<html lang="ja" dir="ltr">
英語の場合：<html lang="en" dir="ltr">

また、もしアラビア語など右から左に読むような言語の場合はdir=”ltr”をdir=”rtf”に書き換えます。
なお、このdir（書字方向）はhtmlタグで記述した場合はサイト全体への指定になりますが要素タグごとへの指定も可能ですので適宜利用しましょう。指定しなかった場合のデフォルト値はdir=”ltr”になるので、日本語や英語の場合は未指定でも表示上の問題は起きません。

<title>タグ
ページのタイトルを定義します

日本語の場合：<title>これがページタイトルです</title>
英語の場合：<title>This is Page Title</title>

また、もしアラビア語など右から左に読むような言語の場合はdir=”ltr”をdir=”rtf”に書き換えます。
なお、このdir（書字方向）はhtmlタグで記述した場合はサイト全体への指定になりますが要素タグごとへの指定も可能ですので適宜ご利用ください。指定しなかった場合のデフォルト値はdir=”ltr”です。

<link rel="alternate">タグ
内容は同じだけど、URLがそれぞれ異なる場合に関連づけて指定し、検索エンジンに「日本語版のページはこっちで、英語版のページはこちらですよ」と伝えるために使用します。設定することでSEOの評価が上がります。
日本語と英語版の2言語で多言語対応そている場合は以下のような指定になります。

日本語：<link rel="alternate" href="https://example.com/" hreflang="ja">
英語：<link rel="alternate" href="https://example.com/en/" hreflang="en">
デフォルト：<link rel="alternate" href="https://example.com/" hreflang="x-default">

「link要素」とは「該当するページ内のHTML文章と外部ページを関連付ける」ためのもので、
「rel属性」とは「リンク先のファイルやページとの関係性を指定する」ものです。
この2つの値を用いてalternateタグは実装されます。「hreflang」はhreflang属性といい、作成したWebページがどの国の言語向けに作られたかを示しています。
デフォルト言語はx-defaultと指定します。

5. Cookieと個人情報保護法に関する対応

Cookieと個人情報を取り扱う場合、世界の個人情報保護法への理解をしなくてはなりません。
この点については適宜法改正などが行われており、把握は極めて難しいため情報を更新をする、また、法に関わりますので専門の部や担当者の指示を仰ぐ必要があります。十分に注意しましょう。

CMP（Consent Management Platform=同意管理プラットフォーム）の設置が必要な場合が多いです。

「すべての Cookie を受け入れる」「すべて拒否する」などの選択肢が画面上にポップアップが表示される仕組みを提供するもの。

また、以下は個人情報周りについて触れた記事になりますので併せてご参照ください。

WEB制作における改正個人情報保護法って何？

WEB制作におけるGDPR対応って何？

6. 要素の分岐など

軸となる言語のサイトを基準に組んでいきますが、使用フォントなどによってはfont-familyの変更や上書きが必要かもしれません。
また、2で設計した通り変更や差分などが発生すると思うので、スタイルシートで上書きなどができるよう設計しておくことも大切です。

弊社では差分等が発生する各タグに言語ごとの共通classを指定し、スタイルシートは軸となる共通のものと、各言語上書き用のcssを用意したりしています。
サイトの仕様や4のURL構造次第なところもあるので、ここは設計時によく検討しましょう。

7. XMLサイトマップの作成

多言語サイトにおいてこちらも重要です。外国語サイトのXMLサイトマップも作成しましょう。
WordPressには簡単に作成可能なプラグインがありますし、ホームページビルドサービスではデフォルト機能として備えている場合もありますので確認してみてください。

検索エンジンに対し、サイト内の構造やページの内容を伝えるためのマップのこと。

登録にはGoogleの「Google Search Console」を活用しましょう。
Googleの検索結果に表示（=インデックス）されるには1週間前後時間が必要となります。

言語ごとのポイント

簡単ではありますが、弊社がよく扱う各国の言語について紹介します。

英語

言語コード：en
国コード（代表国を抜粋）：アメリカ(US)、イギリス（GB）、オーストラリア（AU）

一番制作する頻度が高い言語ですね。国の指定というよりは、英語圏全体にという形になることが多いと思います。
個人情報周りでは、アメリカのカリフォルニア州にCCPA、イギリスはEUからは抜けたもののGDPRという独自の法規制が存在するため注意が必要です。

中国語

言語コード：zh
国コード（代表国を抜粋）：中国（CN）、香港（HK）、台湾省/中華民国（TW）

言語コードは簡体でも繁体でも同様にzhが使われます。
個人情報周りでは、独自の法規制はありませんが、Cookieが個人情報に該当する可能性が高いためCMPの対応が必要そうです。

韓国語

言語コード：ko
国コード：KR

個人情報周りでは、独自の法規制はありませんが、Cookieが個人情報に該当する可能性があるためCMPの対応が必要な場合があります。