*

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

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

ポイントは横幅

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

直近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かYahoo!か」の記事で「スピード重視のGoogle」と書いた

記事を読む

no image

WP Social Bookmarking Lightで「いいね」ボタンを設置してGoogle Analyticsを使っていたら必ずしたほうがいい設定

※10月11日修正追記  facebookのいいねボタンをサイトに設置し、Googleアナリティク

記事を読む

no image

ホームページやブログにツイッター(twitter)を表示する

※ 2012年10月18日、新ツイッターウィジェット設置に関する記事をアップしました。  → ホー

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

無料・オンラインでウェブページのキャプチャー画像を作成する

ウェブページのスクリーンショットが作成できるツールはいろいろありますが、オンラインで簡単にキャプチャ

記事を読む

no image

ツイッターからのアクセス数とRTを表示するボタンを設置する

WordPressにツイッターからのアクセス数とRTを表示するボタンを設置する方法です。いろいろあ

記事を読む

no image

検索エンジンはGoogleかYahoo!か

日本で最も利用されている検索エンジンはGoogleとYahoo!です。大ざっぱにGoogleが4割、

記事を読む

no image

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

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

記事を読む

no image

動画文字起こし対応「WMキープレーヤーβ」のモニター募集

 このたび、「WMキープレーヤー」という動画・音声再生ソフトウエアのベータ版を自社開発しました。

記事を読む

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 ↑