自分でできる簡単更新!オリジナルのホームページ制作ならkayokiseki-design

  

2014年大手サイト制作幅

Win95の時代800*600のディスプレーの幅から始まり、2000年代の1280幅から今は1680幅を越えるものがパソコンでは主流になりました。その一方でタブレットという小型ディスプレーもある現在、いったいどれくらいの幅で制作するとよいのでしょうか。


ということで、各業界の大手サイトを覗いてみることにしました。

[広告]

まず自動車業界から2社。


日産自動車 http://www.nissan.co.jp/


min-widthを1000px、max-widthを1280pxに設定しています。メディアクエリにて @media screen and (min-width: 1281px) をautoにすることによって、若干の幅ではありますが可変させているようです。


トヨタ自動車 http://toyota.jp/


スライダーは1280pxまで見せられるようにしていますが、コンテンツは980pxに設定しています。


次は、スポーツ用品メーカーです。


プーマ http://www.puma.jp/


グローバルナビバーをトップに持っていき、100%にしています。コンテンツ幅は1081px。


アシックス http://www.asics.co.jp/


こちらもグローバルナビバーがトップにあります。bodyはmin-width980pxで作られており、wrapはすべて960pxです。


次は、アパレル2社です。


UNIQLO http://www.uniqlo.com/jp/


960pxで統一です。頻繁にサイトデザインをがらりと変えているのですが、常々感心するところがあり、その理由を後述します。


GAP http://www.gap.co.jp/


988px(990px)の設定です。


最後に、大注目の携帯会社2社です。


NTTdocomo https://www.nttdocomo.co.jp/


スライダーは100%ですが、コンテンツは877px。今回調べた中では最小幅です。


apple https://www.apple.com/jp/


min-widthを1024px、max-widthを1440pxに設定しています。少なくともappleの主流はここといえるのでしょうか。


こうしてみると、いよいよ1000pxの上、1280px以上をメインユーザとして意識して作り始めている姿勢が見えてきます。かといって1000pxも依然として離し難いのが難しいところ(これはユーザというよりは一般のサイトの制作幅がそうだからではないかというのが私の読みですが…)。

960pxで作ると両脇のスペースががらーんとさみしいので、各社の工夫が見て取れます。若干でも可変させることで対応する方法、スライダー幅やbodyの背景幅を大きくとることでスペースを埋める方法などなど。そこで前述のUNIQLOです。


UNIQLOはスクエアをデザインに用います。これは頻繁に商品を入れ替える企業ではとてもうまい工夫だと思うのですが、注目すべきは960pxで統一されているにも関わらず、両脇にさみしさを感じないところです。

思うに、背景のライトグレー#e6e6e6がちゃんとデザインのひとつとして機能している、その中で白のスクエアが洗練されて視線を集めるようになっている、ということだと思います。


背景色が白というのは清潔感がありますが、同時に何も手を加えていないようにも感じるので、開いたスペースが寂しく感じてしまいます。
これだけ制作幅に開きがある時代の一工夫として、従来のコンテンツと背景を仕切るwrapperという概念ではなく、両脇の空きスペース含めた全体で視点を計算するデザインが個人的には素敵だなぁと思っています。


特に真似をしたわけではないのですが、当サイトの背景色もライトグレー#ecececです。ブログページは960pxで作っていますが、がらーんという感じはしない気がしていますがいかがでしょうか。

[広告]

Just another WordPress.com ブログTOP SoyCMSでコピーライトを変更する
Hotentry
Blog Post
Archives
クリックして上に戻る