Webフォントについて

フラットデザインではフォントが大切

前回はフラットデザインについて紹介しました。リッチデザインに比べてデザイン要素が少ないフラットデザインでは、表現においてフォントが及ぼす影響が大きくなります。

それだけフォントの使い方や選び方が大切になるわけです。

幸い、今ではフリーで使用できるフォントが数多く存在します。数多くというよりは選ぶのに困るという方が適切なほどの種類のフォントがあります。

フォントフリー – 無料で使える日本語フォント投稿サイト

2016年用、日本語のフリーフォント219種類のまとめ

【デザイナー必見】最強の日本語フリーフォントのまとめ 

これらのフリーフォントを使用するのは多くの場合見出し文字やボタンなど目立つところにポイント的に使用します。なぜなら画像として使用するので、本文などボリュームが多いところには使いにくいからです。印刷物の場合は問題ないのですが、ウェブの場合はそれがデメリットとなります。画像として作成すると、重要なキーワードにもかかわらず、テキストでないのでSEOの観点からはよろしくありません。またユーザーが選択してコピーすることもできません。

Webフォントとは

それを解決するのがWebフォントです。WebフォントとはWebサーバに置かれたフォントです。Webブラウザがユーザーのローカル環境にあるフォントを利用して表示するのに対して、Webサーバにあるフォントをダウンロードして表示するのです。これにより、ユーザー環境により異なるフォントが表示され、デザイナーが意図しない見え方をしていたWebページが、ある程度(*)デザイナーがイメージしたとおりにユーザーに見せることができるようになるのです。

*ブラウザによって文字のインデントなどが違うため、若干の差異が生じることがあります。

基本的なWebフォントの導入方法はとてもシンプル、つぎの３ステップで完了です。

• 使用したいフォントを用意する
• CSSにて@font-faceでフォントファイルを指定（CSS3）
• CSSでフォントを適応させる

またサービスとして提供されているWebフォントの利用はさらに簡単です。

みんなの文字（https://minmoji.ucda.jp/）は、無料ユーザー登録完了後に送られるメールに記載されている、タグをCSSとHTMLに記載するだけで、読みやすいデザインのWebフォントを使用できるサービスです。

まだ日本語のフリーWebフォントは多くないですが、これから増えてくると思われます。今のうちに是非Webフォントを使いこなせるようになっておきましょう。