ホームページ制作・ホームページ作成なら名古屋のオールシステムへお任せください。

皆さんは好きな色ってありますか？

私はくすんだような色やパステルカラーが好きなのですが、
原色が大好きな友人を見ていると、色の好みってそれぞれだなーと思います。

色から連想されるイメージをうまく活用して、デザインをするときに生かそう！というのが今回のテーマです。
チラシを作る際とかに活用していただければと思います。

色の持つイメージ

代表的な色、「白・黒・灰・赤・青・緑・黄・橙・桃・紫・茶・金・銀」の13色についてあげます。

清潔、純粋、神聖、正義、新しい、可能性、無、明るい、透明感、冷たい、平和、軽いなど

クール、高級、暗い、威厳、恐怖、自信、深さ、上質、神秘、男性的、不気味など

穏やか、寂しさ、地味、調和、薄暗い、落ち着き、安らぎ、信頼、スタイリッシュ、上品、温厚、エレガント、大人など

愛、活気、危険、興奮、自己主張、情熱、勝利、生命、怒り、派手、勇気、緊張、暑いなど

安息、開放感、公平、信頼、清潔、誠実、男性的、知性、眠り、落ち着き、涼しさ、冷たいなど

エコロジー、穏やか、爽やか、安らぎ、安全、希望、自然、若さ、癒し、平和、新鮮など

明るい、楽しい、のどか、華やか、危険、奇抜、希望、幸福、緊張、軽い、若さ、幼さ、発展など

暖かい、賑やか、温もり、家庭的、楽しさ、好奇心、健康、親しみ、美味しさ、活力、自由など

エレガント、幸福、女性的、繊細、柔らかい、若い、ロマンチック、愛情、甘い、解放、華麗、派手、優しい、幼さなど

エキゾチック、芸術、繊細、古風、高級、上品、神聖、知的、癒し、優雅、魅力、中性的など

温もり、安らぎ、安心感、穏やか、堅実、自然、重厚、伝統、渋い、素朴、生命など

永遠、貴重、輝き、高級、豪華、成功、派手、豊かさ、勝利、ひらめきなど

シンプル、機械、貴重、輝き、高級、人工的、洗練、知性、冷たさ、無機質など

飲み物の冷たさをアピールしたければ、青色。暖かさをアピールしたい時は赤色や橙色というように、色の役割や色の持つイメージを知っていると色に意味をもたせて使うことができます。
色を有効的に取り入れて、イメージのしやすいデザインを心がけたいです。

 

配色の比率

では次に色をどのような割合で使えばいいかをご紹介します！
デザインについて調べるとよく紹介されていますが、配色の役割は次の３つに分かれます。

 

ベースカラー：70％

最も面積を占める基本となる色で、主に背景となる色です。
明度（色の明暗）が高く、彩度（色の鮮やかさ）の低い色を使うことが多いです。
白、黒、灰色などの色がよく使われています。

 

アクセントカラー：5％

少ない面積ではありますが、一番目立つ色で、全体を引き締め、ユーザーの注目を引く役割があります。
単調な色味にメリハリをつけたい時などに使います。
「お問い合わせはこちら」というような最も目立たせたい場所に使いと効果的ですので、ここぞという時に使いたい色です。

 

メインカラー：25％

伝えたいテーマや目的に基づいて考えた色です。
デザインのイメージを決めると言っても過言ではないほど大切な色なので、一番最初に決めます。
会社のロゴの色やターゲットのイメージに基づいた色などにすることが多いです。
どういう目的のサイトなのか、どういった印象を与えたいのか、どんなユーザーに見てもらいたいかなどをしっかりと考えた上で設定する必要があります。

色の持つ役割を把握しながら決めることをオススメします。

 

使いやすい配色パターン

じゃあ実際にどうやって配色したらいいのかわからない(´・ω・｀)
という人に向けて、実際に使いやすい配色パターンをご紹介します！

モノクロマティックカラースキーム

色相環で一色を選択し、明度、彩度を変える方法です。
お手軽で簡単です。

 

アナログカラースキーム

彩度と明度を固定して、色相のみ変える方法です。
色相を変えてしまうのでメインカラーと合わないんじゃなかいと思ってしまう人もいるかもしれませんが、実際に組み合わせてみるとあら不思議。違和感のないカラーに大変身。

 

コンプリメンタリーカラースキーム

色相環でメインカラーを選び、逆の色である補色をあえて用いることでメリハリをつける方法です。
「補色」とは色相環で180度反対側の色のことを言います。

 

ちなみに、何度か出ている色相環とは、色相を環状に配置したもので、色を体系化するときに用いる方法の一つです。
色は光の波長の違いによって、赤・橙・黄・緑・青・紫というように連続的に変化して知覚されます。これを連続的に配列し円環状にしたものを、色相環といいます。（引用元：造形ファイル「色相環」）

 

まとめ

色の使い方についてご紹介してきましたが、いかがでしたでしょうか。
色の組み合わせはうまくなりたいけど、難しいことなんてわからない！という人はネット上に色の組み合わせパターンを自動で作成してくれるツールがいろいろあるのでぜひ試してみてください！
こちらの記事でも少し紹介してますので、ご覧ください。
→「デザインに困ったときの配色ツール」

私はAdobe Color CCをたまに使いますが、ホント便利です。
今回ご紹介したモノクロマティックカラースキームや、補色などが簡単にわかりますよー。
デザイナーなんていらないんじゃないかと思いますよね！

色の持つ役割や組み合わせ方を知っているといろいろなものに役立つと思うので、これからも勉強していきたいです。
それでは。