イベント先日プロブロガー・作家のごりゅごさん(@goryugo)主催のブログ勉強会、ごりゅごブログ塾に参加してきました。今回のテーマは「人もブログも見た目が9割」で、講師はごりゅごさんの奥さんでWebデザイナー、そしてブログ「ごりゅご.com」のデザインもされているはるぅな先生(@haruna1221)。今回のブログ塾で最初に教わったのは「デザインの4原則」について。事で、これを守ればデザインセンスが無くてもカバーできるという話です。このブログもWebデザインほぼ未経験だった僕が、ごりゅごブログ塾の前身であるごりゅごブログ合宿ではるぅなさんに教わった事を徹底して自作したテーマを使っていますが、結構いい感じにできてると思います。近接1つ目の近接について。物と物の距離の事で、関係のある物同士は近づけて関係のない物は離すと分かりやすくなるという話です。このブログの記事一覧を例に出すと記事のタイトルとサムネイルが近くて、次の記事との間が遠くなっています。いうかこの後の個人添削の時に指摘されたので遠くしました。反復2つ目の反復について。ある程度同じデザインを繰り返す事で統一感が出て全体がまとまるという話です。このブログだと記事一覧などが同じデザインの繰り返しになってます。トップページでもカテゴリのページでも同じデザインにしてあります。整列3つ目の整列について。物をどこかのラインに合わせて並べるという話です。これを徹底するだけでかなり見やすくなります。前回のごりゅごブログ合宿でもこの話があったので、テーマを自作する時に一番気をつけたポイントです。このブログでは記事一覧やサイドバーなど各部を揃えています。対比4つ目の対比について。色や文字のサイズ、行間を変える事によって見やすくするという話。このブログでは見出しがオレンジの背景に大きめの白い字、本文が普通の黒い字になってます。個別添削を受けた時にこんな感じで強調したい部分に背景色を付けるのもいいと言われました。色が持つイメージと配色についてデザイン4原則についての話に続いて色が持つイメージと配色についての話。色が持つイメージ色にはそれぞれ持つイメージがあって、それもブログデザインに活かせます。赤は生命力や活力などエネルギーを感じる色で、このブログのテーマカラーとしても使っています。赤は人を動かす力を持っていて購買意欲を高めるそうで、値札などによく使われるそうです。ブログではボタンなどに赤を使うと押されやすくなるんだとか。イメージさせるらしいです。配色については色相環という図を使って教わりました。色相環で隣り合う「類似色」を使うとまとまった配色になります。このブログでは赤とその類似色を使っています。色相環のちょうど反対に位置する「補色」を使う場合、強い印象を残せるけど目がチカチカするので間に白や黒などを入れるといいそうです。配色用のツール配色に使えるツールを2つ教えてくれました。色をひとつ選ぶと自動で合う色を選んでくれるPalettonというツール。メインの色を決めるだけでいい感じの組み合わせを出してくれて、カラーコードもコピーできるのでブログのデザインをする時にピッタリです。Cloudで色を共有できるのでそのままPhotoshopで使えます。無料(記事公開時)ヘッダーのインパクトが大事!前回のブログ合宿と同じくブログのヘッダーはとても大事!という話もありました。ブログを開いてまず目に入るヘッダーが文字だけだったり白・黒・グレーだけで地味だと印象に残りにくいです。印象に残りやすいヘッダーのポイントは人は意外と文字を読まないので画像を使うフリー素材よりオリジナル写真を使う簡単に個性を出せる顔写真を使うの3つだそうです。このブログのヘッダーもこれを踏まえて作ってあります。手軽にヘッダー画像を作れるアプリ僕はPhotoshopを使って作ってるんですが、iPhoneなんかでも簡単にヘッダー画像が作れるそうです。ぅなさんおすすめのアプリを教えてもらいました。簡単に画像編集ができるPixelmatorというアプリ。これは販売終了してしまったiPhone版のPhotoshopと同じような事ができるそうです。¥120(記事公開時)そして画像とフレームと選択するだけで綺麗に並べてくれるMoldivというアプリ。無料なので試しに使ってみましたが、直感的に使えてできる画像もお洒落なのでおすすめです。伏見店で恒例の懇親会もありました!残念ながら講師のはるぅなさんは育児のため不参加でしたが。ごりゅごブログ塾の懇親会は毎回和やかで参加者のみんなと仲良くなれるので大好き。雅恭@onys310フリーのパーソナルトレーナー。トレーニングやロードバイク、スパルタンレースなんかが好き。体づくり、購入したアイテム、挑戦した事なんかについて書いてます。