多言語Webサイトを制作する時に気をつけたいポイント

Web業界は他のどの分野よりもグローバル化が進み、今や日本のサイトやサービスを海外の人が楽しんでいることも自然なこととなってきています。これから海外に向けて情報を発信していきたい人も、すでにWebサイトをお持ちの方も、「多言語化」を視野に制作してみませんか?

↑私が10年以上利用している会計ソフト!

多言語サイトを作る時のポイント

見えやすい場所に言語選択リンクを置く

時々ページの一番下に言語オプションリンクを設置しているサイトを見かけますが、実際にその機能に気づける人は少ないでしょう。なるべくすぐに目につくような、例えばメインメニュー内や記事タイトルの直下等に置くといいと思います。


CacooのWebサイトではロゴのすぐ隣に言語オプションが設置されています。

国旗アイコンは使うべき?


言語選択メニューにて、国旗アイコンを表示しているサイトを見かけます。しかし、国旗はあくまで国の象徴。言語ではありません。日本では日本語しか公用語がないのでいいかもしれませんが、カナダでは英語とフランス語が公用語です。他にも複数の公用語を制定している国は多くあるでしょう。また、英語はアメリカ、オーストラリア、イギリスなどなど、複数の国で使われています。従って国旗アイコンを言語の設定に使うのではなく、言語名で表示するほうがいいでしょう。

また、言語名を表示する際は各言語の言葉で言語名を表示する方がより見つけやすくなります。例えば英語がメインのWebサイトにおいて、英語で「Japanese」と書かれるよりも、日本語で「日本語」と書かれたほうがわかりやすいですね。

言語別スタイリング

複数の言語でWebサイトを制作するなら、言語別にCSSを設定する方がいい場面もあります。特にテキスト周りは、使う言語によって文字数も異なり、サイズも微妙に変わってきます。英語ベースで作られたテンプレートやWordPressテーマを使うと、日本語ではごちゃついて見える…という経験をしたことも少なくないはず。同一CSSを利用する場合は幅にゆとりをもち、行間などの調整を行う必要があります。

一部のCSSを切り替える場合は、:lang(言語コード) セレクターで指定できます。以下のサンプルでは、html タグの lang 属性が日本語(ja)の場合は文字を青に、英語(en-US)の場合はオレンジに変更します。デモ画面の「Edit on CODEPEN」をクリックして編集してみてください。

See the Pen Change colour by language by Mana (@manabox) on CodePen.

本当の意味でのローカライズを

「ローカライズ」とは、異なる地域ごとにWebサイトを最適化することです。ありがちな失敗なのですが、言葉を翻訳しただけでは正しくローカライズされているとは言えません。例えば日付の表記。日本では「2015年12月10日」と書くのが普通ですが、北米では「Dec 10, 2015」、イギリスやオーストラリアでは「10 Dec, 2015」と書かれます。時間も「10:00 PM」と書くのか?「22:00」なのか?と、日時を表示するだけでも様々な選択肢があります。最近では世界中に発信しているブログやニュースサイトでは、時差も考慮して「3時間前(3 hours ago)」と表示しているところも増えてきました。

言葉や表記の仕方だけではありません。国によって異なる論理観を持っています。アイコンや画像に含まれているもの、色など、その地域でどのように感じられるかも考慮する必要があります。

ブラウザーの言語設定による自動リダイレクトは避ける

ブラウザーの言語を日本語にしていると、多言語サイトでも日本語のホームが自動的に表示されるサイトがあります。しかし、この設定はSEOの観点で非推奨です。これはGoogleのウェブマスター向け公式ブログでも記述されています。

サイトをよりクロールされやすくするために、ブラウザの言語設定による自動的なリダイレクトを行わないようにしてください。このようなリダイレクトを行うと、ユーザー(と検索エンジン)がサイトのすべての言語バージョンを見られなくなる場合があります。

Google ウェブマスター向け公式ブログ: 多言語ウェブサイトの作成について

コンテンツを翻訳しよう


Webサイトを作る人や、クライアントが各言語のコンテンツを用意できるのであれば話は早いのですが、これから翻訳しようという場合はどう進めていけばいいのでしょう?まず覚えておいて欲しいことは、機械翻訳を避けるということ。「英語のサイトをChromeの機能で翻訳してみたけど、余計意味がわからなくなった」なんてこともあります。日本語の文法は英語のものと大きく違うので、単語ひとつひとつは翻訳されていても、つなげるとよくわからない文章になりがちです。また、先程も挙げたGoogleウェブマスター向け公式ブログでも、以下のように言及されています。

自動翻訳は意味が通じない場合があるため、スパムとみなされる可能性があります。また、自動翻訳されたコンテンツは、しばしばユーザーにとって理解できなかったり、不自然に感じることがあります。そのようなコンテンツを多言語のウェブサイトとして作成するのは、ユーザーにとって有益ではありません。

Google ウェブマスター向け公式ブログ: 多言語ウェブサイトの作成について

翻訳のWebサービスを使う

翻訳の分野では、まだまだ人の力が必要です。必要な言語の翻訳を扱う企業に委託したり、翻訳のWebサービスを利用してもよさそうです。以下のWebサービスはほんの一部。利用したことはないので詳細は分かりかねるのですが、備忘録として書いておきます。おすすめがあれば、ぜひ教えてください!

翻訳ボランティアを募集する

WordPressのサイトやプラグインなどは、WordPressの利用者による翻訳が無償で行われています。他にもWeb関連のチュートリアルサイトTuts+でも記事の翻訳ボランティアが募集されています。←この記事もボランティアの方が翻訳されていますね。小規模サイトではなかなか実現が難しいかもしれませんが、ある程度の規模になると自然とボランティアを受けてくれるユーザーが現れるかも。

Webサイトを多言語化する

実際にWebサイトを制作する際、必ず行って欲しいのが、全てのページに別の言語ページへのリンクを貼るということ。「このページを日本語で読む」「Read this page in English」などのリンクを記事タイトル下など、目につく場所に設置しましょう。せっかくそのページにきてもらい、別言語も用意しているのに、読んでもらえなければ意味がないですよね。

WordPressプラグイン

HTMLで作ったページ数の少ないサイトであれば、各言語のページを用意すればいいのですが、中規模以上のサイトやブログだとなかなか大変です。WordPressを使ったサイトなら、便利なプラグインを使っちゃいましょう。無料で使える多言語化プラグインにはqTranslate XPolylangなどがあります。


多言語化プラグインはいろいろ試してみましたが、私はWPMLに落ち着き、このWebクリエイターボックスでも利用しています。こちらは有料$29〜。使い方は、少し古いのですが、「WordPressプラグイン「WPML」でブログを多言語化する」という記事で紹介しています。実際、以前はqTranslateを利用していたのですが、いろいろと問題が発生したためqTranslateからWPMLに変更しました。WPMLは30日間の払戻し保証もあるようなので、ぜひ試してみてください。

ちなみにWPMLでは管理ページから多言語を追加できるだけでなく、テーマファイルでもあれこれカスタマイズできますよ。ICL_LANGUAGE_CODE で言語コードを指定して、各言語によるコンテンツを変更したりなんだり。

<?php if (ICL_LANGUAGE_CODE='ja'): ?>
  日本語のコンテンツ
<?php else: ?>
  English contents
<?php endif; ?>

言語だけでなく、デザインやローカライズのポイントもおさえて、世界中の誰が見てもわかりやすいコンテンツを作っていきたいですね!

シェアする

コメント

“多言語Webサイトを制作する時に気をつけたいポイント” への1件のコメント

  1. Hiro より:

    少し前にメールで質問させていただいたHiroです。今まさにWPMLで多言語サイトを作っているので、大変参考になります。WPMLは最初は難しく感じましたが、今は慣れてきて便利さを実感しています。
    多言語サイトだとやはりデザインに制約ができるのかもしれませんね。いつか優れたデザインの多言語サイトを紹介記事を書いていただけると嬉しいです。

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)