ブログ

WEBフォントを使ってホームページをちょっとオシャレにしてみる

そもそもフォントとは何か?
知っている方も多いと思いますが、フォントとは書体(文字の形状)の事です。
一言で書体と言っても様々なものがあります。

ゴシック体とか明朝体、丸ゴシックやポップ体。
このあたりの書体名を聞けば、だいたいどのような形をした文字なのか想像が付くのではないでしょうか。

書体を変えることで、伝わるイメージも変わります。
例えば、ポスターを作る際に、幼児向けの可愛いポスターにはポップ体のような可愛いフォントが合いそうですが、超高級料亭のメニューにポップ体は、あまりふさわしいとは言えません。

ホームページもこのように、自由な書体で表示することができれば良いのですが、閲覧しているパソコンにインストールされている書体でしか表示することができません。
言い方を変えると、ホームページを制作している人が書体を指定しても、閲覧している人の環境によっては、その書体では表示することが出来ないということになります。

英語や欧文の場合、もともとWindowsやMacにある程度の豊富な書体がインストールされているので、自由度があるものの、日本語の場合は、MSゴシックやヒラギノといったように、書体が少なく、webデザインに、書体の選択するといった事もありませんでした。

最近、そういったwebの技術にも変化があり、webフォントというものが、使われるようになってきました。
専門的な話は、この場ではいたしませんが、フォントのデータをサーバーに置いておき、必要に応じてhtmlファイルと一緒にフォントデータもダウンロードして、その書体で表示させるというものです。
webフォントを使うことによって、パソコンにインストールされていないフォントでもホームページを表示することが出来るようになりました。

2010年からGoogle web fontsというサービスが始まり、英語、欧文であれば、Googleのサーバーからフォントデータを取得してホームページに表示することができます。
日本語でも、そういったサービスはいくつか提供されていましたが、字詰めがおかしくなる・・といった問題もあり、あまり一般的ではありませんでしたが、ここ最近では、そういった問題も解消されてきて、比較的多く使われるようになってきました。

タイトルや見出しを画像で作成するというのが一般的でしたが、高画質ディスプレイ対応や、レスポンシブwebデザイン、SEO対策等を考慮すると、画像で見出しを作成するというのは、古い手法なのかもしれません。

icon-thumbs-o-up webフォントのメリットとして
・ホームページがお洒落になる、他のサイトと差別化が出来る。
・いままで画像ファイルで作っていた見出し等に通常のフォントが使えるのでSEOに有利。
・パソコンだけでなく、スマフォでも同じフォントで表示できる。
・Retinaや4Kという高画質ディスプレイでも表示が綺麗

icon-thumbs-o-down デメリットもあります。
・日本語フォントの場合、有料のサービスを使うことになる
・html(ホームページデータ)とは別にフォントデータもダウンロードするので、サイトの表示が遅くなる場合がある。

ホームページ全体をwebフォントで表示する必要はありません、タイトルや、見出しだけ使うといった事もできますし、CSSというwebサイト全体のレイアウト等を指定するファイルに指定されているので、簡単にサイト全体の書体を変えることもできます。

今後は、PC向けだけでなく、スマートフォンでの表示もできるレスポンシブデザインに移行していきます。その際、どういった環境でも同一の書体で表示することができる、webフォントはマストアイテムになってくるのではないでしょうか。

ちなみにフォントにも、ライセンスというものがありますので、勝手にサーバーにアップしてwebフォントを利用するということは、ライセンス規約に反する事がありますので、日本語のwebフォントを利用する場合は、webフォントのサービスを使うことをお勧めいたします。

自社のサイトも、ちょっとお洒落にしたいな・・と思ったら、制作を依頼しているホームページの制作業者に相談してみては、いかがでしょうか。ご自分でサイトを管理している方でしたら、ちょっと調べれば導入は難しいものではありませんので、試してみてはいかがでしょうか。

  • このエントリーをはてなブックマークに追加
  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最新の記事

ページ上部へ戻る