通常テキストと画像テキストを使い分けよう

ホームページを見ていると、雑誌に載っているようなデザイン性の高いフォントを見たことがあると思います。
ドラッグしたり、右クリックしてみると確認できるのですが、そういった文字は大抵画像化されているフォントです。
ここではHTML上に直接書かれている文字を「通常テキスト」、画像化されている文字を「画像テキスト」とし、メリットやデメリットについてご紹介します。

メリットとデメリット

以下はHTMLに記述した通常のテキストと、画像として貼り付けたテキストです。
シンプルなフォントのため、ぱっと見ただけだとあまり違いが分からないかもしれません。

「通常テキスト」と「画像テキスト」それぞれのメリットとデメリットをまとめました。
まずはメリットについて見てみましょう。

通常テキストのメリット

• HTML上に直接書けるため、実装や修正が楽
• CSSで装飾が出来る
• 適宜折り返されたり、CSSで制御ができるので、レスポンシブデザインにも対応しやすい
• SEOの効果が得やすい
• テキストのため軽く、表示スピードが速い（ユーザビリティ・SEOの両方の観点でメリットになる）
• Webフォントの適用が可能

画像テキストのメリット

• OSによってフォントの見た目が変わることはない
• 最終的に画像になっていればよいので、Photoshopなどで作成した凝ったフォントやデザインを使うことができる

SEO対策や表示スピードを重視するのであれば通常テキスト、デザイン性を重視するのであれば画像テキストを使用すると良いでしょう。

メリットを反転させた内容となっている部分も多いですが、デメリットも知っておいたほうがより使い分けがしやすいと思いますので、次にデメリットをご紹介します。

通常テキストのデメリット

• デバイスフォントの場合、OS(WindowsやMacなど）によって標準フォントに違いがあり、フォントによっては文字の幅が違うこともあるので、CSSでデザインした場合に崩れが発生することがある
• CSSで実現できる装飾に限りがあるので、画像テキストと比較するとデザインの幅が狭い

画像テキストのデメリット

• 画像化するため、通常テキストよりもSEOの効果は薄い
• 修正があった場合に画像を作り直さなければいけないため、手間がかかる
• スマートフォンなどで表示した際に、画像が小さくなってしまい文字が読みづらくなる場合がある
• 画像のため重く、表示スピードが遅い（SEO的にもデメリットになる）

通常テキストについては、OSによって標準フォントに違いがあるのは盲点ではないでしょうか。
CSSで1行の文字幅ぎりぎりにwidthを指定していたりすると、フォントが違った場合に文字幅が大きくなり、はみ出して2行になってしまったりする例もあります。
CSSでの文字装飾も、IEなどの古いブラウザだとうまく表示されず、対応しきれないものもあります。
画像テキストについては、ユーザビリティ、SEOの観点の両方から多くのデメリットがあげられますね。

比較して分かること

メリットとデメリットを比較すると、どうしても画像テキストのほうがデメリットが大きいのが分かると思います。
そのため、基本的には通常テキストを使用し、

• メインビジュアルで使用する文字をどうしても目立たせたい
• 「Check!」の文字など装飾としての目的が強い

など特別な理由があった場合に画像テキストを使用すると、デザイン性も加味された良いホームページになるでしょう。

まとめ

ホームページは、紙媒体のデザインと違ってフォントの自由度が低く、気を付けるべき点が多いことが分かったと思います。
デザイン性を重視するのか、SEOやユーザビリティを重視するのか、目的に応じて通常テキストと画像テキストを使い分けるようにしてください。