• 自己紹介とこのブログについて
    自己紹介とこのブログについて
  • LINEスタンプ『決して美しくない』ブログから生まれたキャラクター達が大活躍!?
    LINEスタンプ『決して美しくない』ブログから生まれたキャラクター達が大活躍!?
  • 【でででのキャラ弁】私のアイコンをキャラ弁にしてもらいました!お弁当完成までの工程や裏側も紹介します!
    【でででのキャラ弁】私のアイコンをキャラ弁にしてもらいました!お弁当完成までの工程や裏側も紹介します!
  • 制作させて頂いたサイト様のご紹介『OFFICE KAWACHIYO』
    制作させて頂いたサイト様のご紹介『OFFICE KAWACHIYO』
  • 制作させて頂いたサイト様のご紹介『ももふみグラフィティ』
    制作させて頂いたサイト様のご紹介『ももふみグラフィティ』
  • 「危険人物」でしかないTシャツをいつも着ている…あの「ダサい」ブロガーさんと会ってきました
    「危険人物」でしかないTシャツをいつも着ている…あの「ダサい」ブロガーさんと会ってきました
  • 誕生日プレゼントとしてダサうぇぶろぐ。さんから頂戴した「世界に一つだけのマグカップ」
    誕生日プレゼントとしてダサうぇぶろぐ。さんから頂戴した「世界に一つだけのマグカップ」
  • 【YouTube動画】1分で観られる!Zen Brushで描く『でででのイラスト』完成までの一部始終!
    【YouTube動画】1分で観られる!Zen Brushで描く『でででのイラスト』完成までの一部始終!
  • 【でででのイラスト】第一回人気投票【総選挙】の結果発表!
    【でででのイラスト】第一回人気投票【総選挙】の結果発表!
  • 私がChromeにインストールしている便利な拡張機能12個を一挙に紹介します
    私がChromeにインストールしている便利な拡張機能12個を一挙に紹介します
  • 【YouTube動画】でででのキャラ弁(カツラ仕様?)
    【YouTube動画】でででのキャラ弁(カツラ仕様?)
  • Google 検索の裏技!「atari breakout」で画像検索すると懐かしのブロック崩しで遊べるよ!
    Google 検索の裏技!「atari breakout」で画像検索すると懐かしのブロック崩しで遊べるよ!
  • 営業や顧客対応の場でもよく活用されている「ソーシャルスタイル(行動傾向)」をスマホから診断してみた結果
    営業や顧客対応の場でもよく活用されている「ソーシャルスタイル(行動傾向)」をスマホから診断してみた結果
  • このブログから生まれた汚いイラスト達が『LINEスタンプ』になりました!大好評販売中(笑)
    このブログから生まれた汚いイラスト達が『LINEスタンプ』になりました!大好評販売中(笑)
  • 本当は教えたくない!ここは本当に都内か?と思う自然豊な超穴場の破格ランチ「貯水池鳥山」
    本当は教えたくない!ここは本当に都内か?と思う自然豊な超穴場の破格ランチ「貯水池鳥山」
  • でででーさんのほしいものリスト
    でででーさんのほしいものリスト
  • 【寄稿記事】こてつさんブログにお邪魔して私でででーさんが最初に心の底から貧乏を体験した時の暗い話を書く
    【寄稿記事】こてつさんブログにお邪魔して私でででーさんが最初に心の底から貧乏を体験した時の暗い話を書く
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  • LINEスタンプ『決して美しくない』ブログから生まれたキャラクター達が大活躍!?
  • 【でででのキャラ弁】私のアイコンをキャラ弁にしてもらいました!お弁当完成までの工程や裏側も紹介します!
  • 制作させて頂いたサイト様のご紹介『OFFICE KAWACHIYO』

ブログのこと

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

投稿日:

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

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

さいしょに

よく使われている解像度に関する情報はググればいろいろ出てくるので、念のため参考になりそうな記事を最初に貼っておきたいと思います。
 


 

というわけで、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関係のネタをメインにラーメンのことや雑談記事など幅広く書きます。たまに変なイラストを描いたりウェブ制作をすることもあります。
あなたにオススメ
S