WEBサイトの製作、管理、とかの日記ブログです。

<<   2018年09月   >>
SunMonTueWedThuFriSat
      1
2345678
9101112131415
16171819202122
23242526272829
30      
新着記事
カテゴリ
過去ログ
コメント
検索
左サイドバーと右サイドバーを考えてみた
サイトを作る時左か右にサイドバーを設置して2カラムや3カラムのレイアウトにするが、
まず1カラムではなく2カラム以上にする理由は、1カラムだと文章量がかなり多くないと画面の横幅いっぱいに使えないから、2カラム以上にすると文章量の少ないページでもバランスが良くなると思う。

以前は横幅上限を設けずにデザインし、そのため2カラムでもメイン領域がかなり広くなるので3カラムを使うことが多かったが、
3カラムだと小さい画面を考慮するとサイドバーの幅を大きくできないので、最近は全体にmax-widthを設定した上で2カラムにするのがいいと思ってる。

で、左サイドバーと右サイドバーのどちらがいいのかってのはよく考えるんだが、まとめて見ることにする。

サイドバーの操作性としては左サイドバーの方が良いと思う。
だから、サービスサイトなどでサイトを操作するためのUIとしてサイドバーを設置したり、サイト内のカテゴリを移動してもらうつもりなら左サイドが良いんではないかと。
検索経由できてもらう記事系サイトなどは左サイドでも右サイドでも良いと思う。

ここまでは前置きみたいなもんで、広告を設置する場合の左サイドと右サイドの違いについて考えたんだが、

サイトタイトル
 
 
メイン領域
サイトタイトル
 
 
メイン領域


サンプルを横に並べちゃってるんで、全体に表示しないとわかりにくいかもだが、
メイン領域上部に広告を設置した場合、右サイドバーのレイアウトだと左サイドバーよりも、メイン領域とサイトタイトルの間に挟まれて広告が目に入りやすい気がする。
赤い部分が広告ね。



サンプルその2、メイン領域上部は広告なしでサイドバー最上段に広告。
サイトタイトル
 
メイン領域
サイトタイトル
 
メイン領域


このようにサイドバー最上段に広告を設置した場合、左サイドバーの方はサイトタイトルとサイドバー本体に囲まれて目に入りそうだが、右サイドだと目に入りにくそう。



サンプルその2、メイン領域上部とサイドバー最上段に広告。
サイトタイトル
 
 
メイン領域
サイトタイトル
 
 
メイン領域


これだと広告が横に並んじゃってどうかと思う。


サンプルその4
サイトタイトル
 
 
メイン領域
サイトタイトル
 
 
メイン領域


メイン上部とサイドバーの両方に広告を設置する場合はサイドバー広告はある程度下げるほうが良さそうな気がするが、
その場合はサイドバーの広告はサイドバーの内容同士で囲まれてサイトタイトルとは離れてしまう。



記事下広告を設置する場合も書きたいが、めんどいし、あんまサンプル増やしてもわからなくなってくるからもうまとめちゃうが、
右サイドバーの時のメイン領域上部広告がかなり強そうに思える。
メイン領域上部に広告を置かないのなら左サイドのほうがいいような気がする。

この記事へのコメント
名前:
URL
コメント:
この記事へのトラックバック :
whblog 1.7