初めての海外Webデザイン！海外向けホームページ制作のポイント

海外向けWebページの制作は、グローバル化社会でビジネス拡大を狙うなら無視することのできない作業です。質の高い日本のサービスや製品は世界中でニーズが高まっており、国内から海外に向けてのビジネス＝アウトバウンドビジネスは非常に大きな市場に成長しています。
特にインターネットが発達した現代社会では、簡単に世界中のユーザーと繋がることができるようになりました。オンラインでビジネスをするなら、海外向けにコンテンツの多言語化をしておいて損はありません。

中でも英語ホームページの制作は今や必須項目と言っても過言ではありません。
日本の人口は約1億200万人。日本以外で日本語を公用語としている国は現在ありません。対して英語話者は非ネイティブスピーカーも入れると世界におよそ15億人もいると言われています。HPに英語コンテンツを追加するだけでアクセスできる人口が増えるのは一目瞭然です。これに加えて中国語やスペイン語などの言語を追加すれば、さらにグローバルなホームページを作ることができます。

実はこれは海外市場への進出を試みる企業に限った話ではありません。観光大国である日本で多言語対応のホームページを制作することは、訪日観光客の「インバウンド消費」による売り上げアップにもつながります。
新型コロナウイルスの影響で2020年以降のインバウンド消費は落ち着き気味になっていますが、長い目で見ると日本のインバウンドビジネスはまだまだ成長している最中。現に訪日外国人消費額は2013年から7年連続過去最高を記録しており、2019年には4兆円を超えました。新型コロナウイルスのパンデミックが落ち着いた頃にはまた更なる成長を遂げていくことが予想されます。（参照:国土交通省観光庁）

というわけで、今回の記事では「海外向けに多言語ホームページを制作するポイント」を紹介していきたいと思います。

• 自社の商品を海外に向けて販売していきたい
• 海外から日本へ来る観光客をターゲットにしたい
• 日本に住む外国人にも自社の商品を知ってほしい
• よりグローバルなクライアントを集客したい
• 海外進出を狙っているが、ホームページの作り方がわからない

上記のような方はぜひこのブログ記事を参考にしてみてください。

▼ホームページを他言語化する実際の流れについて詳しく知りたい方は、以下の記事もご覧ください。

https://igni7e.jp/blog/homepage-multilingual

海外向けホームページの言語変換ボタンは目立つ場所に配置

海外向けホームページで言語変換オプションを表示する際、主に使われるのがドロップダウンと切り替えスイッチです。

ドロップダウンとは下記画像のようにカーソルを合わせると自動的に下に連なって表示されるメニューです。

画像1ソース：阪急百貨店

画像2ソース：JR-West

言語の選択肢が多い場合には画像1のドロップダウンを採用するのがおすすめです。

逆に、選択肢が3〜4つ程度の場合には下の画像2のような切り替えスイッチの方が見やすいです。

このようにカーソルを合わせなくても常に見える状態で切り替えスイッチを表示します。

ドロップダウンと切り替えスイッチ、どちらを使うにしてもトップページだけでなく全てのページにおいて見つけやすい場所に配置するようにしましょう。海外向けホームページでは多くの場合ヘッダーもしくはフッターに言語変換ボタンが配置されています。いずれに配置するにしても、必ず目に留まりやすい場所に設定するよう心がけましょう。

言語変換オプションはこれでもかというほど分かりやすくあることが大切です。「英語」ではなく「English」、「ドイツ語」ではなく「Deutsh」など言語の名称はその言語で書くようにしましょう。
また、選択できる言語の数が多い時はアルファベット順に並べておくと目的の言語を見つけやすくなります。

事例： アルファベット順の言語の配列

例えばWikipediaでは下記のようにアルファベット順に言語が整列されています。

ソース：Wikipedia

見つけやすくかつ使いやすい言語変換オプションを配置することで、日本語以外の言語を母語とするユーザーにも歓迎の意思を示すことができます。

ホームページの言語オプションは国旗と言語名、どちらを表示するのが最適？

言語オプションのアイコンとして海外向けホームページでよく使用される国旗ですが、使用する際には下記のポイントを理解しておく必要があります。

• 国旗は国を表すものであり、必ずしも言語を表しているわけではない。
• 2つ以上の公用語を持つ国もある。
• 2つ以上の国で使われている言語もある。
• ユーザーが国旗を認識できない場合（サイズが小さいなど）や、似たデザインの国旗がある場合にユーザーの混乱を招く可能性がある

国旗のようなビジュアルイメージは一瞬で情報を伝達することができますが、上記を考慮すると言語名を表記する方が安全かもしれません。

言語の特性による文章の幅／高さの変動

ある言語を別の言語に翻訳する際には、翻訳後の言語によって文章の長さ／高さが多少変動することがあります。これはレイアウトやwebデザインの観点から見ると少し厄介な問題でもあります。

例えば漢字を使う日本語や中国語の場合は他の言語なら数単語使わなければならない情報でもわずか１〜２文字で表現できるということがあります。
反対に英語やスペイン語などの言語は文章が長くなりやすく、他の言語に比べて30％以上も多くのスペースをとってしまうこともあります。

W3Cの「訳文における文字サイズ」はこの課題について的確なアドバイスを提示してくれているので、ぜひ一度通して読んでみることをお勧めします。
W3Cではボタンや入力フィールド、説明テキストといった Adaptive UI（順応性ユーザーインターフェース）を使うことがなぜ重要かについて説明されています。

事例：言語による訳文の長さの違い

例えばホームページやブログでよく見られる「閲覧数」という言葉があります。日本語では短い言葉ですが翻訳するとその言語によって長さに大きく差が出ます。
下記の表は異なる翻訳言語における「閲覧数」に対する訳語の長さを比較したものです。

言語翻訳日本語閲覧数英語views韓国語조회イタリア語visualizzazioni

同じ意味を表す言葉でもイタリア語は英語の３倍ほどの長さになることが分かります。

言語によってテキストの長さが変わる際変化するのはテキストの横幅なので、多言語ホームページを開発する時はそれに対応したサイトになるように注意しましょう。また原文テキストが小さいほど、翻訳文は長くなりがちです。もしスペースに無理があると感じた場合は要点を拾って意訳する、翻訳後の言語に合わせてフォントサイズを変えるなどの対応をしましょう。

文字や行の背の高さも考えなければならない問題のひとつです。特に非ラテン系の言語はラテン系に比べてかなり高さがあることが多いです。また、アラビア語などはラテン系の言語に比べて行間にスペースを要します。

右→左に読む言語（右横書き言語）対応のWebデザイン

アラビア語、ヘブライ語などの右から左に読んでいく言語は「右横書き言語」と呼ばれます。海外向けの多言語ホームページを制作する際、顧客層などによってはこのような言語に対応したページを制作する必要が出てくる場合もあります。

中東地域のマーケットは近年成長が加速しており、中東の言語に対応したホームページを制作することはITビジネスにおいて非常に有力だと言われています。
しかしながら、中東の言語には右→左に読む「右横書き言語」が多く、ここでつまづく企業も多いのが事実です。

中東地域で使われている右横書き言語の例

• アラビア語（ar）
• ヘブライ語（he）
• ペルシャ語（fa）
• ウルドゥー語（ur）

上記のような言語でホームページを制作する場合は「インターフェースの反転」を行うことが基本となります。

事例：右横書き言語用のWebデザイン

下の画像は左→右の言語（日本語）用のfacebookログインページです。

ソース：Facebook

対してこちらは右横書き言語（アラビア語）用のfacebookページです。

ソース：Facebook

左から右、右から左の両方の言語に対応したWebページを制作するのであればデザインを反転させる方法についても検討した方がいいでしょう。

文化的に「右→左に読む」ことに慣れている人たちにとってはやはり左→右仕様のホームページは非常に読みづらくストレスを感じてしまいます。多様なユーザーに親しんでもらえるコンテンツを作るにはこういった小さな点でのローカライズが大きな助けとなります。

▼文化を反映したローカライズについて詳しく知りたい方は、以下の記事もご覧ください。

https://igni7e.jp/blog/the-difference-between-translation-and-localization

文化に配慮し適切なビジュアルイメージを使用したWebデザイン

画像やアイコン、グラフィックといったビジュアルイメージは、海外向けWebページに限らずどんなホームページにおいても欠かせない基本的な要素ですよね。ただし視覚的な情報というのは受け取り手の文化や価値観によって様々な解釈をされる可能性があるので、配慮が必要となってきます。

事例

例えば世界的な化粧品ブランドなどでは各販売国に合わせて起用モデルや使用写真を変えている例が多く見られます。
こちらはコスメブランド「MAYBELLINE New York」のカナダ版ホームページです。

ソース：MAYBELLINE New York (Canada)

コーカサス系やアフリカ系女性の写真が大きく使われているのが分かります。

対してこちらは日本版ホームページの同じ商品のページです。

ソース：MAYBELLINE New York (Japan)

日本版のホームページではアジア系女性の写真を中心に使っていることが分かります。

画像を始めとするビジュアルイメージは攻撃的に捉えられたり、ユーザーの気分を害してしまう可能性をはらんでいます。欧米諸国のユーザーは何とも思わないようなビジュアルイメージが他の国ではタブー的に扱われることも少なくありません。例えば未だに同性愛が違法であったり、女性の権利が認められていない国々では同性カップルやジェンダー平等を表現したビジュアルは受け入れられない可能性があります。

同じように宗教によっても異なる規範や常識があります。例えばイスラム教では着るものが非常に大きな意味を持つため、国民の大多数がムスリムである国または地域がターゲット層である場合はそれに応じてページのデザインを検討し直す必要があるでしょう。

まとめ

というわけで今回は海外向けホームページを開発する時のポイントをご紹介しました。

ホームページに多言語コンテンツを追加する際は、ただ言語を増やすだけでなく顧客層や文化を見て有効な方法を探していくことが重要です。まずはGoogle Analyticsなどの分析ツールを使いどの国からのアクセスが多いのかを見極め、それに適したコンテンツを追加していきましょう。多言語での対応が難しいという場合でも、英語ページを増やすだけでも十分な効果が期待できます。

グローバルビジネスの成功はその道のプロに任せませんか？

詳しくはこちらから。

当ブログを運営しているIGNITEは海外マーケティングを中心に、日本の中小企業や個人の海外展開をお手伝いしております。無料診断レポートもありますので、海外マーケティングにご興味がありましたら一度お問合せください。

▼ IGNITEの海外マーケティング