ヨコハマとともに生きるクリエイティブ研究サイト
2016年の営業も2週目を迎え、今週から本格的に皆さん動き出すところでしょうか。今回は、今年注目しておいた方がいいWebフォントについて書いていこうと思います。
名前は聞いたことがあっても、実際どのようなものか、どのようなメリット・デメリットがあるのかわからないという人もまだまだ多いかと思います。
Webフォントを使うと、今までデザイン上でタイトルなど装飾文字を使っていた部分をテキストで表現することができるようになります。と、これだけだとなんてことはないように思いますが、画像文字だった部分をテキストで表現できるようになることにメリットがあります。
【メリット】
☆画像だったタイトルなどの更新や変更・修正作業が誰でも行える
☆画像ではなくテキストを配置することで検索にもかかりやすくなる
☆サイト内検索やコピペもできるようになりユーザビリティが向上
☆PCでもスマホでも同じように再現できる
これらのメリットは、デザイナー側も、ユーザー側の環境に指定のフォントがなければ、代替フォントで表示され、意図したデザインとは違う表現で伝わってしまうことを防ぐことができます。
職場にデザイナーがいなかった場合でも、デバイスフォントではなく、モリサワやFONTWORKSなどのキレイなフォントでサイトをデザインすることができるようになります。さらに、フォント（文字）なので、あらゆるデバイスで同じデザインを提供することが可能になります。
ただし、webフォントにも、いくつかデメリットはあります。
【デメリット】
☆フォントの使用に費用が掛かる
☆フォントによっては動作が重くなることがある
特に日本語フォントなどは、昨年の初めごろはサービスの出始めということもあり有名なフォントサービスでないと表示に時間がかかってしまうということが多々ありました。ですが、最近ではそれらも少しづつ改善され、コンセプチュアルなブランドサイトや企業のコーポレートサイトでも使われるようになってきています。私が昨年お手伝いした制作案件でも、3つの案件はWebフォントを使ってデザインしました。
googleやモリサワなど有名なところもありますが、他にも日本語に対応したWebフォントサービスが増えてきているので、いくつかご紹介させていただきます。
googleが提供している、登録不要で無料で使えるWebフォントサービスがコチラ。600種類を超える欧文フォントが提供されていますが、残念なことに日本語フォントは含まれていないようです。コチラを利用してメリットがありそうなのは、アーティストサイトやグローバルサイトなどになるのではないでしょうか。
google fonts
あのモリサワの提供するWebフォントサービスがTypeSquareになります。こちらは、私も利用したことがありますが、PV課金の月額制サービスになっています。1つのフォント利用だけであれば、月1万PVまで無料で利用することができるので、個人で試しに利用する日本語サービスとしては、モリサワのサービスがベストではないかと思います。ちなみに、モリサワのサービスですが、モリサワ以外のフォントもいくつか提供しているので、見ておいて損はないですよ。
TypeSquare
フォントという分類なのかはわかりませんが、Web上でよく使われるアイコン類のWebフォント版がコチラのサービスになります。
アイコンは画像でもいいんじゃない？と思う方もいるかと思いますが、画像の場合、高解像度のディスプレイだと荒れて表示されることがあります。しかし、こちらのFont Awesomeを使えばあくまでも文字なので拡大縮小してもキレイに表示されます。また、色を変えたい場合など、画像の場合は調整も大変ですが、こちらはCSSで調整可能なので、迅速で簡単に調整することが可能です。個人的には、このサービスが一番画期的で今年使ってみたいと思っています。
Font Awesome
今回はWebフォントの紹介をしました。まだまだ表示が重いなどの問題はありますが、今年は、Webフォントを使ったWebサービスがかなり増えてくるのではないかと思います。昨年までは、スマートフォン対応・タブレット対応の年としていた企業が多かったと思いますが、それらも多くはひとまず完了し、今年はそのサイトを改善していく一年になるのではないかと思います。
最近は、スマートフォンやタブレット、PCなどひとりで複数のデバイスを持つことが当たり前になったので、全てのデバイスで同じコンセプトのサイトデザインを提供できるようになる、Webフォントサービスの利用を検討してみてはいかがでしょうか。
モバイルラボ 編集部
ヨコハマ・モバイルラボとは？
モバイルならではの表現ってなんだろう？
一瞬のひらめきや感動は手のひらから始まっています。
新しいクリエイティブのカタチをここから探してみましょう。 
