営業時間 9:30〜17:30(平日)
サイト内検索
- 文字サイズ +

ウェブフォントのすすめ

投稿日:
  • このエントリーをはてなブックマークに追加

FE074_Lタグラインや見出し、ナビゲーションメニューなどで、文字情報が HTML テキストではなく画像化された文字 (画像文字) によって表現されているウェブサイトをよくみかけます。

画像文字を使うことによって、ウェブサイトが様々な OS で閲覧されたとしても、同じタイポグラフィ (書体、字体) をユーザーに提供することができます。また、昔はデバイスの画面解像度が低く、テキストのアンチエイリアスがきれいでなかったため画像文字がデザイナーに好まれた、という背景もあります。

文字情報は HTML テキストによって表現されることが望ましい

このような背景によって用いられることの多かった画像文字なのですが、ウェブサイトにおいて、文字情報は、いくつかの理由から、画像文字ではなく、HTML テキストによって表現されることが望ましいと言えます。

ひとつは、SEO の観点からです。HTML テキストにすることで、Googleなどの検索エンジンクローラーによる処理が容易になり、結果的に検索結果で露出する機会が増えることが期待できます。

ふたつ目の理由としては、HTML テキストにすることで、ユーザー自身による文字スタイルのカスタマイズによる可読性の向上や、スクリーンリーダーによるコンテンツの音声読み上げができるなど、アクセシビリティの改善になると考えられるからです。

さらに、HTML テキストであれば、ブラウザの検索機能 (いわゆるページ内検索) や機械翻訳 (Chrome ブラウザの Google 翻訳機能など) なども利用することができ、ユーザーエクスペリエンス (UX) の向上につながります。

ウェブフォントを採り入れてみる

一方で、ブランディングなどの理由から、どのデバイスでも同じタイポグラフィにしたいという要望もあります。

HTML テキストはもともと、各デバイスが持っているシステムフォントによって表示されるのですが、デバイスごとにシステムフォントの字体が少しづつ異なるために、結果的にタイポグラフィが異なってしまいます。そこで、デバイスごとのシステムフォントではなく、ウェブサーバー上に置かれたフォント(ウェブフォント)を参照することで、デバイスの種類に関わらず同じタイポグラフィにすることができます。

ウェブフォントは、画像文字ではなく、あくまでもフォントなので、拡大してもジャギー (ギザギザで粗い状態) にならず、きれいな文字表示が保持されます。スマートフォンやタブレットのようなタッチインターフェースの普及で、手軽に表示を拡大するケースも多くなりましたが、そういったピンチアウト操作にも問題なく、かつ美しく対応できます。また、画像文字のように、必要な画像を都度作成しなくてもすみますので制作工数を減らすといった効果もあります。

ただ、日本語の場合、文字数が膨大なので、ウェブページ全体でウェブフォントを適用すると、ページの読み込みに時間がかかってしまうというパフォーマンス上の問題がありますので、タグラインや見出しなど、要所を押さえて使うなどの工夫をすることが必要です。

ウェブフォントには、有料のもの、無料のもの、いろいろあります。有料のものでも無料お試しが可能だったりするので、いちど試してみるとよいでしょう。

ウェブ戦略の専門家がご相談を承ります。お問い合わせフォームはこちらをクリックしてください。
BtoB企業ウェブ担当者必見のお役立ち情報が満載のウェブ戦略ノウハウ資料が無料でダウンロードできます。

東京~大阪までご支援可能です。まずはフォームよりお問い合わせください。

BtoB企業のウェブ担当者必見!!売上アップに貢献するウェブ解析の活用方法
seminar-banner20170119

【無料】BtoB企業ウェブ担当者必見のノウハウ資料ダウンロード

戦略的ウェブ活用のエッセンス/事業戦略と同期した戦略的ウェブ活用のノウハウをギュッと凝縮!
失敗しないための戦略的ウェブサイト構築手順/リニューアルを成功させる秘訣は「作り始める前にやるべきこと」にある
ウェブマネージャーが身に着けておくべき7つのスキル/企業のウェブ担当者に求められる7つのマネジメントスキルとは?
セールスとマーケティングをつなぐウェブ解析/営業部門との連携を図り、営業員が活躍しやすいように後方支援をする
ページの先頭へ