ブログのこと

解像度が気になって…このブログにアクセスしてくる解像度のランキングを洗い出してみた

投稿日:

ヘッダーに設置しているカルーセルスライダーをよく見られている解像度ごとに頑張って対応させたでででーさん(@d3_dayo) です!

 
思い立ったらすぐ行動してしまうタイプなので、はてなブログからの移行を決めてからはけっこう慌ただしくWordPressへと移行してしまったので、デザイン面での細かいところで後手後手になっている箇所がいくつかありました。その1つが吹き出しにも書いた通り、ヘッダー下に設定しているカルーセルスライダーの幅調整でした。
 
取り急ぎ、WordPressプラグインのMeta Sliderを導入してヘッダー下にスライド表示していたんですが、よく見られている解像度でスライダーを確認してみると、右側が中途半端に見切れていて、すごくすごくものすごく気になっていたので(;・∀・)
 
寝る時間を削ってでも作業する感じで、ようやく気にならないような幅調整をすることができました!88888888
 
さて、私が使っているPCの解像度は1366×768でして、どうしてもデザインをカスタマイズする時にこのPCからの見た目を重視してしまっているんですが、レスポンシブデザインだと…ちゃんといろんな解像度から確認してみないとダメですね(笑)
 
タブレットサイズからみた時に実はけっこうひどいレイアウト崩れが起きていて、愕然とさせられました^^;
 
さてさて、前置きが少し長くなってしまいましたが、そんな背景があり…ものすごく解像度に対する意識が強くなってしまったので、どんな解像度の端末からよくみられているものなのか?気になって気になってしょうがない私は、このブログへのアクセスから解像度ランキングを洗い出してみたので、この記事ではその結果を紹介したいと思います!
 
 

スポンサーリンク

さいしょに

よく使われている解像度に関する情報はググればいろいろ出てくるので、念のため参考になりそうな記事を最初に貼っておきたいと思います。
 
モニター解像度のシェアを調べてみた(2017年1月版)
 
2017年版|パソコン画面解像度シェア&HP制作に最適なサイズとは?
というわけで、PCの解像度ランキング1位はけっこう圧倒的に1920×1080なんですが、果たしてこのブログへのアクセスもこの結果通りなのか?はてな時代からの8ヶ月分のデータをサンプルにまとめてみたいと思います。
 
 

解像度ランキング結果

ちなみに、せっかくなので今回紹介するランキングではスマホサイズも含め、端末問わずどのサイズからのアクセスが上位なのかを発表していきます!
 

01位 375x667

全体の26.5%が解像度375x667からのアクセスでした。
 
この解像度の端末はiPhone6以降ですね!この結果にも非常に納得。Androidユーザーもスマホの黎明期に比べればかなり増えたと思いますが、まだまだiPhoneが多い。
 

02位 360x640

全体の21.2%が解像度360x640からのアクセスでした。
 
この解像度の端末はAndroid端末ですね。まだ流通し始めた頃のAndroidは、画面サイズの規格にバラつきがありアプリ開発者泣かせだったようですが、現在では規格がこの解像度に統一されているようです。
 


スポンサーリンク


03位 320x568

全体の10.1%が解像度320x568からのアクセスでした。
 
この解像度もiPhoneなんですが、iPhoneはiPhoneでも5シリーズのようです。ちなみにiPhone 4までは320×480なんですが、さすがにこのサイズはランキングの10以内に入らず、31位にいました!
 
全てのiPhoneを合計するとアクセスの40%以上を占めているということで、やはりiPhoneからみた感じを意識してデザインしたほうが良さそうですね。
 

04位 1920x1080

全体の8.2%が解像度1920x1080からのアクセスでした。
 
というわけで、解像度ランキングに関する情報を複数調べてみた結果通り、このブログへのアクセスでも一番多いのは1920x1080ということになりました。やばいな、今まで全然このサイズを意識してデザインしてなかった…(はてな時代が怖いw)
 

05位 1366x768

全体の5.2%が解像度1366x768からのアクセスでした。
 
これも先に見た解像度ランキングの情報を掲載している記事通りの結果となりました。1920x1080の次に使われているのは1366x768、私のPCも解像度はこのサイズで私が最も好きなサイズ感でもありますが、スマホも含めるとたった5%のアクセスしか…このサイズでの閲覧がないとは…。
 

06位 414x736

全体の4.5%が解像度414x736からのアクセスでした。
 
これもiPhoneの解像度でPlusシリーズが持つものです。いま、この結果を見てハッとしてしまったことがありました!そういえばカスタマイズした箇所の中に、このサイズでの表示を最適化させてないところがあったので、記事書いたら直さないと(・・;)
 

07位 768x1024

全体の2.8%が解像度768x1024からのアクセスでした。
 
この解像度はiPadのサイズですね。正直、最近はもっとiPadからのアクセスって増えているのではないかと思ってましたが、意外とこんなものなんですね。このサイズへのブログ表示はここ数日、けっこう意識的に直したばかりです。理由は今述べた通り、iPadからのアクセスはなんとなく多いと思ってたからです(^_^;)
 

08位 1440x900

全体の2.1%が解像度1440x900からのアクセスでした。
 
Wide-XGA+
 

09位 1280x800

全体の1.7%が解像度1280x800からのアクセスでした。
 
Wide-XGA
 

10位 1280x1024

全体の1.4%が解像度1280x1024からのアクセスでした。
 
SXGA
 
 

まとめ

最後にもう一度ランキングだけを掲載しておきます。
 
01位 375x667 26.5%
02位 360x640 21.2%
03位 320x568 10.1%
04位 1920x1080 8.2%
05位 1366x768 5.2%
06位 414x736 4.5%
07位 768x1024 2.8%
08位 1440x900 2.1%
09位 1280x800 1.7%
10位 1280x1024 1.4%
 
今回のランキング、大変自分のためになりました(笑)この結果を受けて、このブログに施しているレスポンシブデザインのブレイクポイント(デザインを切り替えるタイミングのこと)を改めて見直したいと強く思いました。それにしても本当にiPhoneが多く、PCからのアクセスというのはだいぶ減ってきてますね~。
 
ちなみに、このランキングは15万以上のセッションからパーセンテージを出したものになります。参考までに!

でででーさん
2017年2月21日はてなブログでカキタクナッタラ開設。2017年10月22日にWordPressへ移行しました。基本的に毎日更新。ウェブ・スマホなどIT関連のネタをメインにラーメンのことや雑談記事など幅広く書きます。たまに変なイラストを描いたりウェブ制作をすることもあります。
あなたにオススメ