こんにちは。前原です。
今日は「webフォント」について紹介しようと思ったんですが、調べるうちに「画像文字について」の方が興味出てきたので、こちらについて紹介します。
画像文字とは？
画像文字という単語が正式にあるわけではないのですが、jpegやpngなど、画像として作られている文字を画像文字と呼んでいます。
本来webページはテキストで構成されているものなのに、わざわざ画像文字を使う理由とはなんでしょうか？
それはズバリ、見た目がリッチになるからですね。
画像として作ることで、PCのフォントだけでは再現できないゴージャスな表現が可能になります。
嫌われる画像文字
LPライクなサイトなら画像文字でも全然良いと思います。
しかし、コーポレートサイトなどで、テキストの中にふと存在する画像文字は嫌われがちです。
というのも、画像は拡大すると画質が粗くなるからです。
最近は、Retinaディスプレイや、4Kなど、高解像度のモニターが増えています。
そういったモニターで画像を見ると、高解像度故に画像が粗く見える場合があるのです。
対策としては、高解像度モニター向けに、画像も超高解像度で用意するというものがありますし、それが一般的ですが、4Kに合わせた解像度で画像を作成していたら、webページが重くなります。
その結果、通常の解像度モニターでアクセスするユーザーに無駄な負担を強いることになるので、ユーザビリティを損なってしまいます。
そもそも画像の多いページは重く、最適化するためには少し難しいwebスキルが必要です。
（ほとんどのwebサイトでその辺りがおろそかにされているため、独学で学んだ人が多いんだなと思います）
本来htmlやcssというweb言語は、プログラミングに疎い素人でも簡単にwebサイトというものが作れるようにと開発されました。
もちろん、その後異常なまでのスピードでweb業界が発展したため、素人がプロ級のサイトを作ることは不可能になりましたが、プロとしてwebサイトを作成する場合、できるだけ最適化されたサイトを作ってほしいなと思います。
※これは、一ユーザーとしてサイトを閲覧する時に、「最適化されている方が読み込み速度が速い」などのメリットがあるから思うだけです。
画像文字の代用「webフォント」
Googleなどが提供しているwebフォントの中には、日本語もあります。
しかしほとんどが英語です。
というか、フォントに関してはほとんどが英語です。
英語フォントが多い理由は、もちろん、英語圏の国が多いというのもありますが、アルファベットで、A~Zまでの26文字と、0～9までの10文字を開発すれば完了という簡単さにもあります。
対して日本語は、ひらがな、漢字、カタカナと、文字の登録数が半端なく多いため、フォント開発のために莫大なリソースが必要になります。
種類が多くなると重くなるため、そもそも日本語フォントをwebサイトに読み込むだけでサイトが重くなってしまいます。
今、ほとんどの日本語サイトは「メイリオ」「ヒラギノ」などのフォントで表示されていますが、これはwebサーバーからフォントをダウンロードしているわけではありません。
メイリオなどはWindowsでもMACでも、すべてのPCで既にインストールされているフォントのため、それを呼び出しているだけなのです。
この辺りで日本のwebサイトは不利です。
英語のロゴなどは積極的にwebフォントを利用したい
これは「したい」という要望なのですが、英語フォントは本当にかっこいい。
海外のサイトなどを見ていると、「え！これテキストだったの！」というような文字が非常に多いです。
一見画像のようにゴージャスなフォントが非常に多く、しかも表示スピードも速いため、閲覧していて非常に心地良いです。
「閲覧していて心地良い」というのは、UIにおいて非常に重要ですね。
「SVG」という方法
シンプルなロゴや、それっぽい画像の場合、ベクターデータで作るという手もあります。
ベクターデータなので、どれだけ拡大しても粗くなることがありません。
※ベクターデータについて気になる方は、「ベクター ビットマップ」などで検索してみてください。
ちなみにベクターデータでのロゴ作成は、現時点ではフォトショではできません。
イラレで作成する必要があります。
また、めちゃくちゃ凝ったロゴデザインの場合はSVGでの読み込みが重くなるというデメリットもあります。
一度自分でロゴデザインした際に、ロゴにロックな印象を出すため、「かすれ」を入れました。
これにより、ロゴの中にランダムに大量の粒粒のようなものが入りました。
たったこれだけの加工で、SVGを構成するソースの量が何十倍（もしかすると何百）にも膨れ上がりました。
ページ読み込み速度に影響するくらい文字数が増えてしまったと言えば、いかに膨大な文字数かが分かるでしょう。
ですので、情報量が多いロゴデザインの場合は、SVGはおすすめできませんが、もしかしたら打開策があるかもしれませんので、ご存知の方はお教えください。
webフォントをがっつり使ってるサイト
日本語サイトなのに、「え！これ画像なの！？」って思ったってLIGの人が言ってました。
記事タイトルに個性的なフォントが使われています。
まとめ
次第に数は減ってきているとはいえ、まだまだ画像文字は使われています。
画像文字を使わなくてもリッチに表現するためには、それなりのデザインスキルと、臨機応変にwebに対応するwebスキルが必要です。
そのため、あまりwebスキルが高くないweb事業者がサイトを作った場合は、まだまだ画像文字を多用し、最新端末に対応できていないという事実があります。
もちろんケースバイケースですし、慣れてないことをすると時間がかかるため、限られた時間で仕事を完遂するために画像文字を使い続けるという選択肢も大いにありだと思います。
個人的には新しいことを取り入れることに喜びを感じるため、そういう事を積極的にできるフリーランスや、大手web企業などが少しうらやましく感じます。