BLOG

BLOG


IT導入補助金 バナー

「IT導入補助金」を活用してWebサイト制作・業務効率化しませんか?

IT導入補助金 バナー

「IT導入補助金」を活用してWebサイト制作・業務効率化しませんか?


WebサイトのWidth(横幅)について ~業界毎の主要webサイト調査結果~

Webサイト Width

Web業界、Web制作技術、Webデザインのトレンド変わるスピードは早いです。
Web業界では常に新しい情報が飛び交い、それを使用するかしないかによってユーザーへの訴求にも変化が出るため、常に新しい情報に適応していくことが大切です。

今回はそんなWeb制作のトレンドに関して、「レイアウトのWidth(横幅)」に絞ってご紹介します。

Webサイトを作成するときに、レイアウトのWidthを設定するのに悩んだ経験がある方も多いのではないでしょうか。
最近のWebサイトレイアウトのWidthを調査し、どのくらいの幅に設定するのが良いのか考えてみました。

WebサイトのWidth(横幅)の定義

Widthとは、Webサイトを作成する際に設定する要素の横幅のことを言います。
画像やタグなどあらゆるものの横幅を「Width」で設定します。

今回は、Webサイトの表示ページのWidthについて調査しました。

Webサイト作成の際、何も設定しない状態ですとWidthは基本的には「auto(自動)」の設定になるため、画面のサイズに合わせて横いっぱいに広がります。

しかし、WebサイトのWidthが広すぎる場合、ユーザーが使用している画面サイズによっては横スクロールが必要になることでとても見にくくなり、不便さにつながります。
したがって、より適切なサイズに設定する必要があります。

このときWidthとして設定するのはレイアウト全体の設定は本文とサイドバーの横幅が対象です。
ヘッダーやフッターは、画面のサイズに合わせて表示する場合が多いため設定をしなくても良いでしょう。


Width スタイル全体

サイト全体のWidth(横幅)


WebサイトのWidth(横幅)をCSS(スタイルシート)で設定する方法

実際にレイアウト全体の横幅をCSS(スタイルシート)で設定する場合は、以下のように記載します。

#site-box { Width : 750px ; }

本文とサイドバーをそれぞれ設定することもできます。


WebサイトのWidthデザインの種類

WebサイトのWidthについて、設定は「レスポンシブデザイン」と「UA(ユーザーエージェント)切替」の2種類に分類できます。

レスポンシブデザイン

レスポンシブデザインは、RWD(Responsive Web Design)と略されたりもします。

レスポンシブデザインとは、ユーザーのPC(パソコン)、タブレット、スマートフォン、非視覚的ブラウザに関係なく、同じURLで同じHTMLコードで、それぞれの画面サイズに応じて表示を変えることを言います。
つまり、URLはPC、SP(スマートフォン)、タブレットで同じURLですが、それぞれ似合った画面サイズを設定します。

弊社のWebサイトもレスポンシブデザインです。

UA切替

UA切替のUAとは、ユーザーエージェント(User agent)の略です。

利用している OS(WindowsかMac OS)やスマートフォンなどの情報から、利用しているデバイスに応じてURLを切り替えて表示をすることを言います。

たとえば、「価格.COM」で見てみると、

このように、ユーザーがアクセスするデバイスによって違うURLで表示することで、それぞれのデバイスに最適な表示をします。


WebサイトのWidth(横幅)の調査結果

調査対象:63サイト

今回の調査では、レイアウト全体のWidthを対象としています。


Width 本文とサイドバー

本文とサイドバーのWidth(横幅)


PCサイト Widthの調査結果

 PX数ポータルサイト
Web系メディア
ソーシャルメディア
広告代理店自動車メディア
女性メディア
不動産
金融
飲食ECサイト
家電
電車
公共
百貨店
サービス業
 701資生堂
 748Instagram
 910三井不動産
 919帝国ホテル
 920キャノン
 931JR東日本
 939外務省
 940ユニクロ
 945野村證券ぐるなび
 948DHC
 950Yahoo!SUUMOホットペッパー
 960大和証券東芝
 965日立製作所
 970ITmedia
 980facebook現代ビジネス
 990R25
 995高島屋
 1,000東洋経済
LEEマルシェ
アットホーム伊勢丹
 1,010NAVERまとめLIFULL HOME’S
住友不動産
 1,020オリエンタルランド
 1,025ニコニコ動画カネボウ化粧品
 1,035価格.com
 1,050小田急電鉄
 1,060All About
 1,080ferretダイヤモンド・オンライン
 1,100東急電鉄
 1,120食べログ
 1,137Retty
 1,160トヨタ自動車
 1,170日産自動車パークハイアットホテル
 1,185BMW三菱UFJ銀行
 1,200Panasonic
SONY
 1,220みずほ銀行
 1,270msn
 1,275国土交通省
 1,288ニトリ
 1,300博報堂
 1,340楽天
 1,355メルセデス・
ベンツ
 1,375Twitter
 1,400電通
 1,440大広
 1,465Amazon
 フルサイズYouTubeヨドバシカメラ
アスクル
無印良品
京王百貨店
 PX数ポータルサイト
Web系メディア
ソーシャルメディア
広告代理店自動車メディア
女性メディア
不動産
金融
飲食ECサイト
家電
電車
公共
百貨店
サービス業

※「どの幅でも対応可」は、おそらく解像度に合わせた「auto(自動)」設定になっているものです。
画面にあわせて表示されるため、ユーザーが自分でサイズ感を調整することができます。

調査結果を50pxごとでまとめてみると「1,000px~1,050px」が多いことがわかります。


PC Width調査結果グラフ


全体的には「1,000px~1,050px」が多いことが読み取れましたが、Widthの設定はWebサイトでアピールする商品によって変わってきます。
業界によってWidthの設定にどのような傾向があるか見ていきましょう。

業界ごとの調査結果

■ポータルサイト・Web系メディア・ソーシャルメディア


 PX数ポータルサイトWeb系メディアソーシャルメディア
 748Instagram
 950Yahoo!
 980facebook
 990R25
 1,010NAVERまとめ
 1,025ニコニコ動画
 1,035価格.com
 1,060All About
 1,080ferret
 1,270msn
 1,375Twitter
 フルサイズYouTube

■広告代理店


 PX数広告代理店
 1,300博報堂
 1,400電通
 1,440大広

■自動車


 PX数自動車
 1,160トヨタ自動車
 1,170日産自動車
 1,185BMW
 1,355メルセデス・
ベンツ

■メディア・女性メディア


 PX数メディア女性メディア
 701資生堂
 948DHC
 970ITmedia
 980現代ビジネス
 1,000東洋経済LEEマルシェ
 1,025カネボウ化粧品
 1,080ダイヤモンド・オンライン

■不動産・金融


 PX数不動産金融
 910三井不動産
 945野村證券
 950SUUMO
 960大和証券
 1,000アットホーム
 1,010LIFULL HOME’S
住友不動産
 1,184三菱UFJ銀行
 1,220みずほ銀行

■飲食


 PX数飲食
 945ぐるなび
 950ホットペッパー
 1,120食べログ
 1,137Retty

■ECサイト・家電


 PX数ECサイト家電
 920キャノン
 940ユニクロ
 960東芝
 965日立製作所
 1,200Panasonic
SONY
 1,288ニトリ
 1,340楽天
 1,465Amazon
 フルサイズ無印良品
アスクル
ヨドバシカメラ

■電車・公共


 PX数電車公共
 931JR東日本
 939外務省
 1,050小田急電鉄
 1,100東急電鉄
 1,275国土交通省

■百貨店・サービス業


 PX数百貨店サービス業
 919帝国ホテル
 995高島屋
 1,000伊勢丹
 1,020オリエンタルランド
 1,170パークハイアットホテル
 フルサイズ京王百貨店

広告代理店やECサイトは見やすさユーザーの使いやすさからか、1,300~1,440pxとかなり大きめでした。

自動車も比較的大きめで1,100px以上であることが多いようです。

最近のパソコンのディスプレイはかなり大きくなってきており、ワイド型のディスプレイを使用している人も増えています。
1000px以下の解像度のディスプレイがが少ないことが関係しているのかもしれません。

その他、PCの場合はWebサイトを見ながら他の作業をするなどで、複数のウィンドウを開く可能性があるためあまり大きくしすぎると使いづらくなる可能性があります。

SP(スマートフォン)サイト Widthの調査結果

 PX数ポータルサイト
Web系メディア
ソーシャルメディア
広告代理店自動車メディア
女性メディア
不動産
金融
飲食ECサイト
家電
電車
公共
百貨店
サービス業
 411Yahoo!
 600ニトリ
 640SONY
 736小田急電鉄
 750東芝
 767トヨタ自動車
メルセデス・
ベンツ
三井不動産
大和証券
みずほ銀行
オリエンタルランド
 768ferret野村證券無印良品国土交通省
 797日立製作所
 799Twitter
 959日産自動車
 979Panasonic
 980博報堂
 991住友不動産
 1,000R25
 1,024大広BMWカネボウ化粧品
 どの幅でも対応可Instagram
facebook
ニコニコ動画
msn
YouTube
電通三菱UFJ銀行Retty
ホットペッパー
楽天
Amazon
ヨドバシカメラ
アスクル
JR東日本
東急電鉄
高島屋
パークハイアットホテル
京王百貨店
 UA切り替え(*1)NAVERまとめ
価格.com
All About
資生堂
DHC
ITmedia
現代ビジネス
東洋経済
ダイヤモンド
オンライン
SUUMO
アットホーム
LIFULL HOME’S
ぐるなび
食べログ
キャノン
ユニクロ
外務省帝国ホテル
伊勢丹
 PX数ポータルサイト
Web系メディア
ソーシャルメディア
広告代理店自動車メディア
女性メディア
不動産
金融
飲食ECサイト
家電
電車
公共
百貨店
サービス業

(*1)SP(スマートフォン)用のURLがあるため、ユーザーの機器に合わせて表示されるUA切り替え(*1)となっています。

※「どの幅でも対応可」は、おそらく解像度に合わせた「auto(自動)」設定になっているフルサイズデザインとよばれるものです。

SPではフルサイズデザインが多く見受けられます。
100pxごとでまとめてみるとフルサイズデザインを省くと「700px~800px」が多いことがわかります。


SP Width調査結果グラフ


業界ごとの調査結果

■ポータルサイト・Web系メディア・ソーシャルメディア


 PX数ポータルサイトWeb系メディアソーシャルメディア
 411Yahoo!
 768ferret
 799Twitter
 1,000R25
 どの幅でも対応可msn
ニコニコ動画Instagram
facebook
YouTube
 UA切り替え(*1)NAVERまとめ
価格.com
All About

■広告代理店


 PX数広告代理店
 980博報堂
 1,024大広
 どの幅でも対応可電通

■自動車


 PX数自動車
 767トヨタ自動車
メルセデス・
ベンツ
 959日産自動車
 1,024BMW

■メディア・女性メディア


 PX数メディア女性メディア
 1,024カネボウ化粧品
 UA切り替え(*1)資生堂
DHC
ITmedia
現代ビジネス
東洋経済
ダイヤモンド・オンライン

■不動産・金融


 PX数不動産金融
 767三井不動産
大和証券
みずほ銀行
 768野村證券
 991住友不動産
 どの幅でも対応可三菱UFJ銀行
 UA切り替え(*1)SUUMO
アットホーム
LIFULL HOME’S

■飲食


 PX数飲食
 どの幅でも対応可Retty
ホットペッパー
 UA切り替え(*1)ぐるなび
食べログ

■ECサイト・家電


 PX数ECサイト家電
 640SONY
 750東芝
 768無印良品
 797日立製作所
 979Panasonic
 どの幅でも対応可楽天
Amazon
ヨドバシカメラ
アスクル
 UA切り替え(*1)ユニクロキャノン

■電車・公共


 PX数電車公共
 736小田急電鉄
 768国土交通省
 どの幅でも対応可JR東日本
東急電鉄
 UA切り替え(*1)外務省

■百貨店・サービス業


 PX数百貨店サービス業
 767オリエンタルランド
 どの幅でも対応可高島屋
京王百貨店
パークハイアットホテル
 UA切り替え(*1)伊勢丹帝国ホテル

SPではフルサイズデザインが多い理由としては、スマートフォンやタブレットのサイズが様々であることが第一に挙げられると思います。

また、SPではスマートフォンの機種のサイズに合わせてWebサイトを作ればいいと考えがちですが、「Retinaディスプレイに対応」という注意点があります。
Retinaディスプレイの場合は、ディスプレイのサイズでWebサイトを作りと画像が荒くなります。この対策として、ディスプレイの倍のサイズでWebサイトを作る必要があります。

たとえば、iphone7であればディスプレイは375pxなので、その倍の750pxで作成するとiphone7のブラウザできれいに表示されます。

新しい機種が出てきても、このような考え方で設定すれば見やすいWebサイト作成できるのではないでしょうか。


WebサイトのWidthの調べ方

他のWebサイトのWidth を簡単に調べる方法があります。

Google Chromeのアドオン(拡張機能)である「Page Ruler」を使います。


Google Chrome ウェブストア

https://chrome.google.com/webstore/category/extensions?hl=ja

左上の「ストアを検索」に「Page Ruler」を入力し、出てきた機能の右端の「Chromeに追加」で、追加することができます。


Google Chrome 拡張機能追加方法


追加後はChromeの右上に、定規のアイコンが表示されます。


pageruler アイコン


確認したいページを表示した状態で、定規のアイコンをクリックすると、カーソルが十字になります。

カーソルを測りたいところから測り終わりまでをドラッグします。


Google Chrome Page Ruler使い方


ブラウザ上部に測ったサイズが表示されます。

この時、画面のサイズを「100%」など、統一しておきます。

画面サイズが違うと、数値も変わってしまいます。

レイアウトのサイズだけでなく、画像やバナーのサイズも図ることができるので便利です。


結局、Width(横幅)はどのくらいにするべきか

デザインやレスポンシブにもよりますが、悩んだら基本的に

  • PC:950px~1100px
  • SP:700px~800px

にしておくことがよさそうです。

商品をより多く見せたいECサイトなどは少し広めでもよいかもしれません。
Webサイトのデザインは正解がないため、試行錯誤していくことが必要です。

小さすぎると伝えたい情報が見にくいですし、大きすぎても横スクロールが必要になりユーザーの不便につながります。

見やすさと使いやすさを考えて、標準範囲内で設定することをお勧めします。

最終的には自分がそのWebサイトに合っていると思うものを選ぶのが好ましいでしょう。



一覧に戻る

TO PAGE TOP

close