タグ: "grid"

Web デザインの基準| 企業サイトの横幅は何ピクセル?



Webサイトを作るときにまず悩む事といえば「サイトの横幅」だと思います。
今の主流は、900px〜960pxが多いのではないでしょうか。

はてなの人力検索で
デザインの優れていると思う企業サイトを教えてください。これぞ企業サイトと思えるようなカチっとしたデザインで、情報がきちんと整理されているものが知りたいです。
という投稿があったので、参考にしました。
データは2008年のものでしたが、なかなか面白そうなので、まとめてみました。(計測できなかったものや、FULL FLASHなどは、いくつか抜いています。)



村田製作所:954px
KDDI:978px
OMRON Industrial Automation:990px
住友電工:760px
BLD:910px
McKinsey & Company:759px
シンフォニーマーケティング株式会社:850px
日産自動車:900px
TOTO:950px
トンボ鉛筆:870px
株式会社サイブリッジ:948px
旭化成:750px
ユニチカ株式会社:920px
帝人:780px
日本メナード化粧品株式会社:750px
三菱電機:631px
株式会社ダルトン:750px
モリマーエスエスピー株式会社:900px
株式会社光波:814px
新日本石油:955px
サッポロビール:780px
任天堂:658px
京セラ:780px
マツダ:780px
パナソニック:991px
UNIQLO:991px
IBM:930px
フィリップス:960px
ヤマハ:892px
サンマイクロシステムズ:957px
資生堂:940px
ニコン:960px
デル:960px
ボルボ:960px




全ての平均値、900.705882…という結果でした。
結論、良いと思うサイトでの計算で切り捨てですが、「900pxが平均値」という結論に至りました。
まぁもちろん、サイトの方針等で変える必要がありますが、企業サイトでは、「900px」が適当であるということですね。

最後に参考までに、ディスプレイの解像度の種類を。
名称 解像度(横×縦)
QVGA(Quarter-VGA) 320×240
CGA 640×240
VGA 640×480
SVGA 800×600
XGA 1024×768
SXGA(Super-XGA) 1280×1024
SXGA+ 1400×1050
UXGA(Ultra-XGA) 1600×1200
QXGA(Quad-XGA) 2048×1536
QUXGA(Quad-Ultra-XGA) 3200×2400
QUXGA Wide 3840×2400
それでは。

Popularity: 57% [?]

ウェブデザインの新基準?|Grid System Design – 950px -

950pxのGrid System Design

以前の衝動的な記事はこちら

さて。
以前は衝動的であったので、ちゃんと説明しようと思います。

元々、960pxのGrid System Designがなぜ採用されているのか。
それは「960」と言う数字が、2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480で割り切れることを利用しているからなのです。

しかし、この950pxのGrid System Designは、

1.containerを960px + padding-left:10pxに指定
2.margin-leftを10pxに指定し、60pxごとに12カラム分作成


しているわけなのです。
1カラム = (60px + margin-right:10px)で12カラム分。

ブログデザインには、
3カラム=2カラム + 8カラム + 2カラム

です。


あれ ?「containerの幅が960px」やん。


ーー代わりまして、とあるデザイナーの解説ーー

何故950pxで作るのにcontainerの幅を960pxにするかというと、それを一言でいうならば

「margin-right:10pxのためです。」


例えばリストタグを使用する際に普通に記述するならば最後のリストのmargin-rightを0にリセットしてカラム落ちを防ぎますよね。
しかしこれは汎用性がなくスマートではない。
そこで予め最後のmargin-right:10px分を余計に取っておくことで最後のカラムをわざわざリセットしなくていいわけです。

ーー以上。解説終了ーー



お分かりいただけましたでしょうか。
こちらにファイルがございますので、いつでもお気軽にご使用くださいね^^

Popularity: 24% [?]

950pxのGrid System Design

950pxのGrid System Design

グリッドシステムデザインは本当に便利。

紙媒体でも、WEBデザインをする上でも、悩みどころはたくさんあると思います。
ただ、僕が一番悩むのは、そう。カラム分け。
どーしてもデザインが崩れたり、またワケのわからない仕組みになることも多々ありました。


何よりもまず!
「箱が決まってないから、入れるものの大きさも分からない。」
コレです。


しかし、グリッドシステムを知った途端、デザインの幅とその効率化は驚くほどスピーディになりました。


「ん??効率はわかるが、なぜデザイン??」
そうです。
そこなのです。
つまり・・・



カラム分けを考える時間よりも、デザインを考える時間が増えた!



と、いうことなのです。

それでは、早速検索しよう!


・・・「960px」のものしか出てこない。。
つまりは、この箱の中に入れるものしかできないのか・・・。


と、思っていたのですが、作りました!
950pxのグリッドデザインシステム」です!


Grid System Design 950pxです。

fireworksでデザインをされている方には、重宝されるかと思います。
なんと、950pxのデザインです。



「他に作っている人いるのでは?」
そう思った方。
検索してみてください。



では、なぜ960pxより950pxの方が良いか、ということですが・・・

IEをお使いの方が多い、このご時世。
基本は、デフォルトで左サイドにお気に入りを開きながらサイトを閲覧する人が多いですよね、おそらく。
もちろん、その横幅は使用者の任意で変える事が出来ますが、デフォルトの値で考えると、960pxより950pxの方が良いのです。
それは、yahooが950pxを採用しているのと同じ理由です。



なので、そういったモニター幅とブラウザユーザーを考えての制作をしなければならない。
もちろん、スピードも必要。
でも、デザインの向上は不可欠。

それを兼ね備えたのが、950pxのグリッドシステムデザインではないでしょうか。

Related Posts Plugin for WordPress, Blogger...

Popularity: 39% [?]