こんにちは、デザイナーの佐藤タカアキ（@sato_tkaaki）です。
僕は、LIGブログのアイキャッチやバナーなどのグラフィック制作をメインに担当しています。毎日いろいろなWebサイトやポスターなどを見て、ジャンル問わずデザインの勉強をしているのですが、最近Webデザインにおける「フォント」の使われ方が気になるようになりました。
と言うのも、グラフィックは一枚絵なので、どのデバイスで見てもフォントが変わることはありません。しかし、Webサイトデザインの場合、デバイスによってフォントが変わってしまうので、デザインの幅が限られてくると思ったんです。デバイスによってフォントが変わることも考慮しながらWebデザインをするのは大変だと思うのですが、どうなのでしょうか……？
そこで社内の先輩Webデザイナーに、Webデザインにおける「フォント」の扱われ方などについて、聞いてみました。
LIGのデザイナーにインタビューしてみました
今回インタビューしたのはLIGのWebデザイナーのもりたさんとぺちこさん。
LIGではWebデザインの案件を多く扱っていますが、もりたさんは大規模なメディアサイトなどのシステムに関わるデザインの案件を、ぺちこさんはコーポレートサイトや採用サイトなど“ブランディング”に関わるWebサイトのデザインを多く手がけています。
本日は、Webフォントの使い方によって生まれる効果の違いなどを中心にいろいろ聞いてみたいと思います。
 |
人物紹介：もりた 大規模なメディアサイトなどのシステムに関わるデザインの案件が多く、ページ数やPV数の多いWebサイトのデザインをおこなっている。 実績例：ぽにきゃん.jp（http://www.ponican.jp/） |
|---|
 |
人物紹介：ぺちこ コーポレートサイトや採用サイト、製品のプロモーションなど、ブランディングに関わるWebサイトのデザインをおこなっている。 実績例：cheero（http://www.cheero.net/lp/pp3/） |
|---|
Webデザインにおける重要なポイントとは？
― 本日はよろしくお願いします。お二人は、普段デザインをするうえで、どんなことに気をつけていますか？
もりた：私の場合、サービスやブランドが既に確立しているクライアントが多いので、現在のWebサイト上にあふれている情報をどんな風にユーザに伝えるか、そもそもどういう風に情報整理をおこなうか、ということに気をつけながらデザインをしています。情報自体が多く、1つ1つの文量が長いということもあり、見せ方を考えないとユーザに読んでもらえなくなってしまうんですよね。
あわせて、リニューアル案件が多いことから、運営していくうちに増えてしまった不要な情報の削除や整理というのもデザインの一部だと思っています。もちろん“どんなイメージをユーザに与えたいのか？”という全体的なデザインも重要なんですが、私の場合は更新性が高く情報量の多いサイトによく携わるので、情報設計の部分に思い切り時間を割くんですよ。
例えばクライアントがメディアを運用するとき、どんな設計だと更新しやすいか、などを常に考えています。
ぺちこ：私もコーポレートサイトや採用サイトのリニューアル案件を担当することが多いですね。コーポレートサイトの場合でも、中途などで採用を増やしたいという要望が含まれていることが多いです。いずれの場合も、企業として何をアピールするかが重要となりますが、中には自分たちの強みをうまく見せられていなかったり、そもそも自分たちの強みが何か分からなくなってしまったり、というクライアントもいらっしゃいます。そういうときはクライアントの担当者と一緒に、改めてその企業について考えていく、というケースも多いです。
例えば商品・サービスの可愛さやポップさが特徴的な企業が、クールでスタイリッシュなWebサイトを制作しても、その企業の良さや雰囲気はうまく伝わりません。ユーザにどんな風に思われるかというのを気にしながら、企業のブランディングを加速できるようなデザインを心がけています。
― Webデザインで使用するフォントも、Webサイトによって異なりますよね？
もりた：メディアサイトって、フォントにこだわることができる場合が少なくて。こだわった場合も、対象となるのは英数字なんです。いろいろな記事が入ってくるので、動的に出力するにはデバイスフォントでなければならず、そうなると使用できるフォントは限られてしまいます。こだわった英数字のフォントにしても、英数字のみで完結する箇所じゃないと使いづらく、結局は日付くらいになっちゃうんですよね。
それでもフォント選びの際は、可読性が高く、かつサイトのテイストに合うものを選ぶのが重要となります。とにかく「読みづらい」フォントは選ばないよう心がけています。
ぺちこ：その点で言えば、コーポレートサイトなどは企業イメージに一番近いものを選ぶのが肝になってくると思います。ある程度小さいサイズでも読めるようにしなくてはならないので、もちろん可読性も考慮しつつも、メディアサイトほどは神経質になっていないかもしれません。
Webフォント選びにおいて重要となる「可読性」
― 可読性を担保できるフォントってどのくらいあるんですか？
もりた：デバイスフォントではなくWebフォントを使用する際は、Googleフォントから使うことが多いですが、具体的な数はパッと出てきませんね。いいなと思っても、意外とサイトのイメージに合わなかったり読みづらかったり、ということもあります。
まずはいくつかフォントをピックアップして、デザインにあてはめてから決めるようにしていますね。スマホのデザインなら最小10px、PCのデザインならだいたい12pxくらいの文字を実機で確認のうえ、読みやすいかどうかをチェックしながら選ぶようにしています。
ぺちこ：日本語のWebフォントは、コーポレートサイトでの利用は難しいと思います。Noto Sansなどは無料ですが、基本的には有料なので、費用面でクライアントに相談しなくてはなりません。
ただ、デバイスフォントではWebサイトの雰囲気が変わってしまうこともあります。Webフォントを使えるなら、その方がブランディングに有効ですし、読み込み速度を過剰に気にしなくても良いと思うので、可能であればぜひ使いたいですね。
― Webフォントの具体的なメリットを教えてください。
もりた：デバイスごとにフォントのデザインが変わらないことが一番のメリットですね。例えば、メイリオとヒラギノは、WindowsとMacの置き換え用フォントとしてメジャーな存在ですが、この2つのフォントの形は全く違います。
游ゴシックと游明朝であれば、バージョンが最近のもの（Windows8.1以上、MacならOS X Mavericks以上）なら、どちらのOSにも入っているので同じ文字で表示できますが、この2つでは雰囲気が合わないサイトももちろんあります。
だから、こだわりたいけど諦めなきゃいけない、という場合もあります。
また、游ゴシックも游明朝も、文字の空間の部分（ふところ）が狭いんですが、そこが狭ければ、文字を小さくした場合に読みづらくなってしまいます。
そういう読みやすさを考慮するのであれば、ユニバーサルデザインフォント、つまり老若男女誰にとっても可読性が高いフォントは、ターゲット層が広い場合本文にこそ使いたいですよね。ユニバーサルデザインフォントは、せっかく各フォント制作会社でそれぞれ読みやすさを十分考慮したものが制作されているにも関わらず、現状Webであまり使えないというのはもったいないと思います。
書籍も段々年代をくだるにつれて行間が空き、文字と文字の間隔も広くなってきています。また、読みやすさの工夫と一緒に文字も新しく開発されており、出版社によって使うものが違ったりもします。Webは本文へのこだわりという点に関しては、書籍に追いつけていません。いまは文字の大きさと行間、文字間しか可読性を考慮できませんが、ゆくゆくは文字そのものの可読性も考えていきたいですね。
ぺちこ：メリットだけかというと、多分そうではないですね。
画像文字を使う場合でも、Retinaディスプレイに対応するために一手間必要だったり、クライアント側で文字を差し替えられなかったりといろいろな問題があります。また、Webフォントにしてテキストをベタ打ちにすると、カーニングがすごく気になるということもあります。
ただ、それらの問題はフロントエンドの人たちに「ここの文字間を詰めるようにしてください」などやり取りをすれば解決できることでもあります。デザインに関わることだからといって、デザイナーだけであれこれやるのではなく、周りを巻き込むことも大事だなと思っています。
デバイスが増えたことによる影響とは？
― いつ頃からフォントはこれだけ重要になったんですか？
ぺちこ：HTML5とCSS3が一般的になってきて、Retinaディスプレイも普及し、Macから4Kが出て、「もう画像文字じゃないよね」という流れにはなってきたような気がします。あとは、スマホの種類が増えたことも関係していると思ってます。
スマホの初期はiPhoneが主流でしたが、いまはAndroidユーザも多くなりました。Androidに関しては端末をつくっている会社もたくさんありますよね。デバイスが異なるだけで画面サイズが変わってくるのに、横にするとまたサイズが違う。他にもいろいろなメーカーからタブレットが出ていて、それぞれサイズが違う。バリエーションが多すぎて、それに合わせた画像をいちいち作っていられないですよね。
― Webフォントが使われているサイトをはじめてみた時ってどう思いましたか？
もりた：英語のWebサイトをみたとき、かっこいいなあと思ったフォントをドラッグしてみたら「画像じゃない！！」って気付いて。びっくりしましたね。日本だと「電通報」はすごいと思いましたが、日本語のWebサイトでそんな風に驚いたものはあまりないかもしれません。
そもそも日本語のWebサイトで、日本語のWebフォントを使っているもの自体が少ないからだと思いますが。
ぺちこ：TypeSquareがでてきたときはおどろきましたね。「日本語でもWebフォント使いやすくなったんだ！」って嬉しくなりました。
英語のWebフォントは文字数の多い日本語のデータと比較すると全然軽いので、英語のWebサイトにはWebフォントがよく使われていますし、フリーのWebフォントもたくさんあります。それに比べて、日本語のWebフォントはそもそも母数が少なく、使いたい形のモノもなかなかったので。
Webフォントにおける「スピード」と「費用」の問題とは
― Webフォントの料金体系はどんなものが多いのでしょうか？</b >
もりた：Webフォントは、見られれば見られるほど費用がかかる仕組みになっています。でも、多くのメディアサイトはPVを増やすことを目的としていますよね。そのため、サイトでWebフォントを使っていた場合、PVが延びるほどランニングコストが増えてしまいます。
― なぜPVが増えるとWebフォントの費用も増えるのでしょうか？</b >
ぺちこ：アクセス数が増えると、単純に通信量が増えるからだと思います。
フリー利用のWebフォントを使用する場合、自分たちのサーバにフォントファイルを格納しそのデータを参照するだけですが、TypeSquareなどの有料のWebフォントを使用する場合は、その提供元のサーバとの通信が発生するので、アクセスが増えればその分負荷もかかります。
PV数以外で料金設定しているところは、私は知らないですね……。あるのかな？
― PV連動で費用がかかってしまうとなると、Webフォントを導入するのはなかなか難しそうですね。
ぺちこ：クライアントワークの場合、特にそこがネックになるんですよね。
読み込みの速さの面を懸念される方に対しては、リリース直後とは比べ物にならない速さになっていることを実証してあげれば理解してもらえると思うのですが……。
もりた：費用の面に関しては、「フォントにWebフォントを使うことで、それがどれくらい結果に繋がるのか」ということを、数字でしっかりとは説明できません。これはデザイナーの責任だと思っています。読み込みの速さは実際どんどん速くなっていますし、頑張ればクライアントを説得することはできると思うんですけどね。
― とはいえ、ユーザによって受ける印象も変わるでの、難しいですよね。
もりた：そうなんですよ。例えば、以前Twitterで“青文字で「ピンク」と書かれた画像をどう感じるか”というネタが話題になっていました。実際に「ピンク」と感じるという人も、「青」だと感じるという人も両方いたのですが、「与えたい印象」と「見た目」に齟齬があると、フォントもそうなってしまう可能性があるんです。
日本語は、画像としてとらえやすいと思っています。特に漢字は表意文字なので、形からイメージを受け取りやすいんじゃないかと。だからこそ、日本語の場合、見え方には一層気をつけるべきではないかと思っています。
今後は意識の問題でWebフォントは実装される？
― 今後のWebフォントはどんな風に展開されていくと思いますか？
もりた：昔は今よりWindowsのシェアも多くて、表示は全部MSゴシックだったんですよ。しかもビットマップ文字。それが今では、それぞれのデバイスにいろいろなフォントが入れられるようになったり、アンチエイリアスがかかったり、と変化してきました。それはつまり、人々の意識自体がだんだん変わってきてるってことだと思っています。
今後は「本文にこそWebフォントって使うべきじゃない！？」というように変わっていくんじゃないかと考えています。Retinaや4Kといった高解像度モニターだけでなく、ウェアラブルコンピュータのような小さいデバイス、折り曲げ可能な巨大なスクリーンなどの大きいデバイスも、きっと増えていくことでしょう。
そうなると、デザイナーはめちゃくちゃ小さい画面サイズからめちゃくちゃ大きい画面サイズまで、すべてに対応しないといけないかもしれません。今よりさらにデバイスのサイズが変わると考えたとき、自社のサイトをどれぐらい綺麗にみせたいか、どんなイメージを保ちたいか、という意識の問題になるのではないかな、と。今後はそこに注力されていくでしょうから、いつかWebフォントの時代はくると思います。
ぺちこ：そうですね。Webフォントの提供側が頑張っていることに加え、そもそものインフラがWebフォントが使われ始めたころよりも整ってきています。速度に関してはそこまで懸念していません。
あとはWebフォントを実装するサイトが増えていけば、実装側も工夫を編み出していくと思いますし、普及にあわせ提供側も更に改善を加えていくことができるんじゃないかなと思っています。
事例紹介：Webフォントを使用する際に意識したポイントとは
― それでは、実際にこれまでWebフォントを使用して制作した事例を教えてください。
もりたの事例：ぽにきゃん.jp
もりた：こちらのメディアサイトですが、元々「Ponycan USA」の方を先にLIGで制作していたんです。海外向けのメディアで本文にもWebフォントを使用しています。フォントは幾何学的で丸い感じなの、わかりますか？
「このメディアとイメージを合わせてほしい」と言われたわけではないのですが、可愛いらしいイメージを好むクライアントさんで、アニメ系の内容も多く、丸くて可愛い感じを出したくて。
ヒラギノはイメージと違うし、メイリオは重心が下にあるので印象が重くなっちゃう。ということで、丸くて軽いNoto Sansのフォントを使いました。メディアサイトなんですが、PV数がめちゃくちゃ多いというわけでもなかったので、ポニーキャニオン全体のイメージを合わせてあげたかったんです。
ぺちこの事例：「cheero Power Plus 3」
ぺちこ：この案件では、主に本文にWebフォントを使いました。大きい見出しとセクションごとの小見出しは、画像文字にしています。というのも、Webフォントを使っても、Windowsはアンチエイリアスがあまり綺麗ではなく、細い文字がギザギザしちゃうこともあって。
「cheero Power Plus 3」という商品は、小さくて軽いのに大容量というのが特徴です。更に素材もマットで少しやわらかみが感じられるものだったので、細くてやわらかいフォントを使いたいという意図がありました。その印象を大切にしたかったので、目立つような大見出しと小見出しは画像文字にして、OS間での差を出しにくくしました。
使用しているフォントは、源ノ角ゴシックです。ヒラギノだとカクカクしすぎだし、游ゴシックならWindowsでもMacでも見られるけど、これもイメージが違うと思っていて。どうしても本文にもこだわったフォントを使いたかったんです。セクションの最後の方に社長の思いが込められている長い文章があって、それをどうしても、このフォントで読ませたかった。Webフォントを導入しやすかったのは、LPだったからですかね。情報もそこまで多くなかったので。案件としても使いやすかったですね。
― なるほど。本日はありがとうございました、勉強になりました！
まとめ
知っているようで知らなかったWebフォントのメリットやデメリット、可読性の重要性、制作の実例などを踏まえて教えていただいたことで、より深く理解することができた気がします。ただWebサイトを見ているだけでは学べないことばかりだったので、すごく勉強になりました。
僕もデザイナーとして、フォントを選ぶ際には可読性を加味しつつ、ユーザに与える印象に気をつけていきたいと思います。
Webフォントならモリサワの「TypeSquare」
インタビュー中でも懸念事項として挙げられていたのがWebフォントの使用料金。「TypeSquare」では、各企業に合わせた特別な料金プランが用意されています。また、大規模サイトであれば、PV数に依存しない料金設定のアドバンスドプランを利用できるそう。
「TypeSquare」の特徴
- Webフォントを使用してもページの表示速度がはやい
- 書体の種類が豊富
- 今後の高解像度化への対応も可能
Webフォントを使用する際に気になるのがページの表示速度ですが、「TypeSquare」はサービスが常に改善されていて、ページの表示速度が速いんです。株式会社モリサワが提供しているサービスなので、Webフォントの品質も保証されています。
Webフォントの配信形式によってさまざまな料金プランが用意されており、システムに応じたプランを検討することもできます。Webフォントについて気になった方は、ぜひ問い合わせてみてください。
