はじめに

このシリーズでは、2016年4月にリニューアル公開されたピクセルグリッドのコーポレートサイトで指定されているフォントの選定と実装を紹介します。フォントの選定についてはピクセルグリッドのUIデザイナーの小原が、フォントの実装についてはフロントエンド・エンジニアの山田が執筆を担当します。

時代に合わせたフォント選択の必要性

まず、改めてフォントを選定することになったきっかけについて説明します。

普段、日本語サイトのデザインなりUIデザインなりを行う場合、フォントファミリーの指定はある程度固定化されたセットを使用することが多くありました。それは、ブラウザでフォントを指定する場合は、OSにすでにインストール済みのフォントを指定するか、サーバーから別途ダウンロードしたフォント、いわゆるWebフォントを指定する必要があるからです。しかし、CodeGridを読んでいる方であれば、このことを解説する必要はないと思います。

日本語環境でのWeb制作では、バンドルインストールされたフォントを利用するのが一般的です。使用できるフォント自体の数やファミリーに大きな制限がある状態では、毎回新たにフォントを選定するよりも、大体のOSや端末で安定して適用されることがすでにわかっているフォントファミリー群を再利用するほうが、より効率的と判断することが多かったからです。

しかし、OSやモバイル端末のバージョンアップが進み、バンドルされているフォントが増え、さらにSIL Open Font License 1.1*下で配布されている日本語フォントも登場しています。これらのことから、以前よりもフォントの選択肢が増えていると筆者は感じていました。そこにピクセルグリッドのコーポレートサイトのリニューアルというタイミングが重なったため、コーポレートサイトで用いるフォントを再度考え直してみようというのが、今回のフォント選定のきっかけになりました。

*注：SIL Open Font License

SIL Open Font Licenseとは、個人・商用利用に関係なく、無償で利用することが可能なオープンソースライセンスです。

選定を始める前に考えておくべきこと

改めてフォントを選定するにあたって、事前に考えておく必要のあることがいくつかありました。

• 対象とするサイト
• Webフォントを使うか否か
• 対象とするOSとバージョン
• フォント選定のコンセプト

対象とするサイト

本来であれば、当時リニューアル予定だったピクセルグリッドコーポレートサイトのみに向けた選定で問題はないのですが、ピクセルグリッドでは、今ご覧いただいている「CodeGrid」という技術記事の公開もWebアプリで行っています。そして、このCodeGridの記事の読みやすさの向上も社内でよく出る話題です。

文字量自体はコーポレートサイトよりもCodeGridのWebアプリの方が圧倒的に多くなっています。それであれば、両方を対象とすることで、フォント選定時に必要な文章サンプルを用意するのが容易になり、全体がより良い方向へ進むのではと考えました。

Webフォントを使うか否か

この判断をしなければフォント選びは始まりません。仮に使うと判断した場合は、モリサワなどのフォントベンダーが提供するフォントが利用可能となるので、選択の幅は大きく広がることになります。逆に使わないと判断した場合は、各種OSにインストール済みのフォントから選択することになります。

結論から言うと、今回はWebフォントを使用しないという判断をしました。Webフォントには「フォントの選択肢が大幅に増える」ということと「OSや端末によるフォント有無の差異を吸収できる」というメリットはありましたが、ピクセルグリッドが求める結果と比べると、デメリットが勝っていると考えられたからです。デメリットとして挙げられるのは表示の遅さとちらつきでした。

Webフォントはその仕組み上、必ずフォントのダウンロードが発生しますが、対象が日本語であった場合は仮にサブセットを作ったとしても、本文用のフォントとして利用すればそれなりの容量になってしまいます。Webフォントを提供するサービスの機能も良くなっていて、サブセットのキャッシュ利用が可能になっています。しかし、初回のダウンロードサイズが数メガ〜数十メガになる可能性があることを考えると、閲覧者を待たせる時間が長くなりすぎてしまいます。

また、Webフォントを採用するとなれば、外部サービスを利用する必要があるため、認証やサブセット作成にJavaScriptを必要としてしまいます。JavaScriptを使うと、仕組み的にはじめにHTMLを読み込ませる必要があり、そこに表示用のテキストが含まれている場合は、Webフォントが適用されるまでの間、端末にインストールされているフォントが表示されます。そうするとテキストの表示が2段階になり、画面の「ちらつき」が生じてしまいます。これは、ユーザーからするとストレスを受けやすい動きになるので、なるべくなら避けたい見え方です。

「ちらつき」問題単体でいえば、実装の方法を変更すれば解消することが可能ですが、そうした場合でも、フォントのダウンロードを待っている間はテキストが表示されないことになります。さらに、外部サービス側のエラーが発生した場合などは、いつまで待ってもテキストが表示されないという最悪の状態もありうるため、回線状態が安定しない携帯端末の利用などを考えると、安易にこの方法を選択するするわけにはいきませんでした。

対象とするOSとバージョン

Webフォントを利用しないと決定しましたので、そうすると今度は対象となるOSとバージョンを決めなければなりません。たとえブラウザが最新であっても、利用しているOSのバージョンが違えば、バンドルインストールされているフォントが違ってくるからです。

今回対象としたOSとバージョンは以下です。

Mac OS

OS X 10.11 El Capitan、OS X 10.10 Yosemite、OS X 10.9 Mavericks

Windows

Windows 10、Windows 8／8.1、Windows 7

iOS

iOS 9、iOS 8、iOS 7

Android

Android 6、Android 5、Android 4

フォント選定のコンセプト

ブレのない選択をするにはコンセプトは重要です。フォント選定においてもそれは同様で、選んだフォントによっては、サイト全体が与える印象や文章の可読性に大きく影響を与えます。

今回、筆者がフォント選定時のコンセプトとしたものは「和欧混植時の馴染みの良さ」でした。

なぜ、和欧混植時の馴染みの良さをコンセプトにしたかというと、一つはCodeGridの文章には、その内容的に短いアルファベットが頻繁に日本語に混ざって構成されることが多いということです。下の画像などはその良い例です。

たとえばHTMLやCSSの属性名やプロパティ名、JavaScriptのライブラリ名などがそれに該当します。そして、これらの日本語とアルファベットが繰り返し交互に出現するような文章構成の場合、この2つが程よく馴染んで日本語とアルファベットの切り替えがスムーズに行える必要があります。そうでないと、日本語とアルファベットが切り替わるたびに読み手の意識がその変化に反応してしまって、文章に集中することができなくなってしまうからです。

筆者が選定コンセプトに「和欧混植時の馴染みの良さ」を挙げたもう一つの理由は、ブラウザ上での日本語組版についての自由度の低さからです（自由度が低いというのは、ブラウザに実装済みの機能のみを利用した場合ということです）。

その日本語組版の自由度が低い状態ということがなぜ良くないかというと、可読性を上げるための細やかな調整をすることができないからです。これが印刷を目的とした紙媒体の話であれば、デザインソフト上で可読性を上げるための各種調整を施すことが可能なので、和欧混植時の可読性というものはあとから調整が可能な項目として認識されます。ですが、現在のブラウザの実装状況ですとデザインソフトと同じようにはできません。そのため、CodeGridのような、日本語とアルファベットが頻繁に切り替わるような文章をより少ないストレスで読んでもらいたい場合には「和欧混植時の馴染みの良さ」をコンセプトにする必要がありました。

コラム：組版のコントロールにJSを利用する

ある程度の組版コントロールであれば、すべての文字をWebフォントにしつつ、文字組のコントロールもJSを利用してゴリゴリとやってしまうという方法もできなくはないと思います。しかし、先に取り上げたように、今回はサイトアクセス時の表示を高速にすることで、閲覧ユーザーが感じるストレスをできる限り少なくしようという方針がありました。ですので、複雑な実装を選択することで表示が遅くなったり、バグを生みやすくなることを嫌って、今回はそのような実装にはしませんでした。

選定準備のまとめ

今回のフォント選定では、最終的に次の基準でフォントを選ぶことに決まりました。

「対象のOSにインストールされているフォントで、和欧混植時の馴染みの良いもの」

ここまでで、実際にフォントを選定するための下準備部分を紹介しました。ブラウザで表示するフォントの選定をするためには、事前に決定しておかなければならないことが多くあります。特に選択肢の幅に大きく影響するWebフォントの使用の可否や、どういった目的でフォントを選ぶかの選定のコンセプトは、どんな種類のサイトを作成するにしても、大事な判断項目になるかと思います。

次回は実際のフォント選定を紹介します。