台湾で本職WEB業界で働いているRie( @rieasianlife )です!
今回はちょっとマニアックな台湾のWEBサイト事情のお話。
台湾中国語(華語)は、大陸の簡体字と比べて日本の漢字に似ている「繁体字」ですが、繁体字ってかなりWEB標準フォントの種類が少ないんです。
画像であれば、どんなフォントを使用してもOKですが、テキストを装飾しようとすると、どのブラウザでも同じように見える標準フォントかGoogleが提供しているWEBフォントなどを使用しなければなりません。
だからと言って、全テキストを画像だと、メンテナンスや読み込み速度が遅くなる・・・。
そこで、台湾国内現地のサイトで一体どんなフォントが使われているのか、よく使われているフォントを有名サイトや人気サイトから調査してみました。
PChome
まずは、台湾で使ったことがいないくらい有名なECモール「PChome」。
台湾版Amazonのようなモールで、政府調査によると国内ECサイトを利用するユーザー全体50%が利用していると答えている超有名モールです。
以下の記事で政府資料の翻訳を乗せてるので、気になる方はどうぞ。
PChomeについて詳しくはこちらの記事の冒頭で解説しています。
そんなPChomeのコーディングソースから抽出した使用フォントは以下でした!
- Arial あいうえお 台灣 12345(サンセリフ書体)
- Helvetica あいうえお 台灣 12345(ローマ字書体)
- sans-serif あいうえお 台灣 12345(よくある標準フォント)
- serif あいうえお 台灣 12345(ローマン体、標準フォント)
- pMingliu あいうえお 台灣 12345(中国語フォント、新細明體)
- Verdana あいうえお 台灣 12345(Microsoftの書体)
複数人が一緒に作っているようで、あまり書き方が統一されていないソースコードでした。
ちなみに、ArialとHelveticaの違いは縦に垂直に切れるのがHelvetica、斜めに切れるのがArialだそうです。
friDay購物
引用:friDay購物
friDayは遠東グループが運営するECモール。
そんなに売上規模は大きくはないですが、HappyGoと繋がっているのでポイントカードなど共通利用でき、百貨店のお客様とかを掴んでいたりします。
- Verdana あいうえお 台灣 12345
- Arial あいうえお 台灣 12345
- Helvetica あいうえお 台灣 12345
- sans-serif あいうえお 台灣 12345
- serif あいうえお 台灣 12345
- 新細明體 あいうえお 台灣 12345
- 微軟正黑體 あいうえお 台灣 12345(Microsoft JhengHei)
- 微軟雅黒 あいうえお 台灣 12345(Microsoft YaHei)
- Century Gothic あいうえお 台灣 12345
- AppleGothic あいうえお 台灣 12345
- 华文黑体 あいうえお 台灣 12345(STHeiti)
- Georgia あいうえお 台灣 12345(欧文フォント)
- Times New Roman あいうえお 台灣 12345
- Times あいうえお 台灣 12345
ソース自体は綺麗に整理されていて、見やすく、ブラウザ対策もしっかりしてる印象
google 台湾
引用:Google台湾
台湾Googleです!
よく「中国がグレートファイヤーウォール(金盾)でブロックされているので、台湾もなの?」と聞かれるのですが、台湾は普通にグローバルサイト使えます。
SEO対策なんかも日本と同じ仕組みです。
そんなGoogleで使われていたフォントはこちら。
- Arial あいうえお 台灣 12345
- sans-serif あいうえお 台灣 12345
- Roboto あいうえお 台灣 12345
- RobotoDraft あいうえお 台灣 12345
- Helvetica あいうえお 台灣 12345
台湾に特化した繁体字フォント指定が見当たらない印象。
Yahoo 奇摩
引用:Yahoo奇摩
台湾版のYahoo!です。
どうして「奇摩」がついているのかというと、もともと1997年に誕生した台灣奇摩站股份有限公司が運営する台湾現地の検索エンジンを2000年にYahoo!(雅虎)が買収したから。
日本のYahoo!はソフトバンクが買っているので、赤ロゴのYahoo!ですが、台湾はYahoo!本体のアジア拠点(シンガポールヘッドクオーター)が管理運営しているので、紫色のロゴです。
この辺の詳しい解説はこちらのYahoo!知恵袋に書いてありました(中国語)
そんなYahoo!で使われていたフォントはこれ!
- Helvetica Neue あいうえお 台灣 12345
- Arial あいうえお 台灣 12345
- 华文黑体 あいうえお 台灣 12345(STHeiti)
- 微軟正黑體 あいうえお 台灣 12345(Microsoft JhengHei)
- sans-serif あいうえお 台灣 12345
基本上記で統一されており、明朝体は少ないようです。
momo
引用:momo購物網
momoはPChomeに次ぐ、有名モールです。
ベンチャー系メーカーの日系企業も独自サイトと一緒に多く商品を出しています。
購入者層的には年齢層高めの主婦などが多いようで、まとめ買いが多く売れているそうです。
ここは自分でモールのレイアウトをいじって出店することも、完全お任せで商品だけ並べる簡単なタイプなど様々なニーズに答えてくれます。
台湾版楽天だと思っていただければわかりやすいかと。
(楽天は台湾に進出してますが・・・)
そんなmomoで使われていたフォントは以下。
- Arial あいうえお 台灣 12345
- 新細明體 あいうえお 台灣 12345
ページ自体が最初からファイル外部読み込みで構成。
直書きで呼び出してあるのは上記2つのみでした。
TVBS
引用:TVBS
続きまして、うって変わってテレビ局のサイト。
TVBSはニュース、バラエティー、知識、ドラマなどなど幅広い番組数を持ち、女人我最大や健康2.0など日系企業がステマに使う(こっそり)番組などが多くあったりします。
実は、台湾の方々はあまりテレビを見ないのですが、製作した番組はYoutubeで流したりFacebookで流すことで広告の役割を果たしていたりします。
そんなTVBSの公式サイトで使われているフォントはこちらでした。
- 微軟正黑體 あいうえお 台灣 12345(\5FAE\8EDF\6B63\9ED1\9AD4)
- Verdana あいうえお 台灣 12345
- Geneva あいうえお 台灣 12345
- Helvetica あいうえお 台灣 12345
- Arial あいうえお 台灣 12345
- Tahoma あいうえお 台灣 12345
- sans-serif あいうえお 台灣 12345
ソースは比較的綺麗で、JSバリバリで構成されていました。
microsoft TW
引用:Microsoft 台湾
次は、プログラマーならWindowsユーザーが多い気がしたので、台湾のMicrosoft!
私はMacで仕事していますが、メールはMicrosoftのOffice365にお世話になっていたりします。
そんなMicrosoft台湾のサイトで使われていたフォントはこちらでした。
- Segoe UI あいうえお 台灣 12345(Microsoft独自フォント)
- 微軟正黑體 あいうえお 台灣 12345(Microsoft JhengHei)
- Helvetica Neue あいうえお 台灣 12345
- Arial あいうえお 台灣 12345
- sans-serif あいうえお 台灣 12345
圧縮してあり、フォントは上記かオリジナルフォントで統一されていました。
蘋果日報 Apple Daily
引用:蘋果日報
続きまして、新聞の「蘋果日報(Apple Daily)」。
ニュースサイトなので文字が多いだろうと思い、調査してみました。
- 新細明體 あいうえお 台灣 12345(PMingLiU)
なんと、指定フォントはこの1種類のみでした。意外!
找好東西 citiesocial
ここは、私が個人的に好きなECショップです。
おしゃれで便利ないい商品がたくさんあるんですよ!
紹介記事も書いてるので、よかったらどうぞ。
そんなおしゃれな找好東西のフォントは以下でした。
- Roboto あいうえお 台灣 12345
- Helvetica Neue あいうえお 台灣 12345
- Arial あいうえお 台灣 12345
- sans-serif あいうえお 台灣 12345
比較的シンプルなフォント構成。明朝体は、使われていませんでした。
結論
よく使われていた標準フォントは以下の組み合わせだということがわかりました。
ゴシック系 微軟正黑體
font-family: ‘Microsoft JhengHei’, 微軟正黑體, ‘Helvetica Neue’, Helvetica, Arial, sans-serif;
明朝系 新細明體
font-family: Arial, PMingLiU, 新細明體;
アイコン FontAwesome
font-family: FontAwesome;
番外:繁体字のGoogleFont
少ないですが、Googleフォントにも繁体字があります。
- cwTeXKai(楷體字體)
- cwTeXYen(圓體字體)
- cwTeXFangSong(仿宋體字體)
- Noto Sans TC(黑體字體、思源黑體)
- cwTeXMing(明體字體)
指定方法を以下メモしておきます。
明朝系
@import url(https://fonts.googleapis.com/earlyaccess/cwtexkai.css);
font-family: ‘cwTeXKai’, serif;
@import url(https://fonts.googleapis.com/earlyaccess/cwtexfangsong.css);
font-family: ‘cwTeXFangSong’, serif;
@import url(https://fonts.googleapis.com/earlyaccess/cwtexming.css);
font-family: ‘cwTeXMing’, serif;
ゴシック系
@import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css);
font-family: ‘cwTeXYen’, sans-serif;
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
font-family: ‘Noto Sans TC’, sans-serif;
この記事を読んだあなたにオススメの書籍