見出しやテキストは画像で作ってはいけない

今ではかなり少なくなってきたと思いますが、見出しなどのテキスト要素を画像で作成しているケースがたまにあります。

テキスト要素を画像で作成するとフォントの影響を受けないため、デザインはどのデバイスでも見ても同じに見えるというメリットがあります。

一方、変更や更新のしやすさ、デザイン操作、多言語での閲覧、SEO、表示速度といった観点で考えるとデメリットが多いため、画像で見出しやテキストを表現するのはおすすめしません。

簡単に更新・変更できない

見出しを画像で作成してしまうと、見出し内容を変更したい場合に画像を作り直す必要があります。元画像のサイズも考慮する必要があり、一文字変更するだけでも画像制作ソフトで画像として書き出す手間がかかります。

自社で更新できるようにWordPressで納品してもらったのに、見出しが画像が故に画像制作のためにデザイナーへ依頼するなど、本末転倒です。テキストであればデザイナーへ発注することなく、自社で更新が可能です。時間と費用が浮きますね。

テキストであればCSSを使用してスタイルを簡単に変更できます。一方、画像の場合は色の変更、文字の太さ、文字の大きさなどを変更するのでも画像として作り直さないといけません。

今やCSSで表現できる幅は広がり、影やアウトラインはもちろん、疑似要素を使えば前後に画像を設置することも可能です。ただの装飾としての画像が必要なのであれば、疑似要素を使ってCSSで制御する方がレスポンシブデザインの観点からもメリットが大きいです。

特に海外からのアクセスが見込める可能性があるウェブサイトの場合、見出しやテキスト要素を画像で作ってしまうのは致命的です。テキストであれば翻訳ツールでページ丸ごと翻訳できますが、画像の場合は翻訳できないため、閲覧者にとって意味がわからなくなってしまいます。

「うちは国内だけだから」という場合でも、海外の潜在ユーザーがいるかもしれません。特に観光客向けのお店やサービスの場合、たとえ多言語サイトを用意していなかったとしても、見出し含むテキスト要素は全て画像ではなくテキストで作成しておくのが望ましいです。

検索エンジンは画像のテキストを直接読み取ることができません。alt属性に設定されたテキストを参照しています。もしalt属性が設定されていなかったら、検索エンジンはその画像が何を表しているかファイル名から判断するか、判断ができないかのどちらかでしょう。

一方、テキストは検索エンジンによって読み取りやすく、適切な見出しはページの構造と内容を明確に伝えることができます。

閲覧する人にとってみやすいのはもちろん、検索エンジンにとっても読み取りやすいページ構成が望ましいです。

画像はテキストよりもファイルサイズが大幅に大きくなるため、ページの読み込み時間に影響を与える可能性が高いです。

数点程度の画像で画像容量も大きくなければ影響は大きくないですが、数十点など多くなる場合や、画像のファイルサイズが大きい場合など、パフォーマンスに悪影響を与えます。

みんなが光回線で有線で閲覧しているわけではなく、外出先で3G回線で閲覧しているケースもあると考え、ページの表示速度はできるだけ速くする努力が求められます。速ければ速いほどいいのです。

以上、見出しやテキストに画像を利用することで生じる問題をご紹介しました。

デザイン要件やブランドのニーズに応じて、ロゴや特定の見出しに画像を使用する場合もあります。その際は、alt属性の使用や画像サイズの最適化など、デメリットを最小限に抑える工夫が必要です。

テキストでも構わない場合は、できるだけ画像は使わないでテキストとしましょう。これは制作者側も注意したいところですし、依頼者側も納品時に画像で制作されているところがないか注意してください。

「画像かどうか判断できない」という場合はドラッグして選択・コピー・貼り付けがそのままできればそれはテキスト、できなければ画像です。画像であれば右クリックからの保存もできますしね。