ブログやホームページサイトの適正最適な横幅サイズ・ピクセル数は?
ブログやホームページ・サイトの適正・最適な横幅サイズは何ピクセルが良いのでしょうか?
訪問者の画面サイズはどれくらいが多い?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を見るとわかるとおり、
にものぼります。
スマホで最近多いのが、
・375×667・・・iPhone6やiPhone6s
・360×640・・・Google Nexus 5や、Samsung SC-04F GALAXY S5、SC-04F for DoCoMo
・320×568・・・iPhone5やiPhone5s
になりますが、
パソコンのディスプレイの解像度としては、現在パソコンで大き目から順に、
・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が、スマホ対応のレスポンシブウェブデザイン対応かどうかを、
スマホの検索結果に反映しており、上位表示する一つの要素となっていますので、
できれば、レスポンシブウェブデザイン対応にしていくと良いでしょう。
パソコンからのアクセスしか必要ないサイトの場合の適正最適な横幅サイズ・ピクセル数は?
★パソコンからのアクセスしか必要ないサイトの場合は、
実際、大手サイトでも、パソコン表示の場合は、この1000ピクセル程度が多くなっています。
理由は、解像度1024のアクセスがいまだに、結構あるためです。
サイトによっては、情報を多く表示できるFULLHD「1920×1080ピクセル」に合わせる
方法もありますが、現状、全体の1割程度しか満足に表示できず、
レスポンシブでない場合は、横にスクロールするバーが表示され、大変見づらくなってしまいます。
レスポンシブのテンプレートやテーマを使用することで簡単に変更できます。
また、モバイルサイト用のHTMLコードを記述していく方法もありますが、
結構大変で、骨の折れる作業となります。レスポンシブ対応については、
また、別記事にて取り上げます。
サイト・ホームぺージ・ブログが、レスポンシブかどうか確認する方法
サイト・ホームぺージ・ブログが、レスポンシブかどうか確認する方法はいくつかありますが、
Googleのモバイルフレンドリーテストを使うと良いでしょう。
この画面にて、調べたいサイト・ブログ・HPのアドレスを入力し、「テストを実行」を押します。
青いバーが右までこればテスト完了です。
モバイルフレンドリーであれば、この画面。
モバイルフレンドリーでなければ、その理由が表示されます。
スマホ対応・レスポンシブ対応しているだけで、アクセス数も全然変わってきますので、
ぜひとも対応していきましょう。
コメント