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

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

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

WebサイトのWidth（横幅）の定義

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

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

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

しかし、Webサイトの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サイトもレスポンシブデザインです。

• https://www.serendec.co.jp/wp/

UA切替

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

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

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

• PCサイト：http://kakaku.com/
• SPサイト：http://s.kakaku.com/

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

WebサイトのWidth（横幅）の調査結果

調査対象：63サイト

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

本文とサイドバーのWidth（横幅）

PCサイト Widthの調査結果

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

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

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

業界ごとの調査結果

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

■広告代理店

■自動車

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

■不動産・金融

■飲食

■ECサイト・家電

■電車・公共

■百貨店・サービス業

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

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

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

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

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

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

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

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

業界ごとの調査結果

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

■広告代理店

■自動車

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

■不動産・金融

■飲食

■ECサイト・家電

■電車・公共

■百貨店・サービス業

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

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

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

WebサイトのWidthの調べ方

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

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

Google Chrome　ウェブストア

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

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

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

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

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

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

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

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

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

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

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

• PC：950px～1100px
• SP：700px～800px

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

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

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

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

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