Webサイト制作に適切なサイズ幅は？制作会社が詳しく解説します。

「Webサイトの横幅ってどうやって決めればいいんだろう」
「サイズの相場ってあるの？」
「そもそも横幅のサイズってそんなに重要なの？」

Webサイトのデザインを制作するとき、横幅をどれぐらいで設定すればいいのか迷ってしまいませんか？

現在パソコンやタブレット、スマートフォンといった様々な端末が使われており、Webサイト制作の際にはどの端末からでもきれいに表示される必要があります。
端末にも種類がありすぎて、結局どのサイズでデザインしたらいいのかわからず困っている方も多いのではないでしょうか。

そんな方のために、この記事では

2021年のおすすめ横幅サイズ
Webサイトのサイズについての基礎知識
ブラウザサイズのシェアについて
文字にまつわるサイズの話

をご紹介します。

ぜひ最後までご覧いただき、サイズに迷うことなく、素敵なサイトを制作してください！

2021年版！おすすめのWebサイトの横幅サイズ

パソコンとスマートフォンにおける、Webサイトのデザイン制作におすすめのコンテンツ幅をご紹介します。

パソコンの場合

パソコンでのコンテンツ幅
1000px〜1200px程度

スマートフォンの場合

スマートフォンでのコンテンツ幅

通常：375px
Ratina：750px

（※Ratinaについては、のちほど解説します）

Webサイトにおいて、最適な横幅サイズはさまざまな理由によって変化していくものです。
なぜこのサイズがおすすめなのか、どのような理由で変化していくのかについて、次の章からご説明します。

そもそもWebサイトのサイズとは

Webサイトの横幅やサイズとは、コンテンツ幅のことをいいます。
コンテンツとはサイトの中身が詰まった部分であり、Webサイトにとって重要なエリアです。

Webサイトの目的を達成するためには、コンテンツの中身がユーザーに伝わりやすいようにレイアウト・デザインする必要があります。
そのため、まずコンテンツ幅を適切に設定することが大切です。

ブラウザサイズとコンテンツサイズの関係

ブラウザサイズとコンテンツサイズは混同しやすいため、整理しておきましょう。

サイズ名	詳細
ブラウザサイズ	ブラウザにおける表示エリアの大きさ
コンテンツサイズ	サイトの中身を詰め込むエリアの大きさ

ブラウザサイズとは、Webサイトを見る際に使うブラウザにおける表示エリアの大きさのことです。

ブラウザを表示しているウィンドウサイズは、パソコン上で自在に変更できます。そのため、必ずしもパソコンの横幅と同じサイズというわけではありません。

一方コンテンツサイズとは、Webサイトの中身を詰め込むエリアの大きさのことです。
サイトの情報が届きやすいように、ブラウザの中で最適なコンテンツサイズを設定します。

たとえば大型のパソコンで横幅が非常に広い場合、ブラウザ横幅いっぱいにコンテンツを広げると間延びしてしまい、読み取りづらくなる可能性があります。

コンテンツ幅の最大値を設定し、ブラウザサイズがそれよりも大きい場合は左右に余白を入れ、コンテンツの読みやすさを確保しましょう。

レスポンシブデザイン

スマートフォン利用者の増加とともに、どのデバイスから見てもWebサイトが最適な状態で見られるレスポンシブデザインへの対応は、必須です。

SEOサービスを提供しているドイツ企業SISTRIX（シストリックス）の調査によると2021年現在、日本では全検索の約75%がスマートフォンによる検索であるという結果が出ています。

➡️モバイル検索の割合

「7割以上がスマホから閲覧される」ことを意識して、サイトのデザインを設計することをオススメします。

ブラウザサイズのシェア

ブラウザサイズのシェアは、コンテンツ幅の決定に大きな影響を与えます。
新たな技術や端末の登場といった変化に伴い、ブラウザサイズのシェアは変化するものです。

ブラウザサイズのシェアの変化と共に、コンテンツ幅も変化していきます。
ここでは2021年5月現在のブラウザサイズのシェアについてご紹介します。

パソコンのブラウザ

アイルランド企業が全世界に提供しているStatCounterというアクセス解析サービスの調査結果によると、パソコンのブラウザのシェアは以下のようになっています。

1位：1920×1080
2位：1366×768
3位：1536×864

➡️日本におけるデスクトップのブラウザシェア 2021/05

この結果から、シェアが高いのは横幅の広いワイドタイプのデスクトップと考えられます。

スマートフォンのブラウザ

同調査結果によると、スマートフォンのブラウザシェアは以下のような結果です。

1位：375×667
2位：414×896
3位：375×812

➡️日本におけるスマートフォンのブラウザシェア 2021/05

「おすすめなWebサイトの横幅サイズ」でご紹介した375pxは、スマートフォン全体の約36％を締めています。
また上位サイズはiPhoneに多いディスプレイサイズとなり、シェア4位の360×640のみがAndroid端末（XPERIA）だと推測されます。※

この結果からスマートフォンにおいて、iPhoneの需要は非常に高いと考えられるでしょう。
つまりWebサイトを制作する際には、iPhoneで快適に閲覧できることを意識する必要があります。

iPhoneには解像度が高く非常に鮮明な画像を表示する、Retina Display(レティーナディスプレイ)という技術を搭載しています。

Retina対応のデザインを作る場合、ディスプレイサイズの2〜3倍となる画像サイズが必要です。※
375px幅を基準とする場合は、Ratina対応として2倍の750px幅のデザインを作成します。

ただし、Ratinaによるサイズの考慮が必要かどうかは制作現場によって異なりますのでご注意ください。

※参考データ
iPhone/iPad/Apple Watch解像度(画面サイズ)早見表
 スマホ・タブレットの解像度一覧表

コンテンツ幅だけでなく文字サイズ・文字数にも配慮を

Webサイトは中身の情報を伝えることが重要な目的です。
文字を読み取りやすく情報が伝わりやすくするために、最適なサイズがあります。

文字サイズの目安は12~16px

Webサイトで表示する文字サイズは、10px以上が推奨されています。
Google Chromeはブラウザの仕様により、文字サイズは10px以下にはなりません。

一般的に本文には12px〜16pxが使われています。

文字が小さすぎると読み取りにくくユーザーにとってストレスになるため、ターゲット層に合わせた読みやすいサイズを設定しましょう。

読みやすい文字数は15~35文字程度

ストレスなく読みやすいと感じる文字数は、横並びに15〜35文字程度といわれます。

横に並ぶ文字数が多いと、視線の移動距離が長くなり疲労を感じてしまいます。
文字を読みやすくするため、文章のエリアが横に広がりすぎないようにデザインしましょう。

最適なサイズはサイトの目的や時代によって変化するもの

Webサイトの横幅サイズに正解はなく、最適なサイズはサイトの目的や時代によって異なります。
今後また新たな人気端末が発売されてシェアが拡大すれば、また大きく変化するでしょう。

サイトのターゲット層がよく使うブラウザをリサーチし、サイズ決定の参考にしましょう。
それでもどうしても決められないという場合は、競合サイトのサイズを参考にしてみてください。

ユーザーにきちんと情報を伝えるためにも、あなたのWebサイトに最適なサイズを設定しましょう！

ランディングページをマスターして、営業0で勝手に商品が売れる状態を目指しませんか？

自分の商品を売ろうとしている私達には、ランディングページ(LP)の知識は必須。

LPが微妙だと、あなたの商品がどんなに素晴らしいものであっても売れず、ビジネスを続けることができなくなってしまいます。

このコースでは、1000文字程度のLPを10万円で複数受注したことがあり、稼働中のオプトインページの登録率67.83%、フロント商品セールスページの成約率20.63%のじゃぱそんから