読みやすいページのために


誰がみるのか、想定がつかないWebPage。
伝えたい内容をよりわかりやすく伝えるためには、興味を起こさせ行動につなげさせ記憶に残させることが大切になります。最近では、インターネットの最新技術も日々進み、それらの技術をホームページに取り入れる人も増えてきました。しかし、逆にそれらの技術を使うことによって、ページを読めなくなってしまう人もいます。
人のためのデザイン、そんなヒューマンインターフェイスの観点から、「読みやすさ」のために気をつけてほしい点をいくつかまとめておきます。
このページは、新しい技術の紹介でもなく、HTMLの書き方のページでもありません。ひとりでも多くの人がページを読めるための、小さな工夫を紹介するページです。

デザインの工夫・Font

フォント1つで、与える印象は大きく違ってきます。 しかし、Webデザインの場合、見る側のブラウザ―によって制限される場合が多いので注意が必要です。一方、画像の中に使えるフォントには制限はありませんが、1ページに使う種類をなるべく少なくしましょう。ここに例をあげてみましょう。

I am fine today!!
I am fine today!!
I am fine today!!

恐らく、一番上の小さな文字では、視力の悪い方にはほとんど 見えないかもしれません。また、一番大きな文字は見出しなど 注意を引く時以外に使うと、読む人を混乱させてしまいます。

〜フォントカラーについて〜

フォントカラーには大きな問題が含まれています。 後のページで詳しく述べますが、背景との関係によっては色覚にハンディキャップのある人は大変読みにくいものとなってしまいます。それを踏まえた上で、自分の伝えたいイメージに合う色を選びましょう。タイトルと本文の色の差が大きいと親しみやすく、近いと高級な感じがします。

デザインの工夫・Layout

人間の心理を利用して。

こんな事を頭に入れておきましょう。

左上から右下へ

人間は心理的に左上に視線が移動しそこから内容の理解を始めます。これは画像であっても、文字であっても共通するので、ぜひページのデザインに取り入れたいものです。

心地よい黄金比

黄金比というのをご存知ですか? 1:1.618の比率のことを言います。これは、人間が一番心地よさを感じる比率と言われ、工業デザインの分野でも利用されています。(A4サイズもこの比率にとても近い比率です)これを、画像やボタンの大きさに使うことによって、無意識のうちに見る側に心地よさを与えることができます。

レイアウトの統一

ページが複数にわたる場合、レイアウトに統一感を持たせる事が重要です。ボタンの位置を同じ場所にすることは,操作のしやすさにもつながります。

誰にでも見やすいページを


作り手側ではごく普通にみえているページも、見る側によってはとても読みにくいページとなっている場合があります。それではどんな人が、どんな時にみにくいのでしょうか。

画像に関する問題

目の不自由な人が困ります。

最近、ホームページを音声で読み上げるソフトが普及し、 目の不自由な人でもインターネットを利用できるようになりました。しかし、ここで大きな問題があります。文字は音声で読み上げられますが、画像は読み上げる事ができません。そのため、画像で表現されているものはまったくわからなくなってしまいます。そこで、画像にも文字の情報をあらかじめ用意しておく配慮が必要です。
HTMLでは絵を表示させるのに IMG タグを使いますが、画像の代わりに文字を表示させるために ALT 属性というものがあります。使い方は、

<IMG SRC = "sample.gif" ALT = " これはサンプルの画像です ">

という記述するだけです。これによって、音声で読み上げるソフトは、画像の変わりに「サンプルの画像」と読み上げるので、目の不自由な人もそこにどのような情報があるのか知ることが出来ます。

使っているコンピュータによっても困ります。

画像が表示できるのが当たり前のようになってきていますが、ブラウザ―によっては画像を表示できないものもあります。そのような環境の人が、次へと書かれたボタンを見る事が出来ない場合、どうしたらよいでしょうか。これも、先ほどと同じように、alt属性を記述することによって、画像を表示できない環境の人でもネットサーフィンを続けることが可能になります。

レイアウトに関する問題

肢体不自由な人が困ります。

ボタンで操作を行うレイアウトの場合、ボタンがあまりに 小さい場合、またボタンとボタンがくっついている場合、微妙な操作を要求されると、細かな操作を苦手とする人は大変困ります。少し大きめのボタン、間隔は広めをぜひ、心がけて下さい。

色に関する問題

視覚障害の人が困ります。

背景と文字の組み合わせによって、非常に見にくいページになってしまいます。基本的な配色として、似た色の濃淡などは避けましょう。また、必要以上に文字に影をつけたりするのも、見にくなる原因の1つです。私たちは注意を引き付けたい文字列に色をつけてしまいがちですが、それでは同じ色に見えてしまう人もいます。なるべく、背景色と強いコントラストをもたせた配色などにしましょう。また、未訪問リンクと既訪問リンクの色も、なるべくはっきりと違いのわかる色を使いましょう。

使っているコンピュータによっても困ります。

コンピュータの色はさまざまな要因によって、変わってしまいます。ですから、製作者の意図どおりの色合いに必ずしも見る側には映らない、という問題があります。これを避けるために、ブラウザ―セーフカラーというのを使うのをお勧めします。ブラウザセーフカラーとは、コンピュータの共通の216色のことを指します。これを使えば、どのプラットフォーム、OS、ブラウザであっても、さらに8bit表示であっても同じ色が表示されます。

Link


IBMこころWeb
http://www.ibm.co.jp/kokoroweb/tips/index.html

WAI Accessibility Guidelines
http://www.zspc.com/doc/acsguide.html

wwwPublishingにおけるdesign手法
http://www.snobuy.com/design/

Color Fiction
http://village.infoweb.ne.jp/~zenzai/index.htm

Web Color
http://www1.odn.ne.jp/~cab23560/color/index.html



Topページへ