« デザインリニューアル第二弾！ | Home | あついぞ！熊谷 »
2007年8月16日
解像度とブログデザイン
昔、仕事でサイト制作している人が、カバーするのは「800×600（SVGA）」で、サイトの横幅は、760ピクセルとかそんなくらい・・・というような話をしていた。実際、Yahoo!や楽天なども700ピクセル台で、asahi.comなど、文字情報中心のところだと可変で、横幅800ピクセルを切るあたりから、左端が切れるというつくりになっている。
ブログでは、３カラムだと、真ん中450～500ピクセル、両脇のサイドバーが150～200ピクセルなどで、全体で900ピクセル幅のものなどが多いみたいだ。
これは戦争だ！史上最強のダイエット作戦
（↑中央が500ピクセル、両脇が200ピクセルずつ）
どのくらいが適当なんだろう・・・というのを、
今回、久しぶりに考えた。
| 1 | 1024x768 | 46.4% |
| 2 | 1280x1024 | 24.1% |
| 3 | 1280x800 | 10.8% |
| 4 | 1280x768 | 3.4% |
| 5 | 1680x1050 | 2.6% |
| 6 | 1400x1050 | 2.2% |
| 7 | 1440x900 | 2.2% |
| 8 | 1600x1200 | 1.6% |
| 9 | 1152x864 | 1.3% |
| 10 | 1920x1200 | 1.1% |
| 11 | 800x600 | 1.0% |
| 合計 | 96.7% |
「1280×1024」が一番多いのかなと思っていたが、実は「1024×768」が半分近くという結果。
大手企業のドメインでも、このサイズが多かった。
今、これだけパソコンに依存して仕事を行う時代だし、エクセル仕事など一覧で見なくちゃ行けないデータ量も多いんだから、効率考えたら、ディスプレイの大型化にお金をかけるべきだと思うんだけどなあ、会社。
同時に、800×600やそれ以下は、やはり非常に少ないことがわかった。
800×600以下は、PDAか何かを使っている人が多いようだ。
ちなみに
・800x5000
・3072x 768
という不思議なサイズもあった。
まあ、このあたりユーザエージェント情報とか、基本的にクライアントの自己申告情報だからわからないけどね。実際にこういう解像度だとしたら、どんなやつなんだろう・・・？
とりあえず、数字だけだといまひとつ体感できないので、
各解像度で、自分のブログがどこまで見えるものか試してみた。
▼800×600 SVGA（Super Video Graphics Array）
▼1024×768 XGA（eXtended Graphics Array）
▼1280×1,024 SXGA（Super eXtended Graphics Array）
▼1600×1200 UXGA（Ultra eXtended Graphics Array）
▼1200×1600 UXGAの液晶ディスプレイをピポット機能で90度回転
同じ大きさにしてしまうと、いまひとつ比較がしにくいので、
今度はすべて25%のサイズに縮小して並べてみた。
▼800×600 SVGA（Super Video Graphics Array）
▼1024×768 XGA（eXtended Graphics Array）
▼1280×1,024 SXGA（Super eXtended Graphics Array）
▼1600×1200 UXGA（Ultra eXtended Graphics Array）
▼1200×1600 UXGAの液晶ディスプレイをピポット機能で90度回転
800ピクセルでも記事読むことはできるが、
おそらく「右側の裏に隠れているのは一体何？」ということになるだろう。
この作りだと、1024幅の人と違って、どうやっても「裏」にあるものを見ることはできないためだ。
幅も大切だけど、それ以上に重要なのは縦位置。
今回、一番上部に高さ100ピクセルの写真画像を入れているため、その分全体が少し下に落ちた。それでも１本目の記事は「全文を読む」まで見えており、次の記事もタイトルだけ読める。
なのでとりあえずはよしとしよう。
あまり長くしすぎて、スクロールしないと「全文を読む」すら見えてこないという状況は避けないといけない。
まだまだ、操作しにくい点がいろいろあるので、
この後少しずついじっていく予定。
でも、眠いのでちょっとお昼寝します♪
私のディスプレイは1024×768ですけど、実際は800×600程度しか見えない環境です。
http://www.uka-blog.com/display.gif
左側にブックマークを表示しっぱなしにしてるのって少数派なのかもしれないですが、一応ご参考まで＾＾；
解像度が高い人でも、全画面でブラウザを開いているとは限りませんね。
1680x1050のワイド画面でもブラウザは半分にしていたり。
Alertbox曰く
http://www.usability.gr.jp/alertbox/20060731_screen_resolution.html
>ウェブページは 1024 × 768 に最適化するべきだが、
>800 × 600 から 1280 × 1024 までの幅広い解像度に
>対応できるリキッド・レイアウトを使おう。
うかさん、
そうですよね・・・全画面でもそういう形で使ってる人も多いから、やはりコンパクト目にしておかないとだめですね。
それにしても、うかさん、1024×768ですか？職場？
なんとなく、すごいディスプレイを使っている印象がありました。
y-Akiさん、
ほんとそうですよね。。。そしてこのURLありがとうございます！こういうのを昨晩、悩みながらずっと探していました。リキッドレイアウト推奨ですよね。こういう風にかっちり固めてしまうのはよくないと思いつつ、なんかうまくまとめられなくて、固定にしてしまっています。
もう一段階リニューアルする際には、このあたりも考えてみたいと思います。
はじめまして！
今の構成、標準的ですが見やすくて好きです。
ブラウザ全画面表示にはしないので横800ぐらいがいいなと思いつつ自分でデザインしようとするとどんどん横に広くなって悩んじゃいます。
・3072x768
これはたぶん1024x768ディスプレイを3画面使ってる場合だと思いますよ。800x5000は謎ですね。
リニューアルおめでとうございます。
拝見していると、もう少し手を入れる余地がありそうですね。
ところで解像度の件、私の職場がそうなんですけど、
＞ 1024×768
って、A4 ノートPCの標準的な画面サイズです。
わださんのブログを見ているマーケティング担当者って外出も多いでしょうから、ノートPCユーザーの確率が高いかと思われます。上記数値にはそういう方のアクセスがかなりの割合で含まれるかと。
デザインの現場から申しますと
680ピクセルで中央フロート配置
というのが流行っています。
一応参考までに。
リニューアルお疲れさまです。ラベンダーの写真がとっても素敵です。
こんなことを考えている人もいるということで書いてみちゃうのですが、私が横幅などを考えるとき、
・一行に何文字くらいが読みやすいか
・文字の大きさと一行の文字数のバランス
・何カラムのとき人はどこに一番注目するか、自分は何を一番見てほしいか
という人視点をまず考えたりします。
もちろん考慮されていると思うので、何ともお節介で恥ずかしいのですが。
ＯＬをしていた時の上司がいつも「パソコンに使われるな、人視点で考えろ」という人だったので、染みついているんです。すっかり、上司の口癖がうつってます。
それにしても、皆さん大きいディスプレイを使っているんですね。一覧表を見てびっくりでした。
myaguchiさん、
そうなんです、ついあれもこれも載せたくなってしまうんです。欲張りなのはわかりつつ。
> ・3072x768
> これはたぶん1024x768ディスプレイを3画面使ってる場合だと思いますよ。
ああ、確かにそうですね！！！
マルチディスプレイにすれば、ブラウザで相当横長に見ることができるんですね。
ちょっとすっきりしました。
kuroyagiさん、
しばらくは、ちょこちょこ手直し作業で、仕事が中断されてしまいそうです。そしてそうですね、ノート派多いですもんね。かくいう自分も、ちょっと前までLet's Note Rシリーズがメインマシンだったので、外出時はそのサイズでした（自宅ではディスプレイ外付け）
tomonoさん、
あ、そういう情報貴重です！
680ピクセルというのは、割とスリムですよね。でも確かに見易さという点では、その幅の中できちんとコンパクトに情報整理して、きちんと目の動きを考えた作りにするってことなのかも・・・と思っちゃいました（流行ってる理由はまた別にちゃんとした理由があるのかもしれませんが）。
のらりさん、
ラベンダー写真は、先月富良野で撮影したものです。
さすがですね。参考になります。
人視点大切ですよね。
私にとって、記事スペースの今のこの幅と文字数が、文字を読むのに一番適しているのですが、ひとつ悩んでいるのが文字の大きさです。もう少し大きい方が読みやすいのかどうか。文字を大きくすると、多少幅も広げて、一行あたりの文字数を今と同じくらいに保ちたいので、そうなると幅も広がってくる。
なかなか難しいですよね、最適な解を求めるのって。
MTを勉強、自分なりの新しいテンプレートを模索中なので、こちらのコメントは勉強になります。
floatタグを使うまでは、ずっとリキッド・レイアウトでサイトを作成していました。
しかし、floatタグは固定サイズでないと、サイドバーが落ちるなどのトラブルがあるというので、涙をのんで、いまは固定サイズにしているのですが…
そろそろ世の中、変わったのかなあ？
わたしのサイトには、いまだ、ネスケでフォント指定をすると、フォント指定後のスタイルシートを一切読んでもらえなかった時代の、ブラウザ判断して、スタイルシート2種類用意スタイルのところがあります。
こういう変化を追っていくのは、ほんと大変ですね。
以前はニフティで情報交換していたのですが、いまはみなさん、こういう情報をどこで交換しているのでしょう？
http://www.usability.gr.jp/
サイトデザインのたびに、こちらのサイトを見つつ、「それを実現するには具体的にはどうすれば？」と悩むことが多いです。
森田慶子さん、
> しかし、floatタグは固定サイズでないと、サイドバーが落ちるなど
そういうこともあるんですね。
私はまだ本当に駆け出しなので、いけないとわかりつつ、古いのも含めたブラウザ完全対応は諦めてしまっています。・・・といっても、特に凝ったことはしておらず、超ベーシックなスタイルシートしか使ってないので、そんなひどいことにはなってないと思うのですが。
http://www.usability.gr.jp/
今回、コメントで教えてもらって初めて知ったのですが、ここいいですね。自分も勉強したいと思います。