韓国語WEBサイトに最適なfont-familyとは？
韓国語でWEBサイトを制作する際に最適なfont-familyはご存知でしょうか？
ローカル企業にその最適解をみつけるべく、韓国を代表的するグローバル企業が、どのようなfont-familyを指定してるのかをまとめてみました。
韓国語フォントの前提知識
フォントにはセリフ系とサンセリフ系の大きく２つの系統があります。
セリフとは、欧文文字のストロークの端にある「飾り」「ハネ」の部分で、日本語フォントの明朝体にある「うろこ」の部分があるフォントにあたります。宮書体（궁서체 、Gungsuh）、パタン体（바탕체、Batang）が、代表的なセリフ体です。
それに対してサンセリフは、直線的なデザインでこの「飾り」「ハネ」の部分がありません。日本語フォントではゴシック体にあたります。板本体（판본체）、トドゥム体（돋움체、Dotum）、クリム体（굴림체、Gulim）が、代表的なサンセリフ体です。
セリフは「伝統」、サンセリフは「モダン」というように、それらを見る人に正反対の印象を与えることから、フォントの指定はWEBサイトのイメージを大きく左右するものです。
しかし、イメージやデザイン、ディバイスの問題のため、１つのfont-familyだけをあげて「これが正解」と断言できるというものではありません。
コーポレートサイト事例 : トヨタ
トヨタは170以上の国や地域で車を販売している言わずとしれた日本を代表するメーカーです。
その韓国の子会社であるTOYOTA KOREAで使われている韓国語フォントは、tdが筆頭で指定され、ngが続いています。
このtdとngは、WEBフォントで指定されています。tdについては、ToyotaDisplayというトヨタ独自のフォントのようです。まったく知りませんでしたが、以下に、ブランドガイドラインがあり、Typographyにいたるまで細かい記述がありました。
https://www.toyota.com/brandguidelines/
ngはNanum Gothicというフォントになり、総称ファミリーはsans-serifが指定されています。
上記ブランドガイドラインにあるToyota Typeは、サンセリフとの記述がありましたので、ガイドラインでしっかりとフォントの規定されており、WEBサイトにもそれが遵守されていることがわかります。
対象のURL
https://www.toyota.co.kr/
CSS内のfont-familyの指定
body {
font-family: 'td','ng', sans-serif;
}
IT系サイト事例 : Apple
MacやiPhoneといったデザイン性の高いハードウェアと関連商品のソフトウェアを世界中で販売しているAppleでは、SF Pro KRというフォントを筆頭に指定しています。このSF系は、San FranciscoというフォントでAppleが自社で開発しており、様々なディバイスのシステムフォントとして採用されているものです。
その他、Gulim、Dotum系の指定があり、Malgun Gothic＝マルグン・ゴシック（맑은 고딕）があります。これはWindowsに標準にある書体です。
*iOS11以降であれば ”-apple-system, BlinkMacSystemFont“とディバイスフォント指定する方法もありますが、当内容では現状を比較まとめるものなので以下の事実だけ記載しておきます。
さらに、body:lang(ko)という:lang擬似クラスの指定がされていることがわかります。これはカッコ内で指定されている言語であった場合、その要素に対してスタイルを適用する指定方法です。
対象のURL
https://www.apple.com/kr/
CSS内のfont-familyの指定
body:lang(ko) {
font-family: "SF Pro KR","SF Pro Text","SF Pro Icons","Apple Gothic","HY Gulim","MalgunGothic","HY Dotum","Lexi Gulim","Helvetica Neue","Helvetica","Arial",sans-serif;
}}IT系サイト事例 : Microsoft
Microsoft WindowsやMicrosoft Officeを世界中に販売してきたMicrosoftのWEBサイトは、世界中の言語に対応しています。その韓国語サイトでは、Microsoftが開発したSegoe UIが筆頭に指定されており、Windowsの標準フォントのMalgun Gothic＝マルグン・ゴシック（맑은 고딕）も指定されています。
対象のURL
https://www.microsoft.com/ko-kr/
CSS内のfont-familyの指定
body {
font-family: 'Segoe UI',SegoeUI,'Malgun Gothic',Gulim,"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.co.kr/services/
CSS内のfont-familyの指定
body {
font-family: 'Roboto',arial,sans-serif;
}ポータル・メディア系事例 : ネイバー
日本ではGoogle（yahooも含む）が圧倒的な検索エンジンのシェアNO1となっていますが、韓国ではネイバーが善戦しており、20％‐30％のシェアがあると言われています。また、日本でネイバーは、モバイルアプリで有名なLINEの親会社としても有名です。
そのネイバーのfont-familyは、Dotumが筆頭に設定されています。돋움は、Dotumの韓国語となります。Apple SD Gothic Neoは比較的以前からあるApple系のディバイスに搭載させれているフォントになります。
対象のURL
https://www.naver.com/
CSS内のfont-familyの指定
body, button, input, select, table, textarea {
font-family: Dotum,'돋움',Helvetica,"Apple SD Gothic Neo",sans-serif;
}}まとめ
韓国の代表的なグローバル企業の韓国語フォントを調査しました。
MicrosoftやApple、googleなど独自フォントを作れるような会社のバイアスを除くと、日本語のメイリオと同時期にWindowsに搭載されたMalgun Gothic＝マルグン・ゴシック（맑은 고딕）が人気のようです。
WEBサイトのユーザ傾向やデザインにあったfont-familyの参考にしてくだい。