ブログ

WEBデザインの配色を無難にまとめるための鉄則3つ

Color scheme-page-12

こんにちは、デザイナーのTantanです。前回「イラレの遠近グリッドで3D風のイラストを描く方法「車編」」の記事で少し配色について触れましたが、今回は平面での配色の話をしたいと思います。
私の考える鉄則は3つ

  • 目に痛い色を使わない
  • 可能な限り色数を減らす
  • 青緑・紫・ピンクには手を出さない

あくまで、配色の苦手な人が無難にまとめるための方法です。ノンデザイナー向けの内容だと思って下さい。センスのある冴えた配色を身につけるテクニックがあれば私が教わりたいです。

目に痛い色を使わない

昔たくさん見かけたこういう色づかい。

Color scheme-01
どうしてこうなってしまうのか。それは、RGBという形式が自然には存在しない高彩度の色を表現できてしまうからです。こういう色は、印刷物ではそもそも表現できませんし、自然界や身の周りにもほとんどない色です。ですがディスプレイの光では表現できてしまうのが悲劇です。さらに残念なことに、このケバケバしい色は、RGBの混色で簡単に作れてしまうのです。
Color scheme-03
ご覧ください、この255まで振りきれたスライダを。RとGとBをシンプルに混ぜるだけで、いとも簡単に作れます。しかも、これらの色は様々なアプリケーションのデフォルトカラーパレットにトラップのように仕込まれています。あるとつい使いがちなんですよね。困ったことに。
このトラップを克服するためには、まずデフォルトのパレットは使わないことです。そして、ColorHuntや、有名なAdobe Color CCなどですでに出来上がっているカラーパレットの色をそのまま使うか、またはこちらの色見本がおすすめです。→HUE360
Color scheme-05
このHUE360では、マンセル値を基準にした色相環から色を選ぶことができます。不自然に彩度の高い色はあらかじめ除外されているので安心です。これを使って、さきほどの色に似た色を選びなおしてみました。
Color scheme-04
RGBのスライダは微妙な数値です。これを自分で混色するのは大変なので、色見本で直感的に選べるのは嬉しいです。この色に変えたページデザインはこちらです。
Color scheme-02
目に痛くはなくなりました。まだ問題はありますが、とりあえず彩度を整えるだけでかなりまっとうな配色に近づいたと思います。

可能な限り色数を減らす

配色が苦手な人は、できるだけ色数を減らしたほうが無難です。さきほどのページデザインの色数を減らしてみました。
Color scheme-07
有彩色(青)一色とモノトーン(白黒グレー)だけです。写真やバナーで否応なしに色は増えますので、土台はこれだけでも十分です。これならまず色で破綻することはありません。モノトーンを準無彩色(茶系やブルーグレー系)に変えても大丈夫です。
Color scheme-08
あとは、同系色なら多少色相や明度を振っても大丈夫です。
Color scheme-09
はい、これで完成。このルールを守れば無難にまとまります。、、、と言いたいところですが、やはり数色使わないといけない場面もありますよね。賑やかで楽しげな雰囲気を出さないといけなかったり、ボタンやアイコンは目立つ色にしないといけなかったり。そういう時は次の鉄則です。

青緑・紫・ピンクには手を出さない

ちょっと主観が入っているかもしれません。すみません。とりあえず、こちらをご覧ください。
Color scheme-10
私は、理由がない限りこれらの色相には手を出さないほうがいいと思っています。特に、補色の場合です。よく色彩の基礎知識として出てきますよね、「補色は調和する」という理論。ですが、ファッションやインテリアの配色ならともかく、Webデザインにそのまま適用するのは難しいと思うのです。以下の画像をご覧ください。

素直に補色を選んだ例

Color scheme-page_02Color scheme-page-09Color scheme-page-10
いかがでしょう。私はひとつめの「青+黄」以外は実用性が低いと思います。アクセントにしている青緑、紫は確かにメインカラーの補色で引き立ってはいるのですが、色の持つ個性が強すぎます。個性が出すぎて「無難」とは言いがたい気がします。私がおすすめするのは、青緑・紫・ピンクを避けて色を選ぶ方法です。

赤のアクセントカラーを選ぶ

アクセントにしたい補色が青緑系だった場合、ちょっとずらして青や緑を選びます。
Color scheme-page-04
いかがでしょう。先ほどの赤+青緑よりも、赤+黄緑のほうが万人受けする感じがしませんか。トマトやりんごなどで見慣れているからかもしれません。赤+青でもOKです。

緑のアクセントカラーを選ぶ

緑系の場合は、補色は赤紫やピンクですが、ずらして赤やオレンジを選びます。
Color scheme-page-03
ナチュラルな雰囲気で馴染みやすいと思います。もちろん青を選んでもいいですが、色相が近いのでアクセントカラーとしては目立ちにくいかもしれません。

オレンジのアクセントカラーを選ぶ

緑・青、それぞれのサンプルを作ってみました。
Color scheme-page-07Color scheme-page-05
緑だと健康的、青だと知的な印象になりそうです。

無難な色と個性の強い色がある

いかがでしょうか、ありがちでつまらない配色かもしれません。でも、無難にまとまって破綻はしにくいと思います。ビビッドカラーで言うと、赤、オレンジ、黄色、黄緑、緑、水色、青が使いやすい色ということになります。これって、Googleの色だったり、Windowsの色だったり、MacのNumbersの色だったりします。
Color scheme-icon-00 Color scheme-icon-00 Color scheme-icon-02
これは名付けるならビジネスカラーと言ってもいいんじゃないでしょうか。特定のイメージに偏らないので場面を問わずに使えます。それぞれを組み合わせてもおかしな印象にはなりません。
特定の色相を切り捨てるというのは乱暴な話かもしれません。おそらく色彩関係の教科書にはそんなことかかれていないでしょう。紫やピンクは女性ターゲット向けのサイトには最適ですし、青緑もきれいな海のイメージがあり同系色ならまとまります。また、パステルカラーや、ダークトーン配色のようにトーンを揃えればうまく使えると思います。
ただ、色にはそれぞれイメージがあるので、サイトのテーマに合わない色を避けるのは大事なことだと思います。

まとめ

  • 高彩度の色を避け、カラーパレットを活用する
  • 有彩色はできればひとつに絞る
  • ピンク、紫、青緑を避け、ビジネスカラーを使う

配色が苦手な私がおすすめするコツは以上3つでした! とにかく破綻しない無難な配色をしたい方は、ぜひこの方法をお試しください。

■この記事を書いた人 Tantan(デザイナー)

18歳まで広島育ち。大阪・東京でデザインの経験を積み、先日広島にUターンしてきました。糖質制限を実践中で冷凍庫には牛肉を常備。最近気になるキーワードは「ミニマリスト」。でも家の中を散らかしまくる2児の子育てに疲労困憊。

関連記事

  1. blog_gif-01 トップページのカープ優勝バージョンで紙吹雪とともに降ってきたモノ…
  2. IMG_0826 濃厚魚介スープが旨い!!永斗麺でサンマラーメンいただきました
  3. 40f8970f6d4d71678b9f13c00265354d_s Atomで書いたコードに見えないTofu(豆腐)が紛れ込んだ時の…
  4. チェックリストイラスト オフィスでコーチングのタイプ診断をしたら楽しい結果になった
  5. news_study エム・フィールド 広島オフィスで「広島フロントエンド勉強会(仮)…
  6. オープン記念のイラスト サンタさんからクリスマスプレゼントが届いたよ
  7. オープン記念のイラスト エム・フィールド広島オフィス 1周年!
  8. moving-hiroshima 東京から広島へUターン移住しました!保活やおすすめエリア情報も

最近の記事

  1. IMG_1781
  2. Hirofuro-logo-8
  3. eyecatch7-1
  4. SEO-eyecatch
  5. wtm100
PAGE TOP