コラムColumn

皆さまごきげんよう。WEBチームの紺野です。

当社も新人さんがWEBデザインを始めるようになって参りました。
というわけで、今回は1月に行った新米WEBデザイナーさん向けの社内ゼミを回摘んでご紹介します。

WEBのフォント事情

デザイナーさんの拘りポイントの一つに「文字組」があります。
それは書体であったり、文字間であったり、行間であったりします。
（私も新人の頃は全然ポイントが分からず、よく赤を入れられたものです…）

このうち「書体」というものは、各ユーザーのデバイスに依存します。
例えば「ヒラギノ」という種類の書体はiPhoneやiPadといったApple製品にはデフォルトで入っていますが
WIndowsパソコンやAndroid端末には入っていません。
こういった場合には、「Apple製品はヒラギノ、それ以外はMSPゴシックで表示する」といった処理を行います。

ですが、例えば企業さまでデザインルールがあり、タイトル周りは必ずこの書体を使用するという決まりがあったり
各デバイスで統一した書体を使用したいといった場合にWEBフォントと呼ばれるシステムを使用します。

WEBフォントをサイトに組み込むと、サイトに滞在している間だけ、自分のデバイスに入っていない書体でも表示することができるようになります。
このような感じで、普通は購入しないと使用できないフォントも表示することができるようになるんですねー。

ちなみに、A1明朝は映画「天気の子」のタイトルフォントとして使用されています。
私はもう見るたびにフォントの値段しか頭をよぎらなくなってしまいました。かなしいなぁ。
 

WEBフォントの罠

ではWEBフォントを使用すればいかなる文字でもサイトに使用することができるのか？

答えはYESでありNOです。

まずその書体のライセンスを確認する必要があります。まずは商用利用ができるかどうか。
次にWEBフォントとして使用できるかどうかです。
WEBフォントによってはGoogleやAdobeですでにWEBフォントを作成しているものがあったり
使用しているサーバーで配布していたりします。

また、多くの場合WEBフォントは有料のサブスクリプション制です。
書体が有料なのにWEBフォントが無料という場合はあまりありません。
先ほどのA1明朝の場合も、サイトの制作側がお金を払っているのでユーザーは無料でA1明朝を見ることができるという図式な訳です。
この点無料で使用できるGoogle fontには我々頭が上がりません。

また、書体というものは画像の集合体でできています。
画像というものはデータの中でも重い部類に属します。
このため、WEBフォントも使用するデータによっては、１MBほどにもなります。これは文字の種類が多い和文フォントに顕著です。漢字の影響をモロにくらっております。

というわけで、金額の面でもサイトの軽量化の面でも、何でもかんでもWEBフォントを使用すればよいというものではありません。
ご予算や表示スピードと相談して使用を検討していくことになります。
 

 
というわけで、WEBデザインをするときは書体には気をつけてねというゼミでした。
これから当社のデザイナーがイケイケのWEBデザインを展開してくれると思うと、私もコーダーとしてわくわくが止まりません。
 
みなさんもお好きな書体があった際は、サイトで使用できるか担当にお問い合わせしてみてくださいね。
ありがとうございました。