*

画面解像度(横幅)の適切なサイズを検証する

昔に比べて高機能なパソコンが多くなり、画面も連れて高解像度になってきています。ウェブサイト(ホームページ)を制作していると、自分の利便性より、だれともわからぬ不特定多数の閲覧者が一体どの程度の解像度の画面でウェブページを見ているのかが考慮すべきポイントとなります。

ポイントは横幅

ブラウザでウェブページを閲覧する際、気になるのは横幅でしょう。縦にスクロールするのは一般的だと思うのですが、横にスクロールバーが出るのは見づらいと感じるユーザーは多いはずです。なので、縦の総量は余り気にせずページ作成したとしても、横幅はやっぱり注意します。ユーザーの利便性(ユーザビリティ)が悪いサイトは、再訪問される確率が低くなりますので。

直近1カ月のGoogleアクセス解析の生データから解像度を確認

では、どうすれば不特定多数の一般ユーザーの画面解像度がわかるのか。ウェブページにアクセス解析を入れていると、それがわかります。Googleが無料提供しているGoogle Analyticsなどがメジャーなアクセス解析ツールです。このアクセス解析ツールで集計したサンプルから、実際の画面解像度の割合を見てみたいと思います。

では弊社合同会社ハルクアップ管理の、とあるウェブサイトの直近約2万セッション(約1カ月分)からユーザー画面解像度の傾向を見てみましょう。

Google Analytics解像度統計画像

(Google Analytics解像度統計画像)

XGAが最多画面解像度

1位は圧倒的に1024×768(XGA)です。約39%の人がこの解像度で閲覧しています。この数字は無視できません。この集計はトップ10までを表示していますが、総ユニーク解像度は133種類ありました。ただし、これは縦解像度の違いもユニークとしてカウントしているため、これだけの数になりますが、横幅だけで大きく分けると、11種類程度に分類できます。最大で横幅1920、最小で横幅800です(実際にはもっと狭い横幅からの閲覧もありましたが、本当に少数なので無視します)。

横幅だけでも1024~1280が多数

そして横幅だけで見ても、やはり1位は1024で、全体の約42%を占めています。2位は僅差で1280、これは約38%。この2サイズだけで、80%を占めていることになります。すべての画面に最適にすることは難しいので、やはり大は小を兼ね、「より狭くて数の多いものに合わせる」のがよいです。つまり、1024の横幅でおさまるように設計すれば、1280以上の解像度で見ても横スクロールは出ないので、1024以上の幅にならないようにすることが必要だということになります。

ブラウザのサイドバーの差分に注意

ただ、ブラウザのサイドバーに「お気に入り」や「履歴」などを常時表示している人は多いと思います。その幅が150~200ピクセルくらいでしょうか。その分を差し引くと、820~880ピクセル内に押さえたページ幅にするのがベストかもしれません。また、この統計で2%ほどあった幅800の解像度の人をどうするかが問題です。たかが2%、として切り捨ててしまうか、されど2%と考え、さらに横幅を縮めたウェブページを作成するか。この辺は悩みどころですが、このブログのように、本文カラムをリキッド(伸縮自在)式にするなど、対策はいろいろあります。

ページの幅(横スクロール対策)だけがユーザビリティではありませんが、重要な要素であると思いますので、ウェブページをつくってみようという方は、この統計数字を参考の一つにしてみてください。

関連記事

no image

Googleマップに東京の地下鉄時刻表表示機能

Googleマップで東京の地下鉄時刻表が見られるようになったようです。 使い方 駅名を検索ボッ

記事を読む

no image

ツイッターフォローミーボタンをブログやホームページに設置する

ツイッターフォロー公式ボタンをブログやホームページに設置する方法です。「ホームページやブログにツイ

記事を読む

TWIT_CATCH

ホームページやブログに新ツイッターウィジェットを表示する-2012.10

 いつの間にかツイッター公式ウィジェットが仕様変更していたので、紹介です。  大きく変わった点は、

記事を読む

no image

Windows7起動後に「GIZMOは動作を停止しました」と表示されるエラー対処備忘録

原因  上記エラーが出る前に、FireFoxを3.6から6.0.2へアップグレードし、Adobe F

記事を読む

no image

Google Chrome6.0.472.xx 変更点備忘録

Google Chromeが(勝手に)バージョンアップされました  グーグルのブラウザ、Googl

記事を読む

no image

メールフォーム入力途中でエラー画面に移動してしまうときの対処方法

 お問い合わせフォームやお申し込みフォーム入力の途中に、Enter(エンター)キーを押したら勝手に送

記事を読む

no image

ジャパンネット銀行の「ワンタイムデビット」をアマゾンで使ってみた

早速ワンタイムデビットをアマゾンで使ってみました。(アマゾンは送料無料キャンペーン実施中なのに焦って

記事を読む

no image

Yahoo!リスティング広告とGoogle Adwordsで「ワンタイムデビット」を使用してみました

ジャパンネット銀行「ワンタイムデビット」(JNBカードレスVisaデビット)の利用可能ネットショップ

記事を読む

no image

Yahoo!リスティング広告の対象外キーワード設定方法

Yahoo!リスティング広告の対象外キーワード設定方法です。Google Adwordsでは「除外キ

記事を読む

no image

Google検索で「リアルタイム検索」が可能になったようです

当ブログ「検索エンジンはGoogleかYahoo!か」の記事で「スピード重視のGoogle」と書いた

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

postagestamp01
未使用の切手(貼付済み)を剥がさずに簡単に再利用する方法備忘録

 封筒に貼ってしまってある未使用切手を再利用する方法を郵便局で教わった

kindle_sort
Kindle の デフォルト配信先 の変更方法備忘録

コンテンツと端末の管理 端末タブ 端末名「編集」

itts
テープ起こしで知った言葉201501

今月のテープ起こし案件ではこんな言葉を知りました。ありがとうございまし

KIMG0297
日経ビジネス2014.12.01メモ

トヨタミライは補助金込みで約520万円。 企業交際費は199

itts
テープ起こしで知った言葉201412

今月のテープ起こし案件ではこんな言葉を知りました。ありがとうございまし

→もっと見る

PAGE TOP ↑