積極的に利用していきたいウェブフォントサービスのまとめ

ウェブフォントサービスは、インターネット経由でフォントファイルを配信し、HTML表示の際にそれらのフォントを利用できる技術の事。これまでは、閲覧者のOS環境によってフォントがバラバラに表示されていたが、ウェブフォントを利用すれば閲覧者全員が”同じ見た目”になる。これはブランドイメージを大切にしているコーポレートサイトやブランドサイトではとても重要なポイント。(もちろん個人利用のサイトやブログにも有効。楽しいしね。)

※日本語フォントは漢字を利用するフォントサイズが大きいために、HTMLの表示スピードが遅くなる。そのため、これまではあまり利用されてこなかった。(海外ではアルファベットだけで済むのでかなり広まっている。)

ここ最近では、結構いろんな方法が出そろってきた感があるので、 とりあえず既存のウェブフォントサービスの話を中心にまとめてみた。

ウェブフォントを利用した方が良い理由

SEOに有利だろうね
多くのブランドサイトでは見出しやサマリーなどをDTPで利用するようなキレイでカッコいいフォントを画像に切り出して利用しているが、画像にしてしまうとどうしてもSEO面で弱い。特にかっこいいフォントを利用したい文章ほどSEO的に重要なキーワードが含まれている事が多いので、できればテキストで記載しておきたいもの。ウェブフォントを利用すれば、テキストでHTMLに記述できる上にキレイなフォントも利用できる。
スピーディーな更新
画像に切り出した文章を変更する場合、更新の度にデザイナーに発注をする必要がある。これでは、時間がかかり更新スピードが落ちる。ウェブフォントを利用すれば、コーダーやプログラマーの作業だけで文章を変更する事ができ、運営のスピードアップと作業コストを減らす事ができる。

はじめて利用するならウェブフォントサービスの利用がラクチン

ウェブフォントを利用する場合、方法は2種類。

  • 自分でフォントをサーバー上にアップロードして利用する(@font-face)
  • ウェブフォント提供サービスを利用する

自分でフォントファイルをサーバーに設置する場合は、自分で作成したフォントを利用できるしカスタマイズ性がある。しかし、日本語フォントはデータ量が大きいためにある程度のネットワークが必要になるし、まだまだ各種ブラウザへの対応作業が発生する事を考えると、既存のウェブフォントサービスを利用する方がはるかにラクチンと思う。

それに、最近では、モリサワフォントやイワタフォントを利用できるサービスが出てきた事で利用しやすい環境が整ってきた感がある。

とりあえずは、ウェブフォントサービスでスモールスタートする事をオススメします。自分でフォントを用意するのはその後で検討した方がいいですぞ。

おすすめウェブフォントサービス

Google web fonts

URL:

http://www.google.com/webfonts

Google提供のサービスだけの事もあり、ネットワークの安定しており、フォントの読み込みもサクサク。
デザイン上の装飾として利用しやすい。

フォントプラス

URL:

http://webfont.fontplus.jp/

フォントワークス、モトヤ、白舟書体、イワタ、方正、モリサワに対応。※2012年6月よりモリサワも利用可能に。 やはり手軽に利用できる料金では無いので、ブランドサイト、コーポレートサイトでの利用向き。

TypeSquare

URL:

http://typesquare.com/

モリサワ独自サービス。ネットワークが弱いのか若干フォントプラスと比べてフォントの読み込みが遅い。
2012月06月20日より、フォントプラスでもモリサワが対応したので、このTypeSquareではなくフォントプラスの利用がおすすめ。

デコもじ

URL:

http://decomoji.jp/

ブログサービスSeesaa提供。手書きフォントも多く個人利用のブロガー向け。

fonts.com

URL:

http://www.fonts.com/web-fonts

20,000種類を超えるフォントを用意しており、選び放題感はある。 ちょっとだけ日本語フォントの提供もあるみたい。

typekit

URL:

https://typekit.com/

Adobe提供だけあって安心感もあるし、質が高いフォントが揃ってる。

FONT DECK

URL:

http://fontdeck.com/

数はそれほど多くないが、有名なブログやサイトで利用されていたりと、質の高いフォントが揃っている。

amana images ウェブフォント

URL:

http://amanaimages.com/font/web/

写真素材で有名なアマナイメージズ提供のウェブフォントサービス。

FONT SQUIRREL

URL:

http://www.fontsquirrel.com/

ここはフォントの利用はもちろんだけど、「@font-face generator」という機能があって、TTFファイルからWOFFファイル(ウェブフォント用の新しい規格)に変換する機能を提供している。今後、利用機会は増えるかも。

あとがき

まだまだ日本語フォントを利用する場合は、HTMLの表示スピードが若干遅くなる印象があるかな。個人的に期待しているので、利用者が増えてもう少し環境が良くなると良いな。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る