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. 1000円以下でハイクオリティな素材を入手可能。優良ストックフォ…

    Webサイトの制作でイメージ・目的に合った画像を手に入れるのはなかなか難しいものです。プロのフォトグ…

  3. 縦長レイアウトはもう古い?スクロールエフェクトを活用したWebサ…

    CSS3やHTML5によってWebサイトには以前にも増して多くの情報量を盛り込めるようになってきてい…

  4. ツールを使って接客をシステム化。総合力に優れたWeb接客ツール3…

    シニア層のネットショッピングの利用拡大やECマーケットそのものの成長にあわせて、急速にニーズが高まり…

  5. 多種多様なメソッドも学べる、LP制作に使いたいフレームワーク3選…

    ユーザーの行動を喚起するランディングページにはストーリーの要素を加えるのが効果的ですが、もちろん方法…

  6. Webサイトの文章に+αの効果をもたらすフォントサイズ&位置の工…

    特定の文字や語句を強調する場合、Boldやアンダーラインが使われることが多くなりますが、タイポグラフ…

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

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

  8. ツールを使って効率的に配色。カラーパレットのWebサービス4選

    ベテランのWebデザイナーでも頭を悩ますことの多いWebサイトの配色。256種類のカラーコードによる…

PICKUP

PAGE TOP