23
Aug
Aug
WEBサイトの横幅は何ピクセルが適当ですか?
[ movie : UI : webサイトデザイン : webデザイン ]
閲覧しているブラウザやデバイス、環境などによってどのくらいの横幅、縦幅でサイトを構成するのが適当なのかというのを事例を調べてみました。スマートフォンやiPad的なものが今後増えていくなかで、各デバイス向けにインターフェイスを揃えるというのも方法的にはありなような気がしますが、iPadでもFLASHがなければ不便なく閲覧できてしまいますので、FLASHなしのサイトにすればいいのかなと言う感じでしょうか?
リストアップしたメジャーサイト
ここにリストアップしたサイトはalexaとgoogle ad plannerでアクセス数上位のサイトから選んでみてみました。
結論からいうと、950px前後から980PX程度が現在の主流のようではあります。ユーザービリティ的には可変デザインの方が見ているユーザーの閲覧環境にフィットするので良さそうな感じですが、可変するデザインを採用しているサイトは多くはありませんでした。また海外のサイトの方が横幅がやや大きいというサイトが多いという印象も受けました。日本国内で閲覧している環境と海外での閲覧環境が異なることからなのか、それとも言語の表示についての流れなのかは不明ですが、興味深いです。
ポータルサイト(日本)
- Yahoo! Japan 948PX
- fc2.com 900PX
- Youtube.com 960PX
- アメブロ 900PX
- 楽天市場 950PX
- livedoor 950PX
- wikipedia 可変
- mixi 945PX
- goo 970PX
- Amazon Japan980PX 〜可変
- MSN 974PX
- @nifty 945PX
ポータルサイト(国外/英語圏)
- facebook 980PX ~可変
- Yahoo! 975PX ~可変
- amazon.com 985PX ~可変
- twitter 950PX
- craigslist.org 830PX
- ebay 930PX windowslive
- MSN.com 968PX
- myspace 960PX
- aol 975PX
- linkedin 980PX
- cnn 980PX
コーポレイトサイト(日本)
サイトのブランド価値の上位企業から- 全日空 951PX
- パナソニック 984PX
- NTT DOCOMO 905PX
- JR東海 790PX
- TOYOTA自動車 980PX
- 本田技研 710PX
- JTB 970PX
- JR東日本 762PX
- JAL 950PX
- ベネッセ 950PX
コーポレイトサイト(国外/英語圏)
- coca cola 970PX
- IBM 930PX
- microsoft 935PX
- GE 820PX
- NOKIA 758PX
- McDonalds 985PX
- intel 995PX
- disney 995PX
- hp 975PX
- Mercedes-Benz 1000PX
- Gillet US 950PX
- apple 980PX
ECサイト(日本)
ECサイト(国外/英語圏)
Art Directors Toolkitとは?
横幅を計ったのはcssとかHTMLで確認したんではなくって、art director toolkitという以前にmacbookを買ったときについてきたアプリケーションを使いました。測ったのはコンテンツが入っている幅で左右のマージンとかは基本的には計測の範囲外にしてます。
モニターに映った色、サイズ、なんかを測れたり登録したりできるツール。結構便利。





コメントする