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

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. 多言語都市・香港から見る 多言語サイト のつくりかた 中国語成分多め で 届 ！
2. ホントの 本日のおしながき 1. 似て非なる 中国・台湾・香港 マーケット 2. グレート・ファイアウォール問題 3. ウェブサイトの多言語化に る５つのポイント コンテンツ・翻訳・デザイン・サーバー・SEO 4. プラグインを使った多言語サイト構築方法 5. 未来の多言語サイト構築
3. ＠chiaki_kouno 河野千秋 こうの ちあき 2008年から香港在住。 WordPressを使った受託制作と か、翻訳とかやってます。 自己紹介
4. 10月12日開催のWordCamp香港 実行委員として参加しました
5. ところで、 香港ってどこ？ © OpenStreetMap contributors
6. 台湾の もうちょっと西。 香港は面積も人口も、 東京都の約半分 • 面積：1,106 km² • 人口：約750万人 © OpenStreetMap contributors 香港ここです。 台湾
7. 香港の人口比率とおよそ使われている言葉 出典：香港特別行政區 政府統計處 参考： 東京都の外国人人口 比率は 3.98% 72% 20% 外国人 （英語） 香港人 （広東語） 中国本土から の移民 （北京語/　　 　マンダリン） 8%
8. 香港政府サイトも３言語対応 英語 繫体字中国語 簡体字中国語
9. 香港は 多言語対応があたりまえ
10. そんな香港に暮らす 私の語学力
11. 北京語 你好 ニーハオ 広東語 你好 レイホウ 英語 Hello はろー？
12. 香港での受託案件って？ 私の場合...
13. • 日本企業と香港企業 半々。 香港企業 50% 日本企業 50%
14. • 日本 ら、香港・中国本土・世界にマーケットを広 たい。 世界 ターゲット 香港にいる 日本人 ターゲット 中国本土 ターゲット 香港にいる 香港人 ターゲット 香港企業 50% 日本企業 50%
15. • 香港 ら、日本・中国本土・世界にマーケットを広 たい。 香港にいる 日本人 ターゲット 世界 ターゲット 日本にいる 日本人 ターゲット 中国本土 ターゲット 香港企業 50% 日本企業 50%
16. • コーポレートサイト …… 英・繫・簡・日・韓 • 飲食店サイト …… 英・日 • レシピサイト …… 繫・日 • ツアー予約管理サイト …… 繫・簡・日 • 有料会員制のニュースサイト …… 繫・簡・日 • 有料会員制の動画学習サイト …… 簡・日 • 会員登録制のモバイルアプリ …… 繫・簡・日 これまで制作してきた多言語対応のサイト
17. • コーポレートサイト …… 英・繫・簡・日・韓 • 飲食店サイト …… 英・日 • レシピサイト …… 繫・日 • ツアー予約管理サイト …… 繫・簡・日 • 有料会員制のニュースサイト …… 繫・簡・日 • 有料会員制の動画学習サイト …… 簡・日 • 会員登録制のモバイルアプリ …… 繫・簡・日 これまで制作してきた多言語対応のサイト ぜんぶ WordPressで つくりました！
18. 多言語サイトを提案 たと に、あらためて気づいた WordPressの良いところ！
19. 管理画面が すでに多言語対応！ 多国籍入り混 る スタッフでも更新 で る！
20. グローバルな ネームバリュー！ 「ああ、WordPressね。」と話 早い！
21. やっててよかった、 ありがとう、WordPress。 どんと い！多言語案件！
22. 中華圏マーケット 中国・香港・台湾 について掘り下 ま ①
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% ほぼ半数
24. 中華圏マーケットには 中国語サイト １つあれば十分？
25. いえいえ、 • 中国本土 • 香港 • 台湾 それぞれに違いが あるのです。 香港 台北 北京 上海 深圳 © OpenStreetMap contributors
26. 中国本土:54.6% (北京・上海・深センなど) 中華圏マーケットの内訳 台湾:31% 香港:14.4% 香港 台北 北京 上海 深圳 © OpenStreetMap contributors
27. も 重要！ 中国本土:54.6% (北京・上海・深センなど) 中華圏マーケットの内訳 台湾:31% 香港:14.4% • 政策による上下変動 中国本土 • 個人の自由旅行 • 日本旅行ファン • リピーター・口コミ 台湾 香港
28. まずは言葉の違い 場所 話される中国語 読み 書き 中国 普通话 ふつうわ 北京官話 Mandarin ぺきんかんわ、マンダリン 简体字 んたい 台湾 國語 こくご 繁體字 はんたい 香港 廣東話 かんとんわ 広東語 Cantonese かんとんご
29. まずは言葉の違い 場所 話される中国語 読み 書き 中国 普通话 ふつうわ 北京官話 Mandarin ぺきんかんわ、マンダリン 简体字 かんたいじ 台湾 國語 こくご 繁體字 はんたいじ 香港 廣東話 かんとんわ 広東語 Cantonese かんとんご 中国本土 向け 台湾•香港 向け
30. こんなに違うよ、中国語！ 例文「彼はタクシーに乗るのが好きです。」
31. こんなに違うよ、中国語！ エリア 書 読み 中国 他喜欢坐出租车。 （簡体字） タァ シーファン ズオ チューズーチェー Tā xǐhuān zuò chūzū chē 台湾 他喜歡座計程車。 （繁体字） タァ シーファン ズオ ジーチャンチェー Tā xǐhuān zuò jìchéngchē 香港 佢鍾意搭的士。 （繁体字） コイ チュンイー ダップ ディクシィー Kéuih jūngyi daap dīksí どっちも同じ「くるま」なのに こんなに違う！ 车 車 例文「彼はタクシーに乗るのが好きです。」
32. こんなに違うよ、中国語！ エリア 書 読み 中国 他喜欢坐出租车。 （簡体字） タァ シーファン ズオ チューズーチェー Tā xǐhuān zuò chūzū chē 台湾 他喜歡座計程車。 （繁体字） タァ シーファン ズオ ジーチャンチェー Tā xǐhuān zuò jìchéngchē 香港 佢鍾意搭的士。 （繁体字） コイ チュンイー ダップ ディクシィー Kéuih jūngyi daap dīksí 例文「彼はタクシーに乗るのが好きです。」
33. それぞれの言葉を 見た時・聞いた時 の印象は？
34. 中国人 繁体字中国語 広東語 簡体字 + マンダリン すごいストレス 理解できない文字 読みたくない。 広東語だろうけど …分からない！
35. 中国人 繁体字中国語 広東語 簡体字 + マンダリン すごいストレス 理解できない文字 読みたくない。 広東語だろうけど …分からない！ 中国本土の方向けには 簡体字+マンダリン のコンテンツを きちんと用意しよう！
36. 台湾人 簡体字中国語 広東語 繁体字 + マンダリン 広東語だろうけど …分からない！ まあ読めるけど、 繁体字だと やっぱり喜しい
37. 台湾人 簡体字中国語 広東語 繁体字 + マンダリン まあ読めるけど、 繁体字だと かなり喜ぶ 広東語だろうけど …分からない！ 台湾の方向けには 繁体字+マンダリン のコンテンツを きちんと用意しよう！
38. 香港人 繁体字 + 広東語 簡体字中国語 普通話 マンダリン 台湾・國語 まず見ない 英語 できます まぁ分かる！ 読める！ 無問題！
39. 香港人 繁体字 + 広東語 簡体字中国語 普通話 マンダリン 台湾・國語 まず見ない 英語 できます 聞こえる！ 無問題！ 読めるよ！ 無問題！ 香港の方向けには 繁体字 （英語もまぁOKだけど、 おもてなししたいところ） のコンテンツを用意しよう！
40. 香港人 繁体字 + 広東語 簡体字中国語 普通話 マンダリン 台湾・國語 まず見ない 英語 できます 聞こえる！ 無問題！ 読めるよ！ 無問題！ 香港の方向けには 繁体字 （英語もまぁOKだけど、 おもてなししたいところ） のコンテンツを用意しよう！ ピンポイントに香港人を対象として、 親しみやすく刺さるプロモーションをする時は きちんと繁体字・広東語対応をしましょう！
41. グレート・ ファイアウォール問題 ②
42. グレート・ファイア ウォール とは？ 中国国内のインターネット利用者に対 て、 ブロッキングとフィルタリングを行う大規模 情報検閲システム。 ファイアウォールと"Great Wall" （万里の長 城）をも って Great Firewall（グレート・ ファイアウォール）と呼ばれ、GFWとも略 れる。 あなたの サイトを 見れなく している？
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） 使わない・代替を用意する
44. webpagetest.org 日本にいながら北京からのアクセスを確認できるサイト
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
46. じつは、 グレート・ファイアウォールって… 意外と「知らない」という方 多い！ Google も Facebook も使えてるよ！ \ 香港・台湾は範囲外 ! /
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
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%
49. 中国本土、香港、台湾 それぞれの違いを把握しておこう。 中国語サイトを扱うなら、ま は 基本！ 香港・台湾はグレートファイアーウォールに入らないからね！
50. ウェブサイトの 多言語化における ５つのポイント ③
51. 多言語化って、日本語をそのまま翻訳？ 日本独自のモノ・文化慣習など、そのままでは通じない 翻訳とは… でも… 元の言語で書 れたテキストを、他の言語に変換 て 表現 な と。 • デザイン • 類似商品・サービスの有無 • 嗜好・文化・風習 • よ 使われるSNS
52. ローカライゼーション 異なる言語、異なる文化の人でも、 理解 てもらえるように る と。 • 日本語にすると 地域化・現地化 • L10N　 localisation 10文字
53. インターナショナリゼーション • 日本語にすると 国際化 • i18n　internationalization ローカライゼーションで るように る事前準備。 ま まな言語や地域に対応で る形に作って と。 18文字
54. ローカライゼーション L10N インターナショナ リゼーション i18n めっちゃ素敵な多言語サイト制作のフロー 1.国際化 2.地域化 翻訳 ローカライゼーションの一部
55. めっちゃ素敵な多言語サイト制作のフロー 1.国際化 2.地域化 ローカライゼーション L10N インターナショナ リゼーション i18n 翻訳 ローカライゼーションの一部 多言語サイト成功の肝は ローカライゼーション！
56. ウェブサイトの ローカライゼーション ５つのポイント L10N 1. コンテンツ 2. 翻訳 3. デザイン 4. サーバー 5. SEO
57. 1. コンテンツ ウェブサイトの ローカライゼーション ５つのポイント L10N
58. 普遍的 企業情報 製品スペック など 現地向け プロモーション ページ など 国・地域に合わせたコンテンツの最適化 翻訳へ 日本向けの ままだと 刺さらない
59. 普遍的 企業情報 製品スペック など 現地向け プロモーション ページ など 国・地域に合わせたコンテンツの最適化 翻訳へ 地域に 合わせる 翻訳へ
60. 2. 翻訳 ウェブサイトの ローカライゼーション ５つのポイント L10N
61. 翻訳方法 予算 日数 長所 短所 機械翻訳 ⌛ Google翻訳は無料 も、瞬時に出来る 時々、大誤訳 クオリティチェック負荷あり クラウド翻訳 ⌛⌛ 費用・所要日数的にみて 気軽に利用で る人力翻訳 まちまちの品質 ばらつ トーンと表現 クオリティチェック負荷あり 翻訳会社 ⌛⌛⌛ 品質を担保で る 一定の時間を要 る 一定のコスト る で る！ 制作会社 ⌛⌛⌛ 品質を担保で る 翻訳・多言語化に加えて、マーケ ティングも踏まえた対応 可能 一定の時間を要 る 一定のコスト る おすすめの翻訳方法は？
62. ２. デザイン ウェブサイトの ローカライゼーション ５つのポイント L10N
63. カラー • 色のもつ意味の違い（例： 縁起の良い色、悪い色） フォント • 文字数・フォント変更によるレイアウト れ対応 • 言語に合わ た適切なフォント指定 • フォントサイズの調整 画像 • 文字入り画像は総入れ替え • 現地でも通 る 、誤解を生まないイメージ チェック お問い合わせ ツール • コンタクト・フォーム • チャット・ウィンドウ • メッセージ・アプリ ユーザー登録 • メールアドレスで登録 • SNSアカウントで登録（ソーシャルログイン） 国・地域に合わせたデザイン(UI/UX)の最適化
64. カラー • 色のもつ意味の違い（例： 縁起の良い色、悪い色） フォント • 文字数・フォント変更によるレイアウト れ対応 • 言語に合わ た適切なフォント指定 • フォントサイズの調整 画像 • 文字入り画像は総入れ替え • 現地でも通 る 、誤解を生まないイメージ チェック お問い合わせ ツール • コンタクト・フォーム • チャット・ウィンドウ • メッセージ・アプリ ユーザー登録 • メールアドレスで登録 • SNSアカウントで登録（ソーシャルログイン） 国・地域に合わせたデザイン(UI/UX)の最適化 色のもつ意味合い 黒 紫
65. カラー • 色のもつ意味の違い（例： 縁起の良い色、悪い色） フォント • 文字数・フォント変更によるレイアウト れ対応 • 言語に合わ た適切なフォント指定 • フォントサイズの調整 画像 • 文字入り画像は総入れ替え • 現地でも通 る 、誤解を生まないイメージ チェック お問い合わせ ツール • コンタクト・フォーム • チャット・ウィンドウ • メッセージ・アプリ ユーザー登録 • メールアドレスで登録 • SNSアカウントで登録（ソーシャルログイン） 国・地域に合わせたデザイン(UI/UX)の最適化 コンタクトフォームだけじゃなく チャットツール や メッセージアプリも！
66. カラー • 色のもつ意味の違い（例： 縁起の良い色、悪い色） フォント • 文字数・フォント変更によるレイアウト れ対応 • 言語に合わ た適切なフォント指定 • フォントサイズの調整 画像 • 文字入り画像は総入れ替え • 現地でも通 る 、誤解を生まないイメージ チェック お問い合わせ ツール • コンタクト・フォーム • チャット・ウィンドウ • メッセージ・アプリ ユーザー登録 • メールアドレスで登録 • SNSアカウントで登録（ソーシャルログイン） 国・地域に合わせたデザイン(UI/UX)の最適化 「メールアドレス持っていない…」 地域に合わせた ソーシャルログインも！
67. ４. サーバー ウェブサイトの ローカライゼーション ５つのポイント L10N
68. サーバー選定 遠い国からのアクセス、 スピードは十分速いですか？ 1. 日本のサーバーで運用 2. 各国各地にサーバーを いて、それぞれ運用 3. CDN コンテンツ・デリバリー・ネットワーク を対象国で 利用 る
69. ５. 多言語SEO ウェブサイトの ローカライゼーション ５つのポイント L10N
70. SEO的にどのURL構造が良い？ サブドメイン？ サブディレクトリ？ どちらが良いの？ ja.example.com example.com/ja/
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構造が良い？
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構造が良い？ サブドメイン サブディレクトリ どちらでも◎
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
74. 特に抑えておきたい 多言語サイトSEO、Googleからの注意点！ • ユーザーの言語を認識 て自動的にリダイレクトすることは 避けてください。 のようなリダイレクトを行うと、ユーザー（と 検索エンジン） サイトの べての言語バージョンを見られな なる場 合 ありま 。 • 自動翻訳したサイトページが検索エンジンからクロー ルされないようにしてください。自動翻訳は意味 通 ない 場合 あるため、スパムとみな れる可能性 ありま 。 出典：Search Consoleヘルプ > 国際化 たサイトと多言語サイト＞多地域、多言語のサイトの管理 　hhttps://support.google.com/webmasters/answer/182192
75. 1. HTML タグ 2. HTTP ヘッダー 3. サイトマップ 出典：Search Consoleヘルプ > ページのローカライズ版について Google に知ら る　https://support.google.com/webmasters/answer/189077?hl=ja 言語や地域ごとのページをグーグルに知らせ る方法は３つ
76. 出典：Search Consoleヘルプ > ページのローカライズ版について Google に知ら る　https://support.google.com/webmasters/answer/189077?hl=ja <!DOCTYPE html> <html lang="ja"> <head> <meta charSet="utf-8"/> <title>Example Corporation</title> ・ ・ ・ lang="ja" 言語や地域ごとのページをグーグルに 「HTMLタグ」で知らせる方法
77. 出典：Search Consoleヘルプ > ページのローカライズ版について Google に知ら る　https://support.google.com/webmasters/answer/189077?hl=ja <!DOCTYPE html> <html lang="ja"> <head> <meta charSet="utf-8"/> <title>Example Corporation</title> ・ ・ ・ lang="ja" ちがっていた！ -“ Google では、ページの表示内容 らその言語を判断 ま 。 lang 属性のようなコードレベルの言語情報や、URL は使用しません。” 言語や地域ごとのページをグーグルに 「HTMLタグ」で知らせる方法
78. 出典：Search Consoleヘルプ > ページのローカライズ版について Google に知ら る　https://support.google.com/webmasters/answer/189077?hl=ja <head>内に次の<link>要素を追加 <link rel="alternate" hreflang="言語コード" href="ページURL" /> • 言語コード：ページ 対象と る言語や地域のコード • ページURL：指定 た言語や地域 対象と るページのフルパス 言語や地域ごとのページをグーグルに 「HTMLタグ」で知らせる方法
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：指定した言語や地域が対象とするページのフルパス • 他言語ページは同じドメイン内である必要はない <head> <title>Example Corporation</title> <link rel="alternate" hreflang="ja" href="http://example.com/page.html" /> <link rel="alternate" hreflang="zh-Hant-HK" href="http://hk.example.com/page.html" /> <link rel="alternate" hreflang="zh-Hant-TW" href="http://tw.example.com/page.html" /> <link rel="alternate" hreflang="zh-Hans" href="http://cn.example.com/page.html" /> <link rel="alternate" hreflang="en" href="http://en.example.com/page.html" /> </head> 言語や地域ごとのページをグーグルに「HTMLタグ」で知らせる方法 （記述例）
80. 出典：Search Consoleヘルプ > ページのローカライズ版について Google に知ら る　https://support.google.com/webmasters/answer/189077?hl=ja <head> <title>Example Corporation</title> <link rel="alternate" hreflang="ja" href="http://example.com/page.html" /> <link rel="alternate" hreflang="en" href="http://en.example.com/page.html" /> <link rel="alternate" hreflang="en-US" href="http://us.example.com/page.html" /> <link rel="alternate" hreflang="en-GB" href="http://uk.example.com/page.html" /> <link rel="alternate" hreflang="zh-Hant-HK" href="http://hk.example.com/page.html" /> <link rel="alternate" hreflang="zh-Hant-TW" href="http://tw.example.com/page.html" /> <link rel="alternate" hreflang="zh-Hans" href="http://cn.example.com/page.html" /> </head> 文字コード例 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 言語コードの構成
81. 出典：Search Consoleヘルプ > ページのローカライズ版について Google に知ら る　https://support.google.com/webmasters/answer/189077?hl=ja <head> <title>Example Corporation</title> <link rel="alternate" hreflang="ja" href="http://example.com/page.html" /> <link rel="alternate" hreflang="zh-Hant-HK" href="http://hk.example.com/page.html" /> <link rel="alternate" hreflang="zh-Hant-TW" href="http://tw.example.com/page.html" /> <link rel="alternate" hreflang="zh-Hans" href="http://cn.example.com/page.html" /> <link rel="alternate" hreflang="en-US" href="http://us.example.com/page.html" /> <link rel="alternate" hreflang="en-GB" href="http://uk.example.com/page.html" /> <link rel="alternate" hreflang="en" href="http://en.example.com/page.html" /> </head> 文字コード例 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 言語コードの構成 言語 文字体系 （もしあれば） 言語コードの要素 地域 （もしあれば） ー ー
82. 出典：Search Consoleヘルプ > ページのローカライズ版について Google に知ら る　https://support.google.com/webmasters/answer/189077?hl=ja <head> <title>Example Corporation</title> <link rel="alternate" hreflang="ja" href="http://example.com/page.html" /> <link rel="alternate" hreflang="zh-Hant-HK" href="http://hk.example.com/page.html" /> <link rel="alternate" hreflang="zh-Hant-TW" href="http://tw.example.com/page.html" /> <link rel="alternate" hreflang="zh-Hans" href="http://cn.example.com/page.html" /> <link rel="alternate" hreflang="en-US" href="http://us.example.com/page.html" /> <link rel="alternate" hreflang="en-GB" href="http://uk.example.com/page.html" /> <link rel="alternate" hreflang="en" href="http://en.example.com/page.html" /> </head> 文字コード例 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
83. 出典：Search Consoleヘルプ > ページのローカライズ版について Google に知ら る　https://support.google.com/webmasters/answer/189077?hl=ja <head> <title>Example Corporation</title> <link rel="alternate" hreflang="ja" href="http://example.com/page.html" /> <link rel="alternate" hreflang="zh-Hant-HK" href="http://hk.example.com/page.html" /> <link rel="alternate" hreflang="zh-Hant-TW" href="http://tw.example.com/page.html" /> <link rel="alternate" hreflang="zh-Hans" href="http://cn.example.com/page.html" /> <link rel="alternate" hreflang="en-US" href="http://us.example.com/page.html" /> <link rel="alternate" hreflang="en-GB" href="http://uk.example.com/page.html" /> <link rel="alternate" hreflang="en" href="http://en.example.com/page.html" /> </head> 文字コード例 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
84. 出典：Search Consoleヘルプ > ページのローカライズ版について Google に知ら る　https://support.google.com/webmasters/answer/189077?hl=ja <head> <title>Example Corporation</title> <link rel="alternate" hreflang="ja" href="http://example.com/page.html" /> <link rel="alternate" hreflang="zh-Hant-HK" href="http://hk.example.com/page.html" /> <link rel="alternate" hreflang="zh-Hant-TW" href="http://tw.example.com/page.html" /> <link rel="alternate" hreflang="zh-Hans" href="http://cn.example.com/page.html" /> <link rel="alternate" hreflang="en-US" href="http://us.example.com/page.html" /> <link rel="alternate" hreflang="en-GB" href="http://uk.example.com/page.html" /> <link rel="alternate" hreflang="en" href="http://en.example.com/page.html" /> </head> 文字コード例 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
85. 出典：Search Consoleヘルプ > ページのローカライズ版について Google に知ら る　https://support.google.com/webmasters/answer/189077?hl=ja <head> <title>Example Corporation</title> <link rel="alternate" hreflang="ja" href="http://example.com/page.html" /> <link rel="alternate" hreflang="zh-Hant-HK" href="http://hk.example.com/page.html" /> <link rel="alternate" hreflang="zh-Hant-TW" href="http://tw.example.com/page.html" /> <link rel="alternate" hreflang="zh-Hans" href="http://cn.example.com/page.html" /> <link rel="alternate" hreflang="en-US" href="http://us.example.com/page.html" /> <link rel="alternate" hreflang="en-GB" href="http://uk.example.com/page.html" /> <link rel="alternate" hreflang="en" href="http://en.example.com/page.html" /> </head> 文字コード例 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
86. 出典：Search Consoleヘルプ > ページのローカライズ版について Google に知ら る　https://support.google.com/webmasters/answer/189077?hl=ja <head> <title>Example Corporation</title> <link rel="alternate" hreflang="ja" href="http://example.com/page.html" /> <link rel="alternate" hreflang="zh-Hant-HK" href="http://hk.example.com/page.html" /> <link rel="alternate" hreflang="zh-Hant-TW" href="http://tw.example.com/page.html" /> <link rel="alternate" hreflang="zh-Hans" href="http://cn.example.com/page.html" /> <link rel="alternate" hreflang="en-US" href="http://us.example.com/page.html" /> <link rel="alternate" hreflang="en-GB" href="http://uk.example.com/page.html" /> <link rel="alternate" hreflang="en" href="http://en.example.com/page.html" /> </head> 文字コード例 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
87. 出典：Search Consoleヘルプ > ページのローカライズ版について Google に知ら る　https://support.google.com/webmasters/answer/189077?hl=ja <head> <title>Example Corporation</title> <link rel="alternate" hreflang="ja" href="http://example.com/page.html" /> <link rel="alternate" hreflang="zh-Hant-HK" href="http://hk.example.com/page.html" /> <link rel="alternate" hreflang="zh-Hant-TW" href="http://tw.example.com/page.html" /> <link rel="alternate" hreflang="zh-Hans" href="http://cn.example.com/page.html" /> <link rel="alternate" hreflang="en-US" href="http://us.example.com/page.html" /> <link rel="alternate" hreflang="en-GB" href="http://uk.example.com/page.html" /> <link rel="alternate" hreflang="en" href="http://en.example.com/page.html" /> </head> 文字コード例 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
88. 出典：Search Consoleヘルプ > ページのローカライズ版について Google に知ら る　https://support.google.com/webmasters/answer/189077?hl=ja <head> <title>Example Corporation</title> <link rel="alternate" hreflang="ja" href="http://example.com/page.html" /> <link rel="alternate" hreflang="zh-Hant-HK" href="http://hk.example.com/page.html" /> <link rel="alternate" hreflang="zh-Hant-TW" href="http://tw.example.com/page.html" /> <link rel="alternate" hreflang="zh-Hans" href="http://cn.example.com/page.html" /> <link rel="alternate" hreflang="en-US" href="http://us.example.com/page.html" /> <link rel="alternate" hreflang="en-GB" href="http://uk.example.com/page.html" /> <link rel="alternate" hreflang="en" href="http://en.example.com/page.html" /> </head> 文字コード例 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
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 中文 中文 中国（簡体字） 中文 台湾 (繁体字) 中文 簡体字 中文 繁体字 中文 繁体字　台湾 中文 繁体字　香港 中文 香港 (繁体字) 中文 繁体字　中国
90. 多言語化 ≠ 翻訳 っ り ローカライゼーションに取り組んで 直訳サイト ら、もう一歩先へ
91. WordPressで プラグインを使った 多言語サイト構築 ④
92. 多言語化プラグインでできること（例） 1. 言語スイッチャー 2. 言語毎のサブディレクトリ・サブドメイン設定 3. Googleに必要なHTMLコードを追加 4. 自動翻訳機能 5. .mo .po ファイルを使わないテーマ・プラグインの 翻訳管理 6. プロ翻訳依頼（追加料金） 7. 無料／有料（買い切り、サブスクリプション制）
93. 1. 言語スイッチャー 2. 言語毎のサブディレクトリ・サブドメイン設定 3. Googleに必要なHTMLコードを追加 4. 自動翻訳機能 5. .mo .po ファイルを使わないテーマ・プラグインの 翻訳管理 6. プロ翻訳依頼（追加料金） 7. 無料／有料（買い切り、サブスクリプション制） 多言語化プラグインでできること（例） 一つだけ or 多機能 いろいろ あります
94. でも… 何が何でも使えば良い というものでもない？
95. WordPressで多言語サイトを構築する４つのアプローチ 1. シングルサイトの一部として追加　 でにあるウェブサイトの一部に多言語ページを構築 ...「必要最小限のコンテンツだ 」「小規模導入」「プロモーションはSNS メイン etc.」 2. シングルサイトを複数構築 言語毎に、全 別々のサイトと て構築 ...「言語 とに担当者あり」「 っ り予算」「大企業・大規模サイト向 」 3. マルチサイト＋プラグインで構築 WordPressのマルチサイト機能とプラグインを活用 て統一管理 可能 ...「小～中規模」「管理 楽」「言語 とに編集スタッフのアカウント分 可能」 4. シングルサイト＋プラグインで構築 プラグインの活用で翻訳や言語スイッチをサポート ...「小～中規模」「管理 楽」「プラグイン 多 、多機能」 マルチサイト向けプラグインを使用 シングルサイト向けプラグインを使用
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 マルチ サイト 無料 〇 シンプルな設定画面で、直感的に操作で 簡単 × メディアアップロード 複数回必要 × シンプル過 て、多 を望めない
97. どんなケースのときに プラグインを導入するのか イメージは湧きましたか？
98. 未来の 多言語サイト構築 ⑤
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/
100. ありがとうございました 多謝大家！