ウェブフォントのすすめ

投稿日: | 投稿者:ayatori
HTML テキストと画像化された文字で違いがあるの?

ウェブサイトにキャンペーンページを作成する場合、チラシデータをそのまま張り付けてページ作成しましが、文字情報をHTML テキストに変えることで何かメリットがあるのでしょうか?

以前は画像文字がデザイナーに好まれていた

 


 

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

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

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

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

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

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

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

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

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

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

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

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

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

無料オンライン相談受付中!ウェブ戦略の専門家が
ご相談を承ります!

ウェブマーケティング担当者必見!

ウェブ戦略お役立ち資料

お役立ち資料のダウンロードや
セミナーのアーカイブ視聴が無料でできます。
ページの先頭へ