BLOG

  1. HOME
  2. ブログ
  3. WEB制作・デザイン
  4. デザイン
  5. ステキなデザインのWebサイトから実践的な配色テクニックを学んでみる
by かわさき かわさき

ステキなデザインのWebサイトから実践的な配色テクニックを学んでみる

ステキなデザインのWebサイトから実践的な配色テクニックを学んでみる

どうもかわさきです。あと数日で博多の事務所に引っ越してきて丸1年…早いものです。桜の花の蕾もふくらんできて、開花が待ち遠しいですね。

さて、今回のテーマは配色です。

デザイナーであれば誰でも一度は躓くこのテーマ…。「私はなんてセンスが無いんだ…!」と枕を濡らした夜は数知れず…とまではいかなくても、常日頃パソコンを前にうんうんお悩みの方は多いのではないかと思います。

世の中には配色テクニックを解説した書籍や、カラーコーディネーター検定など体系的に色を学べる手段や、「○○なイメージ」「2018年トレンドの配色」など、配色パレットを集めた本やサイトは多数ありますよね。

しかし、頭の隅にあってもいざ自分のデザインに落とし込もうと思ったら「で、これ、どう使ったらいいの??」となること、ないでしょうか?(自分は特にオシャレな配色パレットを活かしきれたことがないんですが…)

知識だけではなかなか身につかない…ということで、今回は実際に配色が優れているなと思ったサイトを例に、その配色テクニックがどう活かされているかを簡単に分析してみました。

配色とはそもそもなんぞや?

書いて字のとおり「色を配する」こと。

個々人の趣味の範疇であれば好きな色を好みで選んで問題ないかと思います。しかし、商業デザインにおいては色も目的を達成するための手助けをするテクニックのひとつとして、ある程度ロジックに基づいて決めていく必要があります。

また、見逃されがちですが、いい印象を与えるとともに、悪い印象(不快感・違和感)を与えないようにすることも重要です。

配色の「センス」

ノンデザイナーの方から想像すると、「デザイナーってめっちゃ色のセンスあるんでしょオシャレ~」…とか思われるかもしれませんが、不肖私、日常生活や芸術的な意味合いにおいては全くセンスありません…(´・ω・`) この服装のやモノ選びセンスのダサさ、なんとかしてほしい。

前項に書いたとおり、配色もデザインテクニックの一種である以上ある程度のロジックが存在します。なんとなくですが、配色センスがある≒配色ロジックを理解して、無意識に活かすことができる ということではないでしょうか?

ロジックを理解したら誰にでもイカす配色は出来るようになります。ただし、それを素早く、悩まず実行出来るようになるには訓練や個々人の資質が関連してくるかもしれません。

(余談ですが、色を見たときに「この色は周りに比べて彩度が高すぎて浮いているな…」とか「赤味が強いから他とトーンを合わせるために青味よりに…」など、色の判別が出来る能力も、一種のセンスといえるかもしれません。)

配色のテクニック

配色のテクニックや基礎知識を細かく書き出すとそれだけでシリーズ記事になってしまいそうなのと、すでに他で素晴らしい解説がありますので…詳しくは書籍や「配色 基礎」などで検索した結果をご覧頂ければ…(手抜き)。

1点、こちらのスライドが単純明快でとてもわかり易く、今回参考にさせて頂きました。ありがとうございます!

色彩センスのいらない配色講座

簡単に箇条書きで抜粋させていただくと…

  • おおよそ ベースカラー(70%)、メインカラー(25%)、アクセントカラー(5%)の割合で使用する。
  • 「メインカラー」はイメージの主になる色。ある程度明度が低い色がベター。
  • 「ベースカラー」は背景など広い面積を占める色。白などの無彩色、もしくはメインカラーの明度をあげたものが馴染みやすい。
  • 「アクセントカラー」は少ない面積でワンポイントとなる色。メインカラーの補色(反対の色)を選ぶと鮮やかに引き立つ。
  • 3色以上を使う場合は、近いトーンの色を選択すると吉。(色相・彩度・明度が近い色)

という感じでしょうか。

例を元にサイトの配色を分析してみる

それでは、上記の色の知識や配色テクニック&私個人のこういう意図かな?という見解を元に分析してみます。

※メインカラー・アクセントカラーで取り入れた以外の色も当然使用されていますが、その辺は省略しております。あしからず…。

オランジーナ

オランジーナ

白い背景に青×黄のビビッドな配色が特徴的なサイトです。

  • ロゴの濃いブルーをメインカラー、商品(ジュース)の黄色をアクセントカラーに配置。
  • メインカラーとアクセントカラーが丁度補色の関係になっており、鮮やかな印象。
  • アクセントカラーの黄色は、ワンポイントで使う明度が濃いものと、広い範囲で使う薄いものの2つを使用。(濃い黄色をそのまま広範囲に使うと、くどすぎる)
  • メインカラーのブルーを2パターン用意しているのも、濃い青で広い面積を埋めると重たくなりすぎるからだと思われます。

ヤマト運輸

ヤマト運輸

ページ途中、クロネコメンバーズの猫モチーフの背景(尻尾ふってる!)がかわいいですね。

  • トラック等でおなじみ、ヤマト運輸のコーポレートカラーのエメラルドグリーンをメインカラー、ロゴの黄色をアクセントカラーに配置。
  • メインカラーとアクセントカラーの色相は90度くらい。補色の関係に比べると少し落ち着いたイメージになります。
  • アクセントカラーの黄色は、オランジーナと同じく近い色合いの黄色を2色。クロネコメンバーズに関連するボタンのみ、若干黄緑色の黄色になっており、アクセントになっています。

フレンチごはん 西麻布GINA

フレンチごはん 西麻布GINA

ここまで白がベースカラーのサイトだったので黒がベースカラーのサイトを…。

  • 明度低めの赤がメインカラーなのか、アクセントカラーなのか迷ったのですが、こちらをメインと捉え、写真の色をアクセントカラーと捉えるとしっくりきます。野菜や色とりどりな食器の色が黒い背景に映えます。
  • メインカラーに近い赤が写真の中に含まれているのも、まとまりを出す一助となっています。特に使用する色が決まっていないとき、アクセントカラーを決めるときなど、一緒に使う写真の一部から色を取ってくるのも1つの手です。

阿蘇くまもと空港

阿蘇くまもと空港

最後に、多数のアクセントカラーを取り入れたサイトを取り上げます。

交通機関や大学、ポータルサイトなど多数の情報を取り扱う必要があるサイトでは、多色使いのほうが直感的にカテゴリーが分かりやすく使いやすいです。

  • 無駄にいろんな色(色相)を取り入れるほど散漫な配色になってしまいがちですが、色相環全体を補完するように色を選ぶと逆にまとまりが出てきます。
  • その際、明度や彩度をある程度揃えると逆にまとまりが出てきます。例でも、ほぼほぼ同じ彩度・明度でメインカラーとアクセントカラーを取り揃えています。
  • オレンジは彩度・明度が他の色に比べて高めですが、黄色系の色は彩度・明度が低いと特に濁って見えやすいから…だと思われます。このように機械的に選ぶだけではなく、色の特性を考えて調整することも大事です。

最後に

一部例外もありましたが、概ね途中取り上げた配色テクニックで説明できる内容になったかな?と思います。自分でもこうやって色の数値を出しながら言語化したのは初めてですが、改めて気づくこともあり勉強になりました。

そして、ロゴなど、コンセプトカラーがしっかりと決まっている会社やサービスは配色の方向性も明確ですね。普段、デザイナー的にもロゴの色合いが決まっているとデザインが作りやすいです(笑)。逆にロゴがないサイトは難し……じゃなくて、腕の見せ所ですね!

ではでは。

ページの先頭に戻る