色の話3 – 30度の法則でセンスアップ

類似色についてもう少しお話しします。

色相環から色を選ぼう

前回Wordのモノクロ文書に類似色を使って色をつけました。

元の文書はこちら。

10

テーマ「スリップストリーム」の中から近い色2色を使ったのがこちら。モノクロよりは親しみを感じるすっきりした印象です。

12

今度は色相環の類似色を使ってみます。上の画像の色に比べると使用する色の幅が広がったため賑やかな印象ですね。

16

使用したのは色相環の青と水色。これです。

17

30度の法則=類似色

複数の色を組み合わせて使う時に色の範囲を30度以内に収めると地味すぎず派手すぎず、多くの人に好印象を与えることができます。これを30度の法則と呼びます。色相環は12色の色を円の形に並べたものなので隣り合う色同士は30度離れています。つまり「30度の法則」は「類似色」と同じことを指しているんですね。

ところで「青」には「薄い青」「濃い青」というバリエーションがあります。また「澄んだ青」「濁った青」などというバリエーションもあります。専門用語では「明度」「彩度」という言葉で表現しますが(覚えなくていいです)簡単にまとめると次のようになります。

  • 薄い色と濃い色 → 白が混ざると薄い色に、黒が混ざると濃い色となる : 明度
  • 澄んだ色と濁った色 →グレーが混ざると濁った色になる。混ぜるグレーの濃淡で出来上がりの色が変わる : 彩度

こんな風に「青」といってもたくさんのバリエーションがあるので30度の法則を使うと「青」と「水色」しか使えなくてつまらない、なんてことは全然なくて薄い青と濃いめの水色を組み合わせたり青から水色のグラデーションに挑戦したりとアイディア次第でいろんな使い方ができます。

30度の法則の応用

30度の法則はファッションにも使えます。ファッションの色といえばお洋服の色、マフラーやベルトや靴など小物の色、バッグの色ですね。センスのいい色使いをしたい♪と思ったら30度の法則に当てはまるようにカラーアイテムを選んで組み合わせます。多色使いはファッション上級者さんにお任せするとして、まずは色数を絞ることからチャレンジしましょう。

色の話2 – 補色と類似色を使って文書を作ろう

Wordで補色と類似色を使った文書の例を紹介します。

モノクロで作成したこちらの文書に色を付けていきます。

10

「テーマ」を使って色をつけてみよう

11

Wordのテーマ「スリップストリーム」を使って賑やかにしてみます。テーマの色の設定は[ページレイアウトタブ]-[テーマグループ]-[テーマの色]から「スリップストリーム」を選択します。よく見るような可もなし不可もなしといった印象です。

14

「スリップストリーム」のパレットはこんな色。

「テーマ」を設定するとフォントの色や図形の塗りつぶしの時に使う色をそれぞれのテーマに設定された色の中から選べるようになります。どのテーマを選んでも調和が取れるような色の組み合わせが設定されています。よっぽどのことをしない限り「とても変」にはならないのでどんどん試してみましょう。

類似色を使ってみよう

12

今度は同じくテーマ「スリップストリーム」の色から類似色を選んで色を付けてみます。すっきりした印象となりました。でもちょっと単調でどこが重要なポイントなのかが伝わりにくいです。

補色を使って強調しよう

13

文字列の網掛けとグラフの中の一つの系列をブルーの補色である黄色に変更しました。テーマ「スリップストリーム」に黄色はないので「標準の色」の黄色を使ってます。上のような小さな画像でも「ポイントはここだよ!」というのが分かりやすくなりました。

 

色の話1 – 補色と類似色

文書やプレゼン資料、チラシを作る時やソフトウエアのデザイン・webのデザインを考えるときに「何色を使ったらいいかな…」と困ってしまうことはありませんか?不特定多数の人に好ましく思ってもらえる色使いを考えるのはなかなか大変な作業ですね。「誰からも好まれる色使い」を目指して「色使い&色の組み合わせ」について初心者向けに書いてみようと思います。WordやExcel、PowerPointで色を自在に操ることが目標です。

色相環

2

基本の12色をリング状に並べたものを色相環といいます。どこかで見たことがありますよね。色相環にはいろいろな種類があり提示されている色味には若干の違いがあります。ですから上の図の色味は絶対的なものではなくイメージと考えてください。赤→黄→緑→青→紫→赤に戻るというパターンです。

補色

8

色相環で反対側にある同士の色の組み合わせを「補色」といいます。反対色ともいいます。一番上の赤の補色は一番下の水色です。Aの右隣り、黄色の補色は反対側にある濃いブルーとなります。補色の二つの色を同じ分量使うととても派手なものに。一方の色の分量を多くもう一方をごく少量アクセントとして取り入れると補色の効果が発揮されます。

4

これは目がちかちかする感じですが

5

分量に差をつけると小さい方の黄色が引き立ちます

類似色

類似色というのは色相環で隣り合った色同士のことをいいます。

9

Aの赤を基準とすると隣にあるBオレンジとD赤ピンクが類似色となります。D赤ピンクを基準とするとA赤とE紫ピンクが類似色となります。色使いを考えるとき、たくさんの色を使用せずに類似色を組み合わせるとまとまりがある印象になります。Wordで文書をつくるなら一般的に白い用紙に文字色は黒ですね。その場合タイトルや見出し、強調したい部分の文字や下線などは類似色でまとめるとパッと見て「センスがいい」文書になります。

7

上は赤を基準にした類似色でまとめたものです。パッと見まとまった印象になります。下は類似色は無視してカラフルにしようといろんな色を使った例です。にぎやかで楽しそうではありますがこれをA4サイズの文書と考えてみると(あるいはブラウザの画面全体にこの色が使われていると)それぞれの色の分量にもよりますがごちゃごちゃして見にくい印象となるのはおわかりいただけるでしょうか。

次回は補色と類似色の使用例を見ていきます。