多言語都市・香港から見る多言語サイトのつくりかた ～中国語成分多めでお届け！～

WordCamp Tokyo 2019 - 45min.

日本政府が観光立国を目指すなか、LCCの就航などにより、訪日外国人観光客が年々増加しています。インバウンド対策として、全世界から日本を訪れる外国人観光客にウェブを通じてアピールできる多言語サイトが重要になっています。ウェブサイトのほとんどが多言語サイトという多言語都市・香港で、多言語サイトを制作する中で感じた多言語サイト制作のポイントをご紹介します。中国語案件あるあるをはじめ、WordPressで多言語サイトを作るメリットやプラグイン、案件の提案や受注前に押さえておきたいチェックポイントなどに触れていきます。

動画アーカイブ（WordPress.tv）：
https://wordpress.tv/2019/11/15/chiaki-kouno-how-to-create-a-multilingual-site-looking-from-hong-kong-a-multilingual-city-delivered-with-bit-of-chinese-ingredients/

動画アーカイブ（YouTube）：
https://youtu.be/BMw4Ig75tk8

Transcript

1. 多言語都市・香港から見る
   多言語サイト
   のつくりかた 中国語成分多め
   で
   届
   ！
   

   View Slide

2. ホントの 本日のおしながき
   1. 似て非なる 中国・台湾・香港 マーケット
   2. グレート・ファイアウォール問題
   3. ウェブサイトの多言語化に る５つのポイント
   コンテンツ・翻訳・デザイン・サーバー・SEO
   4. プラグインを使った多言語サイト構築方法
   5. 未来の多言語サイト構築
   

   View Slide

3. ＠chiaki_kouno
   河野千秋 こうの ちあき
   2008年から香港在住。
   WordPressを使った受託制作と
   か、翻訳とかやってます。
   自己紹介
   

   View Slide

4. 10月12日開催のWordCamp香港
   実行委員として参加しました
   

   View Slide

5. ところで、
   香港ってどこ？
   © OpenStreetMap contributors
   

   View Slide

6. 台湾の
   もうちょっと西。
   香港は面積も人口も、
   東京都の約半分
   ● 面積：1,106 km²
   ● 人口：約750万人
   © OpenStreetMap contributors
   香港ここです。
   台湾
   

   View Slide

7. 香港の人口比率とおよそ使われている言葉
   出典：香港特別行政區 政府統計處
   参考：
   東京都の外国人人口
   比率は 3.98%
   72%
   20%
   外国人
   （英語）
   香港人
   （広東語）
   中国本土から
   の移民
   （北京語/　　
   　マンダリン）
   8%
   

   View Slide

8. 香港政府サイトも３言語対応
   英語
   繫体字中国語 簡体字中国語
   

   View Slide

9. 香港は
   多言語対応があたりまえ
   

   View Slide

10. そんな香港に暮らす
    私の語学力
    

    View Slide

11. 北京語
    你好
    ニーハオ
    広東語
    你好
    レイホウ
    英語
    Hello
    はろー？
    

    View Slide

12. 香港での受託案件って？
    私の場合...
    

    View Slide

13. ● 日本企業と香港企業 半々。
    香港企業
    50%
    日本企業
    50%
    

    View Slide

14. ● 日本 ら、香港・中国本土・世界にマーケットを広 たい。
    世界
    ターゲット
    香港にいる
    日本人
    ターゲット
    中国本土
    ターゲット
    香港にいる
    香港人
    ターゲット
    香港企業
    50%
    日本企業
    50%
    

    View Slide

15. ● 香港 ら、日本・中国本土・世界にマーケットを広 たい。
    香港にいる
    日本人
    ターゲット
    世界
    ターゲット
    日本にいる
    日本人
    ターゲット
    中国本土
    ターゲット
    香港企業
    50%
    日本企業
    50%
    

    View Slide

16. ● コーポレートサイト …… 英・繫・簡・日・韓
    ● 飲食店サイト …… 英・日
    ● レシピサイト ……
    繫・日
    ● ツアー予約管理サイト ……
    繫・簡・日
    ● 有料会員制のニュースサイト ……
    繫・簡・日
    ● 有料会員制の動画学習サイト …… 簡・日
    ● 会員登録制のモバイルアプリ ……
    繫・簡・日
    これまで制作してきた多言語対応のサイト
    

    View Slide

17. ● コーポレートサイト …… 英・繫・簡・日・韓
    ● 飲食店サイト …… 英・日
    ● レシピサイト ……
    繫・日
    ● ツアー予約管理サイト ……
    繫・簡・日
    ● 有料会員制のニュースサイト ……
    繫・簡・日
    ● 有料会員制の動画学習サイト …… 簡・日
    ● 会員登録制のモバイルアプリ ……
    繫・簡・日
    これまで制作してきた多言語対応のサイト
    ぜんぶ
    WordPressで
    つくりました！
    

    View Slide

18. 多言語サイトを提案
    たと に、あらためて気づいた
    WordPressの良いところ！
    

    View Slide

19. 管理画面が
    すでに多言語対応！
    多国籍入り混 る
    スタッフでも更新
    で る！
    

    View Slide

20. グローバルな
    ネームバリュー！
    「ああ、WordPressね。」と話 早い！
    

    View Slide

21. やっててよかった、
    ありがとう、WordPress。
    どんと い！多言語案件！
    

    View Slide

22. 中華圏マーケット
    中国・香港・台湾
    について掘り下 ま
    ①
    

    View Slide

23. インバウンドを狙うなら、超重要！
    最近の訪日観光客数を見てみましょう。
    出典：日本政府観光局(JNTO) https://www.jnto.go.jp/jpn/statistics/visitor_trends/index.html
    訪日客 各国・地域別の内訳（2018年）
    　 中国
    26.9%
    台湾
    15.3%
    香港
    7.1%
    その他
    18.1%
    タイ
    3.6%
    アメリカ
    4.9%
    韓国
    24.2%
    中華圏マーケット
    中国・香港・台湾で
    49.3%
    ほぼ半数
    

    View Slide

24. 中華圏マーケットには
    中国語サイト
    １つあれば十分？
    

    View Slide

25. いえいえ、
    ● 中国本土
    ● 香港
    ● 台湾
    それぞれに違いが
    あるのです。 香港
    台北
    北京
    上海
    深圳
    © OpenStreetMap contributors
    

    View Slide

26. 中国本土:54.6%
    (北京・上海・深センなど)
    中華圏マーケットの内訳
    台湾:31%
    香港:14.4% 香港
    台北
    北京
    上海
    深圳
    © OpenStreetMap contributors
    

    View Slide

27. も
    重要！
    中国本土:54.6%
    (北京・上海・深センなど)
    中華圏マーケットの内訳
    台湾:31%
    香港:14.4%
    ● 政策による上下変動
    中国本土
    ● 個人の自由旅行
    ● 日本旅行ファン
    ● リピーター・口コミ
    台湾 香港
    

    View Slide

28. まずは言葉の違い
    場所 話される中国語 読み 書き
    中国 普通话
    ふつうわ
    北京官話
    Mandarin
    ぺきんかんわ、マンダリン
    简体字
    んたい
    台湾 國語
    こくご
    繁體字
    はんたい
    香港 廣東話
    かんとんわ
    広東語
    Cantonese
    かんとんご
    

    View Slide

29. まずは言葉の違い
    場所 話される中国語 読み 書き
    中国 普通话
    ふつうわ
    北京官話
    Mandarin
    ぺきんかんわ、マンダリン
    简体字
    かんたいじ
    台湾 國語
    こくご
    繁體字
    はんたいじ
    香港 廣東話
    かんとんわ
    広東語
    Cantonese
    かんとんご
    中国本土
    向け
    台湾•香港
    向け
    

    View Slide

30. こんなに違うよ、中国語！
    例文「彼はタクシーに乗るのが好きです。」
    

    View Slide

31. こんなに違うよ、中国語！
    エリア 書 読み
    中国 他喜欢坐出租车。
    （簡体字）
    タァ シーファン ズオ チューズーチェー
    Tā xǐhuān zuò chūzū chē
    台湾 他喜歡座計程車。
    （繁体字）
    タァ シーファン ズオ ジーチャンチェー
    Tā xǐhuān zuò jìchéngchē
    香港 佢鍾意搭的士。
    （繁体字）
    コイ チュンイー ダップ ディクシィー
    Kéuih jūngyi daap dīksí
    どっちも同じ「くるま」なのに
    こんなに違う！
    车 車
    例文「彼はタクシーに乗るのが好きです。」
    

    View Slide

32. こんなに違うよ、中国語！
    エリア 書 読み
    中国 他喜欢坐出租车。
    （簡体字）
    タァ シーファン ズオ チューズーチェー
    Tā xǐhuān zuò chūzū chē
    台湾 他喜歡座計程車。
    （繁体字）
    タァ シーファン ズオ ジーチャンチェー
    Tā xǐhuān zuò jìchéngchē
    香港 佢鍾意搭的士。
    （繁体字）
    コイ チュンイー ダップ ディクシィー
    Kéuih jūngyi daap dīksí
    例文「彼はタクシーに乗るのが好きです。」
    

    View Slide

33. それぞれの言葉を
    見た時・聞いた時
    の印象は？
    

    View Slide

34. 中国人
    繁体字中国語
    広東語
    簡体字 + マンダリン
    すごいストレス
    理解できない文字
    読みたくない。
    広東語だろうけど
    …分からない！
    

    View Slide

35. 中国人
    繁体字中国語
    広東語
    簡体字 + マンダリン
    すごいストレス
    理解できない文字
    読みたくない。
    広東語だろうけど
    …分からない！
    中国本土の方向けには
    簡体字+マンダリン
    のコンテンツを
    きちんと用意しよう！
    

    View Slide

36. 台湾人
    簡体字中国語
    広東語
    繁体字 + マンダリン
    広東語だろうけど
    …分からない！
    まあ読めるけど、
    繁体字だと
    やっぱり喜しい
    

    View Slide

37. 台湾人
    簡体字中国語
    広東語
    繁体字 + マンダリン
    まあ読めるけど、
    繁体字だと
    かなり喜ぶ
    広東語だろうけど
    …分からない！
    台湾の方向けには
    繁体字+マンダリン
    のコンテンツを
    きちんと用意しよう！
    

    View Slide

38. 香港人
    繁体字 + 広東語
    簡体字中国語
    普通話
    マンダリン
    台湾・國語
    まず見ない
    英語
    できます
    まぁ分かる！
    読める！
    無問題！
    

    View Slide

39. 香港人
    繁体字 + 広東語
    簡体字中国語
    普通話
    マンダリン
    台湾・國語
    まず見ない
    英語
    できます
    聞こえる！
    無問題！
    読めるよ！
    無問題！
    香港の方向けには
    繁体字
    （英語もまぁOKだけど、
    おもてなししたいところ）
    のコンテンツを用意しよう！
    

    View Slide

40. 香港人
    繁体字 + 広東語
    簡体字中国語
    普通話
    マンダリン
    台湾・國語
    まず見ない
    英語
    できます
    聞こえる！
    無問題！
    読めるよ！
    無問題！
    香港の方向けには
    繁体字
    （英語もまぁOKだけど、
    おもてなししたいところ）
    のコンテンツを用意しよう！
    ピンポイントに香港人を対象として、
    親しみやすく刺さるプロモーションをする時は
    きちんと繁体字・広東語対応をしましょう！
    

    View Slide

41. グレート・
    ファイアウォール問題
    ②
    

    View Slide

42. グレート・ファイア
    ウォール とは？
    中国国内のインターネット利用者に対 て、
    ブロッキングとフィルタリングを行う大規模
    情報検閲システム。
    ファイアウォールと"Great Wall" （万里の長
    城）をも って Great Firewall（グレート・
    ファイアウォール）と呼ばれ、GFWとも略
    れる。
    あなたの
    サイトを
    見れなく
    している？
    

    View Slide

43. グレート・ファイアウォール問題
    ● Google
    ● Facebook
    ● YouTube
    ● Twitter
    ● Instagram
    ● Dropbox
    ● reCAPTCHA
    参考：Websites blocked in mainland China https://en.wikipedia.org/wiki/Websites_blocked_in_mainland_China
    中国国内で利用できない
    ● Googleマップ
    ● Googleフォーム
    ● Googleカレンダー
    ● jQuery（Google CDN）
    使わない・代替を用意する
    

    View Slide

44. webpagetest.org
    日本にいながら北京からのアクセスを確認できるサイト
    

    View Slide

45. 読み込み時間比較（webpagetest.orgでの北京の結果を追加）
    日本 香港 深セン 北京
    基本：プレーン 0.038 秒 0.175 秒 0.292 秒 0.346 秒
    読み込み
    Googleフォント（CDN） 0.458 秒 0.289 秒 0.886 秒 2.692 秒 ウェブフォント読み込み自体は
    OK
    jQuery（Google CDN） 0.293 秒 0.316 秒 xxx xxx
    jQuery（jQuery本家CDN） 0.364 秒 0.242 秒 10.860 秒 11.540 秒
    jQuery（jQueryをダウンロードして含める） 0.330 秒 0.268 秒 1.130 秒 0.713 秒
    Google アナリティクス 0.568 秒 0.232 秒 1.990 秒 1.927 秒
    Google タグマネージャー 0.313 秒 0.152 秒 1.820 秒 1.753 秒
    reCAPTCHA
    プラグイン on / reCaptcha on 2.040 秒 2.090 秒 xxx xxx 表示するが、必要な
    API読み込めず、ログイン失敗
    プラグイン on / reCaptcha off 1.350 秒 0.957 秒 xxx xxx
    プラグイン off / reCaptcha off 0.588 秒 0.804 秒 1.520 秒 1.224 秒
    HTMLに埋め込み
    Googleマップ 2.010 秒 0.695 秒 xxx xxx
    Googleフォーム 1.600 秒 1.220 秒 xxx xxx
    Googleカレンダー 2.010 秒 1.460 秒 xxx xxx
    管理画面
    Google アナリティクス サービス紹介 1.950 秒 0.917 秒 xxx xxx 管理画面は閲覧できないのに、タグは動作する
    ー ログイン・管理画面 1.650 秒 1.370 秒 xxx xxx
    Google サーチコンソール　サービス紹介 1.440 秒 0.786 秒 xxx xxx
    ー ログイン・管理画面 0.038 秒 1.440 秒 xxx xxx
    

    View Slide

46. じつは、
    グレート・ファイアウォールって…
    意外と「知らない」という方 多い！
    Google も Facebook も使えてるよ！
    \ 香港・台湾は範囲外 ! /
    

    View Slide

47. SNSの利用率
    中国 香港 台湾 タイ 日本
    百度贴吧 72%
    Baidu Tieba
    Facebook
    85%
    Youtube
    90%
    Facebook
    93%
    Youtube
    75%
    新浪微博 60%
    Sina Weibo
    Youtube
    83%
    Facebook
    89%
    Youtube
    91%
    Twitter
    49%
    优酷 59%
    Youku
    Instagram
    57%
    Instagram
    49%
    Instagram
    65%
    Facebook
    36%
    QQ空间 56%
    QZONE
    Twitter
    26%
    Twitter
    24%
    Twitter
    52%
    Instagram
    33%
    腾讯微博 37%
    Tencent Weibo
    优酷 23%
    Youku
    EYNY
    22%
    LinkedIn
    25%
    アメブロ
    22%
    出典　DIGITAL 2019 https://wearesocial.com/global-digital-report-2019
    

    View Slide

48. メッセンジャーの利用率
    出典　DIGITAL 2019 https://wearesocial.com/global-digital-report-2019
    中国 香港 台湾 タイ 日本
    WeChat
    74%
    WhatsApp
    82%
    LINE
    84%
    LINE
    84%
    LINE
    67%
    QQ
    68%
    WeChat
    53%
    FB Messenger
    57%
    FB Messenge
    72%
    FB Messenge
    11%
    FB Messenger
    50%
    WeChat
    32%
    Skype
    27%
    Skype
    8%
    LINE
    29%
    Skype
    25%
    WeChat
    25%
    WeChat
    2%
    Skype
    24%
    WhatsApp
    19%
    WhatsApp
    25%
    Viber
    2%
    

    View Slide

49. 中国本土、香港、台湾
    それぞれの違いを把握しておこう。
    中国語サイトを扱うなら、ま は 基本！
    香港・台湾はグレートファイアーウォールに入らないからね！
    

    View Slide

50. ウェブサイトの
    多言語化における
    ５つのポイント
    ③
    

    View Slide

51. 多言語化って、日本語をそのまま翻訳？
    日本独自のモノ・文化慣習など、そのままでは通じない
    翻訳とは…
    でも…
    元の言語で書 れたテキストを、他の言語に変換 て
    表現 な と。
    ● デザイン
    ● 類似商品・サービスの有無
    ● 嗜好・文化・風習
    ● よ 使われるSNS
    

    View Slide

52. ローカライゼーション
    異なる言語、異なる文化の人でも、
    理解 てもらえるように る と。
    ● 日本語にすると 地域化・現地化
    ● L10N　 localisation
    10文字
    

    View Slide

53. インターナショナリゼーション
    ● 日本語にすると 国際化
    ● i18n　internationalization
    ローカライゼーションで るように る事前準備。
    ま まな言語や地域に対応で る形に作って
    と。
    18文字
    

    View Slide

54. ローカライゼーション
    L10N
    インターナショナ
    リゼーション
    i18n
    めっちゃ素敵な多言語サイト制作のフロー
    1.国際化 2.地域化
    翻訳
    ローカライゼーションの一部
    

    View Slide

55. めっちゃ素敵な多言語サイト制作のフロー
    1.国際化 2.地域化
    ローカライゼーション
    L10N
    インターナショナ
    リゼーション
    i18n
    翻訳
    ローカライゼーションの一部
    多言語サイト成功の肝は
    ローカライゼーション！
    

    View Slide

56. ウェブサイトの
    ローカライゼーション
    ５つのポイント
    L10N
    1. コンテンツ
    2. 翻訳
    3. デザイン
    4. サーバー
    5. SEO
    

    View Slide

57. 1. コンテンツ
    ウェブサイトの
    ローカライゼーション
    ５つのポイント
    L10N
    

    View Slide

58. 普遍的
    企業情報
    製品スペック
    など
    現地向け
    プロモーション
    ページ
    など
    国・地域に合わせたコンテンツの最適化
    翻訳へ
    日本向けの
    ままだと
    刺さらない
    

    View Slide

59. 普遍的
    企業情報
    製品スペック
    など
    現地向け
    プロモーション
    ページ
    など
    国・地域に合わせたコンテンツの最適化
    翻訳へ
    地域に
    合わせる
    翻訳へ
    

    View Slide

60. 2. 翻訳
    ウェブサイトの
    ローカライゼーション
    ５つのポイント
    L10N
    

    View Slide

61. 翻訳方法 予算 日数 長所 短所
    機械翻訳 ⌛
    Google翻訳は無料
    も、瞬時に出来る
    時々、大誤訳
    クオリティチェック負荷あり
    クラウド翻訳 ⌛⌛
    費用・所要日数的にみて
    気軽に利用で る人力翻訳
    まちまちの品質
    ばらつ トーンと表現
    クオリティチェック負荷あり
    翻訳会社 ⌛⌛⌛ 品質を担保で る
    一定の時間を要 る
    一定のコスト る
    で る！
    制作会社 ⌛⌛⌛
    品質を担保で る
    翻訳・多言語化に加えて、マーケ
    ティングも踏まえた対応 可能
    一定の時間を要 る
    一定のコスト る
    おすすめの翻訳方法は？
    

    View Slide

62. ２. デザイン
    ウェブサイトの
    ローカライゼーション
    ５つのポイント
    L10N
    

    View Slide

63. カラー ● 色のもつ意味の違い（例： 縁起の良い色、悪い色）
    フォント
    ● 文字数・フォント変更によるレイアウト れ対応
    ● 言語に合わ た適切なフォント指定
    ● フォントサイズの調整
    画像 ● 文字入り画像は総入れ替え
    ● 現地でも通 る 、誤解を生まないイメージ チェック
    お問い合わせ
    ツール
    ● コンタクト・フォーム
    ● チャット・ウィンドウ
    ● メッセージ・アプリ
    ユーザー登録 ● メールアドレスで登録
    ● SNSアカウントで登録（ソーシャルログイン）
    国・地域に合わせたデザイン(UI/UX)の最適化
    

    View Slide

64. カラー ● 色のもつ意味の違い（例： 縁起の良い色、悪い色）
    フォント
    ● 文字数・フォント変更によるレイアウト れ対応
    ● 言語に合わ た適切なフォント指定
    ● フォントサイズの調整
    画像 ● 文字入り画像は総入れ替え
    ● 現地でも通 る 、誤解を生まないイメージ チェック
    お問い合わせ
    ツール
    ● コンタクト・フォーム
    ● チャット・ウィンドウ
    ● メッセージ・アプリ
    ユーザー登録 ● メールアドレスで登録
    ● SNSアカウントで登録（ソーシャルログイン）
    国・地域に合わせたデザイン(UI/UX)の最適化
    色のもつ意味合い
    黒 紫
    

    View Slide

65. カラー ● 色のもつ意味の違い（例： 縁起の良い色、悪い色）
    フォント
    ● 文字数・フォント変更によるレイアウト れ対応
    ● 言語に合わ た適切なフォント指定
    ● フォントサイズの調整
    画像 ● 文字入り画像は総入れ替え
    ● 現地でも通 る 、誤解を生まないイメージ チェック
    お問い合わせ
    ツール
    ● コンタクト・フォーム
    ● チャット・ウィンドウ
    ● メッセージ・アプリ
    ユーザー登録 ● メールアドレスで登録
    ● SNSアカウントで登録（ソーシャルログイン）
    国・地域に合わせたデザイン(UI/UX)の最適化
    コンタクトフォームだけじゃなく
    チャットツール や
    メッセージアプリも！
    

    View Slide

66. カラー ● 色のもつ意味の違い（例： 縁起の良い色、悪い色）
    フォント
    ● 文字数・フォント変更によるレイアウト れ対応
    ● 言語に合わ た適切なフォント指定
    ● フォントサイズの調整
    画像 ● 文字入り画像は総入れ替え
    ● 現地でも通 る 、誤解を生まないイメージ チェック
    お問い合わせ
    ツール
    ● コンタクト・フォーム
    ● チャット・ウィンドウ
    ● メッセージ・アプリ
    ユーザー登録 ● メールアドレスで登録
    ● SNSアカウントで登録（ソーシャルログイン）
    国・地域に合わせたデザイン(UI/UX)の最適化
    「メールアドレス持っていない…」
    地域に合わせた
    ソーシャルログインも！
    

    View Slide

67. ４. サーバー
    ウェブサイトの
    ローカライゼーション
    ５つのポイント
    L10N
    

    View Slide

68. サーバー選定
    遠い国からのアクセス、
    スピードは十分速いですか？
    1. 日本のサーバーで運用
    2. 各国各地にサーバーを いて、それぞれ運用
    3. CDN コンテンツ・デリバリー・ネットワーク を対象国で
    利用 る
    

    View Slide

69. ５. 多言語SEO
    ウェブサイトの
    ローカライゼーション
    ５つのポイント
    L10N
    

    View Slide

70. SEO的にどのURL構造が良い？
    サブドメイン？ サブディレクトリ？
    どちらが良いの？
    ja.example.com example.com/ja/
    

    View Slide

71. URL 構造 URL の例 長所 短所
    国別のドメイン example.de ● 地域ターゲティング 明確
    ● サーバーの場所に依存 ない
    ● サイトの分割 簡単
    ● 高価（利用 制限 れる場合もある）
    ● より多 のインフラ 必要
    ● ccTLD 要件 厳 い（一部）
    gTLD を使用 る
    サブドメイン
    de.example.com ● 設定 簡単
    ● Search Console の地域ターゲティングを
    使用で る
    ● 複数の場所のサーバーを使用で る
    ● サイトの分割 簡単
    ● ユーザーは URL のみ ら地域ターゲティ
    ングを認識で ない場合 ある（例:
    「de」 言語なの 国なの 不明）
    gTLD を使用 る
    サブディレクトリ
    example.com/de/ ● 設定 簡単
    ● Search Console の地域ターゲティングを
    使用で る
    ● 管理 や い（ホスト 同 ）
    ● ユーザーは URL のみ ら地域ターゲティ
    ングを認識で ない場合 ある
    ● サーバーの場所は 1 所のみ
    ● サイトの分割 難 い
    URL パラメータ site.com?loc=de ● 非推奨 ● URL ベースの分割 難 い
    ● ユーザーは URL のみ ら地域ターゲティ
    ングを認識で ない場合 ある
    ● Search Console の地域ターゲティングを
    利用で ない
    出典：Search Consoleヘルプ > 多地域、多言語のサイトの管理　https://support.google.com/webmasters/answer/182192?hl=ja
    SEO的にどのURL構造が良い？
    

    View Slide

72. URL 構造 URL の例 長所 短所
    国別のドメイン example.de ● 地域ターゲティング 明確
    ● サーバーの場所に依存 ない
    ● サイトの分割 簡単
    ● 高価（利用 制限 れる場合もある）
    ● より多 のインフラ 必要
    ● ccTLD 要件 厳 い（一部）
    gTLD を使用 る
    サブドメイン
    de.example.com ● 設定 簡単
    ● Search Console の地域ターゲティングを
    使用で る
    ● 複数の場所のサーバーを使用で る
    ● サイトの分割 簡単
    ● ユーザーは URL のみ ら地域ターゲティ
    ングを認識で ない場合 ある（例:
    「de」 言語なの 国なの 不明）
    gTLD を使用 る
    サブディレクトリ
    example.com/de/ ● 設定 簡単
    ● Search Console の地域ターゲティングを
    使用で る
    ● 管理 や い（ホスト 同 ）
    ● ユーザーは URL のみ ら地域ターゲティ
    ングを認識で ない場合 ある
    ● サーバーの場所は 1 所のみ
    ● サイトの分割 難 い
    URL パラメータ site.com?loc=de ● 非推奨 ● URL ベースの分割 難 い
    ● ユーザーは URL のみ ら地域ターゲティ
    ングを認識で ない場合 ある
    ● Search Console の地域ターゲティングを
    利用で ない
    出典：Search Consoleヘルプ > 多地域、多言語のサイトの管理　https://support.google.com/webmasters/answer/182192?hl=ja
    SEO的にどのURL構造が良い？
    サブドメイン サブディレクトリ
    どちらでも◎
    

    View Slide

73. URL 構造 URL の例 長所 短所
    国別のドメイン example.de ● 地域ターゲティング 明確
    ● サーバーの場所に依存 ない
    ● サイトの分割 簡単
    ● 高価（利用 制限 れる場合もある）
    ● より多 のインフラ 必要
    ● ccTLD 要件 厳 い（一部）
    gTLD を使用 る
    サブドメイン
    de.example.com ● 設定 簡単
    ● Search Console の地域ターゲティングを
    使用で る
    ● 複数の場所のサーバーを使用で る
    ● サイトの分割 簡単
    ● ユーザーは URL のみ ら地域ターゲティ
    ングを認識で ない場合 ある（例:
    「de」 言語なの 国なの 不明）
    gTLD を使用 る
    サブディレクトリ
    example.com/de/ ● 設定 簡単
    ● Search Console の地域ターゲティングを
    使用で る
    ● 管理 や い（ホスト 同 ）
    ● ユーザーは URL のみ ら地域ターゲティ
    ングを認識で ない場合 ある
    ● サーバーの場所は 1 所のみ
    ● サイトの分割 難 い
    URL パラメータ site.com?loc=de ● 非推奨 ● URL ベースの分割 難 い
    ● ユーザーは URL のみ ら地域ターゲティ
    ングを認識で ない場合 ある
    ● Search Console の地域ターゲティングを
    利用で ない
    出典：Search Consoleヘルプ > 多地域、多言語のサイトの管理　https://support.google.com/webmasters/answer/182192?hl=ja
    SEO的にどのURL構造が良い？
    ダメ！非推奨！
    URLパラメータ
    例: site.com?loc=de
    

    View Slide

74. 特に抑えておきたい
    多言語サイトSEO、Googleからの注意点！
    ● ユーザーの言語を認識 て自動的にリダイレクトすることは
    避けてください。 のようなリダイレクトを行うと、ユーザー（と
    検索エンジン） サイトの べての言語バージョンを見られな なる場
    合 ありま 。
    ●
    自動翻訳したサイトページが検索エンジンからクロー
    ルされないようにしてください。自動翻訳は意味 通 ない
    場合 あるため、スパムとみな れる可能性 ありま 。
    出典：Search Consoleヘルプ > 国際化 たサイトと多言語サイト＞多地域、多言語のサイトの管理 　hhttps://support.google.com/webmasters/answer/182192
    

    View Slide

75. 1. HTML タグ
    2. HTTP ヘッダー
    3. サイトマップ
    出典：Search Consoleヘルプ > ページのローカライズ版について Google に知ら る　https://support.google.com/webmasters/answer/189077?hl=ja
    言語や地域ごとのページをグーグルに知らせ
    る方法は３つ
    

    View Slide

76. 出典：Search Consoleヘルプ > ページのローカライズ版について Google に知ら る　https://support.google.com/webmasters/answer/189077?hl=ja
    
    
    
    
    Example Corporation
    ・
    ・
    ・
    lang="ja"
    言語や地域ごとのページをグーグルに
    「HTMLタグ」で知らせる方法
    

    View Slide

77. 出典：Search Consoleヘルプ > ページのローカライズ版について Google に知ら る　https://support.google.com/webmasters/answer/189077?hl=ja
    
    
    
    
    Example Corporation
    ・
    ・
    ・
    lang="ja"
    ちがっていた！
    -“ Google では、ページの表示内容 らその言語を判断 ま 。
    lang 属性のようなコードレベルの言語情報や、URL は使用しません。”
    言語や地域ごとのページをグーグルに
    「HTMLタグ」で知らせる方法
    

    View Slide

78. 出典：Search Consoleヘルプ > ページのローカライズ版について Google に知ら る　https://support.google.com/webmasters/answer/189077?hl=ja
    内に次の要素を追加
    
    ● 言語コード：ページ 対象と る言語や地域のコード
    ● ページURL：指定 た言語や地域 対象と るページのフルパス
    言語や地域ごとのページをグーグルに
    「HTMLタグ」で知らせる方法
    

    View Slide

79. 出典：Search Consoleヘルプ > ページのローカライズ版について Google に知ら る　https://support.google.com/webmasters/answer/189077?hl=ja
    http://example.com/page.html 日本人向 のページ
    http://hk.example.com/page.html 香港人向 のページ
    http://tw.example.com/page.html 台湾人向 のページ
    http://cn.example.com/page.html 中国人向 のページ
    http://en.example.com/page.html 英語のページ
    ● 他言語ページの他、現在のページもリストに含める必要あり
    ● ページURL：指定した言語や地域が対象とするページのフルパス
    ● 他言語ページは同じドメイン内である必要はない
    
    Example Corporation
    href="http://example.com/page.html" />
    href="http://hk.example.com/page.html" />
    href="http://tw.example.com/page.html" />
    href="http://cn.example.com/page.html" />
    href="http://en.example.com/page.html" />
    
    言語や地域ごとのページをグーグルに「HTMLタグ」で知らせる方法
    （記述例）
    

    View Slide

80. 出典：Search Consoleヘルプ > ページのローカライズ版について Google に知ら る　https://support.google.com/webmasters/answer/189077?hl=ja
    
    Example Corporation
    href="http://example.com/page.html" />
    href="http://en.example.com/page.html" />
    href="http://us.example.com/page.html" />
    href="http://uk.example.com/page.html" />
    href="http://hk.example.com/page.html" />
    href="http://tw.example.com/page.html" />
    href="http://cn.example.com/page.html" />
    
    文字コード例 ISO 639-1 ISO 15924 ISO 3166-1
    Alpha 2
    言語 文字体系 地域
    ja ja
    en en
    en-US en US
    en-GB en GB
    zh-Hant-HK zh Hant HK
    zh-Hant-TW zh Hant TW
    zh-Hans zh Hans
    言語コードの構成
    

    View Slide

81. 出典：Search Consoleヘルプ > ページのローカライズ版について Google に知ら る　https://support.google.com/webmasters/answer/189077?hl=ja
    
    Example Corporation
    href="http://example.com/page.html" />
    href="http://hk.example.com/page.html" />
    href="http://tw.example.com/page.html" />
    href="http://cn.example.com/page.html" />
    href="http://us.example.com/page.html" />
    href="http://uk.example.com/page.html" />
    href="http://en.example.com/page.html" />
    
    文字コード例 ISO 639-1 ISO 15924 ISO 3166-1
    Alpha 2
    言語 文字体系 地域
    ja ja
    zh-Hant-HK zh Hant HK
    zh-Hant-TW zh Hant TW
    zh-Hans zh Hans
    en-US en US
    en-GB en GB
    en en
    言語コードの構成
    言語 文字体系
    （もしあれば）
    言語コードの要素
    地域
    （もしあれば）
    ー ー
    

    View Slide

82. 出典：Search Consoleヘルプ > ページのローカライズ版について Google に知ら る　https://support.google.com/webmasters/answer/189077?hl=ja
    
    Example Corporation
    href="http://example.com/page.html" />
    href="http://hk.example.com/page.html" />
    href="http://tw.example.com/page.html" />
    href="http://cn.example.com/page.html" />
    href="http://us.example.com/page.html" />
    href="http://uk.example.com/page.html" />
    href="http://en.example.com/page.html" />
    
    文字コード例 ISO 639-1 ISO 15924 ISO 3166-1
    Alpha 2
    言語 文字体系 地域
    ja ja
    zh-Hant-HK zh Hant HK
    zh-Hant-TW zh Hant TW
    zh-Hans zh Hans
    en-US en US
    en-GB en GB
    en en
    言語コードの構成
    言語 文字体系
    （もしあれば）
    言語コードの要素
    地域
    （もしあれば）
    ー ー
    ja
    

    View Slide

83. 出典：Search Consoleヘルプ > ページのローカライズ版について Google に知ら る　https://support.google.com/webmasters/answer/189077?hl=ja
    
    Example Corporation
    href="http://example.com/page.html" />
    href="http://hk.example.com/page.html" />
    href="http://tw.example.com/page.html" />
    href="http://cn.example.com/page.html" />
    href="http://us.example.com/page.html" />
    href="http://uk.example.com/page.html" />
    href="http://en.example.com/page.html" />
    
    文字コード例 ISO 639-1 ISO 15924 ISO 3166-1
    Alpha 2
    言語 文字体系 地域
    ja ja
    zh-Hant-HK zh Hant HK
    zh-Hant-TW zh Hant TW
    zh-Hans zh Hans
    en-US en US
    en-GB en GB
    en en
    言語コードの構成
    言語 文字体系
    （もしあれば）
    言語コードの要素
    地域
    （もしあれば）
    ー ー
    en GB
    

    View Slide

84. 出典：Search Consoleヘルプ > ページのローカライズ版について Google に知ら る　https://support.google.com/webmasters/answer/189077?hl=ja
    
    Example Corporation
    href="http://example.com/page.html" />
    href="http://hk.example.com/page.html" />
    href="http://tw.example.com/page.html" />
    href="http://cn.example.com/page.html" />
    href="http://us.example.com/page.html" />
    href="http://uk.example.com/page.html" />
    href="http://en.example.com/page.html" />
    
    文字コード例 ISO 639-1 ISO 15924 ISO 3166-1
    Alpha 2
    言語 文字体系 地域
    ja ja
    zh-Hant-HK zh Hant HK
    zh-Hant-TW zh Hant TW
    zh-Hans zh Hans
    en-US en US
    en-GB en GB
    en en
    言語コードの構成
    言語 文字体系
    （もしあれば）
    言語コードの要素
    地域
    （もしあれば）
    ー ー
    en US
    

    View Slide

85. 出典：Search Consoleヘルプ > ページのローカライズ版について Google に知ら る　https://support.google.com/webmasters/answer/189077?hl=ja
    
    Example Corporation
    href="http://example.com/page.html" />
    href="http://hk.example.com/page.html" />
    href="http://tw.example.com/page.html" />
    href="http://cn.example.com/page.html" />
    href="http://us.example.com/page.html" />
    href="http://uk.example.com/page.html" />
    href="http://en.example.com/page.html" />
    
    文字コード例 ISO 639-1 ISO 15924 ISO 3166-1
    Alpha 2
    言語 文字体系 地域
    ja ja
    zh-Hant-HK zh Hant HK
    zh-Hant-TW zh Hant TW
    zh-Hans zh Hans
    en-US en US
    en-GB en GB
    en en
    言語コードの構成
    言語 文字体系
    （もしあれば）
    言語コードの要素
    地域
    （もしあれば）
    ー ー
    zh 中文
    Zhong Wen
    

    View Slide

86. 出典：Search Consoleヘルプ > ページのローカライズ版について Google に知ら る　https://support.google.com/webmasters/answer/189077?hl=ja
    
    Example Corporation
    href="http://example.com/page.html" />
    href="http://hk.example.com/page.html" />
    href="http://tw.example.com/page.html" />
    href="http://cn.example.com/page.html" />
    href="http://us.example.com/page.html" />
    href="http://uk.example.com/page.html" />
    href="http://en.example.com/page.html" />
    
    文字コード例 ISO 639-1 ISO 15924 ISO 3166-1
    Alpha 2
    言語 文字体系 地域
    ja ja
    zh-Hant-HK zh Hant HK
    zh-Hant-TW zh Hant TW
    zh-Hans zh Hans
    en-US en US
    en-GB en GB
    en en
    言語コードの構成
    言語 文字体系
    （もしあれば）
    言語コードの要素
    地域
    （もしあれば）
    ー ー
    zh
    漢字
    han zi
    Hant
    

    View Slide

87. 出典：Search Consoleヘルプ > ページのローカライズ版について Google に知ら る　https://support.google.com/webmasters/answer/189077?hl=ja
    
    Example Corporation
    href="http://example.com/page.html" />
    href="http://hk.example.com/page.html" />
    href="http://tw.example.com/page.html" />
    href="http://cn.example.com/page.html" />
    href="http://us.example.com/page.html" />
    href="http://uk.example.com/page.html" />
    href="http://en.example.com/page.html" />
    
    文字コード例 ISO 639-1 ISO 15924 ISO 3166-1
    Alpha 2
    言語 文字体系 地域
    ja ja
    zh-Hant-HK zh Hant HK
    zh-Hant-TW zh Hant TW
    zh-Hans zh Hans
    en-US en US
    en-GB en GB
    en en
    言語コードの構成
    言語 文字体系
    （もしあれば）
    言語コードの要素
    地域
    （もしあれば）
    ー ー
    zh
    [t] Traditional Chenese
    [s] Simplified Chenese
    Hant
    

    View Slide

88. 出典：Search Consoleヘルプ > ページのローカライズ版について Google に知ら る　https://support.google.com/webmasters/answer/189077?hl=ja
    
    Example Corporation
    href="http://example.com/page.html" />
    href="http://hk.example.com/page.html" />
    href="http://tw.example.com/page.html" />
    href="http://cn.example.com/page.html" />
    href="http://us.example.com/page.html" />
    href="http://uk.example.com/page.html" />
    href="http://en.example.com/page.html" />
    
    文字コード例 ISO 639-1 ISO 15924 ISO 3166-1
    Alpha 2
    言語 文字体系 地域
    ja ja
    zh-Hant-HK zh Hant HK
    zh-Hant-TW zh Hant TW
    zh-Hans zh Hans
    en-US en US
    en-GB en GB
    en en
    言語コードの構成
    言語 文字体系
    （もしあれば）
    言語コードの要素
    地域
    （もしあれば）
    ー ー
    zh TW
    Hant
    

    View Slide

89. 中国語サイト用言語コード例
    中国本土向け
    台湾・香港向け
    迷ったら
    ここから
    1. zh
    2. zh-CN
    3. zh-TW
    4. zh-HK
    5. zh-Hans
    6. zh-Hant
    7. zh-Hans-CN
    8. zh-Hant-TW
    9. zh-Hant-HK
    中文
    中文 中国（簡体字）
    中文 台湾 (繁体字)
    中文 簡体字
    中文 繁体字
    中文 繁体字　台湾
    中文 繁体字　香港
    中文 香港 (繁体字)
    中文 繁体字　中国
    

    View Slide

90. 多言語化 ≠ 翻訳
    っ り
    ローカライゼーションに取り組んで
    直訳サイト ら、もう一歩先へ
    

    View Slide

91. WordPressで
    プラグインを使った
    多言語サイト構築
    ④
    

    View Slide

92. 多言語化プラグインでできること（例）
    1. 言語スイッチャー
    2. 言語毎のサブディレクトリ・サブドメイン設定
    3. Googleに必要なHTMLコードを追加
    4. 自動翻訳機能
    5. .mo .po ファイルを使わないテーマ・プラグインの
    翻訳管理
    6. プロ翻訳依頼（追加料金）
    7. 無料／有料（買い切り、サブスクリプション制）
    

    View Slide

93. 1. 言語スイッチャー
    2. 言語毎のサブディレクトリ・サブドメイン設定
    3. Googleに必要なHTMLコードを追加
    4. 自動翻訳機能
    5. .mo .po ファイルを使わないテーマ・プラグインの
    翻訳管理
    6. プロ翻訳依頼（追加料金）
    7. 無料／有料（買い切り、サブスクリプション制）
    多言語化プラグインでできること（例）
    一つだけ
    or 多機能
    いろいろ
    あります
    

    View Slide

94. でも…
    何が何でも使えば良い
    というものでもない？
    

    View Slide

95. WordPressで多言語サイトを構築する４つのアプローチ
    1. シングルサイトの一部として追加　
    でにあるウェブサイトの一部に多言語ページを構築
    ...「必要最小限のコンテンツだ 」「小規模導入」「プロモーションはSNS メイン etc.」
    2. シングルサイトを複数構築
    言語毎に、全 別々のサイトと て構築
    ...「言語 とに担当者あり」「 っ り予算」「大企業・大規模サイト向 」
    3. マルチサイト＋プラグインで構築
    WordPressのマルチサイト機能とプラグインを活用 て統一管理 可能
    ...「小～中規模」「管理 楽」「言語 とに編集スタッフのアカウント分 可能」
    4. シングルサイト＋プラグインで構築
    プラグインの活用で翻訳や言語スイッチをサポート
    ...「小～中規模」「管理 楽」「プラグイン 多 、多機能」
    マルチサイト向けプラグインを使用
    シングルサイト向けプラグインを使用
    

    View Slide

96. 多言語サイト構築でよく使われるプラグイン
    WordPress 特徴 費用 備考
    WPML シングル
    サイト
    投稿ページ、固定ページ、カスタムタイプ、タグ、カテゴリー、カ
    スタムタクソノミー、メニュー（カスタムフィールド、ウィジェッ
    ト、テーマ、プラグイン）
    翻訳管理機能
    有料
    〇 充実 た機能
    〇 本文だ ではな 、メニューや見出 の翻訳も対応
    × 機能を多 て、 には使い な ない
    × 他プラグインへの乗換え 困難
    qTranslate X シングル
    サイト
    無料
    〇 無料プラグイン
    〇 直感的に利用 や いUI
    × 最終更新日 2016年
    × 複数言語のコンテンツを1記事内に保存
    WEGLOT シングル
    サイト
    SaaSサービス：Weglotサーバーで翻訳管理
    機械翻訳・自己翻訳・プロ翻訳
    無料・有料
    １言語2,000語まで無料
    それ以上は継続課金
    Polylang シングル
    サイト
    自己翻訳
    （Lingotek Translation利用で、機械翻訳・プロ翻訳も利用可）
    無料 迷ったら れで。
    BOGO シングル
    サイト
    無料 Contact Form 7作者の三好 ん
    MultilingualP
    ress
    マルチ
    サイト
    投稿ページ、固定ページ、カテゴリ、タグ、タクソノミー、カスタ
    ム投稿タイプの多言語化
    無料・有料 5.0以降対応は有料
    Multi
    Language
    Switcher
    マルチ
    サイト
    無料
    〇 シンプルな設定画面で、直感的に操作で 簡単
    × メディアアップロード 複数回必要
    × シンプル過 て、多 を望めない
    

    View Slide

97. どんなケースのときに
    プラグインを導入するのか
    イメージは湧きましたか？
    

    View Slide

98. 未来の
    多言語サイト構築
    ⑤
    

    View Slide

99. ● 「グーテンベルグ」プ
    ロジェクト第4フェー
    ズで多言語対応予定
    ● 本体の対応でプラグイ
    ン 不要になる？
    ● 2020年後半 ？
    Long term roadmap
    While we expect to need most or all of 2019 to
    finish phase 2 of Gutenberg, there are already
    plans for Phase 3 and 4. Phase 3 will focus on
    collaboration and multi-user editing. Phase 4
    will contain support for multilingual sites.
    https://wordpress.org/about/roadmap/
    

    View Slide

100. ありがとうございました
     多謝大家！
     

     View Slide