そのフォント、本当にWEBデザインで使っても問題ない？

webサイトをデザインするとき、フォントを意識してデザインできていますか？
「もちろんサイトの雰囲気に合ったおしゃれなフォントを選んでます！」
でもちょっと待ってください。
そのフォントはどのデバイスでも表示されますか？
有料？無料？
クライアントは納得してますか？

意外と実際の現場でも理解されていない、webの世界のフォントについて。
僕が実際に経験した実例を踏まえてお話しします。

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

webの世界ではブラウザで表示できるフォントはユーザーのデバイスにインストールされているフォントか、webフォントだけです。
基本的にどのユーザーがどんな環境で見ても同じ見た目になることが理想かと思いますが、デバイスフォントはユーザーの使用する端末やOSごとに違うので全く同じ見た目にすることは困難です。
そこで役に立つのがwebフォントです。

これはサーバーからフォントのデータが配信されるので、デバイスにフォントがダウンロードされていなくても表示させることができます。
ですがサーバーからダウンロードする為、ページの表示速度に影響する可能性があるのが難点です。
特に日本語フォントは英語よりも文字数が多い為、データが重くなりがちです。
こういった点を踏まえてフォントを選択する必要があります。

webの世界のフォントについて基本を確認したところで、ここからはwebデザインのアンチパターンを考えながらいくつかのシチュエーションを見ていきたいと思います。

画像にするか、コーディングするか

「じゃあwebフォントしかデザインに使えないの？」
そんなことはありません。
webで配信されていないフォント、もしくは有料のwebフォントでクライアントの都合上使えないものも、自分が持っていればデザインに使用することはできます。
その場合は画像として書き出して表示させるのが一般的です。
なのでロゴやキャッチコピーなどポイントになる部分に使用して、文章などはwebフォントや、windowsとMacでほぼ同じデバイスフォント(微妙に違うけどほぼ同じ)を使用するのが良いかと思います。

画像にして書き出すフォントかテキストとしてコーディングするフォントなのか、区別ができていないデザイナーの方が意外と多いです。
例えば有料フォントが使えない案件で、明らかにコーディングで表示するフォントに有料フォントを使っている、なんていうデザインカンプが来ることは何度もありました。

ここは初学者の方も理解しにくいポイントのようです。
でもここをしっかり押さえておかないと、何度も確認をとったりデザインの手直しが必要になる可能性があるので気を付けておきたい点ですね。

その有料フォント、コーダーさんは持ってないかも。

デザインするうえでまだ注意点があります。
adobeソフトでデザインするとき画像で書き出す予定で有料のフォントなどを使うのはいいのですが、デザインデータをそのままコーダーさんに渡すとフォントが表示されないかも！

コーダーさんが同じフォントをパソコンにダウンロードしていればいいのですが、デザイナーさんほど色んな種類のフォントを持っていることはあまりないかなと思います。
そうなると代替フォントに変換されて画像として書き出そうにも書き出せないんですね。

そこで必要になってくるのがパスのアウトライン化です。
パスのアウトライン化とは、簡単に言えばフォントを図形に変換することです。
そうすることによってフォントの情報がなくなり、パスのあるオブジェクトになって文字化けなどを防ぐことができます。
これでフォントを持っていないコーダーさんも画像として書き出すことが可能になります。

ですが何でもかんでもアウトライン化するとフォントの情報がなくなり再編集できなくなるので、あくまで画像として書き出すものだけするようにしましょう。

私の経験ですが、Illustratorでいただいたデザインカンプのテキストがすべて持っていない有料フォントで、パスのアウトライン化もされていないものでした。
これでは何もできないのでアウトライン化したものをいただけるように依頼しました。
結果作業が数日遅れることになってしまいました。
こうなるとお互い手間が増えるので、こうならないように気を付けたいですね。

WordPressの落とし穴

もう一点見落としそうなポイントです。
それはWordPressを使用したサイトのデザインをするとき。
WordPressは動的にテキストを出力することができます。
例えば投稿ページのタイトルや投稿日時などを取得して表示することができます。
企業サイトのニュース一覧などのページを見るとわかりやすいかもしれませんね。

ここのデザインの作成をするとき、有料フォントなどの画像で書き出すものを使用してはいけません。
動的にデータを取得してテキストを生成するので、画像で用意するとなると記事を更新するたびに対応する画像を準備して出し分けないといけません。
メンテナンス性最悪でコストばかりかかるので、まったく現実的ではありません。

私が以前コーディングを担当した案件のデータがまさにこの状態でした。
コーダーとしてはなるべくデザイナーの意図通りのデザインを再現したいのですが、当然無理なこともあります……。
私も今まで考えたことがなかったので、意外な落とし穴だなと思いました。

まとめ

デザインにおいてフォントはとても重要な要素ですが、WEBデザインにおいては気を付けるべきポイントがいくつかありました。
初心者の方やDTPデザイナー出身の方は知っていないと気づかない点かと思いますのでシェアさせていただきました。