セミコングランプリ2014のスライドの改善策、第二弾、配色について

前々回、こんなスライドに「ぐわぁ~~」と身悶えしたお話を書きました。


手っ取り早くいえば、がちゃがちゃな感じ♪ 

スライド1

まあ・・・でも、色っていうのはものすごく深い世界で、私もまだ砂浜か浅瀬かってレベルなので・・・・

今日は、こちらを参照して書いています。どちらもとっても素晴らしい本です♪♪♪

● プレゼンテーションZen デザイン(丸善出版: ガー・レイノルズ著)

● 伝わるデザインの基本 (技術評論社: 高橋佑磨・片山なつ著)





ではまず、色の配分のお話からいきましょう。


プレゼンテーション・スライドに使用する色は、

全スライドを通じて、3~4色にしとこう!

めっちゃセンスがあるか、デザインの勉強をしっかりしている方は、それに従って何色でもどうぞ♪ ただ、、、素人は怪我するぜっ♥

あと、一枚のスライドだけじゃなくて、全スライドを通してだからね。バラバラ使うと、一貫性がなくなるから注意してね~!


使用色の割合は、こちら。

● 背景の色 (全体の70%):  主に白だったり、時には黒や紺などだったりもします。

● 文字の色: 主に黒だったり、濃いめのグレーだったり、白で抜いたりもします。

● メインの色 (全体の25%)

● 強調の色 (全体の5%)



と、これだけ言われても、すでにえ~いっ(ノ`Д´)ノになってきていると思うので・・・




実例へGO♪♪♪

まずは、がちゃがちゃの例 から。

スライド2



これを、4色仕様にすると・・・こうなります。 ね、見やすいでしょ!

スライド3


背景の色・・・白

文字の色・・・黒(今回はタイトルだけが黒、グラフの白抜きはデザインの一環だから、文字色ではないです←すでにやや強引、まあ、浅瀬の人間だからね)

メインの色・・・えんじ(高校のジャージの色だったなあ・・・)

強調の色・・・赤

(ちょっとの言訳)
タイトルうしろの文字は、メインの色を透けさせているものです。これも1色に数えます(←ズルっぽいけどね☆。どうしても使用色を増やしたい場合は、こんなふうに透けさせたり、薄くしたり、グレーを使うとよいです。グレーは、どの色と組み合わせても自己主張しないので、もう1色!のときに、例外的に使える凄いやつなのさ♪)




さて、色の配分は理解できた!はずなので、、、


次は、メインと、強調の2色を、どうやって選べばいいのさ?という疑問が湧きますよね~~

色の選び方は、主に4パターンあります

・ 単色
・ 類似色
・ 補色
・ 黒白+α

まず、先ほどの赤っぽいスライドは、単色からチョイスしてます♪

単色っていうのはどういうことかというと・・・・

図4



同じ色(色相といいます)で、鮮やかさ(彩度といいます)や明るさ(明度といいます)を変える。

難しい言葉の定義は、自分で勉強してね~♡
まあ、つまりは、上記のように、色設定の時に、縦軸を垂直に選べばよいってこと。



さて、次のチョイスは、類似色

スライド4


一瞬、最初のやつと似ているけど、これ、色(色相)がちょっと違うやつらなんです。

つまり、こんなふうに、横軸を水平にかつ隣近所で選んでいる ↓↓↓

図6




さてさて、お次は・・・・補色(反対色ってやつね)。

スライド5


これは、「色相環」ってやつ。ネット検索すると、いっぱい図が出てくるよ。

図3

 
こういうふうに、色相環の反対にあるやつが、補色。

これを組み合わせても、素敵なんだよね~♥



最後は、黒と白にプラス1色。

お手軽なのに、間違いなくカッコいい逸品 !!!

スライド6



・・・ってなわけで、シンプルにしたかったのに、やっぱりちょっと難しくなっってしまった。

色彩の世界・・・深すぎる。。。

けど、めげないで試してみてね!

じゃあ、またね~♪

※ アーカイブ「ありのままじゃダメなんです・配色設定」は、色彩パレットを使って、単色と類似色について説明してます。合わせてどうぞ♪