先日行われた「ブログ塾」で教えてもらった「デザインするための基本事項」のまとめです。
今回は、ごりゅご.comをデザインしてくれた@goryugoの嫁@haruna1221に、デザインの基本を語ってもらいつつ、基本のブログへの応用、実際のブログの添削などを行ってもらいました。
なんかこう「デザイン」て言う言葉は「センス」という曖昧な用語とごっちゃのものにサレテしまいがちですが、今回話を聞いていて改めて「センスは知識である程度カバーできる」ということがよくわかりました。
ブログ塾はじまった〜 #ブログ塾 pic.twitter.com/l0sqYLUM37
— いわい ともひさ(Tomo) (@Iwai) 2015, 7月 18
デザインの四原則
デザインの基本の基本。まずこの四原則をきっちりと覚えて、実践するだけで十分に「文章が読みやすいブログ」にできる。
デザイン4原則
近接、反復、整列、対比 #ブログ塾
— 佐藤雅恭(だこ) (@msato021) 2015, 7月 18
ウェブだけでなく、すべてのデザインに使える知識 #ブログ塾
— いわい ともひさ(Tomo) (@Iwai) 2015, 7月 18
「近接」で写真説明文をわかりやすく
まずは4原則の1つ目「近接」について。
関係するものは近づけて、関係ないものは離す。写真の説明とかもこの「近接」でわかりやすくできる #ブログ塾
— 五藤隆介 (@goryugo) 2015, 7月 18
「写真の説明文は写真の上に書くべきか下に書くべきか」なんて話が出てきたりもするんだけど、これもこの「近接」のテクニックを使って「写真の説明文は写真と近く」「写真に関係ない文章は写真と離す」ことで、どっちが写真の説明文なのか分かりやすくすることができる。
「反復」でごちゃごちゃを避ける
そして2つ目の基本「反復」
これは「似たような要素」をあえて繰り返し登場させることで、デザイン全体に統一感を出すためのテクニック。
いろんな要素を詰め込みすぎると見にくくなる。ある程度、色や形を統一する(同じものを繰り返す) #ブログ塾
— いわい ともひさ(Tomo) (@Iwai) 2015, 7月 18
特に初心者がよくやりがちなのが「やたらと色数が多いデザイン」
1つのデザインに赤も青も黄色も緑も全部詰め込む、というのはどこに目を向けていいのかわからず非常に分かりづらい。
配色をどうするか、というテーマは後にも出てくるが「配色」に関しても基本は「反復」
「整列」を意識するだけでデザインが引き締まる
整列 #ブログ塾 pic.twitter.com/X8QAp6mypj
— いわい ともひさ(Tomo) (@Iwai) 2015, 7月 18
そして3つ目の原則が「整列」
揃え方はいろいろあるけど、どこか一箇所だけでも揃えてやると見た目が非常にすっきりする。
「グリッドレイアウト」とかのテクニックなんかもあるんだけど、とにかくまず初心者が最初に意識するといいのは、本文部分やサイドバー部分の「左端をきっちり揃えること」
ザーッと縦にスクロールした時、どこかガタガタしてるところがないか探して、ずれてるところの横を揃えてやる。
これだけで「ちゃんとしてる感」アップ。
「対比」をすることで目立たせたいものを目立たせる
対比できてる場合 #ブログ塾 pic.twitter.com/PDIIA8aTGA
— いわい ともひさ(Tomo) (@Iwai) 2015, 7月 18
整列させた上で次に「目立たせる」ために使うのが対比。
ブログを例にすると「タイトル」や「見出し」を大きくしたり、文字色を変えたりと「対比」させることで、どこがどういう部分なのか直感的にわかりやすくなる。
赤は購買意欲を高める色 = 押してほしいボタンに赤を使う
今回のイベントでかなり盛り上がった部分がこの「赤」の話。
「色が持つイメージ」の中でも赤は購買色と呼ばれている色らしい。
赤色は購買色。値札とかは大抵赤。赤使うと売り上げが20%違ったりもするらしい。 #ブログ塾
— 五藤隆介 (@goryugo) 2015, 7月 18
ブログ的には、購入するボタン、押して欲しいボタンなどに赤色を使うといいよ。 #ブログ塾
— 五藤隆介 (@goryugo) 2015, 7月 18
とは言え、赤のイメージが「押してほしい色」だからと言って、何でもかんでもむやみやたらに赤を使えばいい、なんてわけではなく、ここぞというポイントで赤を使うから効果的なのはいうまでもない。
全部に赤色使ったら逆に押されなくなるよ #ブログ塾
— 五藤隆介 (@goryugo) 2015, 7月 18
文章での「強調」に赤を多用してしまうと「押してほしい赤」の効果が下がる?という見方もできる。
配色のコツ
これらを踏まえて、ブログ全体で「どういう色使い」をすればいいのか。
基本的に使う色は2〜3色。その際に役に立つのが「色相環」
色相環の隣り合う色を使うとまとまった配色になる #ブログ塾 pic.twitter.com/jZjMvqiG5e
— 佐藤雅恭(だこ) (@msato021) 2015, 7月 18
色相環で相対する位置にあるのが補色。真逆の色なので目立たせるときに使える。 #ブログ塾
— いわい ともひさ(Tomo) (@Iwai) 2015, 7月 18
色相環の向かい合う色を使う時は間を空ける #ブログ塾 pic.twitter.com/H3jUjZvANT
— 佐藤雅恭(だこ) (@msato021) 2015, 7月 18
また、色の比率は「70:5:25」くらいを意識するとバランスが取りやすい。
金麦は70:5:25ぐらいの面積比率 #ブログ塾 pic.twitter.com/gNWYNtWVfe
— いわい ともひさ(Tomo) (@Iwai) 2015, 7月 18
また、配色についてはイマドキいろいろ便利なツールがあるので、そういうのも活用すると便利で良い。
配色のアドバイスしてくれるツールその1 http://t.co/fxXWAsiU78 #ブログ塾
— 五藤隆介 (@goryugo) 2015, 7月 18
配色ツールその2 iPhoneアプリ。Adobe Color CC – カラーテーマを取得 #ブログ塾 https://t.co/j5c7nRytOy pic.twitter.com/15sQRjJEHh
— 五藤隆介 (@goryugo) 2015, 7月 18
まとめ
当日のイベントでは、この後「ブログヘッダーの話」とかヘッダーの作り方のコツ、とかいろいろ出てきたんですが、その辺の細かいところはTogetterにもまとめたので、そちらをご覧ください。
ブログ塾第2回 ブログをデザインするときに覚えておくと便利なこと。 – Togetterまとめ
2015年の4月から、こんな感じでいろいろとブログに関することを色んな人から学ぶ「ごりゅごブログ塾」というイベントを3ヶ月に1度開催しています。
次回は2015年9月後半~10月前半に開催の予定です。
日程の告知などはブログ、Twitterで行っていますので、興味あればRSSリーダーへの登録やTwitterでフォローなどいただければ幸いであります。