デバイスが多様化する中で、ホームページの幅をどれくらいにするか、悩みどころだ。
何pixelで設計するかを決めるのに役立つ情報をご紹介したいと思う。
一般的なホームページの幅を調査する
日本国内で実際に使われているモニターサイズの割合を見てみましょう。下のサイトはカウンターを使って様々なデータを取得、グラフで表示してくれるサービス。
※下のリンクは2011年８月〜2013年8月の値
http://gs.statcounter.com/#resolution-JP-monthly-201108-201308-bar
横幅が768pxが1.59%となってるので、この幅まで対応する必要があるか？検討の余地がある。
実際にアクセスされているモニターの解像度を調べる
Google Analiticsが導入されているサイトであれば、ユーザー > ユーザーの環境 > ブラウザとOS からユーザーの使用しているモニター解像度の一覧を見ることもできるだろう。
※セカンダリディメンションでブラウザを選択すれば、720や320といったモニターサイズがスマートフォンからのアクセスだという事も知ることができる。
大手サイトが採用している幅を参考にする
大手企業のサイトがどの幅に設定しているかも参考になる。ULTRAZONEは主要WEBサイトの横幅をまとめているサイト。
レスポンシブデザインを検討する
モニターの横幅毎に可変するレスポンシブデザイン。可変するタイミングとなる横幅のポイントのことをブレイクポイントと呼ぶが、このブレイクポイントに関しても設計段階である程度検討しておく必要がある。