*

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

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

ポイントは横幅

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

直近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

【文字起こし】「苫米地英人×藤末健三 改正放送法と哲学を語る」(最後の一部分要約)

本日午後4時から、e-国政で苫米地英人氏と藤末健三氏がインターネット生放送対談を行っていました。その

記事を読む

no image

携帯電話・固定電話からスカイプオンライン番号への発信通話料を考察する

 拙過去記事「スカイプとは何か auスカイプ付き携帯が失敗するであろう理由」にスカイプオンライン番号

記事を読む

no image

炎と薪とトングの無料素材画像

 8月29日朝から夕方まで、合同会社ハルクアップ首脳会議を行いました。場所は下の画像の神奈川県某所、

記事を読む

no image

IE8やFireFox等でツイッターウィジェットが表示されない場合の対処方法

 自分のホームページやブログにtwitter公式タイムライン(プロフィールウィジェット)が表示されな

記事を読む

no image

Skypeオンライン番号の発信者番号通知実験

SkypeInオンライン番号(050番号)を買ってみました。これによりこの番号であらゆる電話からSk

記事を読む

no image

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

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

記事を読む

no image

YahooリスティングMFOっぽいサイトドメイン報告

 『滝井秀典 キーワードマーケティング・ブログ』さんの記事「MFOという大問題(怒)~Yahoo!リ

記事を読む

no image

ウェブ制作者から見たIE6(インターネットエクスプローラー)と他のブラウザの違い

2010年3月4日、アメリカコロラド州でIE6の葬儀イベントが行われた。米国のAten Desig

記事を読む

no image

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

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

記事を読む

no image

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

※10月11日修正追記  facebookのいいねボタンをサイトに設置し、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 ↑