DTPデザイナーがWEBサイトのデザインをする際、よく見かけるのがデザインと実際に仕上がったWEBサイトやWEBページとの違う！という現象。
その違いとして一番に言える事は、どの人にも同じ物が見えないという事です。
10人のユーザーがいれば、環境やデバイス、ブラウザなど10人とも違うのが当然で、見え方にも違いが出来てくる。
それを計算してデザインを制作していかなければなりません。
今回は、その一つとして、テキストと画像の役割と重要性について書いていきたいと思います。

WEBサイトでの画像はどんなものが使われているの？ 

写真やイラストなど画像と言っても様々な拡張子がありますよね。
その中でも、WEB上でよく利用される代表的な拡張子について触れてみたいと思います。

jpg（Joint Photographic Experts Group）

主に写真などのデータ。

特徴

• 1670万色（24bit）の色を表現する事が出来る。
• ファイルサイズが小さい。
• 非可逆圧縮という処理がされるので、画像加工をすると劣化していく。
• 画像の余白等があった場合背景を透過して保存できない。

 

gif（Graphics Interchange Format）

主にアニメーションやコマ送りの画像など。

特徴

• 256色（8bit）の色を表現する事が出来る。
• ファイルサイズが小さい。
• 背景を透過する事が出来る。

png（Portable Network Graphics）

主に、ロゴや図形やイラストなど（ベクターデータ）。

特徴

• フルカラー・8bitカラーと選択する事が出来る。
• データの編集、拡大や縮小をしても劣化しない。
• 背景を透過する事が出来る。

 

svg（Scalable Vector Graphics）

主に、WEBページのロゴや図形やイラストなど（ベクターデータ）。

特徴

• データの編集、拡大や縮小をしても劣化しない。
• XMLベースのデータなので背景がない場合はオブジェクト部分で書き出しが出来る。
• XMLベースのデータなのでWEB上で装飾やアニメーションで動作を加える事も可能。また、非常に軽量。
• 画像など合成データは不向き。

このようにWEBサイト制作でも、画像データは様々な拡張子を使い分けていく必要があります。
特にWEBでは、大きなファイルサイズの画像だと読み込みに時間がかかってしまうので、なるべく重くならないように配置していきましょう。
其々の特徴が飲み込めたら、デザインを起こしながら各画像に対してどのような拡張子で書き出したい！というこだわりが出てくるかと思います。

 

WEBサイト上でのテキストってなに？

テキストとは、タイトルや文章などの文字で書かれる部分を指します。
文字で書かれている部分はなるべくこのテキストにするのがベストです。
こちらについては「WEBサイトでテキストが画像にされてしまうのはなぜ？」で詳しく書いていますの、でそちらをご覧ください。

ここで非常に重要になるのが、文章の構造です。
例えば、タイトルのない新聞記事は内容を読まれる機会を失います。
見出しと内容が違っていては信頼性を失い、そこで離脱されてしまうでしょう。
また、文字が小さすぎたり、文字色が見にくかったりするとユーザーは疲れて最後まで読んでくれないでしょう。
正確により早く情報が得られないものは、自然と見られる機会を失ってしまいます。

その為にも、視認性が悪い文字色や装飾を避け、完結に内容を伝えられるようタイトルや文章など工夫してく必要があります。

また、音声読み上げや音声検索などを利用するユーザーに向けての配慮も必要になるかと思います。

更に言うと、インターネットの世界ではクローラーを意識する事も忘れてはいけません。
このクローラーはページ情報を収集し膨大なデータベースに整理されていきます。
クローラーが情報を把握しやすくする為にも、文章構造や完結な文章を意識していく必要があるのです。
各セクションやタイトル、コンテンツのボリュームや内容など意識する事が求められます。

WEBサイトでテキストが画像にされてしまうのはなぜ？

「WEBサイト上でのテキストってなに？」でもテキストの重要性について触れましたが、そこに付随する画像もテキストの内容と合致している必要があります。

例えば、サイト上でカレーライスのレシピを載せたとします。
サムネイル画像にピザの画像が設置されていたら…。カレーのレシピを探している時にピザのサムネイルの記事は読みませんよね。
ユーザーは一つひとつの文字を読んでいるわけではありません。
ピザのレシピだと思ってアクセスしてくるユーザーも中にはいるかと思います。

カレーのレシピには、美味しそうなカレーの画像を設置する。
それを見たカレーに興味があるユーザーに「作ってみたい！」「気になる！」というアクションを起こすきっかけを作ることになるのです。
また、「画像検索エンジン」での流入も考えると、よりコンテンツに相応しい画像を置くべきではないでしょうか。

Googleでも以下のように説明しています。
検索エンジン最適化（SEO）スターター ガイド

もう一つのパターンとしては、テキストであるべき物が画像になってしまう場合です。
基本的にWEB上では、あらゆるデバイスや環境下で閲覧される事を想定しなければなりません。
しかし、見た目を重視した結果、テキストを画像にしなくてはけない場合があります。非常に勿体ない事です。
そこで、いくつか勿体ないと思ったパターンを紹介してみたいと思います。

WEBサイト（WEBページ）のデザインにタイトルや文章に特殊フォントを使っている

特殊フォントはフォントを持っていないユーザーには代替えのフォントで表示されてしまう為、見え方がまったく変わってしまいます。
特殊フォントを利用したい場合はGoogleFontsを利用することをお勧めします。

 

WEBサイト（WEBページ）のデザインで表示される画面幅やデバイスが想定できていない

画像とテキストの比率はデバイスや画面によって変わってきます。
その為、文字の改行位置がデザイン通りに表示されない、崩れてしまう。というケースがあります。

 

WEBサイト（WEBページ）のデザインに文字に装飾や効果がかかっている

IllustratorやPhotoshopで加工された物の中には、効果やフィルターなどcss（※1）で表現できない部分があります。
また、cssで文字に指定をかけた場合、ブラウザや画面幅によって見え方が変わってしまう場合もあります。
こういった事態で損する事をいくつか挙げてみます。

•  タイトルや文章が画像の場合、クローラーは単なるimgタグ（画像）と認識してしまうので検索結果に影響を及ぼします。
• 文字を画像にする事で、画面の幅によっては画像がにじんで読みにくくなる場合があります。
• 画像データが重いと表示スピードが遅くなります。誰しもがハイスペックな環境でアクセスするとは限りません。表示速度がかかる分離脱率も上がってきます。
• 文章が画像の場合、ユーザーが、コンテンツの文章から検索する際や、引用したい場合にコピーアンドペーストをする事が出来なくなります。
• クローラーにとって大切な事は、検索エンジンがコンテンツを理解する事にあります。その為にもタイトルやセクションなどが要になってきます。

※1　css（Cascading Style Sheets）とはWEBサイト（WEBページ）上での見え方や体裁を指定する為の言語

まとめ

• 画像は適材適所のデータにしてなるべく軽量化する。
• テキスト部分に効果などは使用しないようにする。
• 内容や各セクションは整理して文章を書いていく。
• 文字のサイズや色は見やすさを配慮する。
• デバイス毎の表示を考え、改行などは使わない。
• 画像は内容に沿ったものを利用するようにする。

 

さいごに

WEBが当たり前に誰でも気軽に利用できるようになました。
その分WEB上には同じ内容のコンテンツが山ほどあります。
ユーザーの目線を意識してコンテンツを作成していく事が、より多くのユーザーの元へ届ける第一歩です。
小さなことからコツコツと地道な努力になりますが、大きな一歩に繋がっていくと信じ私も日進月歩ですが歩んでけるよう積み重ねていきたいと思います。