15 Comment / Trackback

2014年もまもなく師走ですが、久々のWeb制作ネタです。
Writing Modeはリリース以来、モリサワのTypeSquareを利用してゴシックMB101を基本書体にしてきました。

TypeSquare［タイプスクウェア］

日本語フォントは欧文フォントと違って、文字数が多くファイルサイズがとても大きくなります。そのため、TypeSquareのようなWebフォント配信サービスは、フォントをサブセット化して（必要な文字だけ）配信してくれます。
だけど、やっぱり読込スピードの遅さが少し気になります。画面表示はとても綺麗なんだけど、どうしてもスピードとトレードオフになってしまう。

また、サブセット化してフォントを配信するということは、AJAXを利用してページの読込後に追加される文字要素にはフォントが適用されないということでもあります。
TypeSquareや FONTPLUS といったWebフォント配信サービスには、AJAX対応を考えてAPIも用意されていますが、Webフォントを適用するためにAJAXの実装が複雑化するというのは考えものでしょう。

Webフォントはまだまだ進化していく過程でしょうが、こと日本語のWebフォントについてはとても課題が多いのが現状と言えます。

初めてプラットフォームを飛び越えたデバイスフォント「游書体」

デバイスが多様化し、ディスプレイサイズも解像度もバラバラな今、デザイン重視でテキストを画像化するというのは現実的な選択肢ではなくなりつつあります。
Webフォントはそうした課題を解決するための効果的なソリューションだけど、日本語の場合は既述の通り課題も多く普及はまだまだ進んでいません。

テキストの画像化を避け、Webフォントを使用しないとなると、デバイスフォントで文字を表示するしかなくなるわけですが、現状、Webフォントを使わずデバイスフォントを使う場合には、WindowsではVista以上に標準搭載されているメイリオ、Mac OS Xではヒラギノ角ゴシックがファーストチョイスになるでしょう。
ただし、メイリオはちょっと癖のある書体で、長文の表示にはあまり向いていない気がします。
そして、メイリオとヒラギノではまったく書体デザインが異なるために、WindowsでWebページを見た場合とMac OS XでWebページを見た場合では、デザインの印象が大きく異なってしまう。

これまでの日本のWebデザイナーの大きな悩みは、デバイスフォントを中心にしてデザインをすると、プラットフォームを飛び越えて統一性のあるWebデザインを作れないことでした。
ところがここにきて、Windows 8.1とMac OS X 10.9（Marvericks）で共通して搭載されるプロフェッショナル書体が現れました。
それが、字游工房がデザインする游書体シリーズ。

字游工房＿游書体ライブラリー＿游ゴシック体ファミリー

まだまだWindows 8.1も、Mac OS X 10.9（Marvericks） – 10.10（Yosemite）もメインストリームのOSとはなっていませんが、今後はCSSでフォントファミリーを指定する場合に、もっとも優先して指定するのは游書体ということでよいでしょう。
今回、Writing Modeで游ゴシックを指定するにあたって記述したフォントファミリーは以下のようなものです。

font-family: 'YuGothic', 'Yu Gothic', '游ゴシック', '游ゴシック体', sans-serif;

OSによってフォント名が若干異なるのと、ブラウザによってフォント名の解釈が異なるため、「YuGothic」「Yu Gothic」「游ゴシック」「游ゴシック体」の4つのフォントファミリー指定をしています。

游ゴシックはメイリオや新ゴのように仮想ボディいっぱいにデザインされたゴシック体と比べるとかなり小ぶりです。キャプションのような小さな文字には向きませんが、長文を読ませるのには適した書体と言えるでしょう。
メイリオやMS Pゴシックのような字面の大きな書体に慣れてしまった目だと、最初はなかなか馴染みにくいかもしれませんが、より細やかに作られた字形から得られる情報量（止め・はね・払いなど）はメイリオやMS Pゴシックより多いはずなので、一旦慣れてしまえばこれまでよりも文章を読みやすくなるのではないかと僕は思っています。

Googleのオープンソースフォントプロジェクト「Noto」についに日本語が登場

游ゴシックとともに、プラットフォームを飛び越えて普及することが期待されるのがGoogleのオープンソースフォント「Noto」。
「Noto」の由来は「No 豆腐（コンピュータで表示できる文字がなくて □ と表示されてしまうことを豆腐に擬えて）」ということで、世界じゅうの言語をサポートすることを目標にしています。

Google Noto Fonts

日本語フォントには、Adobeと共同開発した「源ノ角ゴシック」が「Noto Sans Japanese」として採用されており、Google Fontsでも試験公開（アーリーアクセス）がはじまっています。

Google Developers JP（Twitter）

Google Web Fonts として初の日本語フォント Noto Sans Japanese を試験公開中です。 http://j.mp/1Cuo5zs フィードバックはこちらへお願いします (英語) http://j.mp/1yJbRFr

オープンソースであり誰でもインストール可能なフォントだとはいえ、游ゴシックとは異なり今はまだWindowsやMac OS Xにプリインストールされているわけではないので、あくまでもWebフォントとして利用することになります。

@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);
font-family: 'Noto Sans Japanese', sans-serif;

Writing Modeでも游ゴシックの次に優先度の高いフォントとして、Noto Sans Japaneseを読み込んでみています。
最終的に現在のフォント指定（日本語部分）は以下のようにしました。

@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);
font-family: 'YuGothic', 'Yu Gothic', '游ゴシック', '游ゴシック体', 'Noto Sans Japanese', sans-serif;

最新のWindowsやMac OS Xでは標準搭載された游ゴシックが、Windows 8以下やMac OS X 8以下、そしてスマホ端末ではWebフォントでNoto Sans Japaneseが読み込まれることになります。
Noto Sans Japaneseはまだアーリーアクセスであることもあり、特にスマホ端末での表示には課題があります（しかし、今は目をつぶってます）。

この先、数年で游ゴシックまたは源ノ角ゴシック（Noto Sans Japanese）をベースにデザインしたWebサイトが圧倒的に増えそうで、文字については個性の尖ったWebデザインが少なくなるであろうことは少し残念ではあります。
ただし、Webデザインに求められるのは、デバイスに応じて最適な表現を切り分けつつも統一性を損なわない表現（スピードも考慮に入れなきゃ）だと思うので「個性」というのもその制約内で勝負せねばな、と。

来年末にはどうなっているかわからないけど、とりあえず今後しばらくは游ゴシックか源ノ角ゴシックをベースにデザインを作ってみようと思った2014年の年末でした。

Trackback

http://writing-mode.com/20141125/font-family/trackback/