Tweet

結論からになりますが、広告媒体として機能しているブログでは、以下のようなレイアウトが良いのではないかと思ってます。（画像クリックにて拡大）

赤い部分がメインコンテンツを格納するカラム、青いのはカテゴリや記事などアーカイブリンク、黄色の部分は補助的なカラムとして考えています。

今年3月に「バナー広告の画像サイズ標準規格」を調べました。

何故かというと去年から今年にかけて、ウェブサイトのリニューアルの際、サイドバーに300×250ピクセルのレクタングル広告が入るようにとのオーダーが多かったためです。メディア系のサイトではもはやレクタングルはマストのようです。

またAMNに参加するブログには、ヘッダー部辺りに728×90ピクセルのビッグバナーが入っています。これも最近の動きとして面白いですね。

ブログという仕組みの制約からか、サイトIDやキービジュアルなどの自己主張はどうしてもヘッダー部に集中しがちです。ビッグバナーを入れるとなるとヘッダーの下が最適かと思われますが、直下にあるメインコンテンツを押し下げるかたちになってしまいます。

ネタフルではその辺りを上手く処理していますね。

ロゴが入るスペースの幅を縮めて、バナーのスペースを確保しています。自己主張の強いロゴに変わりましたので、幅を縮めたぶんの喪失は相殺されてますね。

さて、冒頭で出した案では次のような広告挿入を想定しています。
・赤のカラムに468×60のバナーが程よいマージンを持って挿入できる。
・青のカラムに300×250のレクタングルが収まる。
・黄色のカラムに160×600のワイドスカイスクレイパーが収まる。

視線のFパターン説に倣って実際に当てはめてみると以下のようになります。

ここまでゴテゴテに広告だらけにする必要もないですが、いざという時のために、はみ出さずきちんと収まるスペースを確保しておくというのは大事なことです。

また、468×60のバナーに対応しておくとYouTubeの動画も余裕で収まります。YouTube動画がはみ出してしまっているサイトも多く見かけます。バナー広告を入れないにしても、これからのブログの本文エリアはYouTube動画の幅（425px）以上を確保したいところですね。もしくはサイズ可変でも良いかもしれません。

いちばん右にある幅160pxのカラムはワイドスカイスクレイパー広告だけでなく、大抵のブログパーツ・ウィジェットの類いが挿入できる幅でもあります。少しケチってスカイスクレイパーのサイズ（120px）にしてしまうと、収まらないブログパーツがあって後で少し哀しくなるかもしれません。

隣り合うカラム同士のマージンは10pxとってあります。場合によってはもう少し広めでも良いでしょうね。

ちなみに全体の横幅は、490+10+300+10+160 = 970px となっています。解像度1024pxのモニタでも十分表示ができますね。

そもそも「なんで3カラムか？」という疑問なのですが、冒頭で「広告媒体として」と断りを入れている通り。広告を入れないならどうでもいいです。

1カラムや2カラムだとウェブサイトの機能を入れるスペースと広告スペースの兼ね合いが難しいんですよね。上下だけで試行錯誤せず、横にも広告スペースを拡張すると良いという理由です。

プロとして恥ずかしくないWEBデザインの大原則?正しいWEBデザインのルールを知っていますか?

投稿者 ジェット☆ダイスケ : 2007年6月13日 02:23