全国対応
アイコン:電話092-791-2108
メールする
電話する

目立たせたい時の色の選び方

 
Writter:LCT編集部
2021.11.04

デザインをしていて「目立たせたい」時、みなさんはどんな方法を思いつきますか?

目立たせたい部分を他よりも大きく見せたり一部だけ書体を太くしたり、色を変えたり、目を引くように何かあしらいを足してみたり、色んな方法があると思います。

全部が大きかったら、どこが目立っているのかわからない。たくさんの色をすでに使っていたら色で差をつけるのもなかなか困難ですよね。

今回は、ベースカラーが決まっているホームページなどのデザインで、お問い合わせボタンを目立たせたい!という場合の、色味についてブログに書いてみたいと思います。

弊社リクトのホームページをご覧いただくと、ベースカラーがオレンジであることがわかると思います。

アクセントカラーとしてグリーンが選ばれています。

なぜグリーンが選ばれたかというと、反対色なので(厳密にいうと青系が反対色)相反する色を使うことで差別化をはかり、目を引く効果を得ているからです。

この反対色というのは、どういうことかというと、色相環で位置する色の真逆の色をさしています。

色を目立たせる方法として

  • 隣接する色
  • 反対色
  • 明度差のある色

をあげてみたいと思います。

では、それぞれ効果と注意点をみていきます。

隣接する色

オレンジを基準に考えると隣接する色は色相環でみてみますと、だいたい右側は黄色、左側は赤になります。

色味としては、あまり変わらないので反対色ほど明らかではありませんが、得られる効果としては、全体になじむ中での主張となるので、落ち着いたイメージ、綺麗な仕上がりとなります。

洗練された中にも、見つけることができる控えめな主張ですが、役割は十分果たしています。

  • 安定した色味、全体になじむ
  • 落ち着いたホームページに効果的
  • 他の色に埋もれがちなので余白などを大きくとったり配慮がいる

反対色

色相環で逆になる色を指します。

以前ダイアードについてブログを書きましたが、反対色だからのと言って絶対真逆じゃないといけない訳ではありません。

理屈ではそうですが、少しずらした方がなじむこともあります。詳しくはこちら

得られる効果としては、LPのようにメリハリのある主張ができます。

カジュアルで賑やかな雰囲気になります。

  • 一番目を引く配色
  • 賑やかでカジュアル動きのあるデザインに効果的
  • イメージを壊す可能性があるので使い方には注意

明度差のある色

明度差とは色の明るさの違いです。

一番明度が高いのは無彩色では、白。一番くらいのは黒です。

有彩色では、一番明るいのは黄色、暗いのは青紫となります。

※トーンが同じだった場合の話です。

難しい話ではなく、パッとみて明るい。暗いの考え方で大丈夫です。

明るさが同じだと、反対色でも目立たない場合があるので、そういう時は明るさを変更しましょう。

例えば赤と緑は反対色ですが、明るさが同じなので目立ちにくいのです。

こちらもダイアードのブログに書いてあるのでよかったらご覧ください。

暗めのベタ塗りの上に白文字で抜く、明るめのベタ塗りの上に黒文字を乗せるなどがあげられます。

  • メリハリがつく、視認性が高まる。
  • 同じ色味のまま明度を下げれば馴染む(例:オレンジの明度の低いものは茶色)
  • 他の色に埋もれがちなので余白などを大きくとったり配慮がいる

まとめ

色について、3つに分けて考えてみました。

配色方法はたくさんあるのですが、基準はこのあたりかな?と思った部分を抜粋してみました。

それぞれ特徴があるので、トンマナに応じて配色してみましょう!

ホームページに関することなら
お気軽にご相談ください

資料請求

写真:コンセプトワーク資料

ホームページ制作の
コンセプトワーク資料と
12のチェックリスト
ホームページの
パッと見てわかる
27の改善ポイント

無料ダウンロード
チェックリストと改善リストをチラ見せ!

メールでご相談

ホームページに関するご相談を
メールフォームから送信いただけます

お電話でご相談

アイコン:電話092-791-2108
電話受付 10:00〜19:00 定休日 土日祝

お電話でもお気軽にご連絡ください