記事の詳細
2017年4月4日にGoogleからNoto Serif CJK(Noto明朝)がオープンソースで発表されたので、WEBフォントのメリットデメリットを考えてみる
Google、日中韓対応の明朝体フォント「Noto Serif CJK」を無償公開|窓の社
豆腐(対応する文字がなくて「これないよ…」と代わりに表示される四角いエラー表示)を駆逐する、NO TOFU! という目的でGoogleさまが無料で提供してくれているNotoフォントに新たにNoto Serif CJK(Noto明朝)が仲間入りしました。WEBフォント化はまだかな! まだしないのかな!
縦書き文化のある日本では本当にありがたいお話です。
Google Noto Serif CJK JP| 明朝体
Google Noto Sans CJK JP | ゴシック体
いやあNotoフォント美しい!
Notoフォントはゴシック体のみクラウド型WEBフォントとして利用が可能です。
今回のブログの見出しはコチラです!
WEBサイトにおけるフォントのあれそれ
今までのWEBサイトにおけるフォントはこんな感じでした。
- とにかく明朝体がない
- OS(WindowsやMac)でデフォルトのフォントが違う
- そのOSの中でもバージョンによってデフォルトのフォントが違う
- OSだけならまだしもブラウザでもデフォルトのフォントが違う
- モバイルでの表示でも使用されるフォントが違う
- さらにモバイルの種類によってもデフォルトのフォントが違う
- どうしても使いたいフォントがある場合には画像にして表示しなければならない
- 画像で文字を表現する場合にはalt=”#”設定で文字を入れておかないとSEO的にかなりツライ
全ての画面で同じフォントを使用することはほぼ不可能というくらいのバラバラっぷりです。CSSで指定するならものすごい指定量になっていました。こんな感じ。
ゴシック体(2016年くらい)
1 |
font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; |
明朝体(2016年くらい)
1 |
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", serif; |
ルールとしては、
- 英語フォントの指定をする
- 日本語フォントの日本語名を指定をする
- 日本語フォントの英語名を指定する
を基準とし、デザイン的な観点から適応したいフォントを先に記述していくことを念頭にしていきます。
フォントに対する評価は個人のものですが、Macの「ヒラギノシリーズ」は結構有名どころですが、日本語はきれいでも英語が結構やぼったい。特に明朝・セリフ体は日本語以外で使うと「なぜGaramondを使わないのか」とか「Timesはどうした」とかなってしまいます。さらに、利用者の少ないMacintoshのこのフォントがWindowsでどんなふうに表示されるかなんて考えるだけでぞわりとします。
2013年に発表されたWindows8あたりからWindowsのデフォルトフォントに非常に美しく読みやすい「游シリーズ」が追加されましたが、それ以前は横にポチャッとしたかわいらしさの目立つ「メイリオ」や見慣れ切ってもはや何の特徴もなくなってしまった「MSシリーズ」が定番。
これらがいつどこでどんなふうに使用されるのか、互換性を考えながらWEBサイトを構築するのは、至難の業だったのではないかと思います。
フォントを変えるだけで見違えるほど「変化」する
デザインの半分は文字にあるといっても過言ではないでしょう。タイポグラフィの美しさは、すなわち「読みやすさ」「伝わりやすさ」の指標です。適切なフォントを選ぶこと、適切な文字数におさめること、適切な幅や字間、行間をとることは、ある意味グラフィックがダメダメでもリカバリが効くポイントにもなるのですね。
だからこそ「フォントがコントロールできない」という環境はつらいのです……。そもそもWEBで使えるフォントって美しいものがそんなになかった、というのもあります。
これがですね。
WEBフォントを使うとですね。
全部解決しちゃうんですよ。
すごくないですか? 私はすごいと思います。やばいです。
WEBフォントを使うメリット
- デバイス間の互換性を考慮する必要がなくなる。(全部指定フォントで表示されるため)
- 思い通りのフォントを選ぶことができるのでデザインの幅が広がる。(もちろん発表されているフォントの中から、ですが)
- 文字を表現するために画像を使っていた箇所が減るので、HTMLの記述内容的にも画像の重さ的にもSEO的にもお得でらくちん
過去には以下のデメリットがあると思われておりました。
- コストがかかる
- 読み込みが遅い
確かにWEBフォントはそれなりにコストがかかります。
typesquare|モリサワフォント :1ドメインのフルプランで4,320円、年間51,840円
FONT PLUS|ソフトバンク・テクノロジー株式会社 :入会金10,800円 サイトのPV数に応じて価格変化
Adobe Typekit|Adobe :25,000PV以内で無料。ただし日本語フォントは少ない…。
Googleフォントだと無料の扱いですね。日本語は英語と違って字数が半端なく多い(英語:26文字+α、日本語常用漢字含め2500文字以上)ので、そもそも無料というのが奇跡に近いです。
読み込みが遅いということに関しては、上記WEBフォント提供サイト同様、Googleフォントもクラウド型WEBフォントサービス(サーバーにファイルを設置しているわけではない)なので、読み込んでしまえばキャッシュで読み込めるのでさほど遅くありません。
読み込みが遅いって言ってもあれですよ。Googleフォントならモバイルで3秒以下とかの世界ですよ。
3秒待てない人とか、カップラーメンで3分待つことになったらどうなっちゃうんですか。
>Webフォントは遅い? 実際に表示時間を計測検証してみた【動画で検証】|Web担当者Forum
Googleが提供する日本語のWEBフォント
実は完全サポートではないけれど、試験的に提供、ということで以下のサイトより「M+ 1p」「Rounded M+ 1c」「はんなり明朝」「こころ明朝」「さわらび明朝」「さわらびゴシック」「ニクキュウ」「ニコモジ」「Noto Sans Japanese」が無料で提供されています。
Google Fonts + 日本語 早期アクセス|Google Fonts + Japanese Early Access
ここに今回発表されたNoto Serif CJK JPも仲間入りするのでしょうか。めっちゃ楽しみです。
コメント
この記事へのトラックバックはありません。
この記事へのコメントはありません。