“たかが文字”では済まされない。Webフォントを採用するメリットとは

Webフォントとは

改めてWebフォントについて、簡単に説明しましょう。Webフォントとは、クラウド上にあるフォントデータを読み込むことでWebページに反映させる仕組みを指します。CSS3からWebフォント機能が追加され、今ではCSS3の浸透に伴いWebフォントの活用が進んでいます。

これまでは、例えば閲覧者の端末にはないフォントを指定していた場合、意図したフォントが表示されないなどの制限がありました。

しかし、クラウド上からダウンロードするWebフォントの登場によって、閲覧者の環境に依存することなくフォントが表示できるようになったほか、テキストを画像化して表現していたタイポグラフィも、Webフォントを使って表現できるようになりました。

一方で、冒頭でも述べたように数年前の日本語Webフォントは、欧文フォントと比べてもデータ量が多く、表示が遅くなってしまう問題がありました。それによって、表示されるまでに時間がかかったり、フォントが切り替わるタイミングでチラつくような違和感があったりとデザイナーが取り入れるには難しい側面がありました。

そうした問題も踏まえ、ferretの岡村とWebフォントを提供する株式会社モリサワの岡田氏、阪本氏による対談を行ってもらいました。

Webフォントの重要性とは

▲左から株式会社モリサワ阪本氏、岡田氏

ferret 岡村：
最近のWeb制作現場だとWebフォントを使うのは当たりまえになってますよね。HTML5の登場で、ユニバーサルデザイン（UD）対応が可能になってるし、アクセシビリティを容易に表現できるようになりました。

あと、「文章」構造として明確に定義されたので、見出しやパラグラフをちゃんとテキストとして表現することが推奨されてきたので、デザイナーに意識が浸透してきた感じはありますよね。

仮に、テキストだけが画像を使用していたり、代替テキストで対応していたりするのは、ある意味時代に逆行していると思うんです。さらにデザインがブラウザやデバイスに依存したままユーザーと接することは「ブランドイメージの毀損」や「訴求価値の低下」などの機会損失につながりかねない。

阪本氏：
仰るとおりだと思います。Webフォントは、スマートフォン対応に代表されるレスポンシブデザインへの対応が容易ですし、利用者にとっても今やスマートフォンやタブレットからの閲覧、情報収集するのは当たりまえになっています。

つまり、そうした背景の中で情報発信を考慮すると、テキストを画像化してサイトに貼っていくような従来の設計では、デバイスの画面サイズや解像度にあわせた対応が追いつかなくなってきます。

その点、Webフォントであればページ内のテキストに書体を適用するので、素早い更新や編集が可能ですし、 CSSを使ったデザインの制御も可能です。

岡田氏：
最近Webフォントが増えたのは、iPhone6で画面が大きくなったあたりからだと感じています。高解像度になったのがターニングポイントで、現にApple社のサイトもレスポンシブデザインになって、Webフォントを採用してますので、そういう潮流はありますよね。

ferret 岡村：
Appleも当初は、レスポンシブデザインに対応しないって言ってましたもんね（笑）デザイナーからすると、この流れはWebフォントを取り入れる説得材料になりますよね。

Webフォントの選択基準とは

ferret 岡村：
僕は書体を選ぶ際に、「伝えたいメッセージ」やその「熱量」を重要視していて、例えば弊社のコーポレートメッセージで「向かう方向性への熱量」を表現する方法として「真剣味・権威性」を感じられる用に明朝を選択する。

そして、その「熱量」をより伝えるためには「太さ」が必要なので、直線を強調するか、ハネトメを強調したいかなどを基準に書体を絞っていくことが多いです。

ただし、小さなサイトだと専属のデザイナーさんが居ないこともあるので、こうはいかないですよね。モリサワさんとして、そうした中小規模の小さいサイトにオススメしている書体とかあるんですか？

阪本氏：
アドバイスする場合もありますが、必ずコレっていうのはないですね。なぜかというと、Webフォントに限らず、書体選びは複合的に判断するので、どれを選ぶかはデザイナーさんやその担当者さん次第です。

それでも決め手が見つけられない時のために、書体が試せるトライアウトをご用意していますので、そこで好きな書体を見つけることをオススメしています。好きな書体を多くても3種類ぐらい選んでもらって、次にウェイト（太さ）別で見てもらいます。

例えば、弊社のラインナップでは書体1種類につき、ウェイト別で8つのバリエーションを用意しているものが多くあります。ひょっとしたら1書体で十分ということも考えられますね。ですので、ウェイトのバリエーションで判断しても良いですね。

Webフォントの懸念点

ferret 岡村：
これは聞いておこうと思っていたんですが、Webフォントは「速度が遅い」「価格が高い」などのマイナスイメージがまだ強いですよね。

それにデザイナーって決裁権をもってないのが大半なので、Webフォントを採用するためにいくつも障壁があるように感じます。例えば、費用をかける必要性があるのかを説得できないであったり、速度はどうなのと聞かれたりと、とっつきにくいイメージも多いと思います。

以前と比べて、変わったんですか？

岡田氏：
速度に関しては、日々、改善を重ねています。ケースにもよりますが従来のフォントよりWebフォントのほうが4倍速かった事例もあり、速度というハードルはなくなったと考えているので、安心してください。

そして、費用の話で言えば弊社が提供している『TypeSquare』だと、月間25万PVまでなら月額2,000円からはじめられるので、費用面も抑えられるかと思いますよ。

つい最近ですが、「さくらのレンタルサーバ」でWordPressを利用する方にモリサワのWebフォントが無料で利用できる取り組みもはじめたので、デザイナーさんも採用しやすくなったのではないでしょうか。

参考：「さくらのレンタルサーバ」のWordPressにてモリサワのWebフォントを無料でご利用いただけるようになりました

Webフォントで実現できること

阪本氏：
よく“たかが文字”で、と思われるかもしれないのですが、Webサイトにある情報の多くは文字情報が基本です。なので、文字は動画や写真と同じくらいこだわってほしいと思っています。

テキストを画像化しないことで、検索エンジンなどのシステムにも情報を伝えやすいサイトになりますし、音声読み上げとの連携もスムーズになると思うのでサイトの使い勝手やアクセシビリティーの向上も見込めます。

ferret 岡村：
Webフォントであれば、CSSで自由なデザインが可能になるのでデザイナーとしても表現の幅が広がりますよね。画像を用いる時よりも工数削減につながる場合もあるので、Webフォント使う・使わないの判断とは別に、表現する一つの手段として道筋になってきていると思います。

岡田氏：
実際にあった話ですが、Webサイト制作を行ってる企業さまで、サイトリニューアル完成間近の納期直前にテキストに大量の修正が入ったそうです。Webフォントを採用したので対応が早く済んだそうでWebフォントを採用してよかった、ということをWebディレクターさんが仰ってました。

なので、Webフォントは制作される現場にとっても、クライアントにとってもギリギリまで内容を検討できるという時間的なメリットもあるんですよね。

編集部脚注：
実際に弊社コーポレートサイトのフォントをトライアウトで変更してみました。上がブラウザフォントを使用した元のページで、下がTypeSquareを使って見出しを「A1明朝」本文のフォントを「中ゴシックBBB」に変更したページとなります。このようにWebフォントであれば、伝えたい方向性を自由に選べます。

▲ブラウザフォントを使用した元のページ

▲見出しを「A1明朝」、本文のフォントを「中ゴシックBBB」に変更してみた