簡体字-中国語WEBサイトに最適なfont-familyとは？
簡体字‐中国語でWEBサイトを制作する際に最適なfont-familyはご存知でしょうか？
ローカル企業にその最適解をみつけるべく、中国を代表的するグローバル企業が、どのようなfont-familyを指定してるのかをまとめてみました。
簡体字-中国語フォントの前提知識
フォントにはセリフ系とサンセリフ系の大きく２つの系統があります。
セリフとは、欧文文字のストロークの端にある「飾り」「ハネ」の部分で、日本語フォントの明朝体にある「うろこ」の部分があるフォントにあたります。
それに対してサンセリフは、直線的なデザインでこの「飾り」「ハネ」の部分がありません。日本語フォントではゴシック体にあたります。
セリフは「伝統」、サンセリフは「モダン」というように、それらを見る人に正反対の印象を与えることから、フォントの指定はWEBサイトのイメージを大きく左右するものです。
しかし、イメージやデザイン、ディバイスの問題のため、１つのfont-familyだけをあげて「これが正解」と断言できるというものではありません。
コーポレートサイト事例 : トヨタ
トヨタは170以上の国や地域で車を販売している言わずとしれた日本を代表するメーカーです。
その中国の子会社であるTOYOTA CHINAで使われている簡体字中国語フォントは、微软雅黑が筆頭で指定されています。
微软雅黑（Microsoft YaHei）は、Windowsに標準で搭載されているサンセリフ系の簡体字中国語フォントです。
また、宋体(SimSun)もWindowsにある明朝系（セリフ）のフォントです。
sans-serifやsefifなどの総称ファミリーの指定もなく、サンセリフとセリフが混合されている珍しい例です。総称ファミリーの指定がない場合、ブラウザの指定なし時のフォントが割り当てられますので、上位指定のフォントが無いと想像されるほとんどのMacユーザはブラウザのデフォルトのフォントが表示されます。
対象のURL
https://www.toyota.com.cn/
CSS内のfont-familyの指定
body {
font-family: "微软雅黑","宋体";
}
IT系サイト事例 : Apple
MacやiPhoneといったデザイン性の高いハードウェアと関連商品のソフトウェアを世界中で販売しているAppleでは、SF Pro SCというフォントを筆頭に指定しています。このSF系は、San FranciscoというフォントでAppleが自社で開発しており、様々なディバイスのシステムフォントとして採用されているものです。
また、少し前のiOS9の使われていたPingFang SCも指定されています。
*iOS11以降であれば ”-apple-system, BlinkMacSystemFont“とディバイスフォント指定する方法もありますが、当内容では現状を比較まとめるものなので以下の事実だけ記載しておきます。
さらに、body:lang(zh-CN)という:lang擬似クラスの指定がされていることがわかります。これはカッコ内で指定されている言語であった場合、その要素に対してスタイルを適用する指定方法です。
対象のURL
https://www.apple.com/cn/
CSS内のfont-familyの指定
body:lang(zh-CN) {
font-family: "SF Pro SC","SF Pro Text","SF Pro Icons","PingFang SC","Helvetica Neue","Helvetica","Arial",sans-serif;
}IT系サイト事例 : Microsoft
Microsoft WindowsやMicrosoft Officeを世界中に販売してきたMicrosoftのWEBサイトは、世界中の言語に対応しています。その簡体字中国語サイトでは、Microsoftが開発したSegoe UIが筆頭に指定されており、Microsoft YaHei＝微软雅黑も合わせて指定されています。
対象のURL
https://www.microsoft.com/zh-cn/
CSS内のfont-familyの指定
body {
font-family: 'Segoe UI',SegoeUI,'Microsoft YaHei',微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
IT系サイト事例 : Google
Googleのフォント指定はページ毎に様々なようでした。
TOPページは、お馴染みの検索窓だけのページですので、以下のテキスト情報の多いservices紹介のページをサンプルとしました。
Googleが開発し、現在はオープンソースとなっているRobotoというフォントが筆頭に設定されています。
このRobotoは、Androidのシステムフォントとしても利用されています。
ちなみに他のページではHelveticaやWEBフォントであるgoogle fontsもいくつか利用されていましたが、総じて全てがシンプルな指定で、arialとsans-serifのみのページもありました。
対象のURL
https://www.google.cn/intl/zh-CN/services/
CSS内のfont-familyの指定
body {
font-family: 'Roboto',arial,sans-serif;
}ポータル・メディア系事例 : 新華社
日本のニュースなどでも取り上げられることがある国営メディア新華社は、中国共産党直属の機関でもあり、中国で最も影響力のあるメディアです。
その新華社のfont-familyは、明朝体である宋体(SimSun)が筆頭に設定されています。
そして、その後にArialとHelveticaとあり、総称ファミリーにセリフ体のsans-serifが指定されています。つまり、Windowsでは、セリフ、Macではサンセリフが表示されるようになっている混合型です。
対象のURL
http://www.xinhuanet.com/
CSS内のfont-familyの指定
body {
font-family: 宋体, Arial, Helvetica, sans-serif;
}まとめ
中国の代表的なグローバル企業の簡体字中国語フォントを調査しました。
他の地域には見られないセリフとサンセリフの混合という形が意外に見られます。これは中国にいおてMacのシェアが6％代とかなり低いことと関係があるかもしれません。
（2018年8月〜10月の3ヶ月）出典：百度統計 http://tongji.baidu.com/data/browser
また、Googleのように欧文だけは個別に指定をして、sans-serifの総称を記載するのも一つの方法かと思います。ブラウザに設定されているsans-serifのデフォルト指定に任せるということです。
WEBサイトのユーザ傾向やデザインにあったfont-familyの参考にしてくだい。