ブログデザインの基本をごりゅごブログ塾で学んだ！

先日プロブロガー・作家のごりゅごさん(@goryugo)主催のブログ勉強会、ごりゅごブログ塾に参加してきました。

今回のテーマは「人もブログも見た目が9割」で、講師はごりゅごさんの奥さんでWebデザイナー、そしてブログ「ごりゅご.com」のデザインもされているはるぅな先生(@haruna1221)。

デザインの4原則や配色などブログデザインの基本を学んできました！

デザインの4原則

今回のブログ塾で最初に教わったのは「デザインの4原則」について。

デザインの4原則というのは「近接・反復・整列・対比」の事で、これを守ればデザインセンスが無くてもカバーできるという話です。

このブログもWebデザインほぼ未経験だった僕が、ごりゅごブログ塾の前身であるごりゅごブログ合宿ではるぅなさんに教わった事を徹底して自作したテーマを使っていますが、結構いい感じにできてると思います。

近接

1つ目の近接について。

物と物の距離の事で、関係のある物同士は近づけて関係のない物は離すと分かりやすくなるという話です。

このブログの記事一覧を例に出すと記事のタイトルとサムネイルが近くて、次の記事との間が遠くなっています。

というかこの後の個人添削の時に指摘されたので遠くしました。

反復

2つ目の反復について。

ある程度同じデザインを繰り返す事で統一感が出て全体がまとまるという話です。

このブログだと記事一覧などが同じデザインの繰り返しになってます。

トップページでもカテゴリのページでも同じデザインにしてあります。

整列

3つ目の整列について。

物をどこかのラインに合わせて並べるという話です。

これを徹底するだけでかなり見やすくなります。

前回のごりゅごブログ合宿でもこの話があったので、テーマを自作する時に一番気をつけたポイントです。

このブログでは記事一覧やサイドバーなど各部を揃えています。

対比

4つ目の対比について。

色や文字のサイズ、行間を変える事によって見やすくするという話。

このブログでは見出しがオレンジの背景に大きめの白い字、本文が普通の黒い字になってます。

また個別添削を受けた時にこんな感じで強調したい部分に背景色を付けるのもいいと言われました。

色が持つイメージと配色について

デザイン4原則についての話に続いて色が持つイメージと配色についての話。

色が持つイメージ

色にはそれぞれ持つイメージがあって、それもブログデザインに活かせます。

例えば赤は生命力や活力などエネルギーを感じる色で、このブログのテーマカラーとしても使っています。

また赤は人を動かす力を持っていて購買意欲を高めるそうで、値札などによく使われるそうです。

ブログではボタンなどに赤を使うと押されやすくなるんだとか。

他にも

• 黄は明るく目立つ
• 緑は自然・健康
• 青は安定・信頼・落ち着き
• 紫は高級・上品・美意識

などをイメージさせるらしいです。

配色

配色については色相環という図を使って教わりました。

色相環で隣り合う「類似色」を使うとまとまった配色になります。

このブログでは赤とその類似色を使っています。

色相環のちょうど反対に位置する「補色」を使う場合、強い印象を残せるけど目がチカチカするので間に白や黒などを入れるといいそうです。

配色用のツール

配色に使えるツールを2つ教えてくれました。

まずは色をひとつ選ぶと自動で合う色を選んでくれるPalettonというツール。

メインの色を決めるだけでいい感じの組み合わせを出してくれて、カラーコードもコピーできるのでブログのデザインをする時にピッタリです。

Paletton – The Color Scheme Designer

そしてこれは写真から色を拾えるAdobe Color CCというアプリ。

Creative Cloudで色を共有できるのでそのままPhotoshopで使えます。

ヘッダーのインパクトが大事！

前回のブログ合宿と同じくブログのヘッダーはとても大事！という話もありました。

ブログを開いてまず目に入るヘッダーが文字だけだったり白・黒・グレーだけで地味だと印象に残りにくいです。

印象に残りやすいヘッダーのポイントは

• 人は意外と文字を読まないので画像を使う
• フリー素材よりオリジナル写真を使う
• 簡単に個性を出せる顔写真を使う

の3つだそうです。

このブログのヘッダーもこれを踏まえて作ってあります。

手軽にヘッダー画像を作れるアプリ

僕はPhotoshopを使って作ってるんですが、iPhoneなんかでも簡単にヘッダー画像が作れるそうです。

はるぅなさんおすすめのアプリを教えてもらいました。

まずは簡単に画像編集ができるPixelmatorというアプリ。

これは販売終了してしまったiPhone版のPhotoshopと同じような事ができるそうです。

そして画像とフレームと選択するだけで綺麗に並べてくれるMoldivというアプリ。

無料なので試しに使ってみましたが、直感的に使えてできる画像もお洒落なのでおすすめです。

恒例の懇親会！

ブログ塾の会場「MYCAFE伏見店」の近くにある越前鮮魚店 伏見店で恒例の懇親会もありました！

残念ながら講師のはるぅなさんは育児のため不参加でしたが。

ごりゅごブログ塾の懇親会は毎回和やかで参加者のみんなと仲良くなれるので大好き。

現在各部デザイン変更中！

ごりゅごブログ塾に参加してから快適にブログを読んでもらえるように細かいところのデザインを変更していってます！

ブログ塾で個人添削してもらった部分については別に記事を書くのでそちらもどうぞ！