【書評】「カラーと配色の基本BOOK」でわかる配色デザインのコツ
こんにちは、田(den)です。
他の方のブログをいくつか眺めて心底感じたんですけど、
僕のブログ、カラーリングが地味すぎ？？
（変更前の画像です）
もともと色数少ないのが好き、だけども…
さすがにモノクロすぎてとっつきにくいような気がしてきました。思えば先日から自分が「読者になる」かどうかを何で判断しているのか考えていたんですが、一つ言えることはブログのデザインがしっかりしているということです。この「しっかりしている」というのは、言い換えると「作りこまれていて手抜き感がない」といった感覚でしょうか。
遠目から見て似たような雰囲気でも、やはり細部まで作者の意思が入り込んでいるか、それともなんとなく勢いと流れでそれっぽく形にしてみたか、観ている側はなんとなく無意識にわかってしまうものですよね。
もちろん僕がイケてるわぁと感じたブログ様も、紆余曲折を経ていたりまだ本人としては未完成と感じている方もいらっしゃるかもしれません。隣の芝が青いのも大いにあるでしょう。
でも、やっぱり僕のブログは急ごしらえ感があるなと思い知らされたわけです。
というわけでブログの配色、カラーリングについて学びながら実践します。
今回参照させていただいたのはこちらの書籍です！！
「デザインを学ぶすべての人に贈るカラーと配色の基本BOOK（大里浩二様）」
デザイン関係の本をいくつか眺めながら考えていたのは、現時点ではHTMLとかCSSについて全く知らないので、今回は配色だけを改善してみよう、ということです。
順番ですよ、順番！
やっぱりモノクロだとちょっと味気ないと感じることもありますもんね。
そしてこちらの本の表紙とAmazonの評価を見て、購入した次第です。
本書の内容と特徴
概要（Amazonより引用）
グラフィックデザインから企画書・プレゼン資料作成まで あらゆるデザインに役立つ配色の入門書。
デザインにおける要素は文字や図版などとともに色彩があります。
どんなに良いレイアウトをしても そこにほどこす配色の質が低いと、 すべてを台無しにしてしまいかねません。本書ではデザインを学ぶすべての人が、 配色で失敗することがないよう、
豊富な作例であらゆる種類の配色を解説しています。ひとつひとつ丁寧に作り込まれた作例は 配色はもちろん、レイアウトのヒントにもなります。
プロがあたりまえにやっている「かっこいい配色」は ちょっとしたコツとルールを知っているからできることです。
本書ではそのコツとルールを豊富な作例とともに丁寧に解説しています。新人デザイナーの方はもちろん、非デザイナーの方も、
さまざまなデザインワークにお役立ていただける1冊となっています。
超要約
本書は序章で色理論についてわかりやすく説明した後、１～４の各章で架空の実例のBefore/Afterで配色の実践方法を示してくれます。
ページのレイアウトは下記の画像をご覧ください。すっきりとして見やすい構成になってます。
特徴
配色のOK/NGがわかりやすい
この本で示されている広告などの実例はおそらくこの本のために作製された架空のものです。
そのため配色のOK/NGが強調されて示されているので、素人にも大変わかりやすいんですね。
そして各章でデザインの目的ごとに配色の手法が示されているので、自分の目的に合わせた配色を簡単に再現することが可能です。
色の再現がしやすい
上記で示したＯＫ例についてはすべてＣＭＹＫとＲＧＢとＨＴＭＬコードが記載されています。
ちなみに
ＣＭＹＫとはシアン・マゼンダ・イエロー・黒（本当はkey plate）のインクを混ぜて色を表現する方法で、主にプリンター・印刷に使用されます。
一方、ＲＧＢはレッド・グリーン・ブルーで光を混ぜて色を表現する方法で、主にディスプレイ・デジタルカメラなどに使用されます。
つまり印刷とディスプレイのどちらにも対応しているということです。
そしてＨＴＭＬカラーコードはＨＴＭＬの配色に使用されているもので、ブログの配色を変更する際に該当部分にそのまま入力すればＯＫです。便利！
また、巻末の付録では２色での作成例とチャートが示されているので、扱える色数が少ないケースでも役立てる例が盛りだくさんです。
ブログの配色に適用してみた
さて現在弊ブログではブログテーマ「Blooklyn」を使用させていただいており、
（ttp://shiromatakumi.hatenablog.com/entry/2016/02/04/171538 ：度重なるリンクがご迷惑かもしれないので、頭にhをつけてください。）
今回デザインテーマはそのままに、ＣＳＳをコピペしていじりながら配色に手を加えます。
また、その際にはこちらのブログの記事を参考にさせていただきました。
www.style-yry.com
どのように配色を決定するか？
ここからは僕なりの実践の過程を示します。
ブログの目的・コンセプトを考える
・どんな雰囲気を感じ取ってほしいのか
・どんな気分でブログを眺めてほしいのか
・与えたい印象、伝えたいコンセプト
を見つめ直しました。
詳しくはプロフィールをご覧ください！
www.m-w-matrixa.com
このブログでは
「みんながコンプレックスという運命に立ち向かえるような手助けをする」
言い換えて「私とあなたと誰かのコンプレックスをバキバキにブチ砕く」
というのをコンセプトに見据えております。
そのため、人に与える印象は
>頭の中をぐちゃぐちゃにするようないかんともしがたいコンプレックスに悩んでいるときに頼りにしたくなるような、でも言葉が入ってきやすい目線が同じの、
そんな感じがいいなと考えました。
ここから、親しみやすくて頼りになる
という印象をブログデザインのコンセプトにします。
親しみやすくて頼りになる配色とは？
さて、「親しみやすさ」「頼りになる」という目的で配色例はあるかしら…おっ！！
「トーンイントーン配色で信頼感をつくる」があるではないですか！
トーンイントーン配色とは
トーンが同じで色相が異なる配色、だそうです。
そしてトーンとは、明度と彩度が複合したものです。
実例を見ればすぐ理解できますので、ぜひ本書をご覧ください^^
何色を選ぶか
トーンを統一することは決めたので、あとは何色を使うかです。単純に好みで決めてもいいのですが、せっかくなので「序章・色彩の基本」より色から連想する物・感情から決めようと思います。
それぞれ、「信頼」から青、
「親しみやすさ」から赤黄
をチョイスしました。（フォントでネタバレでしたけど^^;）
どこにどう配色するか
色面積は文字の読みやすさから当然白バック、メインカラーをブルー系にして、アクセントに赤黄を入れることにしました。
といってもすでにブログは配色変更後なので、ここではBefore/Afterをご覧ください。
↓ ↓ ↓ ↓ ↓ ↓ ↓
信頼感と親しみやすさを得やすいデザインになったかな？
少なくとも地味で味気ない感じは減りましたね。きにいりました！
終わりに
こうして僕のブログの配色が改善されました！
自分自身大変気に入っているんですが（自画自賛）、もしご覧になった方の印象が微妙であれば、それは僕自身の能力の問題とお考えください。「カラーと配色の基本ＢＯＯＫ」は初心者でもわかりやすい親切で色彩鮮やかな本でしたよ！
さて本当は「本書の使い方」のページを画像で紹介して、
レイアウトの雰囲気やいかに使いやすいかを見ていただきたいんですが、著作権とか難しい話がありますもんね…。
ということで、書評のブログに本書の一部を載せてよいか、著者と発行者の方に問い合わせてみます！
無謀・無礼とも思われるかもしれませんが、やってみないことには相手の気持ちや判断もわかりませんから！
その結果も、結果が分かり次第ご報告しますね！
www.m-w-matrixa.com
（追記）問い合わせてみました。
以上、ここまでご覧いただき、ありがとうございました！^^
あ、こちらももしよろしければ……
いやほんと、なってくれたら心底うれしいです！！よろしくお願いします！！！
