【イモっぽいデザインから脱却したい!】レイアウトを見直してメリハリを作る【その6】

イモっぽいデザインから脱却したい!ということで、今回はブログ全体のレイアウトを見直してみました。

ブログのレイアウトは
Web 広告を基準にすると
楽。

ブログのレイアウトは 「Web 広告」を基準に考えて決めると“楽”ですね!

Web 業界で標準化しているといっても過言ではない“数値”の一つといえば「Web 広告」のサイズだと思います。その中でもブログでよく見かける広告の幅は、下記の二つだと思います。

300px
レクタングルのバナー広告の幅でよく用いられるサイズです。

728px
ビッグバナーと呼ばれる横長のバナー広告の幅です。

答えを先に言ってしまうと、2カラムにするときは、
メインカラムにビッグバナー、サイドバーにレクタングルバナーが入るようにそれぞれ幅を調整してしまいます!

それぞれのバナー広告のサイズを想定した合理的なレイアウトは、それはそれで美しいと思います。個人的に。。

改修前のレイアウト

本ブログの改修前のレイアウトは2カラムです。

デザイン改修の幅は、
全体:1200px、パディング:35px(左右それぞれ)
メインコンテンツ:655px、パディング:35px(左右それぞれ)
サイドバー:300px、パディング:35px(左右それぞれ)
メインとサイドのマージン:35px(メインのmargin-rightにて)

全体が1200pxで、きりの良い数値でまとまっていて気に入っていたのですが、サイドバーのサイズはWeb 広告に合わせて 300px で設定しつつも、今見直してみるとメインコンテンツの幅が足りなかったです。。

また、全体幅に対してのパディングが広く、なんだかメリハリがないレイアウトになってしまっている印象がありました。

実際にレイアウトを変更してみた!

メインコンテンツの幅を変更

まずは、Web 広告の幅を意識してメインコンテンツの幅を変更してみました。

メインとサイドの幅の差が広がったので多少メリハリがついたような気がしますが、やっぱりパディング&マージンの幅が広すぎる気がしました(;´Д`)

パディング&マージンの幅を調整

続いてパディングとマージンの幅を調整してみます。
ここについては全体の雰囲気を見ながらの感覚で調整しちゃいました!

私は、“文字のサイズ”でパディングやマージンを設定することが多いです。

よく Web サイトで使用する文字のサイズは 16px が良いと言われていますよね。(Google 推奨なのかな??)

本ブログでも基準となる文字サイズは 16px にしているので、1rem = 16px としてよく rem や em を単位にしてスタイリングしてます。意外と半分の 8px も使い勝手が良くて、個人的には 8 の倍数でいろいろ調整してあげると何となくキレイな数値でハマることが多いので、8の倍数で設定するのが好きです。

メモ

em (エム)は1文字分の幅の単位です。先祖の要素で指定された一番近い文字サイズを参照します。特に指定されていない場合は、ブラウザのデフォルトのフォントサイズを参照します。

rem(レム)は、em と同じく1文字分の幅の単位で、ルート要素(HTML要素)の文字サイズを参照します。「root em」の略で rem と書きます。

ということでマージンは、35pxから、1.5文字分の24px へ修正してみました。
いかがでしょうか?

さっきよりもメリハリができてスタイリッシュになったような気がします!
が、見出しの文字サイズが大きいので、メインカラムのマージンに窮屈感が否めないです。

なのでいっそサイドバーのパディングを外しちゃって、メインカラムのマージンを 40px へ広げちゃいました。(見出しH2のフォントサイズが 40px なので。)

いかがでしょうか?

こちらの方が、ずいぶん気持ちの良い間隔になった気がします!

何が良いのか言語化は難しいですが、

マージンは狭いほうがスタイリッシュで、境目が少ないほどスッキリで、バランスよく調整することが大切ですね。

トップページのデザインも変更してみた

何気なく記事ページを対象にデザインを見直して来ましたが、改めてトップページも見てみました。

「サムネイルをできるだけ大きく見せたい」というブログカード風デザインの投稿一覧を鑑みると、白い下地を敷いていることによってできるマージンは不要なのではと思いました。

ということで、思い切って外しちゃいました。

ブログカード同士のマージンは、メインとサイドとのマージン(40px)よりも狭くしてあげることで、それぞれのカラムの境目を直感的にわかりやすくしました。

結構、窮屈になるかなぁと思いましたが、実際に実装してみるとしっくりきたようなきがします。また、「トップ」から「記事」ページへの移動も、思いのほか違和感なく良かったです。

まとめ

ブログに限らず、Web ページやその他の媒体のデザインをするとき、何かしら基準となる要素があればそれを起点に次々とデザインが決まっていくというのは、パズルのような感覚でとても面白くて気持ちがいいですね!

今回は「Web 広告」を起点にしてサイズを決めてみました。他の視点からもいろいろなデザインの基準を決められるようになれば、より幅広いデザインを“楽”に作れるようになるのかなぁと思います。

トップへ戻る