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サイトのページデザイン構成のポイント

Webサイトのページデザイン構成のポイントについて取り上げたいと思います。反応率アップに欠かせないのが「トップページからの誘導」があります。
大きなポイントは、トップページから、内部ページへの「誘導」を強化することだと思われます。トップページでまず、アクセス者の興味を引くことはもちろん大切ですが、競合サイトが多い昨今それだけでは、なかなか問合せにはつながりません。
もっと言えば通常は、トップページだけではアクセス者の知りたい情報をすべて伝えきれないと思われます。そのため、問合せを獲得するには、「サービス詳細」「Q&A」「料金」など、閲覧者にサイト内部のいろいろなページを見てもらうことが必要になります。
Webサイト内部の様々なページを見て、自分の欲する情報が得られた閲覧者は、意思決定を行い、行動を起こすというのが一般的な流れなのです。
そう考えるとトップページには、できるだけ閲覧者の知りたい情報を載せた内部ページへの誘導コンテンツを、数多く配置する必要があります。
いかなるWebサイトもトップページは、最も重要な位置を占めると思います。結果が出ないとお悩みの方は、単純にSEOに走らず、ページデザイン構成を一考して見てはいかがでしょうか?
またグループスクールのWebデザインスクールなら、プロによるサイト診断を行っております。ポイントを抑えた問題点、改良点をご理解いただけると存じます。是非ご活用ください。

HTML/CSS一日速習セミナー

HTML/CSS一日速習セミナーは、Web制作の基礎、HTMLを一から学びたい方に最適です。文書や画像や音楽など、Web上の様々な情報は、HTMLという基本言語を通して表現されています。基本の仕組みであるタグの使い方が分かれば、いたって簡単です。完全マンツーマンの1日速習タイプのレッスンで専任講師が5時間徹底指導。HTMLの概念を理解したら、さまざまなタグを使って実際にウェブページを構築する内容になります。