サイト制作

配色について知ろう!

配色って、様々な場面において重要になります。

  • 広告を作る
  • サイトを作る
  • ブログの色を変える
  • イラストを描く

などです。

「何かを作り、何かを色づける」時に無意識に配色は気にしているでしょう

ですがみなさん

わたし
わたし
配色をするとき、どういうことを考えて配色していますか?
配色についてきちんと理解している方は多くないでしょう。

今回は、「配色」の基礎について理解を深め、そして活かしてもらえるようことを目的とします。

また、レイアウトやWebデザインについては別の記事を参照してください。

レイアウトの4つの基本原則 見た目のデザインは、色・フォント・装飾・レイアウトといった見栄えに関わるところです。また見た目以外のところは、表示のパフォーマン...
Webデザインの流れ【初心者向け】今回はWebデザインの流れをお伝えします。 基本的にはWebデザインの流れは以下のようになります。 ①企画 ②サイ...

スポンサーリンク

色の三原色

色の三原色には2種類あります。

  • 色光の三原色(RGB)
  • 色料の三原色(CMY)

の2つです。

色光の三原色

そのもの自身が発光しているものは光の三原色で色が作られています。
  • 赤(Red)
  • 緑(Green)
  • 青(Blue)

の組み合わせで表現されています。(RGB)

混ざって一番明るいところは「白」になります。逆に光が無いところは黒になるわけです。

代表例は、パソコンやテレビのディスプレイです。

色料の三原色

色の三原色は光が当たり反射して見える色で、印刷で出されるものは色の三原色で作られています
  • シアン(Cyan)
  • マゼンタ(Magenta)
  • イエロー(Yellow)

の3つで構成されています。(CMY)

本や雑誌など、印刷で出されるものはこれを用いて作られています。

色の3属性

色は表現するために3つの属性に分かれています。

  • 色相
  • 明度
  • 彩度

の3つです。

色相

色相は赤・青・緑などの色味の違いのことです。

この色相が段階的に変わっていくのを表す図形で有名なのが「色相環」です。

「色相環」は、反対色などの配色を考える時に使われます。

明度

明度は、「色の明るさ」のことです。

  • 明るい色:「明度が高い」「高明度」
  • 暗い色:「明度が低い」「低明度」

と表します。

全ての色の中で、最も明度が高い色は「白」、最も明度が低い色は「黒」になります。

明度の差があまりない色ばかりで組み合わせたものは見づらくなります

彩度

彩度は、「色の鮮やかさ」のことです。

彩度は明度同様に、「高い」「低い」で表します。

  • 彩度の高い色:派手めな色
  • 彩度の低い色:地味な色

といった印象を与えます。

彩度の高い色と低い色の間にある、「中間の彩度色」をうまく使うことで配色のセンスが上がります。

ちなみに、皆さんがよく目にするこちら。

  • 上下:明度
  • 左右:再度

を表しています。

配色のバランスは?

色の基本についてはわかったけど配色のバランスはどうすればいいの?

配色を決める時に「キーカラー」「サブカラー」「アクセントカラー」を決めていきます。
ブロガーのみなさんは、色のデザインを変える時などよく目にするワードだと思います。

  • ベースカラー:70%
  • サブカラー:25%
  • アクセントカラー:5%

の割合が一般的には良いと言われています。

配色の決め方

16進数で表示される色は種類がありすぎてどの組み合わせがいいの?

色をどうやって決めたらいいのか迷いますよね。

わたし
わたし
みなさんが色を決める時ってどんな場面がありますか?

冒頭でもお話しましたが

  • 広告を作る
  • サイトを作る
  • ブログの色を変える

イラストを描くなど場面は様々です。

企業の公式ホームページを見ていても、企業のイメージカラーが使われていますよね。
例えば、日本郵便ならポストから赤色がサイトによく使われています。
リクルートのサイトはブルー系が多いかもしれません。

広告やサイトを作る場合は、目的やユーザーをきちんと考えて設計していると思います。
その用途に合った色が望ましいです。

お子さん向けならカラフルな印象、ベビーグッズならパステル系などざっくりしたものでも最初は構いませんが、出来るだけ具体的に説明できる方が良いです。
「この色から、ベビーグッズが想像できる」とか「カラフルな色から子供向けおもちゃがイメージできる」など。

配色は、目的と照らし合わせて具体的に説明できるようにしましょう。さらに、その色から「連想できるくらい」が望ましいです

ブログでも「自然やアクティビティについて発信しているなら、自然をイメージした色」とかです。海や山でもそれぞれ色味が全然違います。
マリンスポーツなら、海や空などブルーを基調として連想させることが出来ます。

山でも「紅葉を見に行くのが好き」なら、紅葉を連想させる「赤や赤よりの茶系」になりますが、「登山」なら樹木などの幹の色味も加えるとより登山っぽさが増しますよね。
富士山だったら、また違うかもしれません。

色に対しての、「具体的な表現」&「色からの連想させること」がポイントです。

そうは言っても、1から色を考えるのが難しい時は「配色ツール」「カラーコード一覧」などを使うとオススメです。

オススメの配色ツール

https://color.adobe.com/ja

「Adobe」では、すでに出来上がっている見本もあるので参考にできます。
例えば「空」と検索すると、「空」をイメージして作られた配色の組み合わせが何パターンか出てきます。
1から配色を考えるのに、使いやすいツールです。

オススメのカラーコード一覧

「Web色見本 原色大辞典」では色とコードが並んでおり、検索しやすいです。

https://www.colordic.org/

その他のオススメツール

わたし
わたし
みなさん画像から、色味を参考にしたいと思ったことはありませんか?

わたしは、ヘッダーに使う写真やプロフィールのアイコンなど、使用する画像を決めてから色味を考えることがあります。

そういったときにはこのツールがおすすめです。

好きな画像を選択すると、その画像の色を抽出してくれます。

この写真(Twitterのヘッダーに使っています)を抽出するとこういう風に出てきます。

https://ironodata.info/extraction/irotoridori.php

ぜひ使ってみてください。

配色で与える印象が違う

配色によってユーザーが感じる印象は変わってきます。

例えば

  • 青系、低彩度のもの→男性のイメージ
  • 明るく柔らかい色→女性のイメージ
  • 金や銀などの色をアクセントに→高級感

などみなさんも直感で感じる部分はありますよね。

他にも

  • 郵便局→赤系のイメージ
  • 旅行→空や飛行機から青や白のイメージ
  • 赤ちゃん向けサイト→パステルなど優しい印象
  • 子供向けサイト→明るい色が中心(親が見る子供用のサイトならトーン抑えめ)

などそれぞれのコンセプトや印象で、色によって与える印象は変わってくるわけです。

当ブログにおける配色の決め方

「海外生活」が念頭にあり、それがきっかけでWebデザインや英語の勉強を始め、さらにはブログ運営にも行きついています。

きっかけが「海外」であり、さらには「世界中を巡りたい」という思いもあるので
地球でつながっている「空」をモチーフにしました。

好きな言葉に「夢は空高く、努力は足元に」というのがあるので、空と地面が移っている画像を選びました。それを少し加工してトーンを落とし、「配色抽出サイト」にて抽出した色のものを使っています。
(余談ですが、「空」と検索すると道が写った画像が多いのですが個人的に「道」は決められていてほしくないという頑固さがあるので「道」が載っていない画像を探しまくりました(笑))

そこから抽出した色をもとに、「Adobe」の配色ツールで並べてみて色を変えつつ…行きつきました。

個人的に好きな色は黄色でしたのでそれを使いたく、
緑よりの青を採用しています。
彩度や明度を変えまくっているのでサイトから「空」と連想できないと思います。
(私の場合は、看護師やWebデザインなどの他のテーマも融合させているブログでもありますから。)

ログなどはアイデンティティも大事なので、そこは愛嬌だと思っています。
好きな色で、ユーザーが見やすいことも大事です。

まとめ

「色」がもたらす効果は様々あることがわかります。
ぜひ参考にしてみてください。

レイアウトの4つの基本原則 見た目のデザインは、色・フォント・装飾・レイアウトといった見栄えに関わるところです。また見た目以外のところは、表示のパフォーマン...
Webデザインの流れ【初心者向け】今回はWebデザインの流れをお伝えします。 基本的にはWebデザインの流れは以下のようになります。 ①企画 ②サイ...
意外と知らない?Webサイトの種類 Webサイトの制作にあたって、Webサイトの種類を知っておくことは必要になります。 今回は「Webサイトの種類」について解...
CodeCamp
スポンサーリンク

ABOUT ME
アバター
ミキ
看護師をしながら海外生活を目指し、Webデザインと英語を勉強中。看護師関連、海外渡航関連、Webデザインなど幅広く発信中。世界中どこにいても仕事出来るようになるのが夢。