北九州市小倉南区で Web プログラミング パソコン教室ならささのは

北九州市小倉南区守恒本町2-6-6 GROWTH SI 守恒509号室
モノレール守恒駅から徒歩3分

トーンを合わせた配色

Illustrator

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

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

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

トーンを合わせた配色とは?

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

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

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

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

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

Illustratorで配色する

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

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

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

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

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


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

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

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

作った色をスウォッチパネルに登録する

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

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

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

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