名古屋ブログ合宿で学んだブログのデザインをする上で大切な4つの事 #ブログ合宿

2014/03/032019/03/15

3月1日に、ブログ「ごりゅご.com」のごりゅごさん(@goryugo)主催の「名古屋ブログ合宿」に参加してきました。

今回のテーマは「人もブログも見た目が9割」という事で、ごりゅご.comのデザインをしたはるぅな先生(@haruna1221)に教わったデザインのコツを書こうと思います。

ブログのデザインで大切な事

今回教わったのは、ブログのデザインをする上で大切な4つの事。
それが以下の4つです。

デザインを進める前に「コンセプトをはっきりさせるのが大事」というのを聞いてハッとしました。

僕はブログのデザインをいじる時、"なんとなく"いい感じになるようにいじってました。
その結果どんなブログなのかイメージできない、まとまりの無いデザインになってしまいました。

コンセプトを固める上で役に立つのは、他のサイトのデザイン。
好みのデザインのサイトを見つけたらキャプチャーをストックしておいて、気に入った部分を真似するといいそうです。

はるぅなさんはキャプチャに、Firefoxの「Pearl Crescent Page Saver Basic」というアドオンを使ってました。
これを使うと簡単にページ全体のキャプチャが保存できて、自動でファイル名に撮影日やURLなんかを入れてくれます(カスタム可能)。

僕も使ってみましたが、めちゃくちゃ便利でした。
オススメ。

2つ目は余白を意識する事。

余白が少なすぎると窮屈で読みにくい印象を受けます。
現在のうちのブログがまさにそんな感じで、色々ぎっしり詰め込んである状態。
もう少し余白を広くした方がいいと指摘されました。

実演で、余白を調整したら一気に見やすくなったというのがあって、みんな(ごりゅごさん含め)衝撃を受けてました。

また、関連する文字と画像は近づけた方が分かりやすいという事で、サイドバーの見出しの位置を修正しました(まだ若干おかしいけど)。

ブラウザ内で手軽に調整のテストをするには、ブラウザ標準の「要素の検証」機能や、Firefoxのアドオン「Firebug」が便利です。

3つ目はグリッドを揃える事。

グリッドを揃えるというのは、こんな感じで画像や文字の始まりの部分や終わりの部分を揃えるという事です。

このブログを添削してもらった時に、サイドバーのグリッドが揃ってないのを指摘されてその場で修正したところ、見た目が綺麗になって見やすくなりました。
これも要素の検証等でテストすると楽です。

最後は文字サイズと色数について。

文字のサイズや色は3種類くらいに抑えた方が統一感が出ていいそうです。

リンクの色はデフォルト(青)以外だと、押せるのか押せないのか分かりにくいので、デザインにこだわりが無い限りデフォルトがベターだそうです。

うちのブログは、色は少ないけど文字サイズがバラバラなので修正する必要がありそうです。

今回のブログ合宿に参加した事でやるべき事・やりたい事が見えてきました。

大まかに言うとこの3つです。

まずはヘッダー画像の作成。
ブログトップのブログ名は、テキストより印象的なヘッダー画像を使うべきという指摘を受けたので、トレーニングの写真を使って作成しようと思います。

オリジナルテーマの作成に向けて、キャプチャを集めようと思います。
Firefoxに「Pearl Crescent Page Saver Basic」をインストールしたので、バシバシ撮りまくってEvernoteに溜めていきます。

コンセプトが固まったら、すでにあるテーマをベースにオリジナルのテーマを作ってみようと思います。
いつになるか分かりませんが頑張ります。

もちろん懇親会にも参加しました。
今回の懇親会の会場は近くの「かこいや」という居酒屋。
料理もお酒も種類が豊富で美味しいお店です。

かこいや名古屋伏見店

関連ランキング：居酒屋 | 伏見駅、丸の内駅、大須観音駅

いつも通り、特にイベントも無くそれぞれ自由に談笑する感じでした。
途中からなぜか給食の話で異様に盛り上がって楽しかったです。

毎回感じる事ですが、ブログ合宿に参加すると妙にやる気が出ます。
リアルでブロガーが集まって教わるからこそ、周りの熱気を吸収できるんじゃないかなと思います。
これからブログを始めるって人も勇気を出して参加してみるといいですよ。