ホームページの幅はなぜ重要なのか？最新のデータから適切な幅を設定しよう

ホームページ制作

2020.11.30

「ホームページの幅はどのように設定すれば良いのだろうか？適切な設定値は？」

ホームページを設計していく上で、もしくはホームページのデザインについて考え直した時に、このように考えたことはないでしょうか。

一度決めてしまった幅であっても、Webデザインのトレンドはユーザーの変化に伴って急速に変化しており、その変化に追随することも時には必要です。

そこでこの記事では、ホームページの幅の重要性や、最新のデータをもとに自社に合った適切な幅を設定するための情報を紹介します。

ぜひ参考にしていただき、最適なホームページの幅を設定してください。

弊社では、BtoB企業専門のWEB サイト制作サービスを提供しております。「サイトからお問い合わせやコンバージョンを創出したい」とお考えの方、ご参照ください。

ホームページの幅とは？

まずは基礎知識から解説していきます。

一般的にホームページの幅は「1000px」などと表されますが、この「px」とは何でしょうか。pxを含め、ホームページの幅の表し方について理解するためには、以下を押さえなければなりません。

● 画素数（px）

● 解像度（dpi）

それぞれ解説します。

ホームページの幅は画素数（px）で表す

ホームページの幅は、画素数（px）で表します。なぜ「センチメートル（cm）」など長さの単位で表さないのかというと、ホームページの幅は「デジタルな表現」だからです。

たとえばテレビや電光掲示板などもデジタルな表現です。電光掲示板をイメージするとわかりやすいかもしれません。下の画像では、「i」という表現をするためにいくつかの「点」で表現されています。

仮にこの点の数が「100個」なら、画素数は「100px」と表されます。

46図1.png

画像引用元：https://www.shutterstock.com/ja/image-illustration/enlarged-photo-letters-on-lcd-screen-1329038042

46図2.png

画像引用元：https://ylb.jp/2017b/jouhou/04digital.pdf

通常、画素数は「1000×754ピクセル」のように「幅（横）の画素数と長さ（縦）の画素数」で表されますが、本記事のテーマは「横幅」ですので「1000ピクセル」または「1000px」などと表します。

解像度（dpi）とは

46図3.png

画像引用元：https://lpeg.info/html/dpi.html

画素数とあわせて押さえておきたいものが「解像度（dpi）」です。たとえば「100dpi」であれば、その意味は「1インチ（約2.54cm）あたりに100画素含まれている）」ということです。

つまり「1インチあたりに含まれる画素数」のことで、この解像度が高ければ高いほど「鮮やかな表現が可能」です。

画素数（px）と解像度（dpi）がわかれば画像の長さも計算できます。少し極端な例ですが、次に計算例を示します。

1. 横幅の画素数は「1000px」

2. 解像度は「100dpi」

3. 100dpiとは1インチあたり100pxなので、1000pxは10インチで表されている

4. 1インチは約2.54cmなので、10インチは約25.4cm

5. 横幅1000pxの画像は解像度100dpiなら約25.4cm

ちなみに、Webページに使用する画像の解像度は、一般的に72dpiです。

なぜ適切な横幅を設定することが重要なのか

ホームページの横幅を適切に設定することの重要性について解説します。

スマートフォンの普及によりレスポンシブデザインが求められている

多くの人がPCではなくスマートフォンでホームページを閲覧します。PCのモニターサイズ（解像度）とスマートフォンのモニターサイズは大きく異なり、どのデバイスでも見やすいホームページを目指さなければなりません。

どのデバイスでも見やすいホームページデザインのことを、「レスポンシブデザイン」と呼んでいます。

検索エンジン大手のGoogleは、2015年4月に「モバイルフレンドリーアップデート」と称するアップデートを開始しました。

これにより、モバイル版の検索結果では、モバイルフレンドリーなページの掲載順位が引き上げられ、検索ユーザーは、小さなスクリーン上でも読みやすい、高品質で関連性の高い検索結果をより簡単に見つけることができるようになります。こういったページには、タップやズームなどをしなくてもテキストが読みやすい、タップターゲットの間隔が適切、再生できないコンテンツが含まれていない、横方向へのスクロールが発生しない、などの特徴があります。

引用元：https://webmaster-ja.googleblog.com/2015/04/rolling-out-mobile-friendly-update.html

このことからわかるように、モバイルユーザーにも利用しやすいレスポンシブデザインでない場合、検索上位表示は難しくなりました。

また、先ほどのGoogle ウェブマスター向け公式ブログの記述にあるとおり、レスポンシブデザインでないと「横方向へのスクロールが発生する」などユーザビリティが悪くなってしまいます。

このように、SEOの面からもユーザビリティの面からもホームページの横幅設定は重要なのです。