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

[15,896 views]

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

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

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

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. 非言語要素は様々な意味を持つ

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

おわりに

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

ライタープロフィール

エム・エー・ディー 広報チーム
EC-CUBEをベースにした通販事業のビジネス構築やECサイト構築、運用。
企業のデジタル化を支援いたします。
https://mad2007.co.jp/