Webページの横幅設定について(2012年版)。

PC用のwebサイトを作成時、ページ全体の横幅設定は1024pxや960pxに設定することが多めです。
横スクロールが出てしまいますページはユーザビリティ的に閲覧しづらく感じますし、逆に余りにも細身のページは縦方向への遷移が難しくなってしまうと申します懸念があるからです。

今回、分る限りで調べた結果では、PC閲覧用のwebページの横幅は概ね1000px前後であれば大丈夫なようです。

上記の判断基準となりましたデータを基にwebページの横幅について考えてみたいと思います。
※データは、2012年12月時点のものです。

横幅を考えるにはモニタの解像度を知ることが第一かと思いました。
そこで、米国のNet Applications社の最新データを確認いたしました。
※同社のサイトはこちらです。
http://www.netmarketshare.com/report.aspx?qprid=17

1366*768px が最上位でした。
以下、1024*768pxと1280*800pxと続いております。

横幅の設定が1024pxとする以前は、800*600pxを目安に作成することが多かったように覚えております。
今はモニタの解像度もどんどん上がってきているのですね。

また、スマートフォンやタブレットPCにつきましては、株式会社ハイポジ社の津曲さんがお書きになったBlogに分かりやすくまとめられております。

http://case-mobile-design.com/devices/resolution-list/
※同氏のBlogへ

モバイルデバイスの場合は、横幅480pxのユーザが多く、その次に540pxと720pxが来ております。
縦幅の場合には、800px・1280px・960pxの順でユーザが多いようです。

PCと一口に申しましても、データをご覧いただければお分かりのように様々なモニタサイズがあります。
さらにスマートフォンやタブレットPCのユーザも増えまして、どのサイズが適切なのかと思い悩むこともしばしばです。

私自身はまずPCサイトの横幅の目安が判明しましたら、その後は作成したいレイアウトに合わせ、cssを設定して行かれると宜しいかと思います。

様々なデバイスに対応させるには、レスポンシブwebデザインを知っておくことが重要です。

レスポンシブwebデザインとは、過去においてはリキッドデザインと称されておりましたが、リキッド的な展開のみならず1つのhtmlデータで多くのデバイスに対応できるようになってきたことから、レスポンシブ……の名称に変わっていったようです。
※当方の理解が誤っている場合にはご指摘をお寄せいただけますようお願いいたします。

今回の記事ではレスポンシブwebデザインまでは網羅できておりませんが、レイアウト考案時に参考となるサイトをご紹介しまして、こちらの稿のまとめといたします。

宜しければご覧ください。

・960 Grid System
http://960.gs/

全体の横幅を960pxとし、この数値を基に縦方向に12・16と分割したデザインです。
グリッドは(方眼状の枠)を1つのブロックとしてレイアウトを作成していく考え方です。
学生時代の図形の授業を思い出してくだされば、お分かりいただけるかと思います。
※Dreamweaver CS6では、「可変グリッドレイアウト」機能が追加されております。

皆さまのレイアウトデザインの一助になりますと嬉しいです。

[Webサービス]QRコードの利用

携帯サイトを作成したらホームページやチラシなどで必ず携帯サイトへの誘導を図りましょう。
その際に便利なのが『QRコード』です。
みなさんも一度は利用したことがあると思いますが、これが簡単に作れるサイトをご紹介します。

QRコード作成サイト
QRのススメ

携帯サイトへのリンクのほか、メールの作成やプレーンテキストなども読み込ませることができます。プライベート用やコミュニケーションツールとして、または集客の利用など幅広い使い方が考えられますね。

sc0001.png

このように作られるので、画像を保存してホームページやチラシに配置しましょう。

携帯サイトを作成するなら…