イベント3月1日に、ブログ「ごりゅご.com」のごりゅごさん(@goryugo)主催の「名古屋ブログ合宿」に参加してきました。今回のテーマは「人もブログも見た目が9割」という事で、ごりゅご.comのデザインをしたはるぅな先生(@haruna1221)に教わったデザインのコツを書こうと思います。今回教わったのは、ブログのデザインをする上で大切な4つの事。それが以下の4つです。テーマ(コンセプト)をはっきりさせる余白を意識するグリッドを揃える文字サイズや色数を抑えるテーマ(コンセプト)をはっきりさせるデザインを進める前に「コンセプトをはっきりさせるのが大事」というのを聞いてハッとしました。僕はブログのデザインをいじる時、”なんとなく”いい感じになるようにいじってました。その結果どんなブログなのかイメージできない、まとまりの無いデザインになってしまいました。他のサイトのデザインを参考にするコンセプトを固める上で役に立つのは、他のサイトのデザイン。好みのデザインのサイトを見つけたらキャプチャーをストックしておいて、気に入った部分を真似するといいそうです。Basic」というアドオンを使ってました。これを使うと簡単にページ全体のキャプチャが保存できて、自動でファイル名に撮影日やURLなんかを入れてくれます(カスタム可能)。僕も使ってみましたが、めちゃくちゃ便利でした。余白を意識する2つ目は余白を意識する事。余白が少なすぎると窮屈で読みにくい印象を受けます。現在のうちのブログがまさにそんな感じで、色々ぎっしり詰め込んである状態。余白を広くした方がいいと指摘されました。実演で、余白を調整したら一気に見やすくなったというのがあって、みんな(ごりゅごさん含め)衝撃を受けてました。ごりゅご.comまた、関連する文字と画像は近づけた方が分かりやすいという事で、サイドバーの見出しの位置を修正しました(まだ若干おかしいけど)。ブラウザ内で手軽に調整のテストをするには、ブラウザ標準の「要素の検証」機能や、Firefoxのアドオン「Firebug」が便利です。グリッドを揃える3つ目はグリッドを揃える事。グリッドを揃えるというのは、こんな感じで画像や文字の始まりの部分や終わりの部分を揃えるという事です。このブログを添削してもらった時に、サイドバーのグリッドが揃ってないのを指摘されてその場で修正したところ、見た目が綺麗になって見やすくなりました。これも要素の検証等でテストすると楽です。文字サイズや色数を抑える最後は文字サイズと色数について。文字のサイズや色は3種類くらいに抑えた方が統一感が出ていいそうです。リンクの色はデフォルト(青)以外だと、押せるのか押せないのか分かりにくいので、デザインにこだわりが無い限りデフォルトがベターだそうです。うちのブログは、色は少ないけど文字サイズがバラバラなので修正する必要がありそうです。今回のブログ合宿に参加した事でやるべき事・やりたい事が見えてきました。大まかに言うとこの3つです。好きなサイトのキャプチャコレクションオリジナルテーマの作成ヘッダー画像の作成まずはヘッダー画像の作成。ブログトップのブログ名は、テキストより印象的なヘッダー画像を使うべきという指摘を受けたので、トレーニングの写真を使って作成しようと思います。好きなサイトのキャプチャコレクションオリジナルテーマの作成に向けて、キャプチャを集めようと思います。Basic」をインストールしたので、バシバシ撮りまくってEvernoteに溜めていきます。オリジナルテーマの作成コンセプトが固まったら、すでにあるテーマをベースにオリジナルのテーマを作ってみようと思います。いつになるか分かりませんが頑張ります。懇親会もちろん懇親会にも参加しました。今回の懇親会の会場は近くの「かこいや」という居酒屋。料理もお酒も種類が豊富で美味しいお店です。伏見駅、丸の内駅、大須観音駅いつも通り、特にイベントも無くそれぞれ自由に談笑する感じでした。途中からなぜか給食の話で異様に盛り上がって楽しかったです。おわりに毎回感じる事ですが、ブログ合宿に参加すると妙にやる気が出ます。リアルでブロガーが集まって教わるからこそ、周りの熱気を吸収できるんじゃないかなと思います。これからブログを始めるって人も勇気を出して参加してみるといいですよ。雅恭@onys310フリーのパーソナルトレーナー。トレーニングやロードバイク、スパルタンレースなんかが好き。体づくり、購入したアイテム、挑戦した事なんかについて書いてます。