Webページでの見出しを画像にしてはいけない理由

Webデザインにおいてまだまだ多い「画像文字」や「画像見出し」。これらの文字を画像化する事情とは、そもそも異なる閲覧環境下でも共通に見せるためのデザイン都合によるもの。
この画像文字をなくすことがSEOにも集客にも有利になることをご存じでしょうか?

Webページが「見た目」だけで済む時代は終わった

Webデザインは、他の商業デザインやプロダクトデザインに比べ、流行・廃れの進みが早いのが特長です。次から次へと現れる新しいブームを追いかけるのが性に合わないという人は、普遍的な優れたデザインを採用すれば長持ちするので、しょっちゅうデザインを変えていく必要はないかもしれません。
とはいえ、Webの常識も年々変わります。そこはお客様を逃さないためにも常にチェックしておきたいところ。ここ数年は、スマートフォンの普及を発端にした「フラットデザイン」や「マルチデバイス向けデザイン」といったものが、注目されています。これらを背景に今では「装飾でなく、コンテンツそのものを重視するデザイン」「どんな端末でも読みやすく使いやすい」を大切にする方向へとシフトしていることは確かです。
その中でも取り上げたいのが、見出しの画像文字。かっこいいデザインのためには、かっこいい書体が欠かせません。フォントが変われば、伝わり方も不思議と変わるものです。
<チラシっぽいデザインの見出し>
3586_img01
<かっこいい見出しの好例>
3586_img02

マシン リーダビリティに欠けるSEO効果の低下

ただし、問題があります。画像化された文字は、文字情報がなくなってしまうため、いわゆるマシン リーダビリティ(機械可読性)に欠けた情報となってしまいます。人間が目で見る分には文字として理解されますが、たとえばGoogleやYahoo!検索のような検索ロボットには情報が認識されません。本来、見出しには重要な情報が含まれているのに、その情報が検索から漏れてしまうということになります。

スマートフォンでは読みにくい画像文字

先に挙げた「マルチデバイス向け」のデザインとしてはどうでしょうか? 画像は、iPhoneで表示してみるとわかるとおり、画面の場所に合わせて縮小して表示されます。パソコンでちょうどよい大きさの画像が縮小されれば画像文字は当然小さくなり、大変読みづらいものになります。もしこれがテキスト情報ならば問題ないのに、画像にしたばかりにスマホでは小さく読みにくい文字になってしまいます。
3586_img03

翻訳ソフトの読み上げにも使えない、アクセシブルでないサイト

そもそもWebサイトは、視覚だけではなく、読み上げなどによって音声で聞いている人もいます。自分のサイトにはそんな人は居ないと思い込んでいる人もいるかもしれませんが(実際にはたくさんいます)、世界へ向けての発信ではどうでしょうか? Webサイトは世界中からアクセスできますが、画像文字は翻訳ソフトに対応できないので、翻訳ソフトを使って閲覧している人には肝心の見出しが翻訳されません。
こうしたグローバルな視野だけでなく、日本では高齢化が進み、Webサイトの読みやすさへの重要性はより高まってゆきます。まずは画像文字があらゆるところで迷惑者扱いになっていることを知りましょう。

デザインにこだわるならWebフォントを使おう

書体がWebデザインのキモになるにも関わらず、画像見出しは使えない。そうなると「Webフォント」を使うしかありません。Webフォントは、サーバー上にフォントデータを置くことでどんな環境でも指定した書体を表示できる仕組みで、美しく文字情報を載せられるものとしてWebデザイナーの間では注目されています。

Googleフォントなど欧文書体ではフリーの物も多くありますが、日本語フォントの場合、文字数が格段に多いため著作権の問題もあって、Webフォントの利用にはそれなりのライセンス料がかかります。
けれども、BiNDクラウドでは標準でWebフォントサービスの利用が可能。プロにも愛用される多くの美しい日本語書体が無料で利用できます。

ぜひ一度、Webフォントを体験してみましょう。

BiNDクラウドのWebフォントを見る

[デザイナー厳選] 覚えておきたい おすすめWebフォント30選

見た目や可読性に大きく影響するホントに使える30のWebフォントを、本文から見出し、日本語から欧文まで用途ごとにデザイナーが厳選しました。

今すぐ資料をダウンロード
  • POINT

  • 見出しを画像にすると、閲覧者にも検索エンジン対策にも不利になる
  • 画像を使わずに、かっこいい書体の見出しにするにはWebフォントを使う
  • 見た目だけでなく、読みやすさが求められるサイトにもWebフォントは有効

あわせて読みたい