トーンを合わせた配色

Webやチラシをデザインする時、配色に困ることはありませんか？
色を組み合わせてみたら、まとまりがない・・・。
何だか、チグハグな感じで、おかしい・・・。

配色に時間をかけることができないときも、時にはあると思います。

トーンを合わせた配色の方法を知っておくと、色で困ることが減るかもしれません。
ここではIllustratorでトーンを合わせた配色を考える方法をご紹介します。

そもそも、トーンを合わせるとはどういうことなのでしょうか？

まず、色は「色相」「明度」「彩度」の３つの属性で成り立っています。
何それ？という方は、調べてみてください。
ここでは簡単に「色相」は色合い、「明度」は明るさ、「彩度」は鮮やかさと理解しておきましょう。

トーンを合わせた配色は、「明度」と「彩度」が影響します。
この２つを合わせて考えるのがトーン、なのです。

トーンでまとまる配色は、色の調子というか、全体のイメージに統一感がでます。
違和感がある、チグハグな配色、というのは、たいていの場合は避けることができます。

では、Illustratorで実際にトーンを合わせた配色を行ってみましょう。

まず１色、メインとなる色を考えましょう。
Webならば、例えば会社のイメージカラー、いわゆるコーポレートカラーなどを選択するといいのではないでしょうか。

長方形ツールで正方形を描画し、線を無しにして、色を決めましょう。

１色決めたら、作成した長方形をコピーしましょう。
今回は全部で４色作成しようと思いますので、３つコピーして、４つの長方形を作成します。

では、１色ずつ色を調整していきます。
左から２つめの長方形を選択し、カラーパネルを開きましょう。
HSBのバーが表示されていますか？

もし表示されていない場合は、カラーパネルの右上のメニューボタンを押して、HSBを選択しましょう。

そして、カラーパネルのSとBは動かさないようにして、Hのバーだけを動かして色を選択していきます。
この時の、Sは彩度、Bは明度です。この２つをあまり動かさないようにして配色すると、トーンを合わせた配色を行うことができます。

今回はこの４色を選んでみました。
少し彩度が高かったかな？賑やかな配色になりました。この４色をうまく使ってデザインをすると、色の調子があったデザインができる、というわけです。

この４色が１つの組み合わせとなりますので、スウォッチに新規カラーグループとして登録しておくとよいでしょう！

作った４色を選択ツールですべて選びます。

スウォッチパネルを開いて、新規カラーグループを作成をクリックしましょう。

新規カラーグループのウィンドウが出てきたら、任意の名前を付けます。
また「プロセスをグローバルに変換」を選択しておくと、グローバルカラーとして登録されますので、後々色を調整する場合に便利です。
グローバルカラーって何？という方は、調べてみてくださいね。

ウィンドウのOKを押すと、スウォッチに登録されます。
デザインの際にこちらから色を選択すると、使いやすいですのでお試しください。