見る人によって見え方が違うんです – 文字編

お客様から良く頂くご要望の中には、「この文章は○行でおさめて欲しい」「この文字で行が終わるようにして欲しい」というものがあります。
私たちWebデザイナーにとって、最も難しく、そして実現出来ない問題の一つです。

なぜ難しいのか、そしてなぜ「出来ない」とお答えしなければならない事があるのか、という事についてお話したいと思います。インターネットで読む文字には、いくつか種類があります。

HTML内に書かれた文字

Web制作の現場では「テキスト」という言い方をする場合が多いです。
普段Internet Explorerなどで、ホームページをご覧になっている場合
マウスで選択状態に出来る文字は、大抵これだと思って下さい。

Google検索画面
Googleでの検索結果です。

Internet Explorer 7 という文字が選択されています。
こちらの検索結果は「テキスト」で作られています。

Webデザイナーは出来る限り表示を快適に、そしてどんなパソコン環境の方にも読めるように作りたいと考えて制作しています。
古いパソコンを利用している人や、インターネット接続の速度が遅い人にとって、沢山の画像やFlashは表示が遅くなる原因です。
「テキスト」は画像などと比べて、ずっとデータが軽いため、どんな環境の方にも快適に見ていただけますので、出来るだけ「テキスト」で作成していきたいと言うのが本音です。

画像で書かれた文字

画像作成ソフト上で文字を書き、それを貼り付けたものです。
ishot-3.jpg
Microsoftのページです。
Windows Internet Explorer という文字を選択しようとしましたが、画像で作成されているので選択出来ていません。
お使いのブラウザによっては、こういう文字と「テキスト」の文字の見た目が違うことも多いのではないでしょうか?

その他Flash内に書かれた文字や、特殊な出力方法のテキスト等ありますが、ここでは割愛します。

どうして細かい指定が難しいの?

普段Wordなどのワープロソフトで作るように、ホームページのレイアウトをしたいとお考えの方には、なぜ文字を詰めたり行寄せをしたりといった事が難しいのか、良くわからないかもしれません。

一例として、ちょっとしたサンプルを作成してみます。

ねこがだいすきです。にゃんにゃんにゃんにゃん。

いぬもだいすきです

でもこねこが一番大好きです!!

こちらの例文ですが、色々な環境で見てみましょう。

safari
こちらはMacintoshのSafariというブラウザです。

Firefox-01
Firefox-02
こちらの二つの画像はどちらも同じ、MacintoshのFirefoxというブラウザでの表示です。

テキストの改行場所が違いますね。
これはブラウザの文字サイズの設定が違うためです。
見ている方のパソコンのディスプレイのサイズや、視力に合わせて
設定がそれぞれ違うので、このように改行位置が変わって来てしまうのです。

xp-ie8
こちらはWindowsXPのInternet Explorer 8 です。

ぱっと見、改行の位置はそう変わらないように見えますが、最後の段落だけ改行位置が違いますね。
これはテキストを表示するフォントの違いです。フォントは見ている人のパソコンによって、インストールされている物が違いますので、こういった表示の違いが起こります。

全部画像にしたらいいんじゃないの?

全て画像で作成しているWebサイト(ホームページ)もない訳ではありませんが
更新する時に、画像の編集作業をしなければならないでしょう。
画像の編集作業は、非常に時間がかかりますし、専門の高価なソフトウェアが必要になります。
お客様ご自身で更新したいとご希望の場合には、お勧めしにくい方法です。

また画像だけで作成されたWebサイトは検索エンジンにも拾われづらく、何より見る方にとって快適なサイトと言えるのだろうか?と考えると、出来るだけテキストで作成させて頂きたいな、と私は考えています。
ノートパソコンなどの小さなディスプレイで見ている方や、視力の悪い方は、文字を大きくして読みたいとお考えになるでしょうし、
逆に広いディスプレイで見ている方は、一度に出来るだけ多くの文章を表示させたいでしょう。
また視力障害のある方の中は、読み上げソフトを使っていらっしゃる方もいます。読み上げソフトは画像の中の文字まで拾って読みあげてくれる訳ではありません。

様々な環境全てに必ず対応出来る、という方法はなかなかありませんが
出来る限り沢山の方に、お客様のサイトを読んで頂きたい、という気持ちから
私は出来るだけ「テキスト」を使用したサイト作りを提案させて頂いています。


"はじめてのFirefox3―人気ブラウザの「基本操作」から「アドオン」まで (I・O BOOKS)" (工学社)

icon-comment コメントなし
  • 埼玉でWebデザイナーをやっています。
    ネコ2匹と人間2人のお世話をしています。

    今はお仕事を新しくお請け出来ないので、まったりのんびりサイトにしています。
    もうちょっとくわしく


    WordPressのプラグインの日本語訳

    RSS