ブログやホームページサイトの適正最適な横幅サイズ・ピクセル数は?

ブログやホームページ・サイトの適正・最適な横幅サイズは何ピクセルが良いのでしょうか?

訪問者の画面サイズはどれくらいが多い?2017年2月時点

最適な画像サイズの答えを導くために、
私の所持しているテレビ関連情報サイト(月間アクセス20万PV)の
ブログ・ホームページにアクセスしてくださった
みなさんの画面のサイズの統計トップ10を見てみましょう。

下記の画面サイズはピクセル表記で、
横幅×縦幅ですので、先頭のサイズが重要となってきます。

画面サイズ(横幅×縦幅) 割合 主な端末
375x667 35.63% iPhone6やiPhone6s
360x640 21.00% 下記参照
SamsungSC-04FやGALAXY S5 SC-04F for DoCoMo、Google Nexus 5
320x568 13.48% iPhone5やiPhone5s
1366x768 3.68% PC・タブレット
768x1024 3.57% iPad
414x736 3.38% iPhone6 PlusやiPhone6s Plus
360x592 2.13% 下記参照
Sony SO-02 Xperia Z3 CompactやSony SO-01G Xperia Z3
1920x1080 1.93% PC・タブレット
720x1280 1.75% iPad
1080x1920 1.64% PC・タブレット

こちらからわかるとおり、2017年2月現在は、まだまだ横幅が小さめの
スマホやタブレット等の携帯端末でのアクセスが圧倒的に多いようです。

スマホ対応するサイト・ブログの適正最適な横幅サイズ・ピクセル数は?

先ほどの表の、アクセス端末の解像度トップ3を見るとわかるとおり、

横幅320ピクセル以上で、375ピクセル以下のアクセスが7割

にものぼります。

スマホで最近多いのが、
・375×667・・・iPhone6やiPhone6s
・360×640・・・Google Nexus 5や、Samsung SC-04F GALAXY S5、SC-04F for DoCoMo
・320×568・・・iPhone5やiPhone5s
になりますが、

スマホ対応するならば、この横幅320ピクセルに合わせると良いでしょう。

パソコンのディスプレイの解像度としては、現在パソコンで大き目から順に、
・1920×1080(FULLHD)・・・フルHDやフルハイビジョンデジタル。DVDやレコーダーで綺麗にみられる解像度
・1600×1200(UXGA)
・1600×900(HD+)
・1280×768、1366×768、1280×800(WXGA)
・1280×1024(SXGA)
・1024×768(XGA)
・640×480(VGA)
といったものがあります。

スマホついては、バラバラです。
最近多いのが、
・375×667
・360×640
・320×568
になりますが、他にもたくさんあります。

結論から言いますと、ピクセル数を自動で変更してくれる、

レスポンシブウェブデザイン対応にするのが一番!

です。

なぜなら、アクセスの半数以上(8~9割程度)がスマホやタブレットでのアクセスとなっているからです。

現在、Googleが、スマホ対応のレスポンシブウェブデザイン対応かどうかを、
スマホの検索結果に反映しており、上位表示する一つの要素となっていますので、
できれば、レスポンシブウェブデザイン対応にしていくと良いでしょう。

パソコンからのアクセスしか必要ないサイトの場合の適正最適な横幅サイズ・ピクセル数は?

パソコンからのアクセスしか必要ないサイトの場合は、

横幅は1024ピクセル以下が良い。余裕を持たせて1000ピクセル程度が理想。

実際、大手サイトでも、パソコン表示の場合は、この1000ピクセル程度が多くなっています。
理由は、解像度1024のアクセスがいまだに、結構あるためです。

サイトによっては、情報を多く表示できるFULLHD「1920×1080ピクセル」に合わせる
方法もありますが、現状、全体の1割程度しか満足に表示できず、
レスポンシブでない場合は、横にスクロールするバーが表示され、大変見づらくなってしまいます。


レスポンシブのテンプレートやテーマを使用することで簡単に変更できます。
また、モバイルサイト用のHTMLコードを記述していく方法もありますが、
結構大変で、骨の折れる作業となります。レスポンシブ対応については、
また、別記事にて取り上げます。

サイト・ホームぺージ・ブログが、レスポンシブかどうか確認する方法

サイト・ホームぺージ・ブログが、レスポンシブかどうか確認する方法はいくつかありますが、
Googleのモバイルフレンドリーテストを使うと良いでしょう。

Googleのモバイルフレンドリーテスト1

この画面にて、調べたいサイト・ブログ・HPのアドレスを入力し、「テストを実行」を押します。

Googleのモバイルフレンドリーテスト2

青いバーが右までこればテスト完了です。

Googleのモバイルフレンドリーテスト3

モバイルフレンドリーであれば、この画面。
モバイルフレンドリーでなければ、その理由が表示されます。

スマホ対応・レスポンシブ対応しているだけで、アクセス数も全然変わってきますので、
ぜひとも対応していきましょう。

きよひこのアフィリエイト~無料メルマガ講座
年収100万円稼ぐノウハウが身に着く!
きよひこメルマガ講座登録はこちら
お名前(ニックネーム可):
メールアドレス: