色彩センスゼロでも大丈夫！簡単にイケてる配色をする方法
Webデザインをする際にとても困るのが配色。適当に色を置くとバラバラになりますし、似たような色ばかり使うと印象がぼやけてしまいます。そこで、色彩センスがなくても簡単にいい感じな配色が出来る方法を調べました。
更新日: 2012年11月27日RSS
mocolifeさん
732
お気に入り
61618
view
お気に入り追加
色彩の前提知識、色の三属性について
色は彩度・明度・色相の三属性（三要素とも呼ぶ）から成り立っています。
明度
色の明るさの度合いを表します。明度が高い＝明るい色はさわやかで爽快なイメージに、明度が低い＝暗い色は重厚で落ち着いたイメージになります。
色相
色相は赤・黄・緑・青などの言葉で区別されています。同じ赤でも赤紫・黄みの赤などがあるように、色相の数は無数に存在します。
メイン・サブ・アクセントの三つを意識する
メインカラー
配色の構成要素の中で、最も大きな面積を占める色のことをメインカラーといいます。全体のイメージを作り出す役割を持っています。
メインカラーは、ユーザーに何を伝えたいかで選ぶことが大切です。色にはそれぞれ印象があります。赤ならアクティブ、青ならクールなど様々です。
サブカラー
メインカラーに次いで面積が大きく、メインカラーを補う役割を持っています。
サブカラーは、メインで選んだ色を補う色を選ぶようにします。具体的にはメインカラーのイメージを補うと考えると良いでしょう。例えば、冷静な印象を与えるためにメインを青にした場合、より冷静さを伝えたければサブに紺色や水色などを選びます。
アクセントカラー
配色の構成要素の中で、最も小さい面積でありながら、もっとも目立つ色です。全体を引き締めたり、ユーザーの目を引く効果(役割)を持っています。
アクセントカラーは目立たせるための色なので、メインカラーとサブカラーと比較して目立つ色を選ぶようにしましょう。目立つ色を選ぶポイントですが、色相・明度・彩度のうち、2つ以上がメインカラーと異なる色を選ぶ事がポイントです。
おおまかにメインカラー7割、サブカラー2.5割、アクセントカラー0.5割とされています。この面積比率を守ると、美しい配色に仕上がりやすくなります。
インテリアとか、ファッションデザイナーが昔から使っている配色手法の一つに「60 – 30 – 10 Rule」ってのがあり、これはWEBデザインでも同じことが言えるというお話。
60%をメインの色
30%をメインと相対的な目を引く色
10%をアクセントカラー
配色の二つのパターン：トーン・オン・トーン系か、マルチカラー系か
トーン・オン・トーンの系統
トーン・オン・トーンはナチュラル配色とか、
同じ色合いで色調を変化させる、一番ベターな配色パターンです。
マルチカラー系
マルチカラーは、対比色やコンプリメンタリ、トリコロール、などで違った色合いを使い、
3色（トライアド）、4色（テトラード）、5色（ペンタード）、6色（ヘクサード）
で全体配色を構成した物です。（って僕の中で思ってます）
「クール」「シンプル」ならトーン・オン・トーン。
「楽しい」「インパクト」ならマルチ
という感じで良いと思います。
配色するときに意識しておきたい色の効果
色の面積効果
明るい色は小さな面積より大きな面積の方がより明るく感じられ、暗い色はより暗く感じられます。
色の誘目性
人の視線の流れは、左から右・上から下へと流れていきます。
誘目性の高い色は、上側や左側に配置すると、ページや文章にリズムをつけ自然に視線を誘導することができます。
無彩色よりも「有彩色」「彩度の高い色」「暖色」のほうが注目されやすくなります。
同系色でデザインする際のポイント
隣通しの色にはコントラストを！
コントラストの差がない配色は、まったりしすぎて印象に残りにくいです。ぼやけた印象は、コントラストをはっきり付けることで解消できますね！特に隣通しの色にはコントラストの差をつけると、よりくっきりした印象になります。
面積が重要 … でもバランスはもっと重要
それぞれの色の面積を、どう振り分けるかで印象が全然かわります。その色をどれくらい目立たせるかは面積の大きさにも依存します。後で出てきますが、目立たせたい色（メインカラー）の面積は特に重要です！
低彩度の中に高彩度を入れてみる
同系色の配色では、どうしても同じ色相を使うので、全体的に活気がないような感じがします。もし低彩度の色ばかりを使っているなら、少し高彩度の色を入れてみると、ぼやけた印象からメリハリのあるデザインに生まれ変わります。
色の持つ心理的効果を意識する
1
2
関連まとめ
-
【奇抜】かわいいおもしろデザインピアス
|1207396 view
-
【デザイナー必見】最強の日本語フリーフォントのまとめ
|1194757 view
-
【この夏やりたい！】爽やか★かわいい★ガーリー夏ネイルデザイン画像
|370970 view
おすすめまとめ
-
あの「伊右衛門」がオリジナルすぎる抹茶で攻めてる
|144717 view
-
いつの間に…サプリメント文化がメチャメチャ進化してる
|185865 view
-
ベタなのが逆にイイ？最近のプロポーズ事情を集めてみた
|10840 view
カテゴリ一覧
-
総合
旬のまとめをチェック
-
ガールズ
ファッション，美容，コスメ，恋愛
-
ニュース･ゴシップ
事件，ゴシップ，スポーツ，海外ニュース
-
エンタメ･カルチャー
映画，音楽，本，マンガ，アニメ
-
おでかけ･グルメ
旅行，アウトドア，デート，カフェ，ランチ
-
暮らし･アイデア
インテリア，ライフハック，家事，節約
-
レシピ
おかず，お弁当，おつまみ，簡単レシピ
-
カラダ
エクササイズ，ダイエット，肩こり，健康
-
ビジネススキル
キャリア，転職，プレゼン，英語
-
IT･ガジェット
Webサービス，スマートフォン，アプリ
-
デザイン･アート
クリエイティブ，写真，イラスト，建築
-
雑学
トリビア，不思議，名言，逸話
-
おもしろ
ユーモア，ネタ，癒し，動物，びっくり
-
定番
過去の人気まとめをチェック
お気に入り追加
732
mocolife歴史/映画/ITとか興味あります。
更新順：http://goo.gl/IIoRC
人気順：http://goo.gl/Q609T
twitter：http://goo.gl/HqdMJ
