noseblog

menu

2019.6.20

Web制作におけるフォントの基礎知識[知らないと仕事で消耗します]

こんにちは、のせです。

今回はweb制作におけるフォントの基礎知識をご紹介します。

僕はいままでコーダーとしてHTML/CSSコーディング案件をいくつかこなしてきました。仕事を受ける前の僕は、フォントなんてどうでもいい、とりあえず代用して早く全体のコーディングを終わらせればクライアントは満足する、などととんでもない勘違いをしていました。

この記事では僕の経験を元に実際の案件でのフォントの扱い方を紹介します。

記事の構成は以下の通りです。

  • フォントについての勘違い(初心者あるある)
  • web制作で使えるフォントの種類
  • デザインデータに自分の持っていないフォントが使われていたらどうするか?(初案件で悩むポイント)

それでは詳しくみていきましょ〜

フォントについての勘違い(初心者あるある)

ランサーズやクラウドワークスなどで案件を受注するためにプログラミングスキルのみを向上させてきたコーダーはこんな勘違いをしていることが多いです。

  • フォントは特に重要ではない
  • フォントをダウンロードして使うものだということをしらない
  • 何となく似たフォントを使えば良い

もしかしたらこれを聞いてドキッとした方もいるのではないでしょうか。

「魂は細部に宿る」なんて言葉をよく聞きますが、フォントがwebサイトに与える印象は非常に大きいです。依頼主の許可なしに勝手にフォントを本来と異なったもので代用するなんて言語道断です。

また、これら3つの中で仕事に関わる一番重要なことは、2つめのフォントをダウンロードして使うものだということをしらないということです。

これを言い換えると、自分が持っていないフォントはデザインツールやwebサイト上でそのフォント表示できないということです。

これはコーディングではかなりの致命傷です。仕事ではデザインデータと完璧に一致させる(ピクセルパーフェクト)ことが求められます。

しかし、デザインデータ合わせようにも、フォントデータがなくては画面にそのフォントを表示することすらできません。

フォントデータはwebフォントを探してダウンロードするなり、依頼主にもらうなりして入手しておくと良いです。

web制作で使えるフォントの種類

web制作では主に以下の2つの種類のフォントを使います。

  • webフォント
  • デバイスフォント

それぞれについて簡単に説明します。

webフォント

webフォントはインターネット上からフォントのデータを引き出してきてwebサイト上に表示させるシステムのことです。

つまり自分やユーザーがフォントのデータを持っていなくても万人が共通のフォントをwebサイト上で閲覧できます。

webフォントで有名なところはGoogle FontsAdobe Fontsがあります。

デバイスフォント

デバイスフォントはその名の通り端末(デバイス)にインストールされているフォントのことです。

フォントがインストールされていない端末では異なるフォントが代替されて表示されてしまいます。

つまり、デバイスフォントのデメリットは表示されるフォントを統一できないことということです。

こちらを統一するためにはサーバー上に対象のフォントをアップロードして、webフォント化して使う必要があります。この具体的な方法は”ダウンロードしたフォントをwebフォント化する方法“にて解説しています。

また、webフォントとデバイスフォントについてもう少し詳しく知りたいという方はこちらの記事をお勧めします。

デザインデータに自分の持っていないフォントが使われていたらどうするか?

ここからが本題です。

ここまでフォントに対する勘違いやweb制作で使えるフォントの種類を説明しました。

ここからは、デザインデータに自分の持っていないフォントが使われていたら自分はどう対応しているかを紹介します。

結論:依頼主に聞く

僕は、最初に依頼主に聞いちゃってます。デザインデータを確認した段階で手元にないフォントを調べます。そして、次にそのフォントがwebフォントにないかも徹底的に調べ、探します。

そしてどうしてもフォントデータが手に入らないときに依頼主にこう聞きます。

「手元に〇〇のフォントがないのですがフォントデータをいただけませんか?」

クラウドソージングなどで初受注したときなんかは、クライアントに質問することすら恐ろしく感じるかもしれませんが、このまま先に進む訳にもいかないので勇気を出して聞きましょう。

すると、ほぼ確実にフォントデータをもらえたり、このwebフォントのことですよ、と回答してもらえます。

そしてこのときに、もう1つの問題が発生する可能性があります。それは上記の流れで、フォントデータをもらったパターンです。

フォントデータをもらったとしても、自分がそのフォントをPhotoshopなどのデザインツールで閲覧できるようなるだけで、このままではwebサイトを閲覧するユーザはそのフォントを表示することができません。

では、どうするのか。先ほども軽く紹介したのですが、それは頂いたフォントをwebフォント化すれば良いです。webフォントかすれば、そのフォントをインストールしていないデバイスでユーザがサイトを開いても、ちゃんと表示されます。

webフォント化する方法はこちらの記事にまとめてありますのでぜひご覧ください。

こんな感じで僕は自分の持っていないフォントに対応しています。

まとめ

まとめると案件を受けたときの流れは以下のようになります。

  • デザインデータを確認する
  • 手元にないフォントを調べる
  • 手元にないフォントがwebフォントにもないか調べる
  • なければクライアントに相談

ぶっちゃけるとこの対応が本当に正しいのかは不明ですが、いままでトラブルがおきたことはありません。参考程度にみていただけたらと思います。

今回は以上になります。