960pxの呪縛を解き放てば、諸々自由になれるのか

ブログの横幅、何ピクセルですか？？

おそらく最も一般的なサイズは960pxじゃないかなぁと思うんですが、別に960pxである必要はないんですよね。

たとえば、このブログ「prasm」ではどうなのかというと、

980px

で作られているわけです。

なぜ960pxなのか？

PC向けのWebデザイン案を作るとき、幅は960pxが多いのでしょうか？対象とする最低画面サイズは、今は800×600pxより、1024×768pxが多いのでしょうか？ – W3Q

実際の所どうして960pxがデファクトなのか？ってちゃんと説明できる人っていないんじゃないですかね？

もちろん、僕もちゃんと説明することは出来ません。

おそらくの話しで続ければ、最小モニターサイズの想定が1024pxだからってことでしょうね。

最小モニターサイズよりも大きな横幅でサイトやブログを構築すると、当然横スクロールが必要になりまして、横スクロールは面倒なので、ちゃんと収まるようにという趣旨で、まあ、960よね！的なノリで、みんなノリノリで960を採用しているんだろうなぁと。

例えば

アップルのサイトの場合

レスポンシブではない980pxで組まれています。

一方マイクロソフトはというと

レスポンシブで最大幅1600pxで組まれています。

どちらもPCやタブレットを発売しているメーカーのサイトで、それぞれの考え方で面白いですね。

アップルはおそらくタブレットに最適化したサイズを想定していると思います。タブレットでも綺麗に見えるように全体を構成している。

マイクロソフトはレスポンシブなので、デバイスに最適化されたブレイクポイントで対応しているんでしょうね。

ちなみにウチのモニターは1920pxです。

今時1024pxのモニターなんて、誰も使ってない？

とは、言い切れないでしょうね。

一時流行ったモバイルノートや、ネットブック的なパソコンの横幅は恐ろしく小さい訳で。

とはいえ、メインストリームではない。と、言い切ってもｲｲと思います。

ノートパソコンだとしても、最低1280pxは備えていると考えるのが妥当だと、僕は思ってます。

とはいえ、小さな方に沿わせるという発想、もしくは、あらゆるサイズに最適化するという発想自体はwebデザインをする場合、確実に必要になってきます。

リキッドデザイン

webデザインのデファクトの歴史をなぞるなら、リキッドデザインという考え方がそれにあたります。

さっくりとリキッドデザインを説明するならば、

液体のように柔軟に変わるレイアウト

ってことになるでしょうか。

CSSでレイアウトしたり、装飾する際に%で値を指定することが出来ます。

例えば、フォントのサイズ。

16pxのように絶対的な数字で指定することも可能です。76%のような相対的な数値で指定することも可能です。

例えばサイトやブログの横幅を100％で指定しておけば、どんなモニターサイズであっても最大の横幅で表示される。こういう相対的な数値で装飾しようね！が30秒でわかるリキッドデザインです。

ではリキッドデザインの限界はどこなのか

これはもうシンプルで、意図通りの表示が限りなく不可能であることがリキッドデザインの限界です。もちろんこれは大きく言えばwebデザインの限界でありおもしろみである訳ですが。

まあね、水で彫刻するのが人間には不可能なんで、必要なときに時々氷にしませんか？

ってな発想がレスポンシブ！

レスポンシブはモバイルデバイスのためのだけものではない

例えば

Smashing Magazine — For Professional Web Designers and Developers

ここなんかは明らかにパソコンモニターの広い場合と狭い場合なんかを想定したレスポンシブになっています。

レスポンシブデザインを採用すれば、それぞれデバイスサイズに応じたデザインを意図したとおりに表示させることが可能になります。

さて、今度はレスポンシブの現状の問題点はというと、本当の意味で「意図通り」に表示させるためには、なかなか強引なことをしなければならないってコトでしょうか。

例えば、WordPressでブログを組んでいる場合は、条件分岐やテンプレートの読み分けで回避できますが、PHPを利用せずに、CSSだけで装飾した場合、display:noneで消す等の、本来不要なコードを読まなければいけなくなります。

RWD（レスポンシブwebデザイン）は発展途上なので、現状は完璧ではない。と結論づけなければいけないんですけど、便利だと僕は思ってます。

テクニックと発想で、横幅問題はクリアになる

クリアにしなければいけないのか？ってところは丸っと無視して話しを勧めてきました。

ブログの横幅は別に960でもいいじゃん。まあ、そうでしょうね。もっと狭くて600pxのワンカラムでもいいじゃん。そうねそうね。好き好きね。

最近のトレンディーなwebサービス、pintarestとかGoogle+とか、横幅広めのデザインが好きな人は、横幅問題をクリアすべく、いろいろ試行錯誤してもｲｲと僕は思います。

ブロガーならではの問題としての広告のサイズって問題も、実はブログデザインには重要だしね。

って、ことで、その辺は次回にでも。

まさかの続きます、的展開。

続き書きました。

960pxグリッドシステムの崩壊はフリーダムとデザインフルの入り口なのか？*prasm_

文：シンタロヲフレッシュ

はてブ

pocket

twitter