ひよこ図書館

学校司書のブログです。PC豆知識と日誌が主な内容です。

展示・掲示物に使える色の豆知識

今回は、展示・掲示物に使える色の豆知識です。

 

f:id:hiyoko_library:20161127153857j:plain

補色と準補色

色の相環図というものです。

これがあれば、色の関係性がよく分かります。

※自作したため、少し色が異なるかもしれません。ご了承ください。

f:id:hiyoko_library:20170122224301p:plain

 赤の場合、隣り合っているオレンジとイエローが同系色です。

 

赤の場合、補色(引き立たせてくれる色は)シアンです。

補色は基準の色の反対の位置にある色です。

 

赤の場合、準補色(比較的引き立たせてくれる色は)グリーンです。
準補色は、基準の色の120°の位置にある色です。

 

赤い本と青い本を置いた時のイメージ図です。

f:id:hiyoko_library:20170121212832j:plain

補色に合わせると、お互いが主張し、ビビッドな色合いです。

レッドにシアンは目がチカチカします(^_^;)

でも、青に黄は、案外映えますね。

夏の展示に使えそうな色の組み合わせですね。

 

次に準補色のレッドにグリーン、ブルーにオレンジです。

偶然にもクリスマスカラーですね。

でも、ブルーにオレンジはなんだか青がくすんで見えるような?

この例でお伝えしたかったのは、あくまで補色や準補色は

目安ということです。少し手を加える必要があります。

彩度と明度

f:id:hiyoko_library:20170121212833j:plain

彩度(さいど)は色の鮮やかさのことです。
彩度が高いと、より鮮やかなパキッとしたビビッドな色です。

彩度が低いと、ぼやけた色に近づきます。

 

明度(めいど)は色の明るさのことです。

明度が高いと、どんどん明るく、白に近づきます。
明度が低いと、どんどん暗く、黒に近づきます。

 

先程の補色の例です。

レッドにシアン、ブルーにイエローは強すぎて、

目がチカチカするので、彩度を低くしてみました。

f:id:hiyoko_library:20170121212834j:plain

マイルドになりましたね。単純に補色の色を背景にするよりも、

本が目立っているように見えます。実際の展示の場合は、

机に敷く布やPOPに使う画用紙などで色を調節するとよいと思います。

 

f:id:hiyoko_library:20170121212834j:plain

でも、彩度を下げればOKというわけにもいかない時があります。f:id:hiyoko_library:20170122224302j:plain

例えば、彩度が低いものを合わせてしまうと

なんだかぼやけた印象になります。

柔らかい印象、かわいらしい印象にしたい時などには

よいですが、使いどころに気をつけましょう。

 

次は、明度の例です。

青の明度が低いと、紺色になります。

青の明度が高いと、空色になります。

f:id:hiyoko_library:20170121212835j:plain

左の紺色は、落ち着いた印象です。

硬めのテーマに使うとよいです。

右の空色は、軽やかな印象です。

爽やかなイメージのもの、ポップな展示テーマがよいかもしれません。

色の組み合わせ

色の組み合わせかた(配色)のお話です。

配色には色々な方法があります。

f:id:hiyoko_library:20170122224303p:plain

・補色を合わせる2色配色(ダイアード)

 かなり強い色合いです。

 

・三角で結んで、色を均等に混ぜた3色配色(トライアド)

 ビビッドかつバランスの取れた色合いです。

 

・補色と隣り合った色を使った3色配色(スプリッドコンプリメンタリー)

 強い色合いですが、補色や均等に三角の場合よりもマイルドな印象です。

 

・四角で結んで、色を均等に混ぜた4色配色(テトラード)

 2種類の補色なので、強い色です。カラフルです。

 

ほかにもまだまだ配色方法はあるのですが、今回はこのあたりで…。

自作のため図が歪んでいて、すみません。

試しに、オレンジ色の本を展示するイメージ図を作りました。

細長い丸は、POPや帯だと思ってご覧ください。

上は同じ暖色系でまとめたもの、

下は補色と隣り合った色を混ぜた3色配色です。

 

f:id:hiyoko_library:20170122224304j:plain

実際には、表紙が単色だけの本は少ないですよね。

表紙に色々な色が使われています。

表紙にも色があるので、布や飾りにたくさんの色を使ってしまうと、

ごちゃごちゃ印象になることもあります。

本の展示や掲示の飾りに使う色は、3~4色くらいがオススメです。

 色の黄金比とは?

Webサイトや広告などで使われている色は、

ベースカラー90~60% 

メインカラー40~10%

アクセントカラー10~1% になっていると言われています。

そのなかでもよく使われている黄金比は、

ベースカラー70%メインカラー25%アクセントカラー5%という比率です。

f:id:hiyoko_library:20170122224305j:plain

このブログの場合、アクセントカラーの黄色を

どうしても使いたかったため、最初にアクセントカラーを決めて、

それに合うメインカラーの茶色を決めました。

でも、3色では少し寂しかったので、豆知識の豆のイメージから緑を選んで、4色にしました。

「この色を使いたい!」という色を選んで、それに合わせていくのがよいかもしれません。

 掲示物の作成例

今回の内容をすべて使って、本の福袋の掲示物を作ってみます。 

f:id:hiyoko_library:20170123221524p:plain

①使いたい色を選ぶ

 補色を使った2色にしました。

 この時、目立たせたい色は赤と決めました。

②彩度の調節

 レッドとシアンでは、どちらも目立ちすぎたので、

 シアンの彩度を調節しました。

 場合によって、明度を調節する時もあると思います。

③色の割合を決める

 レッドとシアンを使うことに決めましたが、

 掲示物となると、印刷する紙の色も重要です。

 今回は、白の紙を使うことにしてみます。

 さらに、3色の割合を考えます。

 赤をベースカラーにして、白をメインカラー、

 薄いシアンをアクセントカラーにしました。

 割合は厳密に計算する必要はありません(笑)

 自分の中での目安にするといいと思います。

  完成例はかなりシンプルなものになりました。

 少し寂しい印象だったので、

 さらに、赤の準補色の緑を少し足してみました。

 緑もシアンのように少し彩度を調整してもいいかもしれませんね。

 松竹梅、富士山はマウスで描いたのでガタガタです(^_^;)

f:id:hiyoko_library:20170123223617p:plain

 配色オススメサイト

[ HUE / 360 ] The Color Scheme Application

感覚で使いたいを選べるサイトです。

1色を選ぶとそれに合った色が自然に残って、選択しやすくなります。

 

配色の見本帳 | キーカラーで選ぶ配色パターン

 中心にしたい色を選ぶと、配色パターンが出ます。

こんな組み合わせもあるのか!と勉強になります。

 

WEB色見本 原色大辞典 - HTMLカラーコード

以前もご紹介したかと思うのですが、とにかく色が豊富!

和色は目に優しい色が多く、彩度を下げた色を使いたい時にとても便利です。

色の名前を見るのも好きなので、見ているだけでも楽しいサイトです。

 参考文献

すぐに役立つ! 配色アレンジBOOK

すべての人に知っておいてほしい 配色の基本原則

ウェブ配色 決める! チカラ - 問題を解決する色彩とコミュニケーション

デザインを学ぶすべての人に贈る カラーと配色の基本BOOK

 

さて、いかがだったでしょうか?

次回もよろしければ、お付き合いくださいませ。

広告を非表示にする