More

モニタの大きさは、通常インチで示されます。
今は17インチくらいが一番多いでしょうか。
モニタの解像度というのは、モニタ全体が何px * 何pxになってるかです。

私が運営しているサイトのアクセス解析で見てみると…。
三つ運営しているので、全てを合計して割り出してみました。といっても、元々アクセスが少ない上に、大きめのモニタを想定してサイトデザインしているため、かなりの偏りがあるだろうとは思いますが、参考程度に。

大雑把に横幅で分けてみた結果。

1600台（1680*1050、1600*1200）7.65%
1400台（1440*900、1400*1050）2.22%
1200台（1280*1024、*768、*800、*960）18.38%
1100台（1152*864）1.90%
1000台（1024*768、1024*600）67.76%
800台（800*600）1.83%
600台（640*400）0.26%

最も多いのが、横が1024というもので、ぶっちぎり67.76%
次が1200台の18.38%
三番目に当たるのが1600台の7.65%
…なのですが、私のモニタがこれでして。
おまけに、うちはMacを基準にサイト作ってるもので、割にMacユーザーの率が高いのですよね(^^;
Macユーザーで、シネマディスプレイを使っているとこれになるのですが、他のサイトではもっと少ないと思います。

で、800*600はというと、なんとたったの1.83%
上記のような条件がありますから、実際にはもう少し多いかもしれませんが、昔は主流だったこれも随分減っているようです。

で、これら結果から弾き出すと、大体1024を基準にデザインすればよかろうということがわかりますが、その幅は、640から1680までと倍以上となるわけです。

ここから本題です（前置き、長っ）
サイトをデザインする場合、小さいモニタを想定して作るのが王道です。
何故かというと、縦のスクロールに比べ、横スクロールが発生すると非常に読みにくくなることが知られているからです。
それでいえば、640を基準に作るべきと言えますが、シェアを考えると800を基準にというのが今のところ多くなっています。

なら、それでいいじゃないかと思うでしょうが、どっこい。
こちらの画像をご覧下さい。
　

FC2の公式テンプレート、holidayを私のモニタで見たものです。最初の方が、私が普段開いているウィンドウサイズでキャプチャーしたもの。
次がフルサイズのウィンドウでキャプチャーしたものです。
なんというかバランスが悪いのはまだいいとして、ここまでくると読みにくいし、操作しにくいのですよ。

ですが、ブログのテンプレートというのはFC2に限らず、横幅800以下の絶対値指定（ウィンドウサイズが変わっても、幅が変わらない）が圧倒的です。
これはブログデザインにフレームが使えないため、tableを使わずにCSSだけで２カラム、３カラムを崩れにくく配置しようと思うと、絶対値指定した方が簡単だからなのでしょう。

この形だと、640で見れば横スクロールが発生しますし、もっと大きいモニタで見ると今度は余白がガバッとあくわけです。

ここでちょっと考えてみて下さい。
ブログ以外、普通のHPで絶対値で幅が取られているデザインを見ることってどのくらいありますか？
普通のHPでは、割に可変的に中身が配置されているものが多いと思います。
これはブログほどCSSが使われていないこと、メニューなどはフレームを使っているサイトが多いことが理由ではありますが、どちらが読みやすいですか？

とはいっても、ブログの場合、デザインにも制限がありますし、CSSのみで可変幅をデザインするのは難しいため、現在ではやむを得ないことでしょう。
ただ、ちょっとこういうモニタの解像度による見え方の違いを考えてみるのか、全く考えもしないのかで随分と違いが出てきます。

そのもっともわかりやすい例をあげましょう。
この画像を見て下さい。


２列右メニューのテンプレートを模した図です。
実際に例のようになっているテンプレートを私は複数知っています。
これはどういうことかというと、背景に黒背景画像を使って繰り返しはなし、右上固定に設定し、内容は固定幅になっているのです。
モニタの解像度が800*600なら丁度この背景画像がウィンドウ全体をカバーし、黒背景にブルーというデザインになるわけです。
ところが、背景色の指定をしていないため、私のように大きなモニタで見ていると、肝心の記事がある部分（青枠の中）は背景が白になってしまっているのです。
しかし、文字色は黒背景で読みやすいように白を指定しているため、ブルー背景のサイドメニューは読めても、記事は全く読めません。
このような時に、作者がモニタ解像度は色々だということを少しでも知っていたら。
せめて背景色に黒を指定しているだけでも、デザインはかなり間抜けになりますが読めなくはありません。
ウィンドウサイズを小さく調整すれば読めますが、そこまでして読む気になることは滅多にありません。
まして、これでフォントサイズは小さめに指定されていると、大きなモニタでは点か、この字はってくらいになっていることもあり、そうなるとますます読む気になりません。
（横幅800の中で10pxの文字と、横幅1600の中で10pxの文字。比べれば、感覚的には半分近く小さくなっているように感じるわけです）

このように、他の人は自分とは違う色々な環境で見ているのだということを知らないと、困ることは多くあります。
モニタの違い、OSの違い、ブラウザの違い。
何の為にブログデザインをするのか？
自分が作って満足というだけならそれでもいいですが、たいていの場合、デザインはまず中身を引き立たせ、多くの人に読んでもらうためにあります。
それが余計なデザインをしたばかりに、読むこともできなくなっては本末転倒です。
何の為にデザインしているのか。
それを忘れないことです。

Close