どんなデバイスでも表示される！ユーザビリティ抜群の「WEBフォント」て？

本日の議題

ブランディングにも最適！ユーザビリティ抜群。見やすく、美しいフォントをWEBでも実現する「WEBフォント」とは？

ブランディングにも最適！ユーザビリティ抜群。見やすく、美しいフォントをWEBでも実現する「WEBフォント」とは？
そもそもWEBフォントって？
これがWEBフォントの力だ！
WEBフォントを使用する６つのメリット
WEBフォントのデメリットとは
- ブラウザによって若干表示が異なる
- 表示速度が遅い
まとめ
記事をご紹介いただきました

近年増えてきているけど実際どうなってる？どう使う？と疑問で敬遠しがちだったものがありました…。
それが「WEBフォント」。

このWEBフォント、使ってみると、便利なだけでなくどのデバイスどのブラウザでも、視認性やデザイン性がグッと増します。

うちのブログでも、左上のロゴはウェブフォントを使っています。しかも、設置も簡単です。
ブログデザインのすべてがこのフォントにかかってる気がするくらい、ブランディングに通づる力を感じます。

というわけで今回は「WEBフォント」をご紹介します！
WEBフォントとはどんなものなのか、使用する際のメリット・デメリットまで徹底解説。
次回は誰でも簡単にできる使い方まで解説予定ですー＾＾

そもそもWEBフォントって？

本来、紙の制作と違いWEBはユーザの利用する環境に大きく左右されてデザインが反映されます。
いくら制作側が見やすく分かりやすい、美しいデザインを意図してフォントを選択配置したとしても、ユーザー側の環境によって表示が変わってしまい、意図しない表示がされてしまいます。

これ、私たちのジレンマだと思います。

わかってくれない人多くて悩みを抱えてるデザイナーさん多数のはず。

OSごとに標準搭載されているフォントは違う

フォントにおいてもそう。
OSに標準搭載されているフォントが反映されるわけで、もちろんそのフォントは各OSごとに違うわけで…。

それを見越して使用していかなければならず、まあ思い通りの表示をされることは少なく、制作側はいつも頭を悩ませるのです。

フォントはブランディングにおいても重要！？

フォントの形はサイトの見やすさはもちろん、文字量はコンテンツの中でも圧倒的に多いはずですから、全体の雰囲気を決める重要な要素となっています。

しかし、そんな中で意図しないフォントが反映されてしまっては困る…似た雰囲気で互換性のあるフォントを設定しようにも、やはり細かいニュアンスが違ってきてしまう。

雰囲気というのはブランド戦略においてもかなり重きを置くべきものです。
受け手の印象に統一感があれば、差別化はもちろん一体の認知にも繋がります。
「らしさ」の形成において必要な項目ですね。

標準搭載だけじゃない！フォントの幅が広がる

そこで、どんな環境でも同じフォントを表示できるのが「WEBフォント」です。
なにがどう違うって、ちょっと見てみてください。

これがWEBフォントの力だ！

Molle

Design Font Test

Indie Flower

Design Font Test

Bungee

Design Font Test

Josefin Slab

Design Font Test

どうですか？コレ全部、画像じゃなくてテキストなんですよ。
こんなフォント、なかなか標準搭載されていませんよね？

それも、どのデバイスでも見れちゃうのが、WEBフォントのスゴイとこなのです♪

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

これだけでもスゴイ、ですが、WEBフォントを使用する６つのメリットを具体的にあげてみます。

１．【SEOに有利】画像ではなくテキスト形式

デザインや“らしさ”を保つために必要な、標準搭載されていないフォント…
こちらを実現するためには、画像で代替し、文字を表現するのが常でした。

しかし！
WEBフォントは画像ではなくテキスト。

デザインや“らしさ”を保ちつつ、SEOで有利なテキストで表現できるので、SEO上も有利になります。
だって、今まで画像で文字を表現するときに、文字を一番下にして表示させないようにしつつ文言を打ち込んだり、altに文字情報を入力したり、色々苦労していましたよね。。
その煩わしい作業がなくなるのです！

２．【スマホでも見れる】主要ブラウザがサポート済

WEBフォントの設定方法にもよりますが、各ブラウザ・スマホやタブレットにも対応！

どのブラウザでもスマホでも見れるのに、画像じゃない。
↑ここが、WEBフォントのスゴイ所です。

３．【管理がしやすい】加筆修正が簡単にできる

画像の修正って、編集可能なファイルを開いて編集をして、WEB用に保存…。
でもそのファイルってどこいったっけ、あ、WEB用の画像だけは残ってるけど、編集用は保存し忘れてた…なんてこともしばしば。
しかし！WEBフォントならそんなわずらわしさ一切なし。

HTMLを編集するだけで加筆修正が可能！
CSSを編集するだけで修正が可能！です。

４．【選び放題！】数多くのフォントから使える

標準搭載されているフォントは数少ない。
そして、WinにもMacにも入っているフォント…というと相当限られてしまいます。
そして何よりブランドで統一指定している雰囲気に合ったフォントが標準で入っていることは限りなく少ないですよね。

WEBでもこの雰囲気に合ったフォントが表示できたらいいのに… その要望を叶えてくれるのが、WEBフォント。

数多くのフォントの中から選べるので、きっと雰囲気に合うフォントが見つかるはず。
更に、デザインの幅も広がること間違いなしです。

見た目だけで受け手の印象はグッと変わります。
その後の内容やコンテンツも大事ですが、見た目一つでも印象が左右されるので、特にブランディングに気を遣っている場合には非常に大切な要素となり得ます。

５．【見出しにピッタリ】デザイン性向上

本文は美しさ以上に見やすさを重視されるかと思いますので、見慣れたフォントを使う場合が多いかと思います。
しかし、本文より見出しやタイトル、キャッチに使いたいのは、洗練された美しいフォントですよね。

WEBフォントならその見出しやタイトル、キャッチにうってつけ。 画像にしなくても、CSS3を使えば、シャドウや背景、太さも自由自在、さらにはアニメーションにも対応できます！デザイン性の高いページ作成にぴったりです。

６．【コピーできる】ユーザビリティの向上

ユーザーの目的は様々。
ああ！この文章をコピーしたい！と思いきや画像だからコピーできなかった…普段PCやスマホでネットサーフィンをしていると、そんなことってありませんか？

搭載されていないフォントを表現するために画像で代替していると、文字はコピー出来ません。
しかし、WEBフォントならテキスト形式のため、選択することが出来ます。
そのため、ユーザーがコピー出来るので、ストレスなく利用してもらえます。

もちろん、コピー云々だけでなく、様々な環境で表示されるという点でも、ユーザへの配慮となりますね。

WEBフォントのデメリットとは

ただし、WEBフォントには大きなデメリットが２つあります。

ブラウザによって若干表示が異なる

環境に左右されないとは言え、若干見え方が違う時があります。
デザイン面に特に気を遣っていると、この部分は非常に気になってしまうかもしれません。

私がこの間使ったフォントでは、safari等では太く字間も丁度良かったのに対し、IEでは細く字間が広く空いていました。衝撃。

ただし、こういう少しの違いって、意外と制作側だけが気になってしまうこともあり…こういう所までこだわるのって、とっても大切！
ですが、自分よがりなこだわりになってしまうこともあるので、これについては目をつむっても良いデメリットかもしれません。

何より画像にするよりも非常に使い勝手が良いことを初めとした、先ほどご紹介したメリットを考えると、WEBフォントは積極的に使っていくべきかと思います。

表示速度が遅い

ここが一番の問題点。
重たいWEBフォントの場合、読み込みまでの間に標準搭載のフォントが表示されてしまったり…
表示速度も遅くなってしまったり…

ここは、ユーザーのストレスになる部分で、となると短い時間での離脱が増えてしまうきっかけとなってしまうので、一番考えていかなくてはいけない部分です。

重たいWEBフォントというのは、日本語のWEBフォントが正にそれ。
なぜなら、ひらがな・カタカナ・漢字と…文字数が非常に多いから。

ただ、PCであれば耐えれる部分でもあります。
スマホの標準フォントは非常に美しいので、日本語のWEBフォントの場合は、タブレットとスマホのみ読み込まないようにする、という手で対処できるかもしれませんね。

まとめ

以上がWEBフォントのメリット・デメリットですが、個人的にはどのブラウザでも同じフォントで表示されていると安心感がありますし、確実に見やすさは増したと感じますが、あとはユーザの動向次第だなあとも感じます。

今回ご紹介したとおり、WEBフォントのメリットって本当にたくさんあります。
ただ、表示速度の点を一番に考慮するならば、日本語のWEBフォントは利用せず、英語フォントで活用していくのが最善かな〜と思います。
英語フォントでは抜群の効果を発揮しますからね。

今回はだいぶ濃い〜〜内容となりましたが……参考になりましたでしょうか。
それでは、次回はWEBフォントの誰でもできる使い方をご紹介します。おたのしみに〜

www.misallychan.com