多言語サイトのデザイン入門

世界中で情報がやり取りされ、誰でも世界中の人と取引ができる時代。しかし、いざ国や言語を越えたビジネスを始めようと思っても、言葉・文化への知見がなければ成功しません。日本語以外のウェブサイトをじっくり見た経験がない人は少なからずいらっしゃると思います。この記事では、多言語サイトの初歩的な注意事項を箇条書き形式で備忘録のようにまとめました。皆様が多言語サイト制作の際にお役に立てれば幸いです。

1. サイトマップは可能性な限り共通で

サイトマップとは、一言で言えばサイト内のページ構成です。メニューやボタンの配置、書かれている内容などは、原則としてどの言語でも共通であるべきです。例えば、日本語版サイトではヘッダーにボタンが三つあって、ボタンを押したときそれぞれ「企業概要」「商品一覧」「お知らせ」のページに繋がっているとします。英語に切り替えたら、「about us」「products」「news」とボタンの文字が変わるだけで、ボタンの並び順・色・遷移先 URL などは全て同じにします。
言語によって伝わる内容がずれてしまうのはできる限り避けたいものです。しかし、コストの都合で部分的にしか翻訳されたコンテンツを用意できない場合もあるでしょう。この場合、当然のことながら、よくアクセスされる部分の翻訳は最低限押さえておくべきです。翻訳していない部分は、リンク切れ対策だけ行って表示コンテンツは別の言語のままにしておく、またはナビゲーションから消して導線を断つといった対処法がよく見られます。
また、企業の採用情報など見て欲しい対象が特定の言語に限られている場合もあります。この場合は例外として特定の言語でのみ表示できれば十分でしょう。

EC-CUBE公式アドバイザーが、ツール選びからサイト制作、マーケティング・セキュリティの領域までアドバイスいたします。ご相談窓口はこちら

2. 言語切り替えはすぐ見つかる場所に

言語切り替えのオプションは、ヘッダーメニュー内や記事の一番上隅などすぐ見つかる場所に配置するのが基本です。さもなければ、サイトに訪れた人は、その人が読める言語で表示できないと判断した瞬間にページを閉じてしまう可能性が上がります。
アクセスした端末の言語に自動で切り替わるサイトを見たことがあるでしょうか？この親切な機能が仮にあったとしても言語切り替えのオプションは必須です。自分は日本語のページを見ていて、横にいたフランス語が母語の友達が「そのサイト私にも見せてくれ」と言ってきたらフランス語に切り替えたくなりますよね。

3. テキストの量に応じたデザイン調整

同じ情報量を伝えるのに必要な文字列の長さは言語によって違います。今回その一例として使用するのは日本のアマゾンです。日本語・英語・中国語で、それぞれ同じ意味の言葉を抜き出しました。

例1

日本語	服＆ファッション小物
英語	Clothing & Accessories
中国語	服装服饰

例2

日本語	ブラックフライデーセール
英語	Black Friday Deals
中国語	黑色星期五折扣

中国語では「黑色星期五」と5文字しかないところを、日本語では「ブラックフライデー」と9文字も要していますね。「カタカナで書く外来語だから当然」という指摘もありそうですが、実は単語単位ではなく文章で比較しても、一般に日本語は英語や中国語より長くて横幅をとる傾向にあります。時には、同じ内容でテキスト量が2倍3倍と変わるケースもあります。テキストが溢れないようにマージンを広めにとる、枠線をテキスト量に合わせて伸び縮みさせるといった、CSS での工夫が必要です。どの言語で表示しても違和感のないようにしましょう。

4. 時間表示・入力フォームを慣習に合わせる

日付の書き方は地域によって慣習が異なります。年・月・日の三つを表示するとき、日本では年月日の順（例：2010/12/31）、一方アメリカでは月日年（例：12/31/2010）、イギリスでは日月年（例：31/12/2010）など。月を数ではなく月を表す名詞（例：December）で表記する時もあります。
名前や住所を書く時にも慣習の差が現れます。もし姓と名の入力欄が逆に配置されていて、「太郎山田」の順で入力しなければならないとしたら。違和感がある上、間違える人が続出するのは容易に想像できます。姓名の順番が国によって異なるのは有名な事実です。他にも「姓が二つある人やミドルネームがある人はどうする？」「日本語以外ではふりがなの入力欄は不要」といった問題もあり、姓・名・姓（読み）・名（読み）の 4 枠に入力するシステムは日本でしか通用しないことは明らかです。システム面の制約と分かりやすさ両方を考慮してデザインを検討しましょう。住所についても似たような問題が起こりますので、入力する順番と形式を各地域の慣習に合わせる必要があります。

5. 非言語要素は様々な意味を持つ

記号は、地域や言語、文脈によって意味が変わります。例えば、日本では一般的に、丸は肯定、チェックやバツは否定を表します。しかし、アメリカではチェックは肯定、バツは否定を表すのが通例です。この場合、記号の横に「はい」「いいえ」の文言を添えると誤認を防げます。言語要素と非言語要素を組み合わせて、記号（非言語要素）の意味が一つに定まるようにすべきなのです。
記号の他意性は難しい問題で、一歩間違えれば時として攻撃的または差別的表現と捉えられてしまうケースすらあり得ます。分かりやすい例を挙げると、親指を立てるサムズアップは今でこそ「いいね」の意味で世界中に浸透していますが、侮辱の意味だと認識している文化は未だに存在しています。もちろん全ての人が納得するデザインは存在しません。それでも可能な限り多くの人にとって誤認を起こしにくいデザインを目指しましょう。

おわりに

普段日本語以外のサイトを見ない方だと気が付きにくいような注意点もあったのではないでしょうか。多言語サイトはビジネスの国際展開の第一歩となります。特に英語は全世界ウェブサイト総数の大半を占めるため、英語サイトを用意するだけでも大幅な市場拡大が期待できます。是非今回紹介したポイントに注目しながら色々なサイトを閲覧してみてください。また新たな発見があり、ウェブ制作の現場で役立つアイデアが生まれるかもしれません。