綾小路龍之介の素人思考

[メモ] ブラウザの設定が変わっても変わってほしくないものはコンテンツの見易さ

自分のサイトのユーザがどのような機器を使って自分のサイトから情報を得ているかはほとんど不明である。例えば、このサイトのユーザがコンテンツをどのようなサイズ (文字のサイズ、window のサイズ、ディスプレイのサイズ) で見ているか僕には全くわからない。

コンテンツの魅力というものは、内容がユーザによく理解されてこそ得られるもので、内容が貧弱であったり見難いものであったりすると、ユーザの理解度はさがり、よく読めば非常に魅力的な内容であるにもかかわらず、コンテンツの魅力が下がってしまう。類似した内容を提供する Web ページが大量に存在する今だからこそ、自サイトのコンテンツの理解度を高める努力をしないことは、類似した内容を提供している他サイトに流れてしまうユーザを増やすことになり、自サイトのユーザ数を減らすことになる。どのようにして他サイトに流れる引き止めるかということはサイトのオーナーにとって重要な戦略だと思う。内容コンテンツを提供する側はこのような点を考慮して、コンテンツの理解度を左右する一つの要素である「コンテンツの見易さ」に配慮したサイトを作成するべきだと思う。ここからは、このサイトにおけるコンテンツの見易さを考えてみる。

まずは、ユーザがどのようにしてこのサイトから情報を得るか考えなければならないだろう。このサイトのメインコンテンツのほとんどはテキスト情報であり、ユーザはテキストを読んで「文字から情報を得る」だろう。そこで、ユーザの内容理解の手助けとなるのは文字に関連したパラメータだろうと仮定した。つまり文字サイズ、文字字間サイズ、行間サイズ、段落間上下外余白である。り、文字のサイズを基準にして余白設定するべきだと思う。

ディスプレイ上に映し出される文字の大きさは、「ピクセルサイズ (1 ピクセルの形)」に依存する。ここでいう「ピクセルサイズ」には 2 種類あり、「ディスプレイのピクセルサイズ」と「OS のピクセルサイズ」がある。

ディスプレイサイズとピクセルサイズ
ディスプレイ斜辺長[in]横ドット数[dot]縦ドット数[dot]ディスプレイのピクセルサイズ[dpi]
1564048015[in] * x[dpi] = 640[dot]
15800600

同じディスプレイサイズの場合、ピクセルサイズは解像度が細かいほうが短い。

前者について考えると例えば、異なる大きさのディスプレイの表示可能枠いっぱいに同じ解像度で表示した場合、ピクセルサイズはディスプレイサイズが大きいほうが長い。また、同じ大きさのディスプレイの表示可能枠いっぱいに異なる解像度で表示した場合、ピクセルサイズは解像度が細かいほうが短い。すなわち、ユーザのディスプレイサイズと解像度によってはピクセルサイズは変わりうる、ということだ。つまり、Web ページで論理的に同じ大きさを指定しても、ユーザの目に入る文字の大きさは Web ページを見ている機器によって異なるということだ。

では、文字に関連するパラメータのサイズをどのようにして指定するのがよいのか。サイズ指定には大きく分けて絶対指定と相対指定の 2 つがある。絶対指定は cm, pt のようなものである。絶対指定の場合は、1 ドット当たりのインチ (dpi) が機器ごとに設定されているので、これを元にディスプレイ上で何ドットか計算され表示される。残念なことに、12 cm と指定したらディスプレイ上でも常に 12 cm というわけではない。その理由は、OS の考える dpi と実際のディスプレイの dpi が異なるからである。例えば、12 インチと絶対指定し OS の dpi が 96 dpi だとすると、96 dpi * 12 in = 1152 dot ということになり、ディスプレイ上で 1152 ドットの長さに相当する。解像度 800x600 の 15 インチディスプレイ (ディスプレイの対角線の長さが 15 インチ) では sqrt(800 * 800 + 600 * 600) dot / 15 in ≈ 66.66 dpi なので、このディスプレイ上で 1152 dot は 1152 dot / 66.66 dpi = 17. 28 in に相当する。このように、絶対指定の 12 in はディスプレイ上の長さとイコールになるとは限らない。つまり、に表示にユーザの使用している機器に依らない。長さの単位に変換できるできる大きさは 3 つあり、window の大きさに対して相対的に変化する「パーセント指定」と文字の大きさに対して相対的に変化する「em 指定」と、ピクセルサイズに対して相対的に変化する「px 指定」がある。

ブラウザ window の幅とか高さを変えるとパーセント指定していた部分はそれに対応して変化する。ものすごく私的な意見だが、このような変化によってきれいに見えるようになる場合と汚く見えるようになる場合があると思う。僕が自分のサイトを読むとき、パーセント指定によって変化してほしくないものを下に挙げる。

このような部分をもしパーセント指定すると、window の高さを縮めると要素間が詰まって表示される。一つの p 要素はある一つの内容を含み、p 要素の区切りは内容の区切りである。著者が内容の区切りを意識して書いた部分には視覚的にも余白が必要である。内容の区切りを意味する余白の高さが window の高さの変化に対して変化するのは、読者の window サイズによっては内容の理解に差が出てきてしまうことになる。したがって、上に挙げた要素間の上下外余白は window サイズに対して動的に変化するように (パーセントで) 指定するべきではないと思う。

p、pre、ol、ul、dl 要素間の上下外余白

ソーシャルブックマーク

  1. はてなブックマーク
  2. Google Bookmarks
  3. del.icio.us

ChangeLog

  1. Posted: 2009-01-19T20:15:51+09:00
  2. Modified: 2009-01-19T07:57:32+09:00
  3. Generated: 2016-12-28T23:09:18+09:00