とあるweb屋の仕事術

10年以上現役のweb製作屋さん。web製作雑務全部やる。

多言語サイトの言語切り替えのUIの考察

多言語サイトの言語切り替えのUIの考察

先日、受託案件で

多言語サイトの案件があったのですが、

そのときに少し考えた話。

 

多言語展開のwebサイトでは

言語の切り替え機能があります。

 

言語の切り替え機能は、

主に以下のUIパターンが考えられます。

 

  • プルダウンでの言語選択式
  • ヘッダ、フッタなどに全言語のリンクを表示
  • 言語切替ページに遷移して設定

 

設置位置はヘッダが多いという印象です。

フッタに設置してあるパタンもありますが、

ファーストビューに言語の切り替え機能が

ないと、ユーザが多言語に対応しているか

どうかわからず、離脱してしまうからです。

 

言語切り替え機能は、ヘッダもしくは

ファーストビュー内に設置するのが

ひとつの解といえます。

 

言語の切り替えを重視していないサイトもあるかも

しれません。言語の切り替えはあくまでサブ的な機能で

言語を切り替えなくてもある程度成立するコンテンツや

サイトの場合。

その場合フッタに設置してあっても問題はないとは思います。

 

言語切り替え機能をどのようなUIで実現するかは

なかなかなやましいところです。

対応している言語が多い場合は表示領域が限られて

しまうので、やはりプルダウン式などで収納してしまう

ケースになるのかなと思います。

 

ただ言語数が少ない場合は、

そのままリンクで以下のように表示するUIのほうが

よさそうです。

 

日本語|ENGLISH|한국어|簡体中文|繁體中文

 

それでは空港サイトや航空会社の事例を見てみましょう。

 

羽田空港国内線旅客ターミナル

PCサイトではプルダウン式のUIを採用

PCサイトではプルダウン式のUIを採用

スマホサイトでは全言語のリンクを表示したUI

スマホサイトではハンバーガーメニュー内で全リンクを表示

 

成田国際空港公式WEBサイト

PCサイトでは全言語のリンクを表示

PCサイトでは全言語のリンクを表示

スマホサイトではハンバーガーメニュー内で全リンクを表示

スマホサイトではハンバーガーメニュー内で全リンクを表示

 

ANA|航空券 予約・空席照会・運賃案内・国内線

PCサイトではプルダウン式UIを採用

PCサイトではプルダウン式UIを採用

スマホサイトでは言語切替ページへのリンクのみ

スマホサイトでは言語切替ページへのリンクのみ

 

JAL国内線−航空券 予約・空席照会・運賃案内−

PCサイトでは言語切り替えページへのリンク

PCサイトでは言語切り替えページへのリンク

 

スマホサイトではフッタに切り替えページへのリンク

スマホサイトではフッタに切り替えページへのリンク

 

PCサイトはヘッダに言語切替UIを配置

スマホサイトではハンバーガーメニューに格納しているパタンですね。

JALのスマホサイトはフッタにありますね。

 

ではここでAppleの事例。

AppleはPCサイト、スマホサイトともにフッタに設置しています。

Apple(日本)

言語切り替えは国旗アイコンを表示してフッタに配置

言語切り替えは国旗アイコンを表示してフッタに配置

PCサイト同様、スマホサイトでも言語切り替えは国旗アイコンを表示してフッタに配置

PCサイト同様、スマホサイトでも言語切り替えは国旗アイコンを表示してフッタに配置

 

Appleはサイトのコンテンツの特性上、

デザイン重視であることと、

言語切り替えを主としていないwebサイトなので

フッタにあるのも納得ですが、でもヘッダに

あったほうがよくない?と個人的には思いますが、

これまで事例にあげたwebサイトは、

「多言語対応していることが前提」というところを

「ユーザがはじめから知っている」というのも

デザインを考察する上で重要な要素ですよね。

 

空港サイトは、言語切り替えられるというのは

おそらくだいたいのユーザが知っている。

 

またAppleは世界的企業であり、

言語ごとのwebサイトがあることは

リテラシーが高いユーザであれば、予想はできますよね。

 

こういう背景的なものも含めてUI設計が必要です。

誰も知らないwebサイト、認知度が低いwebサイトで

多言語対応しているかどうか、

なんていうのはユーザはわからないので、やはり

 

設置場所はヘッダ一択か

 

という感じがします。

 

スマホサイトの場合も

ハンバーガーメニューに隠すのではなく

切り替えできるということをユーザに示すかたちがベスト

と思います。

 

あと、Appleのような国旗はやめたほうがよいですね。

アメリカなのかイギリスなのか問題がでます。

厳密に分けるのは難しいと思います。

 

ではいったん話しは戻って、

多言語対応するときに便利な

翻訳サービスはどうなってるか。

 

サイト多言語化・webページの翻訳対応はWOVN.io

→プルダウンのような単一選択式のUI。

 

中国語・韓国語翻訳・音声合成なら高電社 | 機械翻訳サービス

→ヘッダで各言語のリンクを表示するUI。

 

Webサイト翻訳・サイト多言語対応サービス「shutto翻訳」

→プルダウンのような単一選択式のUI。

 

WPML - WordPress用多言語プラグイン

→リンクで単一選択式のUI。

 

などなど。

こういったサービスやツールは単一選択式の

UIが多いですね。既存のwebサイトに導入するので

レイアウトを崩さずに実現できるからでしょう。

 

では、次にデフォルトの言語の表記についても

少しふれておきます。

 

多言語サイトはブラウザの言語情報を取得して、

適切な言語表示に切り替えるのが一般的かなと

おもいますが、たとえば

ブラウザの言語情報が「日本語」の場合。

アクセスしたとき、どのような表示が適切か。

海外からの旅行者が日本のPCを使用する

ケースはどうなるか。

 

「日本語」

としているサイトもあれば

「Japanese」

と表記しているパタンもあります。

 

これは、切り替えUIをどのように展開するかで

また変わってきますが、単一選択式のUIの場合、

 

「日本語▼」

 

のようにしているのは少し不親切な感じもします。

言語を切り替えたい人が「日本語」を認識できる

とは限らないからです。

むしろ海外の方からすると「日本語」ってむずかしいはず。

 

下記のような表示であれば、問題ありませんね。

 

▼日本語|ENGLISH|한국어|簡体中文|繁體中文

 

この手の考察や議論は、

結局のところ、サイトで取り扱っているコンテンツや、

特性、目的によるので正解がないというところですね。

僕なりの考えをまとめます。

 

  • 言語切り替えUIはヘッダなどファーストビューに設置が望ましい
    (ユーザに切り替えができることを明示するためにも)
  • 4〜5言語など対応言語が少ない場合は全言語リンクで出すのがよい
  • 言語が多い場合は単一選択式にするのがよい
  • デフォルト表示はユーザの使用するブラウザの言語情報から
    自動で適切な言語を表示させる。
  • 現在選択されている言語表記は、日本人以外にも認識できるようにする。
    単一選択ならJapaneseとかのほうがよさそう。

です。

 

言語の切り替えをブラウザの言語情報から判定しておこなう

方法は別の記事で紹介したいとおもいます。

 

参考サイト

liginc.co.jp

note.mu