ブログにもやっぱり必要?「デザイン」がテーマのブログ合宿に参加してきました!

名古屋ブログ合宿 今回のテーマは人もブログも見た目が9割! 2014年3月1日、おなじみのMYCAFEで開催された、名古屋ブログ合宿に参加してきました!
プロブロガー@goryugoさん主催の名古屋ブログ合宿も今回で8回目。今回は「人もブログも見た目が9割!」をテーマとし、ブログデザインについてWebデザイナーの@haruna1221さんを講師として迎え開催されました。

ブログのデザインはこの4つを押さえろ!

今回の参加者は十数人ほど。
かるーく全員の自己紹介が入ったあと、@haruna1221さんからのありがたいお話が。

まず、ブログのデザインを考える上で大切な4つのポイントの紹介と説明。

ブログデザインの4つのポイント
  • テーマ(コンセプト)をはっきりさせる
  • 余白を意識する
  • グリッドを揃える
  • 文字サイズや色数を抑える

デザインをかじったことのある人ならたぶん分かるけど、意外と基礎的な内容。

ただ、高度なテクニックは不要で、意識しているかいないかで大きく印象が変わる部分なので、必ずおさえておきたいポイントでもあります。

今回の参加者は、デザインについてはあまり詳しくない人が多かったので、その辺を選ぶあたりさすが@haruna1221先生。

お悩み相談で改善点が浮き彫りに

その後休憩を挟み、次は参加者のブログのデザインについてのお悩み相談&添削タイム。

一人ひとりのブログを見つつ、@haruna1221先生が先ほどの4つのポイントと照らし合わせ、気になった点の指摘と本人からのデザインに関する相談に乗ってくれました。

ざっくりですけど、以下のようなやりとりが多かったですね。

ブログのヘッダー画像を設定していない。

ヘッダー画像はブログの顔なので設定しておいたほうがいい。
かつ、一目見て何について書いているブログなのかがわかると覚えてもらえやすくなる!

グリッドが揃っていない。

グリッドを揃えるだけで見た目の印象が良くなる。
配置がわかりやすいと、コンテンツも読みやすくなる。

HTMLやCSSがわからないから触れない。

ブラウザの機能の「要素の検証」や、Firefoxのアドオンなどを使って調整してみては?
どこをどう触ったらどうなるのか、を確認しながら調整できるので、間違いもないし理解も深まるかもね。

余白がとれていない。

ちゃんと余白をとると、コンテンツが見やすくなる。
メリハリ大事!

実はこのブログもこの「余白」に大きな問題がありました…。

このブログの改善点

で、僕のブログも見てもらったときのアドバイスが目からウロコ的だったのでご紹介。

もともと、なんだか文字が読みづらいなと思ってて、文字サイズや行の高さをどうしたらいいかと相談。
そしたらそれも余白をとるだけで解消するよと@haruna1221さん。

おいおい待ってくれよ、余白調整するだけで読みやすくなんてなるかよ…と内心思いましたが(笑)ところがどっこい。
下のビフォーアフターをみてください。


なんだかつめつめ感があって見難い… Before
なんだかつめつめ感があって見難いです。

なんだか余裕ができて見やすくなった! After
おぉ!なんだか余裕ができて見やすくなりました!!!
やったー!



というのも、もともとのデザインの方は余白のサイズがどこも同じで、メリハリがなかったとのこと。
余白をあえて大きくとることで、1つのボックスの中のコンテンツがはっきりくっきりしました。


確かにずっとメリハリが無いと思ってたんだけど、それも一気に解決…。
まさか今回原因が見つかるとは。これでオール解決ではないですけど、改善の糸口が見えたような気がします。


今回のように余白をとるという1つのことにおいても、意識するかしないか、より見やすくするにはどれだけ余白をとったらよいのかなど、追求していけばより読みやすい親切なブログになっていくので、ブログにもやっぱりデザインが必要なんだなと思います。

何回参加しても学ぶことが多い

今回はデザインをテーマとした内容でしたが、ここで紹介した以外にもいろいろと勉強になりました。
やはり少しでも良いブログにするなら、デザインもブログにとっては大切なものだと改めて感じました。

Webの世界って特に流れが早いから、数年前に正解だったものが今は不正解なんてものも多いです。
それはブログもしかり。

だからこそ、モチベーションを保ったり、新しい技術やテクニック・その時々に良しとされているものを追っかける為にも、ブログ合宿は僕にとって毎回刺激的なものになっています。

自分がやりたいようにやれるのがブログなので、これを頭にいれたまま、ブログを楽しんでいきたいですね。


開催してくださった、@goryugoさん@haruna1221さん、ありがとうございましたー!