スマートフォンサイト制作のコツ：テキストは画像よりも「テキスト」のままの方が良い

1. 画像を減らすことでリクエスト数を減らす
2. ページの横幅とディスプレイの解像度の違い
3. テキストは画像よりも「テキスト」のままの方が良い

テキストは画像よりも「テキスト」のままの方が良いです。これまでのサイト制作では、ちょっとしたテキストもスタイリッシュにするために画像を多く使う傾向にありました。確かにテキストだらけのサイトは古臭いイメージ、画像がふんだんに使われていると今時なイメージに感じます。

ところが、スマートフォン向けのサイト制作では話が変わってきます。画像の多用が逆効果となってしまうのです。ポイントは2点、「リクエスト数」と「解像度」です。

■画像を減らすことでリクエスト数を減らす

ご存知のようにスマートフォンはモバイルです。最近は通信速度の早い通信規格やWiFiなども増えてきていますが、まだまだ3G回線を使う機会が多いです。また、位置や接続数などによって速度が遅くなったりします。

ウェブサイトを作る際に気をつけなければならないのは表示速度です。かつては「8秒ルール」というのがあったり最近では「1秒でこんなに違う」といった記事があるほど、サイト制作ではページを表示する時間がとても重要だとされています。表示するのに時間がかかると閲覧者のストレスとなってしまい離脱される原因となるからです。

ではどうすれば良いのか？それは単純に画像の数を減らせば良いのです。別の記事「スマートフォンサイトでは画像を大きめにしよう」にあるとおり画像のサイズは大きい方が良いです。ひとつひとつのサイズを小さくできないので数を減らします。

ウェブの仕組みでページを表示した時には画像の数だけサーバーへのリクエスト（アクセス）が発生します。リクエストが多ければ多いほどサーバーとの通信が発生するわけです。この通信の回数を減らすことができればそれだけページを表示する時間が早くなります。

ではどの画像を減らすのか？テキストのままでもいいのに画像にしてしまった箇所はありませんか？ちょっとしたリンク用の画像や文字だけのバナーなどありませんか？それらを素のテキストにすることで画像の数が減りリクエスト数が減ってページを表示する時間が早くなります。

■ページの横幅とディスプレイの解像度の違い

別の記事「スマートフォンサイトでは画像を大きめにしよう」で説明しているとおり、ウェブサイトを作る際に意識する横幅と、ディスプレイが表示できる解像度の横幅は異なることがしばしばです。そしてほぼディスプレイの解像度の方が大きいです。

ディスプレイが表示できる解像度に合わせて作ることで画像をキレイに見せようということなのですが、どんな画像でも制作する際にはどうしても圧縮されてしまいます。でなければウェブサイトで利用するに耐えないデータ量になってしまうからです。

そして圧縮されたテキストはどうしてもギザギザになります。スマートフォン上に表示される素のテキストは、スマートフォン自体が描写しているのでとても滑らかです。画像のテキストはギザギザ、素のテキストは滑らかなのです。

なので、テキストをキレイに見せたければ画像を使わないことが望ましいです。ちょっとしたテキストであれば画像を使うのは止めましょう。また、CSS3を使えばテキストに影をつけるのは簡単ですし、画像編集ソフト並みのエフェクトも使うことができます。あなたが画像編集ソフトでしか実現できないと思っていることは、今ではCSSでも実現可能になったのです。

■テキストは画像よりも「テキスト」のままの方が良い

画像を使って表現していたテキストを素のテキストに変更することで、リクエスト数が減って表示が早くなり、圧縮されギザギザになっていた文字が滑らかでキレイになるのです。テキストをわざわざ画像にしていた手間も省けます。良いこと尽くめですね。

これらが実現できるのはスマートフォンに導入されたHTML5やCSS3といった最新技術のおかげです。また、これらの技術はPC向けのブラウザでも導入が進んでいます。つまり、これらのノウハウはスマートフォンに限ったことではなく、今後のウェブサイト制作に必要なノウハウなのです。

「より早く、よりキレイに」これを意識しながらサイト制作をすることが重要です。ここに挙げた「素のテキストを使う」以外にも「CSS Sprite」や「canvas タグ」など様々なテクニック技術やがあります。これらの話はまたいつか、、、。

この記事を読まれた方は、「素のテキストに変えれる画像はないか？」自分のサイトを見直してみてはいかがでしょうか。

（　スマートフォンECクラウド型ASP『aiship（アイシップ）』 河野　）

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
掲載元のブログではわかりやすい画像つきで公開しています。
■aishipスマートフォン＆モバイルEC事例・ノウハウ集
http://www.aiship.jp/knowhow/archives/1969
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝