Webデザイン時に便利！Google Web Font導入のススメ！
Webデザインに慣れてくると、WindowsやMac特有のフォントがデザインの障害になることが多々あります。例えばMSゴシックがカクカクして気に入らなかったり、明朝をWindowsPCで見るとザラザラした感じを受けるように感じてしまいます。
そこで、そのようなデザインの欠点を補える、Webデザインで使えるGoogle Web Fontについてまとめてみました。
標準フォントの欠点
標準フォントはサイトの制作側で設定ができるのですが、せっかく制作者側で指定したフォントも、「WindowsPCでは適応されるがMacでは意図したフォントになっていない」ということは多々あります。
またユーザー環境により当該フォントを削除している場合もあるので、ますます制作者の意図とは反する表示の仕方をする現象が起こります。
例えば「行書体」を制作者側で指定しているのに、「行書体」が入っていないデバイス（PC・スマホ）では表示されないという問題も起こり得ます。
Webフォントの利点
そこでWebフォントの出番ですが、WebフォントというものはPCに入っているフォントを使うわけではなく、ネットを参照して表示するのでPC環境による誤差はほとんどありません。素敵ですね。
サイトを親しみやすく見せたい場合、厳格に見せたい場合などいろいろなシーンで役立ってきます。
フォントの重要性
フォントはそれぞれの文字のデザイン（表示の仕方）以外の何物でもありません。しかし、フォントというものはデザインには欠かせない項目と言えます。
私の経験ですが、紙媒体のデザインと同様にWebデザインにおけるフォントの選び方には一層注意しろと教えられました。
ここでは、Webフォントがどのような効果を現すのかまとめてみました。
■可視性
可視性とは見やすさです。個人的な感想ですがWindowsPCにおいてのゴシックに関しては見づらさが否めません。これは人それぞれの捉え方ですが、Webデザインをする際には万人に受け入れられる書体を意識して制作すべきでしょう。
■デザイン要素
WindowsPCとMacでは使用フォントに指定がないと、OS標準のフォントに置き換えられます。つまりデザインによる訴求がデバイス毎に変わってしまうということです。
有名なフォント「メイリオ」に関しても、WindowsPCでは若干丸みを帯びており柔らかなイメージを持ちますが、Macで見ると文字間が空いておりスカスカした感じを受けてしまいます。
自分の意図しない反応をユーザーに持たせないようにフォント選びは入念に行った方がいいと言えます。
■ロゴデザインの手間が省ける
例えばサイトの制作で英文のロゴを作りたいとしましょう。
通常ロゴを作るにはラフデザインをしてミーティングを経て、Photoshopで作り込んでいくのが常識です。しかし、英文ロゴならわざわざ画像にしなくてもWeb Fontを使えば様々なデザインを短時間で候補をチョイスすることが可能です。
ロゴデザインの変更もCSSでfont-familyの指定を変えればいいだけなので、大変効率的です。ただこの場合もWindowsPCやMac・スマートフォンの表示のされ方、誤差を確認すべきと言えます。
Webフォントの導入の仕方
Web Fontの導入の仕方はすごく簡単です。HTMLとCSSの基本的な知識があれば誰でも利用できます。
■まずはじめに：日本語フォントはすごく少ない
Google Web Fontで提供されているフォントには、日本語フォントはほとんどないです。これは日本語の複雑さに起因しています。
日本語は「ひらがな・カタカナ・漢字」という複雑な要素で構成されているので、フォントの制作が非常に難しくなるためです。
しかしながらそのような中でもいくつか利用できるフォントが存在するのでご紹介します。
■導入方法
まずGoogle Web Fontでは「Google Fonts + 日本語早期アクセス」というページで９つのフォントが利用可能となっています。
参考リンク：Google Fonts + 日本語 早期アクセス
自サイトへの適用はとても簡単です。自身のWebサイトのCSSファイルに以下のソースを記述しましよう。
/* 冒頭でimport */
@import url(https://フォントCSSのURL);
/* フォントを指定したいところで */
font-family: 'XXXXX';
@import urlとは外部のcssファイルを読み込むためのソースです。これはGoogle Font側のCSSファイルの場所を指定しましょう。
あとはフォントを適応させたいところで、font-familyを付け足すだけです。例えばlogoというcssクラスのフォントを変えたいとします。
.logo{
font-family: ’XXXX’
}
となりますね。もしもサイト全体の文字にGoogle Web Fontを適応させたい場合は、
*{
font-family: ’XXXX’
}
このように指定するとページ全体のフォントが変わります。お気に入りのフォントを見つけてみましょう。
Webフォントの欠点
唯一欠点を挙げるとなると「多少のHTML・CSSの知識が必要」ということでしょうか。しかし、先述した通り記述するソースも簡単なものですし、この問題は慣れとしか言いようがありません。
font-familyというポイントを押さえるだけで利用することができるので、何度か試して見るとコツも掴めてくると思います。
■サイトによっては読み込みが遅くなる？
以前は「Google Web Fontを使うと読み込みが遅くなる！」という意見が大多数だったのですが、近年の技術の向上で読み込み速度も断然早くなりました。
今のGoogle Web Fontはフォント全体をダウンロードするわけではなく、サイトで使用されているフォントのみを読み込むので、読み込み時間のストレスはほぼないと言ってもいいです。
Webデザインに行き詰まったら「フォント」にも目を向けましょう！
良いデザインが浮かばない場合や、少しパンチが足りないという場合は「フォント」に目を向けると問題も解消されるかもしれません。
何にせよデザイナーにとって「フォント」は切っても切れない関係ですので、フォントの選び方にもデザイナーとしてしっかりとした理由を述べられるようになっておきたいですね。
ご連絡おまちしております。
