Inside cmn!

河瀬 未祐

Webサイトの多言語化対応。確認事項を洗い出し!

UI/UXコミュニケーション設計

みなさんこんにちは。
Webサイト制作において、グローバル人材の確保・インバウンド需要・海外市場向けの商品展開などを理由に、海外言語ユーザーに向けてもアプローチしたいという声が挙がる場合があります。

そういった時、手段のひとつとしてあがるのが多言語化対応。
特定の一言語で制作されたサイトを他の言語でも閲覧できるようにする作業です。
海外用に独立したサイトを作るよりは全体の作業工数が少なくなりますが、当然一言語のサイトよりは作業が多くなりますね。

今回は、見積り段階で把握しておきたい、具体的な発生作業やフローをまとめました。

こんな人におすすめ

・サイトの多言語化を提案したいディレクター
・クライアントから多言語化の希望が出たディレクター
・工数算出を求められているエンジニア/デザイナー

下準備:そもそも多言語化対応が正しいかを考える

見積りをとって作業を進める前に、ディレクターはそもそも多言語化での対応が正しいかどうかを判断する必要があります。

例えば同じサービスでも、日本人向けと欧米人では、文化の違いなどから訴求したいポイントが異なってくる場合があります。
さらに、居住地×第一言語(日本在住の欧米人、欧米在住の欧米人etc)や、閲覧の経緯(生活・旅行先・商談の場etc)といった属性によっても有効なアプローチが変わってくる可能性があります。

上記の理由から、サイトのUI設計自体を言語によって変えた方が良い場合もあります。しかし、多言語化対応ではテキストしか変更しないため、ベースとなる言語の使用者に合わせたUI設計のままになってしまいます。

まずは、ターゲットの言語だけではなく、想定する居住地や経緯などの属性もヒアリングしましょう。
さらに、海外言語の重要度(現行ユーザーの割合の高さや、どの程度その言語圏の新規ユーザー獲得を狙うか等)も確認できると良いですね。

多言語化対応では不十分と思う場合は、予算的な問題がなければ別のサイトを作ったり、部分的に設計変更する提案ができると良いかと思います。

多言語化の導入方法パターン

導入方法は自動と手動の二通り考えられます。
また、手動で行う場合は、どのような構成にするかも考える必要があります。

自動翻訳ツールを導入する

shutto翻訳、WOVN、Cloud Translation API などのサービスを利用するパターン。

メリット:
・自動で翻訳が入るので翻訳費用がかからない
・お知らせなどの記事更新コンテンツにも反映されるため、継続でかかる翻訳費用を抑えられる

デメリット:
・月額サービス利用料金がかかる場合がある。また、サービス利用料の改定の可能性がある
・サービス利用料の条件に「文字数」が含まれる場合があり、サイト作成前の費用感把握がしづらかったり、文字数制限オーバーで翻訳が動かなくなることがある

shutto翻訳
WOVN
Cloud Translation API

手動で翻訳・流し込みする

翻訳を依頼・データをもらったり、自分で自動翻訳にかけたデータをサイトに流し込むパターン。

メリット:
・翻訳者を選ぶことができ、クオリティが安定する
・月額のサービス利用費用がかからない

デメリット:
・お知らせなどの更新コンテンツの対応を諦めるか、都度翻訳&流し込み作業を行う必要がある
・翻訳を流し込める仕様をCMSに追加する*1か、CMS化せず直書きで言語分のページを作る*2必要がある。言語分のページを作る場合は、CMS自体の複製*3も要検討

*1 JavaScriptで切り替えたり、wordpressそのままだとlang属性(言語設定情報)とmetaが一言語になり、他言語に対するSEO対策が弱くなる。必要に応じて複数ページに分ける+書き換えなどの対応が必要

*2 テンプレート化するなどして、デザイン変更が入った場合に二重作業が発生しないような設計が望ましい

*3 CMSが二つになり、メンテナンスも二重になるので注意

参考表

26年5月現在の情報です

確認事項/作業のリスト

クライアントの希望によって対応の検討が必要な部分もあるため、まずはディレクター側で条件の把握が必要です。

ディレクター確認事項

1.対応する言語(英字、繁体字、簡体字etc)

2.対応するページ・セクション範囲
→全ページ翻訳か?一部のページ(記事コンテンツなど)やセクションは変更やトルツメをするか?また、変更・トルツメによりデザイン調整の必要が出てくるか?

3.先方に「言葉遣いにこだわる」という意思があるか=自動翻訳は難しいか
→難しい場合は翻訳依頼が必要

4.中国からの閲覧を想定しているか
→グレートファイアウォールと呼ばれる検閲システムに引っかかってサイトが閲覧できなかったり、使い物にならないような速度になる可能性があります。
・CloudflareやAWS+CloudFrontを利用すると安定しやすいようです。
確実に閲覧させるなら中国サーバーへのサイト設置やCloudFront China等の中国に向けたCDNの利用ですが、ICPと呼ばれる申請が必要になり、その取得が難しいという話が散見されます。
Cloudflare参考
AWS参考
・Google系のサービス(フォントなど)に制限がかかるため、導入されている場合は外す必要があります

5.SEOを気にするか
→オーガニック検索での流入を期待する場合は、別ページにするなどmeta情報等を切り分けられるようにする対応が必要

デザイナー作業事項

1.言語切り替えUIの設置

2.フォントの策定
→対応言語を網羅できるフォントを選ぶor各言語用に別のフォントを使う

3.各言語ごとのデザイン調整
→フォントのサイズ感や、トルツメしたセクション付近など。コーディングされたデータを見ながら気になった部分を調整、という形を取ると見積もり圧縮が見込めます

エンジニア作業事項

ディレクターから中国閲覧、利用ツールなどの条件・
デザイナーからフォントの想定を確認して対応を決めていく。

1.サイト構成の検討
→SEO対策、メンテナンス性、中国語対応の有無を鑑みる必要がある

2.言語切り替え方法の検討

3.翻訳サービスの導入/翻訳の流し込み

4.lang属性やmeta情報の切り替わりも確認する

おわりに

要件(特に中国からの閲覧を想定するか)によって工数や作業フローに大きな差が出てくるのがわかるかと思います。
とはいえ、クライアント側からすれば費用によって検討したい部分もあるかと思いますので、何パターンかに分けてお見積りを提案すると良いかもしれないですね。
事前準備をしっかり行いながらサイトを作っていきましょう!
弊社では以下のサイトに導入しています。参考にどうぞ。

THE APARTMENT HOTELS

Taiwan Unity Lighting Co., Ltd.

Written by

河瀬 未祐 Miyu Kawase

front-end engineer

札幌市出身。2017年に北海道芸術デザイン専門学校を卒業後、Web制作会社に入社しWebデザイン及びコーディングを担当。2019年にフロントエンドエンジニアとしてcommonoに入社。

Q1. commonoに参加した理由
入社前に一緒にお仕事をさせていただいたご縁から。
求められる技術レベルが高く、自己成長に繋がると思い入社を決めました。
Q2. わたしの偏愛
カメラと旅行です。たくさん予定が詰まった旅程を立てること・旅先の思い出を写真に収めることが好きです。
Q3. 今後commonoというフィールドでやりたいこと
きちんとコンバージョンに繋がる・ユーザーによい体験を与えるだけでなく、技術者の視点から見ても参考になるようなWebサイトを構築し、北海道のクリエイティブの価値向上に貢献していきたいです。

Recommend

お問い合わせ

    個人情報利用目的への同意

    ※このサイトはCloudflare Turnstileよって保護されています。
    ※お客様が入力した個人情報はSSL暗号化信号によって保護されています。

    COMMONO株式会社
    E-mail:info@commono.co.jp
    個人情報保護方針、個人情報の取扱いについて
    PRIVACY POLICY

    お気に入り

    お気に入りから削除

    選択したアイテムをお気に入りから削除しますか?