訪問者のブラウザサイズを解析して最適なブログ幅を探ってみよう
試験的に記事ページが1カラムの別ブログを最近立ち上げましたが、最適な幅はどの程度なのかわからず試行錯誤しております。
そんなときにこそ重宝するアクセス解析ですが、残念ながら Google アナリティクスでは訪問者の画面サイズは取得できても、ブラウザのサイズは知ることができません。
というわけで、別の方法でブラウザの幅を取得してみましたので、その方法とデータの一部をご紹介いたします。ブログの幅を決めるときやレスポンシブWEBデザインのブレイクポイント設定のご参考に！
画面サイズとブラウザサイズの違い
インターネット普及当初、ユーザーの環境といえば14～15インチのブラウン管モニターが主流でした。画素数は通称「SVGA」の 800×600 です。
その頃はブラウザを最大化して閲覧する人が多く、サイトを作成する場合は横幅 800 を超えないように作るのが当たり前の時代でした。
その後、Windows XP が広く浸透し、モニターは「XGA」の 1024×768 が主流となりました。まだワイド画面が普及する前ですね。この頃も最大化して閲覧する人が多く、サイトの幅もそれに合わせて 800～1000 前後と徐々に広がっていきます。
ところが、ワイド画面が普及するようになると、最大化せずにウィンドウを開く人が増えてきました。だいたい画面サイズの 3/5～3/4 あたりのサイズで見ることが多くなったのでは、と思います。
つまり、高解像度モニターが広まるにつれ、ブラウザサイズ＝画面サイズという図式が成り立たなくなってしまったのです。
さらにはスマホやタブレットの普及で、解像度はまちまち。すべての端末で最適な表示を、というのはかなり難しい状況となりました。レスポンシブWEBデザインでも、ある程度グループ化してブレイクポイントを設定しなければなりません。
Google アナリティクスで解析できるのはモニターサイズ
有名どころのアクセス解析サービスでは、「モニター解像度」を取得することができます。
みんな大好き Google アナリティクスでは「ユーザーの環境」から「画面の解像度」を見ると、こんな感じで表示されます。
どうやら、Naifix をご覧いただいている方の多くは 1920×1080 のフルHDを使用しているようですね。
でも先述のとおり、この数値だけじゃどうしようもありません。最適なブログの幅を探ろうにも、画面に対してどれくらいのブラウザ幅にして閲覧しているのかわからないのです。
さらに、当ブログはレスポンシブWEBデザインを採用しており、PC用のブレイクポイントは 1024px に設定していますが、これが最適なのかどうかもわかりません。
てことで前置きが長くなりましたが、画面幅ではなくブラウザの幅を取得して分析する必要があります。
ブラウザ幅を解析できる BROWSIZE.ORG
いくつか方法はあると思いますが、BROWSIZE.ORG という無料サービスを使えば誰でも簡単にブラウザサイズのデータを取得することができます。
BROWSIZE.ORG：ユーザーの本当の画面サイズ、知りたくないですか？
使い方は簡単で、アカウントを作成してコードをブログに貼り付けるだけ。
コードを設置した箇所には小さくバナーが表示されます。
実際に取得したデータ
BROWSIZE.ORG で取得したデータの一部がこちら。
10万PVぐらいでいいかなーと思って見てみたら、スマホもタブレットも取得していたという凡ミスに気づきました。フッターに解析コードをそのまま入れていたアホな僕ですｗ
「0～640」の欄にあるのはほぼスマホだと思いますが、それ以外は高解像度のタブレットなのかPCなのかハッキリしません。
というわけで、条件分岐で新たにPCのみのデータを取得しました。
WordPressのPC・タブレット・スマホの分岐方法はこちら
PCのみを対象に集計したブラウザサイズ
スマホとタブレットを除外して集計したデータがこちら。
こちらは最低幅の集計。
モニターサイズと一緒に集計できればもっと正確なことがわかりそうですが、目安としては十分なデータと言えそうです。
ブレイクポイントに設定している 1024 以下の方が10％程度いますから、レスポンシブWEBデザインであれば 901～1024 あたりのデザインもきちんと考えないといけないかも。
ワンカラムの場合は、900 前後にしておけば問題なさそうです。
数字が苦手ならサイト設定で横幅を指定しておこう
こんな表を見たってよくわかんないよ！という場合は、「サイト設定」の欄で自ブログの横幅を設定しておきましょう。
Naifix ではブレイクポイントは 1024 ですが、横幅を 1060 に設定しています。
そうすると、ログイン時のトップページに「デザインアドバイス」が表示されます。
どの程度を許容範囲とするかですが、快適に閲覧できる割合が70％以下とかになるとちょっと考えものかもしれません。サイドバーや追尾型のシェアボタンが見切れていたらあまり意味ないですし。
全体の横幅をせばめるか、メインコンテンツ部分・サイドバー部分をそれぞれ縮小する。あるいはいっそのことワンカラムにしてしまう、というのも検討してみましょう。
ただし、余白を削るとギチギチになってしまうので、ユーザー目線で考えると逆効果になってしまうかも。
横幅ギリギリでも「読みやすい」とは限らない
注意しなければならないのが、横スクロールバーが表示されない横幅に設定しても、それが読みやすいかどうかはまた別の話だということです。
たとえば、ブログの幅を 900px としてワンカラムにする場合。
900px をフルに使ったとしたら、1行あたりの文字数はかなり多くなります。それだけ読者の目線を横に移動させることになるので、もしかすると「読みづらい」ブログになるかもしれません。
以前、有名サイトの記事幅と余白設定を調べた ことがありますが、記事部分の幅の平均値は 616px でした。
DTP においては、横書きの場合 15～35 文字が読みやすい基準値とされていますので、これを目安としてフォントのサイズや種類も組み合わせながらいろいろ試してみましょう。
読者に「広告」を見せたいのか、「記事」を読ませたいのか。運営者のバランス感覚が求められる部分です。
まとめ
それほど大きな差はないかもしれませんが、どんな層の方が読みにくるかでブラウザ幅も微妙に変わってきそうな気がします。
モニターの解像度やアスペクト比は時代とともに変わっていきますから、デザインを変えるときにはモニターサイズのみならずブラウザサイズの分析もお勧めします。
スマホやタブレットのことも考えるとスッキリとした正答がなくて悩ましいところですが、これもブログ運営の醍醐味です！ 楽しんでいきましょー。
それでは、また。