embroidery

Webデザインの勉強をしていると、配色で手こずることが度々あります。

配色がうまく決まらないと、印象が悪いのはもちろんですが、そもそも納得のいくサイトにならず、完成するまで時間がかかるもの。

この記事では、おしゃれな配色パターンを6つ紹介します。記事の内容を参考にすれば、上手に色を組み合わせられるようになります

スクールの活用がおすすめ

Webデザインを学びたい人は、Webデザインのオンラインスクールがおすすめです。初心者でも基礎からしっかり学習できます。

2022年最新!おすすめレンタルサーバー
wpxshin top - おしゃれな配色パターン6選!色の組み合わせを工夫しよう
2021年5月31日にリリースされた、エックスサーバーのシステムをベースにしたシン・レンタルサーバー!

月額料金がスタンダードプランで1,540円〜(税込)なので、コスパよく爆速なサイト運営が可能に!

管理画面はエックスサーバーと同じで使いやすくなっているので、これからサイト運営をする方にはおすすめです!

\ Twitterでも口コミ良好! /

配色のコツとポイント

配色においての基礎的なお話です。配色のパターンを紹介していきますが、その中で使う用語があります。

  • 色相:赤、青などの色の様相のこと
  • 明度:色の明るさのこと
  • 彩度:色の鮮やかさのこと
  • トーン:明度と彩度の複合概念

以上の4つです。細かくはイメージできなくて大丈夫です。

色相・明度・彩度の3つを「色の三要素」と呼びます。一般的には、上の4つの知識を使って配色を決めていきます。

配色における「トーン」の意味

ここで、トーンという用語を使うにあたって説明を加えておきます。

トーンというのは明度と彩度をあわせて考えたものになりますが、PCCS(以下で説明)では、この12種類に分割されています。

pccstone - おしゃれな配色パターン6選!色の組み合わせを工夫しよう

画像出典:日本色研事業株式会社公式サイト

それぞれのトーンには「ltg」や「sf」などの名前がつけられています。「トーンが同じ」という表現は同じ種類に分割されている意味です

例えば「ltg」の中の12色は"トーンが同じ"と言えます。

日本にあるカラーシステム

日本には「PCCS(日本色研配色体系:Practical Color Co-ordinate System)」があります。詳細は以下のとおりです。

PCCS(日本色研配色体系:Practical Color Co-ordinate System)は、財団法人日本色彩研究所が、カラーハーモニーの問題をシステマティックに解決することを主な目的として開発し、1964年に発表したカラーシステムです。
PCCSは色の三属性を骨組みにしていますが、色相とトーンによる二次元のシステムとして使用できる点に特徴があります。

引用元:日本色研事業株式会社公式サイト

今回の説明では、統一してこのPCCSで採用されている名称を使います。

6つの配色スタイル

実際の配色スタイルを紹介します。メインカラーを青色に設定したと仮定して見ていきましょう。

37d5793ade5e0bd29dcaf9b0accb19c1 - おしゃれな配色パターン6選!色の組み合わせを工夫しよう

画像出典:色見本と配色サイト

カラーコードは「#0066cc」です。

トーン・オン・トーン

トーン・オン・トーンと呼ばれる配色は、色相を同じにし、トーンを変えた配色です。例えば今回の色相は青色。その中でトーンを変更していきます。

具体的には、下の画像のような配色です。

cd2f1b2e081baf9a0fbe22649f81fc99 - おしゃれな配色パターン6選!色の組み合わせを工夫しよう

画像出典:色見本と配色サイト

青は統一感が出しやすいので調和がしやすい配色とも言えます。

トーン・イン・トーン

トーン・イン・トーンは、トーンを同じにして、色相を変える配色です。

toneintone - おしゃれな配色パターン6選!色の組み合わせを工夫しよう

画像出典:色見本と配色サイト

色相が変わるので組み合わせるのに技術がいる配色です。今回のカラーコード「#0066cc」は「v」か「dp」に当たるので、そのトーンから選択します。

「#0066cc(目当てのカラーコード) トーン」とネットで検索すると、トーンを調べられます。

カマイユ

カマイユ配色は、微妙にトーンだけを変更する配色です。PCCSのトーンが隣り合っている部分から選んだりするのがよいでしょう。

kamaiyu - おしゃれな配色パターン6選!色の組み合わせを工夫しよう

画像出典:色見本と配色サイト

これも色相が同じなので、使いやすい印象があります。遠くから見ると、ただの単色に見えることもあります。

フォカマイユ

フォカマイユ配色は、カマイユという配色手法から色相とトーンの大きさを大きくしたような配色です。

fauxcamaieu - おしゃれな配色パターン6選!色の組み合わせを工夫しよう

画像出典:色見本と配色サイト

コントラスト

コントラスト配色は、色相・彩度・明度が反対の色を選択します。違いがハッキリ出るため、印象づけることは出来ますが、乱用すると汚らしい印象を与えます。

contrast - おしゃれな配色パターン6選!色の組み合わせを工夫しよう

画像出典:色見本と配色サイト

CTA(コールトゥアクション:行動喚起)のボタンパーツに使うのがおすすめです。

ビコロール

ビコロール配色とは「2色の」という意味があるため、明快な差のある2色の配色です。一般的には「白」「黒」との組み合わせが多いでしょう。

bicolore - おしゃれな配色パターン6選!色の組み合わせを工夫しよう

画像出典:色見本と配色サイト

ミニマルデザインやマテリアルデザインの流行りで、シンプルな配色も使われるようになるでしょう。

有名サイトの配色を調べる

それでは、ここからは実際にある有名なサイトの配色を調べていきましょう。

  • REDBULL(レッドブル)
  • cookpad(クックパッド)
  • Starbucks(スターバックス)

REDBULL

REDBULL - おしゃれな配色パターン6選!色の組み合わせを工夫しよう

画像出典:REDBULL公式サイト

あの「翼をさずける」で有名なREDBULLのサイトです。個人的には画像メインでかなりかっこいいなと印象を受けました。

気になる配色は、こんな感じです。(データはおおよそだと思ってください)

redcolor 300x217 - おしゃれな配色パターン6選!色の組み合わせを工夫しよう

圧倒的に白が多いですね。実際にサイトを見ていても「ビコロール配色」と言えるんじゃないでしょうか。

cookpad

cookpad - おしゃれな配色パターン6選!色の組み合わせを工夫しよう

画像出典:cookpad公式サイト

レシピをたくさん置いてくれてるcookpadさん。ここはアクセス数もとんでもない数です。サイトの配色は以下のようなイメージです。

cooccolor 142x300 - おしゃれな配色パターン6選!色の組み合わせを工夫しよう

トーン・オン・トーンかな?といった具合の配色ですね。

Starbucks

starbucks - おしゃれな配色パターン6選!色の組み合わせを工夫しよう

画像出典:スターバックス公式サイト

スターバックスの配色は以下のイメージ感じです。

starcolor 142x300 - おしゃれな配色パターン6選!色の組み合わせを工夫しよう

基本的には、ビコロールのような配色で、緑(スターバックスのロゴ)とのコントラストにしています。

自分のサイトの配色を決める

それでは、ここまで話した内容を実際に活かしていきましょう。

筆者が行っている色の決め方を説明していきます。

  1. まずはメインカラーを決める。できれば1色。
  2. 次は、配色方法を決める。(※)
  3. 使う色を選び出し、一覧にしておく。
  4. 実際にサイトに使用してみる

こんな感じです。(※)とつけた2番のところでは、ネット上にあるツールなどを上手く使うといいでしょう。

筆者のオススメは画像にも使わせて貰っているサイト(色見本と配色サイト)です。

配色に関するまとめ

先に配色を決めておくことで、行き当たりばったりのデザインにならないで済みます。結果的にそのほうが、クオリティも上がるし、制作スピードも速くなります。

配色に関するおすすめの本は、7日間でマスターする配色基礎講座 (DESIGN BEGINNER SERIES)ir?t=webcode06 22&l=am2&o=9&a=4881081535 - おしゃれな配色パターン6選!色の組み合わせを工夫しようです。最初のうちは馴れないとは思いますが、まずは、メインカラーを決めるところから、やってみてください。

より詳しくデザインについて学びたい人は、Webデザインのオンラインスクールがおすすめです。初心者デザイナーでも、Webデザインの基礎から実践的なスキルまで体系的に学習できます。

おすすめの記事