web制作にまつわる画面解像度（アスペクト比）のことなど

前回は『印刷物制作時の解像度やスクリーン線数の話など』で、印刷方面での解像度とスクリーン線数の話を書いた。一方web制作に関して解像度というと、ディスプレイの解像度のことだったり、webで使用する画像の解像度だったりします。単位は印刷だとmmとかcmなのが、webではpx(pixel)が中心になります。

グラフィックデザインは主に紙など範囲の決まった平面状態のものの上に印刷する元を作ることですが、webデザインはモニター（ディスプレイ）上で閲覧される情報を整理整頓しながら作って行くこと。自分の作業の仕方を振り返るとそんな表現になってしまったわけですが…。

紙メディアに乗っける情報は「紙面の都合」があるので、削るところは削らないと入りきれないので、文章の書き方やデザインの工夫で要点を上手くまとめあげようとがんばります。テレビCMも広告料高い割には15秒ほどなので、言いたいことも大して言えずに「詳しくはwebで！」で締めたりしてます。

ってことは、webは制限がなくてなんでも好きなだけ乗っけられるメディアではないか！ということになりますが、ある意味その通りだと思うのです。〜.htmlひとつ作れば、見せたり読ませたりしたいものをいくらでも乗っけてスクロールしてどこまでも見せられるんで。だからひとつのhtmlを1ページという表現の仕方はホントはおかしいわけです。本来5つくらいに分けて表示させるべきところ、ランディングページのように1ページで長々と下にスクロールするやり方で見せてしまえるのですから、1ページいくらでやりとりすると、屁理屈ながら、5ページ分を1ページに収めて制作料金は1ページ分で済むだろ！ってことにもなりかねないわけです。にしてもランディングページってあんまり美しくないよなぁ。あれ紙で縦長の巻物でポストに入ってたら参りまっせ！まぁ企画モノとしてやってみるのは面白いのかもしれないが…。

話は逸れましたが、確かにwebはある意味好きなだけ情報を乗っけようとすれば出来るわけですが、ただダラダラとまとまりなく掲載しても読む側がついて来ません。現在は可処分時間の奪い合いなので、読んでもらえるようそれなりの編集とデザインが必要となります。

そんな読んでもらえるwebデザインを始める際に、何の誰に向けてのものなのか、左右幅どのくらいのサイズでサイドバー1つにするのか2つにするのか、などをトータルで検討しているうちに、あれこれ数値が出て来ます。webデザイン的にはその数値はpx(pixel)で表します。

先ほども述べた通り、webの閲覧はモニター（ディスプレイ）でします。中にはプリントして読まれる方もいらっしゃいまして、かつてはプリントもすることを前提にサイトの左右幅を640pxあたり（A4縦で入るかな！？）にして左寄せにしていた時代もありました。現在ではそんなことはもうなくって、当時のそうした作りのものはそもそもシステムに合わなくなって表示エラーとなってしまうことを受けてリニューアルされて今日に至るか、役目を終えて閉鎖されたかでしょう。

モニターの型も4:3の比率のものから16:9のものがホトンドになり、4:3のものを見るとずいぶん狭い画角で見てたんだなぁと思ったりします。そんなモニターの画角の変化に合わせて、webデザインの左右幅も900px、1,000px近いものも普通になってます。

appleあたりはgmenu左右幅で980pxくらいか…

では、今日びwebの左右幅ってどのくらいで作ったらいいのか！？って思うわけです。それと同時にwebってデスクトップPCやノートパソコンだけで閲覧される時代ではないので、スマホやタブレットでも見られるということを考えると、唸ります。最もそんな各端末にwebを最適化させるため、レスポンシブデザインと言われるタイプの解決策もあります。PC用のwebデザインすれば自動的に各端末に対応した表示ができるテンプレートなども出ています。

画面解像度、というかアスペクト比のバリエーションとしてはこんなにある。wikiより拝借。

と、これを見て後はがんばれと言われても、何を基準にどうしたらいいかと、途方に暮れます。

ググってみたら『2013年も日本で使用率の高い解像度は「ワイド型（横幅1366px）』という記事があった。