トップページ > IT, Internet, ブログ > モダンな3カラムのブログレイアウトを考える
カスタム検索

モダンな3カラムのブログレイアウトを考える

広告サイズ等を考慮したブログのレイアウト



Clip to Evernote


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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



Clip to Evernote



投稿者 愛場大介(Daisuke AIBA / Jetdaisuke) : 2007年6月13日 02:23

コメント:

このエントリーのトラックバックURL:

このエントリーを参照してないトラックバックは削除する場合があります

Related Posts Plugin for WordPress, Blogger...

ジェット☆ダイスケ

ジェット☆ダイスケ
愛場大介ジェット☆ダイスケ
昭和生まれの古い男がこのブログを地味に更新しつづけております。趣味はブログです。 ツイッターIDは @jetdaisukeです。 そしてGoogle Plusはこちらにどうぞ。また、YouTubeのチャンネル登録はこちらからできます。

なんかいいアイテム


ナノ一眼 PENTAX Q の実力
iPhoneとも戦えるカメラ、ナノ一眼 PENTAX Q を購入しました
シャッター切るたび画調が変わる PENTAX Q のランダムなクロスプロセスが楽し過ぎるのだ
PENTAX Q トイレンズ比較 魚眼/広角/望遠
ペンタックスQのバッテリは、フジフイルム、コダックとも共通
ナノ一眼PENTAX Qをもう一台導入しまして
ナノ一眼 PENTAX Q でも星を撮影できた
PENTAX Q 動画モードについての感想

世界最小15倍ズームレンズB008とキヤノンEOS 60Dで大自然を撮ってみよう!
TAMRON 18-270mmF3.5-6.3 Di2 VC PZD B008
タムロン 18-270mmF3.5-6.3 Di2 VC PZD B008

バリアングル液晶でビデオ撮影も快適なデジイチ
Canon デジタル一眼レフカメラ EOS 60D
EOS 60D
レビュー記事:
EOS 60Dのバリアングル液晶はやっぱり動画撮りやすいです
キヤノン 一眼レフ EOS 60D を購入してみた

[地球圏最強の標準レンズ]
シグマ30mm F1.4レンズは企業プロモーションビデオにも使える優れもの
SIGMA 30mm F1.4 EX DC

Canon EFレンズ 50mm F1.8 II 最安の単焦点レンズを試す
Canon EFレンズ 50mm F1.8 II
[最安の超広角レンズ買うた]
タムロン超広角ズームレンズ TAMRON SP AF10-24mm F/3.5-4.5 Di II
TAMRON AF10-24mm F/3.5-4.5 DiIILD Aspherical
TAMRON AF10-24mm F/3.5-4.5 DiIILD

【EOS 関連記事】
キヤノンEOS Kiss X3関連で購入したアイテムまとめ1 純正品編
キヤノンEOS Kiss X3関連で購入したアイテムまとめ2 お役立ち編
キヤノンEOS Kiss X3関連で購入したアイテムまとめ3 交換レンズ編

最近のエントリー

AMN