menu

意外と簡単?Webフォントの利用方法とメリット&デメリット

ディレクター心得

CSSを用いたWebサイトが一般的になり、多くのWebデザイナーに注目されているWebフォント。Googleも2014年10月に日本語のWebフォント「Noto sans Japanese」をリリースし、オウンドメディアに取り入れる企業も増えてきました。

Webフォントはレスポンシブ対応やブランドイメージの訴求といった点で数多くのメリットをもたらす一方、充分に検討することなく使用すれば少なからずデメリットも生じます。Webフォントの具体的な利用方法と注意点、メリット&デメリットをご紹介します。

・Webフォントの設定方法
Webフォントを利用するうえで最初に行うのが、使いたいフォントの選定です。Webフォントの普及が進むなか、Googleの「Noto sans Japanese」をはじめ、さまざまなWebサイトで英文・和文・アイコンフォントなどをダウンロードすることができます。

その際、1点注意したいのは使用目的・用途に関する制約です。一部のWebフォントは商用目的や広告利用に制限を設けている場合があり、利用にあたっては事前に確認する必要があります。

使用するWebフォントを選んだら、CSS3の@font-faceでフォントファイルを読み込み、font-familyに任意のフォント名を入力してCSSに適応させれば、ブラウザでWebフォントを確認することができます。

・Webフォントのメリット
フォントをWebサーバー上に置くWebフォントは、文字の表示がユーザー側のOSやデバイスに依存しないため、サイト制作者側の狙い通りのテキストを見せることができます。

また、フォント崩れや非表示を防ぐために従来行われてきたテキストを画像ファイル化する方法では文字情報の修正に一定の時間と手間がかかるのに対し、WebフォントならCSSを修正するだけでスムーズに修正・加筆を行うことが可能です。

レスポンシブデザインを取り入れる際も、Webフォントの場合はCSSとHTMLの記述を調整するだけでディスプレイのサイズに合った見やすいフォントを表示することができます。

・Webフォントのデメリット
「Noto sans Japanese」など無料で利用できるものも増えてきていますが、一部のWebフォントサービスは利用料が発生し、それらを使う際は上記のメリットと照らし合わせて費用対効果を検討する必要があります。また、日本語のWebフォントの場合、漢字・ひらがな・カタカナを併用するために容量が増え、デバイスやユーザー環境によっては表示速度が落ちることもあります。

小野 良勝 代表取締役

投稿一覧

横浜の制作会社アイティネットの代表取締役。WEB、モバイル、DTP、デジタルサイネージを事業展開。それぞれの特性を活かした メディアミックスを得意とする。iPhoneやiPadを活用したBtoB向けのアプリケーションを開発。モチベーションの高い人や異業種との交流がたまらない。華の47年組。趣味はオートキャンプ

再生回数230万回。参考にしたいブランディング動画Android「Monotune」

導入事例 アウトドア・スポーツ分野 その1

関連記事

  1. 即戦力のコーディングチェックツール3選

    デザイナーへの発注やクライアントとの連絡・調整に加えて、Webページのコーディングをチェックするのも…

  2. サブ要素&導線に盛り込むべき情報は?ファーストビューの効果的な改…

    Webサイトの「顔」ともいえるファーストビュー。「メインコピー」と「キービジュアル」に加えて、「サブ…

  3. 不正アクセスや脆弱性・バックアップ対策も。セキュリティ対策プラグ…

    デザインの自由度が高く、プラグインによって豊富な機能を拡張できるWordPressは世界中のWebサ…

  4. Webサイトにアクセントを加える、ポップ&スタイリッシュなパター…

    Gif画像とあわせてWebサイトにアクセントを与えるのに効果的なのが、数多くのWebサイトで提供され…

  5. メンバーへの共有もより簡単に。ワイヤーフレーム作成ツール3選

    クライアントを含め複数のメンバーが携わるWebサイト制作において、情報共有やプロジェクトの進行に大き…

  6. 画像のタイプ・特徴にあわせて使い分けたいgjf、jpg、png

    Webサイト制作で画像を取り扱ううえで意外のおろそかになりがちなのが、画像の保存形式です。プロのフォ…

  7. CVだけでは分からない課題を浮き彫りにする「マイクロコンバージョ…

    コンバージョンはWebサイトにおける最も重要な指標の1つ。とりわけECサイトなどに関しては「まずコン…

  8. Webサイトの配色に取り入れたい「70・25・5の法則」

    Webサイトの配色を決めるためには、それぞれの色の特徴・効果とあわせて効果的な配色パターンを知ってお…

PICKUP

PAGE TOP