ページ幅と高さ(長さ)について | Webであなたの夢が叶う!

Webであなたの夢が叶う!

Webを活用して一歩ずつ「夢」に近づきませんか?
みなさんのサポートブログです。    

☆*・カフェビバーチェ。.:*・゜゚・*☆*・゜゚・*:.。..。.:*・☆

木曜日とご予約、イベント開催の場合は曜日にかかわらず、11:00~15:00、カフェをオープンしています。

コンセプトは、「おいしく健康に!」
食育トレーナーのオーナーが
コーヒー、お茶をはじめ、スイーツ、ランチなど
身体に優しいメニューをご用意してお待ちしています。


少人数グループのイベント会場としてもご活用くださいね。
☆*・゜゚・*:.。..。.:*・☆・*:.。. .。.:*・゜゚・*☆*・゜゚・*:.。..。.:*・☆

こんにちは。
Webであなたの夢が叶う!のHirokoです。

ホームページの作り方、
昨日は、サイトマップ(構成図)についてでした。

今日はページの幅と高さ(長さ)です。

●
ページ幅
  ページ幅は、パソコンのモニターサイズや
  解像度によって変遷してきました。
  今、
使用率の高い解像度は
  「WXGA 1366px X 768px  15.6インチ」
  ということですので、

  これから作成するホームページは
  ワイド画面に適応しておく必要がありますね。

  
ちなみに大手サイトのページ幅設定は
            次のようになっています。
  950px
    ・Yahoo! Japan
    ・So-net
    ・ぐるなび
  960px
    ・はてな
    ・@nifty
 
  970px
    ・クックパッド 
    ・Excite 
    ・Facebook
  980px 
    ・Google 
    ・食べログ 
    ・ZOZOTOWN
  990px 
    ・ニコニコ動画 
    ・NHK
 

  また、ある程度の範囲内で幅が可変する、
  
リキッドレイアウトを採用するサイトもあります。
  こちらは、
ニュースやショッピングサイトが多く
  採用しています。

●ページの高さ(長さ)
  ページの高さ(長さ)は、そのページによって様々です。
  しかし、
   ・ショッピングサイトの「購入する」ボタン
   ・キャンペーンバナー
   ・検索サイトの
「検索する」ボタン
  は、ファーストビュー(540px)までに配置するのが
  原則です。
  これは、ページが表示されたとき、
  スクロールなしで表示される領域で、
  モニターサイズの最低ラインをとったものです。
  
気をつけたいのは、
ページの内容に厚みのないサイトの場合、
950pxを超える幅で設計すると、
コンテンツ間の空白が気になります。 

画像を効果的に使ったり、
デザインや色目を工夫する必要がありますね。
また反対に、
76
0px幅など狭いページ幅を採用すると、
世代差(古さ)を感じることがあります。
こちらも注意が必要です。

明日は、デザイン(画像・色)についてです。


今日も最後まで読んでいただいてありがとうございました。