発達障害ユーの人生逆転ブログ

闇の大学時代→ホワイト企業に就職&投資で資産形成するブログです。

色を簡単にデザインする方法(書評:ノンデザイナーズ・デザインブック)  

三行早見

  • 色相環に従って色を選ぶ
  • 選んだ色に白黒を混ぜて幅を持たせる
  • RGBは画面用、CMYKは印刷用。印刷物は印刷して確認しよう

 

 

ポスターやビラを印刷したり、プレゼン資料やホームページを作ったり。

そんな時に、色が変になったことはありませんか?

もっと色を上手く使えるようになりたいと思ったことはありませんか?

本書では、色を扱う上での、基本的な考え方を学べます。

要約すると、色相環に従って色を選び、白黒を混ぜて幅を持たせれば良いのです。

早速見ていきましょう。

 

色相環に従って色を選ぶ

色相環(カラーホイール)というものがあります。

色相環に従って色を選択すれば、誰でもいい感じに色を選べます。

赤・黄・青の、色の3原色を混ぜて、出来た12色を環状に並べたものが色相環です。

さて、これをどう使えばいいか見てみましょう。

 

f:id:yulifehack:20190806104946p:plain

3原色を含む12色を並べた色相環。補色、類似色、トライアド、スプリット ・コンプリメント・トライアドを、色相環に従って簡単に選択できる。
  • 補色:色相環の反対側同士です。片方をメインの色、もう片方をアクセントの色として使うと、とても目立つ効果があります。
  • 類似色:色相環の隣の3色です。似た色同士で調和します。
  • トライアド:色相環で120°の位置関係にある3色です。異なる色同士で調和します。
  • スプリット・コンプリメント・トライアド:ある色と、補色の両隣の色です。洗練された鋭さを出せます。 

 

さて、色相環を用いた、色の選択方法は分かりましたね。

ここからは、選択した色に、白と黒を混ぜて、幅をもたせる方法を見ていきましょう。

 

選んだ色に白黒を混ぜて幅を持たせる

純色に白黒を混ぜると、色は飛躍的な幅を持ちます。

早速見てみましょう。

 

f:id:yulifehack:20190806105050p:plain

赤の純色(ヒュー)に、白を混ぜた色(チント)と、黒を混ぜた色(シェード)。

純色をヒューと言います。

ヒューに対して、白を混ぜるとチント、黒を混ぜるとシェードという名前になります。

白黒を混ぜる割合を変えると、「赤」の幅をここまで広げられます。

この考えと、色相環を組み合わせるとどうなるでしょう?

以下をご覧ください。

f:id:yulifehack:20190806105128p:plain

ヒューの色相環に対する、チント(白)やシェード(黒)の一例。

このように、ある色の組み合わせを、白黒を混ぜて種類を増やせます。

なんとなく適当に色自体を増やすのではなく、調和する色の組み合わせを無限に増やせるのです!

 

この、チントとシェードの調節は、WindowsでもMacでも簡単に行えます。

例えばMacなら、Wordのフォント色設定などから以下の画面を表示します。

外縁部がヒュー、それを中央に近づけると白っぽく(チントに)、下のバーを右にするほど黒っぽく(シェードに)なります。簡単ですね!

f:id:yulifehack:20190806105253p:plain

Macにおけるチント・シェードの作り方。Windowsでも同様。

さて、色の作り方・幅の持たせ方を掌握したところで、最後に1つ注意点です。

それは、印刷用と画面用では、色の見え方が違うということです。

 

RGBは画面用、CMYKは印刷用。印刷物は印刷して確認しよう

RGBはパソコンなどで表示する画面用、CMYKは印刷物用の色の体系です。

RGBは光の3原色を用います。パソコンのモニターは光を直接照射して、照射光の色を目に届けます。

CMYKは色の3原色を使います。印刷物では、色素が特定の光を反射して、反射光の色を目に届けます。

この2つの違いで気をつけるべきことは何でしょう?

それは、画面上で編集したものを印刷すると、印象が違うということです。

画面上だと、光の関係でより鮮やかに見えます。

それを印刷すると、少しくすんだような色合いになることが多いです。

ですから、印刷物はテスト印刷してみて、出来栄えを確認しましょう。

RGBからCMYKへの変換は、MacでもWindowsでも簡単に出来ます。

万全を期すなら、変換してから印刷すると良いでしょう。

 

まとめ

色相環に従って色を選び、選んだ色に白黒を混ぜて幅を持たせると、調和した色を多種類用意できます。

RGBは画面用、CMYKは印刷用なので、印刷物は印刷して確認しましょう。

本書では、ここに述べた色の理論を、さらに詳しく述べています。

色の概念を分かりやすくする、多彩なサンプルやポスターも満載!

ぜひご一読ください!

 

ノンデザイナーズ・デザインブック [第4版]

ノンデザイナーズ・デザインブック [第4版]

 

  

注)本記事で扱っている「ヒュー」の色相環では、青は純粋なヒューではなく、ややシェード気味の色を使っています。これは、人間の感覚に合った自然な色相環を作るという論文から作られたプログラムを元にしているためです。こちらのページで、そのプログラムを用いた色相環を作成・実験することができます。