Web コンテンツ本文を画像ファイルで表現することについて
ひところに比べ、だいぶ減ってきていますが、コンテンツ本文 (文字による文章表現が主な構成要素となっている情報) が画像ファイルによって表現されている Web サイトを、時折見かけます。
ブランドイメージやルック＆フィールの観点から、ロゴやメニュー (グローバルナビゲーション) を画像ファイルで表現する...という程度であれば問題ないのですが、たとえば以下のようなケースで、情報の内容自体が重要なもの (情報を発信するサイト運営側が、きちんとメッセージを読み手側に届けたいと思っているはずのもの) が画像ファイルで表現されているのを見ると、「この Web サイトは果たして、本気でユーザーに情報を伝えたいと思っているのだろうか」と感じてしまうことがあります。
- ホーム (トップページ) の冒頭に掲載される案内や告知 (年末年始や夏季休暇の営業案内など)
- 大災害に際しての顧客向けメッセージ (大震災の被災者へのお見舞い文など)
- 商品に不具合があった際の緊急回収の呼びかけ
- 発信者側が高らかに「宣言」したいこと (経営理念や CSR に関するメッセージなど)
- タグラインやキャッチコピー
また、驚いたことに、イベントやキャンペーンなどを案内するページで、紙メディア (ポスター) の画象ファイルをそのままWeb ページに貼り付けているだけ...というケースを見かけることもあります。
コンテンツ本文を画像ファイルで表現することの問題点
Web コンテンツ本文を画像ファイルで表現することによる、ユーザビリティ/アクセシビリティ上のデメリットは、ぱっと思いつくだけでも以下のようなものがあります。
- 文字の拡大ができない。または、きれいに拡大できない (画像ファイルはベクターデータでなくビットマップデータなので)。
- 素晴らしい内容だと思って引用したいと思っても難しい (文字情報部分をコピー＆ペーストすることができない)。
- せっかく重要な情報を含んでいても検索エンジンにインデックスされず、サイトへの集客効果が低くなってしまう。
- スクリーンリーダーによる読み上げができない (視覚障害のユーザーが音声読み上げという手段で情報を得ることができない)。
- (主にロービジョンのユーザーが自身にとって読みやすいように) 文字色と背景色の組み合わせをカスタマイズすることが難しい。
上記を含め、Web コンテンツ本文を画像化してしまうことの問題の本質は、「その情報がマシンリーダブルでない」ことだと言えると思います。
先の記事 (「マシンリーダブル」を意識する) で触れたように、Web コンテンツを発信するうえではマシンリーダブルであることが極めて重要になるのですが、コンテンツ本文が画像化された状態の場合、そのままでは「マシン」(Web においては便宜的に「ユーザーエージェント」と言い換えてもよいと思います) が情報を正しく認識/解釈できないため、アクセシビリティや SEO (検索エンジン最適化) といった面で問題があるほか、ソーシャルメディアや RSS フィードなど、自サイトの外側 (Web エコシステム) で生じる様々な情報活用シーンにおいても、ユーザー行動を阻害してしまう恐れがあります。
「代替テキスト (<img> 要素の alt 属性値) を書けば画像ファイルでも十分マシンリーダブルではないか」という考えかたもできそうですが、まとまった文章量を持つコンテンツを画像ファイルで表現している場合、その文章を代替テキストとして書き出すというのはあまりスマートとは言えません。また、単に情報をテキストの形で書き出しておく、というだけでは不十分で、それらのテキストが意味的に適切に構造化されて (セマンティックであって) 初めて、ほんとうの意味でマシンリーダブルだと言えます。その意味で、Web コンテンツの本文 (文字情報) は特別な理由が無い限り、適切にマークアップされたテキストとして存在するほうがよいだろうと考えています。
セマンティクスを意識したうえで敢えて画像ファイルを使うという判断も
情報の意味的な構造 (セマンティクス) を突き詰めると、画像ファイルはあくまでも写真やイラストなどの表現に用いて、文字情報 (文章表現) は適切にマークアップされたテキストによって表現する...というのが「あるべき姿」と言えます。
この「あるべき姿」をきちんと踏まえて...であれば、そのうえで、ブランディングやユーザビリティの観点で敢えて画像ファイルを使う判断をすることはアリだと思います。たとえば、以下のような可能性が挙げられます。
- Web ページの主題をエモーショナルに伝えるために、大見出しとキャッチコピーと写真を合わせた形で <h1> 要素を表現する。
- 効果的に情報をユーザーに届け、印象付けるために、視覚的な伝達手法 (インフォグラフィックや概念図など) を用いる。
ただいずれの場合も、マシンリーダブルであることは損なわないように、代替テキストやサマリーとなるテキストを併せて用意することが大事かな、と思います。