*

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

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

ポイントは横幅

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

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

インターネット検索を利用するということ

 以前、70歳近いばりばり社会経験があって引退された女性とお話ししていて、その方はEメールも毎日送受

記事を読む

no image

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

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

記事を読む

no image

2ちゃんねるのサーバーダウンとF5キー

某世界最大匿名掲示板2ちゃんねるが3月1日午後から某隣国からのサイバー攻撃によるサーバーダウンにより

記事を読む

no image

【D-FAX】維持費無料のファックスメール受信サービスの紹介

ビジネスでもいまやEメールの時代ですが、まだファックスを利用している方も多くいらっしゃいます。Eメー

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

Google Analyticsで500項目以上のデータをエクスポートする方法

Google Analyticsでデータをエクスポートする際、表示されている数のままエクスポートをす

記事を読む

no image

インターネットでラジオの生放送が聴けるようになりました(地域限定)

朝からいろいろ聞いています。非常にクリアな音です。横浜人としては文化放送がクリアに聞こえるというの

記事を読む

amazon_creditcard

アマゾンでデフォルトのクレジットカードを変更する方法備忘録

アマゾンに新しいクレジットカードを追加しても、そのカードが初期設定の支払い方法に自動的に変更されませ

記事を読む

no image

ファイルアップロードページを設置しました

弊社サイトに、ページ上から無料で直接、ファイルを転送できるツールを設置しました。FileQさんのファ

記事を読む

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 ↑