トピックス

WEBフォントとは

サーバー上にフォントファイルを置くことでデザイナーが意図するフォントを表示できるように考えられたのが、「WEBフォント」という技術です。ただし、自分でサーバーに設置しなくてもWEBフォントが利用できるサービスもあり、そのサービスには有料と無料のものもありますので、ご注意ください。

例えば、下記のようなWEBフォントを提供しているところがあります。

Google Font(欧文フォント）
http://www.google.com/webfonts

Adobe Fonts(欧文フォント/和文フォント)
https://fonts.adobe.com/

もじでぱ(和文フォント)
http://mojidepa.com/

WEBフォントを使用するメリット

通常、ブラウザはパソコンやスマートフォンなどの端末に搭載されているフォントを呼び出して文字を表示します。
ただし、最初から搭載されているフォントの種類は少なく、WindowsやMacなどのOSのバージョンにより、標準搭載されるフォントが異なるため、使用できるフォントも限られています。

そのため、WEBサイトで使用できるフォントが限られ、デザイナーが意図しないフォントで表示されたり、フォントに関するWebデザインに制約が生じてしまいます。 でもWEBフォントを利用することで、文字を読みやすく見せたり、思い通りの印象をユーザーに伝えることができます。つまり、ユーザーの環境に左右されずに、どのデバイスで見ても制作サイドが意図したフォントで表示することができます。だからこそ、今WEBフォントの技術は頻繁に使用されています。

他にも、画像にしていたフォントもWEBフォントにすることで、デザイン性が上がるだけでなく、文章修正のメンテナンス性の向上や文章の検索なども可能となるなど、メリットも大きくWEBサイトの制作では欠かせないものとなっています。

WEBフォントを使用する3つのメリット

デザイン性とSEO効果を両立できる

WEBフォントの最大のメリットは、デザイン性の高いサイトの構築ができる点です。
ユーザーの環境に左右されず、豊かなデザイン表現が可能なため、意図する印象を与えることができ、文章の可読性・視認性を高めることができます。

SEO的に見てもWEBフォントはとても有効的です。
例えば、一昔前はデザイン性の高いサイトを作りたい時、デバイスに搭載されていないフォントを使用した場合は画像としてWEBサイトに配置していました。文字を画像にすることで、検索エンジンの情報収集ロボットに画像と判定され、記載した文字情報は理解されず、ページの評価は低くなるなど検索順位にも影響を与えます。文字を画像にせずテキストにできればロボットにも理解されやすくなります。

だからこそ、多彩なスタイルを持つWEBフォントの出現でテキストのデザイン表現の幅が広がり、検索エンジンのロボットにもしっかりと内容を伝えられます。WEBフォントを利用すれば、デザイン性が高く、SEOにも強いWEBサイトが作れます。

スマートフォンでも見やすいホームページになる

レスポンシブWEBデザインが主流な今、画像化された文字はパソコンとスマートフォンの両方での表示の最適化が難しくなります。パソコンでは画像の文字は読みやすくともスマホで見た場合は小さくなってしまい、とても読みづらくなってしまいます。

WEBフォントで画像化していた文字をテキストにできれば、文字のサイズはCSSで調整可能になるため、パソコン、スマートフォンのでデバイスに合わせて文字サイズを変えることができます。WEBフォントはレスポンシブWEBデザインとも相性がよく、見やすいWEBサイトを作れます。

情報の修正・追加が簡単にできる

ホームページは長期スパンで運営するものですから、年月が経つうちに必ず内容の修正や追加のニーズが発生します。商品・サービスの入れ替わりや、価格の変化、事業内容の変更などがあった際には、速やかに内容を修正しなければなりません。ですが、画像化された文字は通常のテキストと比べて、修正に手間と時間がかかります。文字の画像化はWEBサイトのメンテナンス性を著しく妨げ、手間や時間、場合によってはお金まで浪費してしまいます。

メンテナンス面を考えた時にも、文字を画像化せず、テキストで組めるWEBフォントならクライアントにも作業者にもメリットが大きいですよね。

まとめ

WEBフォントを使用することで、ユーザーがどんな端末でWEBサイトを閲覧していても、サイト制作者が意図したデザインで文字が表示されます。それだけでなく、デザイン性も高くなり、SEOにも強いWEBサイトが作れたり、情報の修正・追加も簡単に行えます。

作りたいWEBサイトのイメージに合わせてWEBフォントを活用し、魅力あるWEBサイトを作成するためにも、ぜひ利用してみてください。