wanichanの日記

ちょっとした技術メモ。Microsoft中心。Webサイト管理等にまつわるネタ、サイトの更新情報等を発信中。最終版はwanichan.comに掲載していきます。

イマドキの画面の解像度

メインサイト、wanichan.comの過去30日間のセッションに対する画面の解像度をアナリティクスで調べてみました。セッション全体に対する割合で。

f:id:wanichan:20180802090723p:plain

ふむ、フルHDとiPhone 6~8、んで1366x768のデスクトップの解像度が主流になってました。1024x768が多いんかなぁ、と思いきや、「その他」にまとめられちゃってます。

まあ、これはサイトのジャンルに解像度は左右されると思うんですけど、ぱちょこんの使い方の記事がメインのサイトでは、他にもデスクトップの解像度が多く見受けられますね。パソコンによって解像度が異なるからばらついている感じでしょうか。

一方、非技術的なコンテンツの場合はどないやねん?って思って、サブブログの解像度の割合を見てみましょう。

f:id:wanichan:20180802091726p:plain

見事にスマホメインになってますわ。

レスポンシブWebデザインのCSSのメディアクエリのルールを決定するには、こういったイマドキの画面の解像度を知る必要がありますね。

私はよくiPadで横向きに見ることが多いんですけど、それって1024x768なんですよね。そういう場合を考慮するには、段組みをなしにするか、それともサイドバーの割合を増やしてメインコンテンツの幅を狭くすべきなのかも、っていう感じがします。てか、iPadでは縦向きで閲覧する人も結構いるでしょ? 縦向きなら段組みは不要で、メインコンテンツをめいいっぱい表示しておけば問題ないです。

ちなみに、CNNのサイトはどないやねん?ってiPadで見てみると、横向きではサイドバーの割合広めで、縦向きでは段組みなしになってました。サイドバーは300ピクセル幅であることを確認しました。

f:id:wanichan:20180802130655p:plain

1024x768の段組みの割合を改めてもいい気がします。