Googleが提供する日本語WEBフォント【NotoSansJapanese】は実際どうなのか

お洒落なフォントを無料で使用することができるGoogleFont。その便利さから、WEB制作をする際は必ずと言っていいほど使用しています。

そのGoogleFontの日本語が出ているということを知ってから、最近それを使う事が増えてきました。

NotoSansJapaneseとは

GoogleとAdobeが共同開発して生まれたフォントNotoSansJapanese。

GoogleがWEBフォントとして提供しているフォントの中で、唯一の日本語フォントです。

ライセンスはApache License 2.0で、自由に使ってよいし、ダウンロードして自分のサーバーで使うのもオッケー。2次配布するときだけ、ライセンスを記してください。みたいなとても緩いもの。つまり無料で誰でもほぼ自由に使えてしまいます。

コンピュータでは、表示することができない文字があると「□」が表示されます。「□」のことを、その形から「豆腐」と呼ぶそうですが、NotoSansはこの豆腐をインターネットの世界から無くそう！という意図から作られたのだとか。日本語と中国語、韓国語がセットになってNotoSansCJKとして提供されています。日本語フォントはこの中のひとつで、NotoSansCJK JAです。

フォントの表示はPCによって異なります。

今まではユーザーのコンピュータOSに搭載されているフォントを使ってWEBページを表示することが一般的でした。

Windowsであれば、メイリオ・MSゴシック・MS明朝を、Macであればヒラギノ角ゴシックProN・ヒラギノ明朝ProN・ヒラギノ角ゴシックPro・ヒラギノ明朝 Proが使われますね。つまり同じサイトであってもPCや環境によって使われるフォントが異なります。

フォントひとつでサイトの印象って大きく変わります。

自分はWindows一筋なのですが、同じサイトをWindowsとMacで初めて見比べた時の衝撃は半端なかったです。Macのヒラギノで表示されているサイトは、Windowsの画面に比べて全く違うサイトに見えるほど、かっこよく見えました。ヒラギノ美しい…

この環境によってフォントが違うじゃない問題。WEBフォントを使う事で、どのPCから見ても同じフォントで見ることができます。しかもNotoSansというフォントは見た目も悪くないと上場の評判。色々なシーンで使うことができるのではないでしょうか！

NotoSansの導入方法

導入方法は２つ。

①GoogleFonts:EarlyAccessを利用する方法。②ダウンロードしてサーバーに設置して使用する方法です。

WEBフォントを使う

EarlyAccessとはGoogleが提供しているWEBフォントを利用する方法で、とても簡単。Googleのサーバーに置いてあるデータを使用します。

CSSでgooglefontを読み込み

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

font-familyを指定してあげるだけ

font-family: 'Noto Sans Japanese', sans-serif;

それだけです！！

ダウンロードしたファイルを使う

ダウンロードして使う場合は、GoogleFontのページからNotoSansCJK JPをダウンロード。

圧縮ファイルを解凍すると、中に７つの書体が入っています。

ファイルサイズが大きい日本語フォントの性質上、woffに変換して使用することをお勧めします。コンバーターが無料配布されているので、ツールをインストールして使いましょう。
→武蔵システムwoffコンバーター
また、IE対応などを考えると、EOTファイルも用意するのが確実なようです。

コンバートの仕方はこちらの過去記事をどうぞ
→デザイン性とSEO効果を兼ね備えたWebフォントを使ってみた【基本知識と使い方まとめ】

変換が終わったら使用するフォントファイルをサーバーにアップロードして、CSSで読み込みます。

@font-face {
    font-family: 'NotoSansCJKjp-Light';
    src: url('/fonts/noto.woff');
}

そうすればfont-familyで指定するだけで使う事ができます。

font-family: 'Noto Sans Japanese', sans-serif;

WEBフォントのメリット

ユーザーのコンピュータOSに標準搭載されているフォントだけでは、デザインの表現に限界がありますよね。どうしてもデザイン性が必要な見出しやバナーなどは、フォトショップで加工して画像を当てはめる方法が多く使われてきました。

しかしWEBフォントの登場によって、これが変わってきます。GoogleフォントのようにフォントをWEBクラウド上からダウンロードして表示することができてから、どのブラウザ環境であっても様々な種類のフォントを自由に表示することができるようになったのです。

無料でGoogleから配布されている日本語WEBフォントはNotoSansだけなので、まだまだ欧文フォントのようにWEBフォントのメリットを享受できているとは言えませんが、今後日本語フォントの種類が増えて、今よりも使い方の幅が広がることに期待したいです。

Googlefont以外でも、いくつか日本語フォントサービスは存在します。ただ有料や制限付き無料であったりと、使い勝手が良いとは言い難いので、もっともっと増えて使いやすくなってほしいです。

NotoSansの読み込み速度問題

画像よりもテキスト情報の方が、SEO的にも有利ですし、メンテナンスもしやすく（修正等）、画像のサイズや画質を気にする必要もありません。良いことだらけです。

でも日本語のWEBフォントはなかなか普及してきませんでした。

なぜかというと、数十文字で完結する欧文フォントに比べて、日本語は常用漢字だけでも2136文字と数が膨大。その数だけフォントを作るのも大変です。更にその作った日本語フォントは、その数が故にファイルサイズが桁違いに大きくなってしまいます。そうなると表示速度等の負担がどうしても増えてしまって、サイト制作者側も使う事を躊躇してしまうという背景があったのです。

NotoSansを採用する際に唯一問題があるとすれば、この読み込み速度が遅くなるという点。やはりNotoSansを使用すると気になるほどに読み込み速度は遅くなると感じています。

WEBサイトの表示高速化にこだわっているのであれば、notoを使うのは避けた方が良い気がします。

私は当分の間は、読み込み速度やSEOを気にしないサイト、何かのキャンペーンページやコーポレートサイト等を中心に使っていく予定です。