新潟 ホームページ制作「ZANMAI株式会社」 a-blog cms実装の定額制ホームページ制作プラン「サブスクWeb」

スキルブログ

Webフォントとしてのバリアブルフォント


Webフォントについて

ホームページのデザイン性を高めるために、Webフォントを使うホームページが大半となってきました。
デザインにおいて、フォントの存在は大きいです。

ただ、Webフォントを使うことは、いいことだけではないのです。
デメリットは、重たい、容量が大きい。

特に日本語のWebフォントは、数字、アルファベット、ひらがな、カタカナ、漢字というように、いくつもの種類が存在するので、物理的にもデータ容量が大きくなるのがわかります。
それに加えて、ウェイト(太さ)の種類もあるため、重たいのです。

今、主流となっているWebフォントはGoogleフォントです。
なぜ主流になっているかというと、無料で商用利用も可能で、そして日本語フォントの種類も増えてきたからです。

まだホームページという存在がなく紙でのデザイン時代、日本語フォントで多くのシェアを持っていたのは「モリサワ」です。
私もDTPの経験者でもありますので、何かをデザインする際は、モリサワフォントを使っていました。
何のデザインをするにも、無難なフォントです。
ですが、高かった・・・。当時はサラリーマンでしたから、高いと言っても自分にリスクがあったわけではないですが、とても高額だったことを覚えています。

今でももちろん「モリサワフォント」は、人気ではありますが無料ではないため、WebデザインにおいてはGoogleフォントがどうしても主流になってきています。

Adobeもフォントを出していて、無料フォントも存在はしていますが、ちょっと使用するのが面倒です。
お客様自身がAdobe IDを作成する必要あるため、そのサイトごとにAdobe IDを取得することになります。(基本的には)

SEOを考えた場合のWebフォント

Webフォントが普及する前のホームページ制作において、タイトルなどをかっこよくデザインするために、デフォルトのフォント指定にするのではなく、フォントを指定してタイトルを作成しそれを画像にして配置するやり方が一般的でした。

そうした場合、画像のAltタグに文字を入れることで、一応はそのタイトルは文字として何と書いてあるのかは分かります。
しかし、これではSEO的には弱いところがありました。

それが今は、カッコよくしたいタイトルにはWebフォントを使うようになったので、SEO的には強いです。
特に、見出し大、中、小のタイトルは、SEOとしても重要な文字と認識されますので。

ということもあり、Webフォントが使われるようにもなってきました。

しかし、冒頭でも書いたように日本語のWebフォントは重たい、容量が大きい。
そして、Googleも表示スピードが遅いホームページは、SEOランクを下げる方向になってきたので、重たいWebフォントはその点でデメリットになってきています。

軽いバリアブルフォント

バリアブルフォントは可変フォントのため、ウェイト(太さ)の種類のデータを持たないフォントです。
可変フォントでない場合は、例えばモリサワの「新ゴ」であった場合、その太さの種類として
・EL
・L
・R
・M
・DB
・B
・H
・U
と8種類もあります。

デザインする上で、この8種類を全て必要とはしないものの、仮にL/R/M/Bの4種類を使うとしたら、その分のフォントをダウンロードしなければならないので、物理的にも重たくなります。

これに対して、バリアブルフォントは可変フォントのため1種類のみです。
その1種類で、太さを自由に数字指定で可変できます。
なので、物理的にもデータが軽くなるわけです。

日本語のバリアブルフォントは種類が少ない

まだ、バリアブルフォントの歴史が浅いため日本語の種類が少ないのが難点です。
有名なのは、Adobeが開発した「源ノ角ゴシック」、Googleが開発した「NotoSans JP」。
実は、どちらも一緒です。(共同開発されたものなので)

ちなみに「NotoSans」の「Noto」は、「ノー・モア・トーフ」の略語のようです。
文字をコンピュータで表示するとき、書体によって白い四角の□マークになることがあります(通称「豆腐」)。
トーフはその文字が出せませんという印です。

ワープロやSNSで使っている日本語の文字数はざっと1万7千以上。自分の手元では見えていても、メールを送った相手のパソコンに書体がないと、その部分が□(トーフ)になってしまいます。それを解決するためにGoogleはAdobeと協力して書体を開発し、膨大な文字数に対応しようとして開発された経緯があるそうです。

今後の主流となるだろうバリアブルフォント

ホームページにおいて、無駄にデータ容量を増やして、インターネット回線を重くすることは望ましいことではありません。
見る側も、いくら通信速度が早くなっているとしても、サクッと見れるにこしたことはあません。

そう考えると、Webフォントのバリアブルフォント化が進んでいくのは間違いないでしょう。
(実際、英語のみのバリアブルフォントは増えています)

今は、日本語の種類が少ないために、これだけでデザインすることは難しいですが、そのうち種類が増えてきたらバリアブルフォントのみを使ったホームページ制作が主流となっていくとでしょう。