FC2ブログ

スポンサーサイト

Masa

-
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
Posted byMasa

ホームページ、ウェブサイトの横幅の話

Masa

作るときにサイズを決めるのは、何を作るときも一緒ですが

ホームページを作るときもそうなんです。
まず、横幅を決めてから、メニューと内容の幅を決める

縦にスクロールは見やすいですけど
横にスクロールは見難いですもんね

一昔前は 横幅800が普通だった気がします。

ディスプレイのサイズがそんなに無かった時代なので

画面の横幅が800~1024程度の時には
横幅800px程度がちょうどよかったですね

現在の主流ディスプレイは横幅1920のフルHD
ちょっと小さくても1280のSXGA
となってるわけで

画面の端にガジェットを起き、さらにお気に入りなどのサイドバーを置いても
画面として使える幅が900以上はあるPCが多いように感じます。

まぁ小さい画面でサイドバーやらガジェットやら置かないと思いますけど

そうするとホームページの横幅も900px以上が推奨されるのではないでしょうか?

僕がいつも作るときは、yahooを参考にしています。

なんといっても国内で一番ユーザーの多いサイト。。。
つまり標準的なサイト という認識です。
(IEを使う理由でも上げましたが、ユーザーの一番多いものを使う)

という理由から。最近は横幅950に設定しています。

リキッドフレームという手法で
ブラウザの横幅にあわせてサイトの横幅を変える事もできるのですが、

asahi.comやら、amazonやらがその手法ですね

どうしてもレイアウトが崩れがちになり、美しくない。。。。
ということで、固定幅で作らせていただいてます。

横並びメニューが見た目すっきりでいいのですが、
サイトの横幅は固定なので
どんどんページを増やしていくようなサイトには不向きですね
そんな場合は、横メニューはメインだけで
残りは縦メニューに入れてしまいます。

というか、サイトの構成や、ユーザービリティ(使いやすさ)を考えると
縦メニューが一番使いやすいのではないでしょうか???

現にこのブログを書いているサイトでも
左側に縦にメニューがズラっと並んでおります。

上部横並びは、普段使わないものばかり
メニューブロックの下部には
アクセスカウンターやら

コンテンツが長くなるなら、余剰スペースが生まれるので
TOPリンクに利用できますね。
一番目立つ位置 そのサイトの一等地ですね
※広告欄を別に設けている場合を除く

そうすると友人のサイトのリンクや、企業でしたら、お付き合いのある会社のサイトのリンクを貼りたいところです。

TOPなので、見た目も考えると、バナーを貼るのが綺麗な気がしますが
いかがでしょうか????テキストリンクよりは
見た目いいと思うのですが、。。(賛否両論です)

バナーを置くのであれば、バナーのサイズも重要になってきます

バナーの国際規格は
300 x 250 IMU - (Medium Rectangle) 
250 x 250 IMU - (Square Pop-Up)
240 x 400 IMU - (Vertical Rectangle)
336 x 280 IMU - (Large Rectangle)  
180 x 150 IMU - (Rectangle)  
300 x 100 IMU - (3:1 Rectangle)  
720 x 300 IMU - (Pop-Under) 

Banners and Buttons

468 x 60 IMU - (Full Banner)  
234 x 60 IMU - (Half Banner)  
88 x 31 IMU - (Micro Bar) 
120 x 90 IMU - (Button 1) 
120 x 60 IMU - (Button 2)  
120 x 240 IMU - (Vertical Banner)  
125 x 125 IMU - (Square Button)  
728 x 90 IMU - (Leaderboard) 

Skyscrapers

160 x 600 IMU - (Wide Skyscraper) 
120 x 600 IMU - (Skyscraper)
300 x 600 IMU - (Half Page Ad)  



こうなってるようですが
ぶっちゃけでかすぎるのはただの宣伝であって
アフィリエイト臭くなるので貼りません(そういう目的なら貼りますけど)

紹介ということなので実用的で
よく見かけるのは

88*31のサイズと
234*60のサイズになりますかね

なぜか日本では200*40というサイズが流通しています
用紙で言ったらB5みたいなもんですかね


88*31は小さいので横に並べると176 間4pxとって180程度

ということは、国際規格の234の入る幅のメニューが理想的で
配置したときに美しくなるのではないかなぁ。。。。
と個人的には思っております。

余裕を持って 横幅250程度
そうするとコンテンツの横幅が700px
間のスペースを5pxコンテンツから取り 両端のスペースをそれぞれ5pxとると

メニュー幅 245px padding 5px
コンテンツ幅 690px padding 5px
となり間5pxの隙間ができますね。 単純にこれだけで枠を作ると気持ちいいですね
ヘッダーを端から端までとして940px

でも、メニューを含めた全幅を950にしたいなら・・・
ヘッダー部950px
メニュー幅245px padding5px
コンテンツ幅 700px padding5px となり ちょっと気持ちいいかもですね
全体の横幅は(枠幅)960になっちゃいますけどね~

ぴったりで作らないといけない決まりはないですけど
こういうのをきちきちやっていくの 割りと好きなんです


とりあえず、 今の横幅のトレンドは yahooに聞け ということで
2011年9月時点での横幅は950でした~

ちなみにFC2管理画面のメニューは横幅200px ですかね。 
200*200画像がぴったりですね

国際規格のバナーをいれるサイズにするかしないか
迷うところですね~





スポンサーサイト
Posted byMasa

Comments - 0

There are no comments yet.

Leave a reply

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。