ユーザーの見易さを考える
ユーザーの見易さ・使いやすさを考えたWebデザインについてです。
有名なサイトを参考にする
ユーザーの見易さ・使いやすさを考えたWebデザインをする場合、
有名なサイトを参考にするのが一番いいです。例えば、Yahoo!JAPANなどです。
有名なサイトでユーザーに見にくいということはまずありえませんし、大抵の場合見やすいです。
ですので、これらのサイトは非常に参考になります。
複数のブラウザで検証する
これは、非常に重要です。同じホームページでもあらゆる種類のブラウザで見られていますので、 複数のブラウザで自分のサイトをチェックしてみるといいです。
IEでのチェックはもちろんのことですが、Firefox、Operaなどでもチェックしておきましょう。
特にスタイルシートを使っていると、ブラウザによって大きく表示が異なることがあります。
文字のサイズ
ユーザーの見易さという点を考えるなら、文字の大きさは変えないほうがいいでしょう。
大抵のブラウザでユーザーがフォントサイズを変えることができますし、 フォントのサイズを固定してしまうと、ユーザーによっては見にくくなる可能性があります。
デザインの面で文字のサイズを変える場合は、固定しないで スタイルシートで相対的にフォントのサイズを変えたほうがいいです。
スタイルシートで相対的にフォントのサイズを変えるときは、
font-sizeのプロパティを、
large(大きい),larger(やや大きめ),medium(普通),small(やや小さめ),
smaller(小さめ),x-large(とても大きい),x-small(とても小さい),xx-large(極大),xx-small(極小)
のどれかにします。
行間を空ける
ホームページで、行間の空け方というのは重要です。
ページ全体の行間の空け方ももちろんですが、
行を空けて間を置くことで文章に動きをつけることができます。。
ブログなどでは、よく上手く行間を空けているページを見かけます。
まずはページ全体の行間の空け方ですが下の例を見てください。
行間の確認サンプル
行間の確認サンプル
行間の確認サンプル
行間が詰まっていてかなり見にくいと思います。
これが、行間に何も指定しなかった場合の行間になります。
私がホームページを作り始めたころは行間の空け方も分からずに、見にくいと感じながらも作っていました。
しかし、これもスタイルシートで行間を指定することができます。
プロパティline-heightのプロパティに一行を100%として%指定で相対的に指定できます。
色を考える
これも当然考えるべきポイントです。
これは極端な例ですが、どんなに内容がよくても黒い背景に黒い文字では誰もアクセスしてこないでしょう。
基本は、白が背景色、黒が文字色、青がリンク色でこれが一番読みやすいと思います。
色を指定する場合、背景色と文字色は同系色にせずできるかぎり見やすいようにしましょう。
