color『Webデザイナーの勉強には色彩検定は必要か?』と考えたことのあるデザイナーさんは少なくないと思います。自分も最初受けるかどうか迷いました。ネットでは賛否両論でよくわからず。3級を勉強し始めても、どれが使える知識かいまいちわかりませんでした。それから最終的に色彩検定を2級まで取得、Webに関してもある程度経験したので、どれがどう役に立つのかもわかってきました。そこで、最初の頃に知りたかった『実際使える色彩検定の知識』をランキング形式でまとめたいと思います。(3級2級は結構かぶってる部分もあるので特に区別せず、項目も任意で分類してます。いう3つの属性に分けたもの。色を決める尺度となる『色の物差し』で、配色で避けて通れない『基本のき』と言えます。彩度を持たない白・グレー・黒のこと3級のPCCS、2級のマンセル、フォトショ・イラレでは名称が微妙に違うのがややこしいです。(PCCS、マンセルというのは配色のための色彩体系の種類。色を決める際に頻繁に使います。photoshopでは『カラーピッカー』を開くと『H・S・B』の項目があるので、そこで数値を調整します。↓の画像を作るのにも使っていて、色相だけ差をつけて、彩度・明度は変えずにバリエーションを作ってます(黄色だけ彩度明度も微調整)。色相だけ変えると、簡単に調和のとれた色違いが作れます(後で説明する同一トーン配色という)。他にも使い所は様々です。色が地味なので彩度を上げる。色がうるさいので彩度を下げる。文字が見えづらいので文字色の明度を落とす同じ色相、明度・彩度に差をつけて同一色相でバリエーションを作るちょっと応用的な使い方としては、例えば同じ黒でも、そのサイトの他のパーツで使われてる色相にした黒にしたりすることがあります。このサイトも文字はパッと見黒ですが、商品画像のパッケージが紺色なので、それに合わせて色相は青(H:200)で少し青みがかった黒になってます。色相彩度0の黒と比べると、より全体の雰囲気が調和した印象になります。『色相環』は虹の7色と言われる赤〜青紫の色に、紫・赤紫を加えて円状に並べたものです。調和がとれていて綺麗に見える並び順として参考になったり、下で挙げる『配色テクニック』でも基準として使われます。3級ではPCCSの色相環(24色)、2級ではマンセルの色相環(20色)が出題されます。実際の使い所1位の『色の3属性』の画像でも利用していて、『3属性の色相』の5色(赤・黄・緑・紫)は色相環順になってます。Web以外の例では、テレビの電子番組表や商店街の旗でも見られます(『配色イメージワーク』は次で紹介します)。PCCSトーン/ヒュートーンシステムPCCSトーンとは明度と彩度を合わせた、色の調子・雰囲気のこと。ヒュートーンシステムは色彩(ヒュー)とトーンにより、色を分類したシステム。有彩色で12種類、無彩色で5種類に分けられます。トーンはそれぞれ次のようなイメージを持っています。実際の使い所トーンは作るサイトの業種、ターゲット、伝えたい印象をデザイン/色に落とし込む際のヒントになります。PCCSトーンに近いものとして、『イメージスケール』というものもあります。これもイメージを元に配色を分類したものです。↓実際、クライアントワークでこのイメージスケールを利用する流れを紹介している記事です。本では5色で分類している『配色イメージワーク』と3色で分類している改訂版の『カラーイメージスケール』があります。両方持ってますが、個人的には3色の改訂版の方が目安として使いやすいんじゃないかと思います。ベースカラー・アソートカラー・アクセントカラーこれも実戦的で使い勝手のいい知識です。知っていないといけないレベルだと思います。5にするという方法です。例としては次のものがわかりやすいです。Webデザインでは目立たせたいコンバージョンをアクセントカラーにすることが多いです。この方法はイラストでも使えます。いちあっぷ講座』この記事では70%をメインカラー、25%をサブカラーとしています。Webデザインでいうと、70%の色がベースカラー、25%がメインカラーといった方が合ってるかと思います。色のイメージ・色彩心理トーンは色の組み合わせのイメージで、こちらは色自体がもっているイメージについてです。これは学ぶ前から自然と持っている感覚でもあります。デザイナーとしては色を選ぶ根拠として意識的に知っているべきポイントになります。心理的効果が色と関わりがあります。色と連想これはある意味1位にしてもいいくらいです。リンゴのサイトなら赤、植物のサイトなら緑と一番に配色を決めるポイントになります。使い所は本当に沢山ありますが、特に食品関係は寒色・暖色を使った例がよく見られます。配色のテクニック『色相環』を使って、『色相』と『トーン』を軸にした2種類の配色方法です。これも3級と2級で少し異なりますが、ここでは3級の配色方法を。同じ『pale』内の色を選ぶ場合は『同一トーン配色』といいます。『pale』と『light』を組み合わせる場合は『類似トーン』、『pale』と『vivid』を組み合わせる場合は『対照トーン』になります。トーン』配色は使われてますね。メインカラーが緑、アクセントカラーがピンクの場合は『補色色相配色』と言えます。シンプルに言うと近い色を選んで『なじませる』か、遠い色を選んで『目立たせる』かという判断の目安になります。Color』といった配色ツールを使う際も、この基本的な考え方は知っていた方がいいでしょう。複数の対象の中での、区別・認識のしやすさ自分の経験上、『言葉を知っている・そういう基準があると知っている』とデザインを見る目も厳しくなります。逆に言えば、『可読性』という言葉を知らなかった頃は可読性の意識が低く、作ったものも読みにくい箇所が沢山ありました。上げるには明度差をつけるのがポイント。↓この記事のようにカンプを作成したら最後にモノクロにして、視認性などがチェックすると良いと思います。LISKUL』また、『(un)crid』という、ブラウザ上でサイトを白黒にして明度差を確認できるChromeの拡張機能もあります。(un)crid良いサイトは白黒にすると、装飾云々の前に全体的にクッキリしていて、見やすいし読みやすいデザインだということがわかります。これは意識しないと見落としがちなポイントだったりします。ここでは『明度対比』だけ図で説明します。『明度対比』は囲まれた色が、周囲の色の明度によって明るさが変化して見える現象です。同じグレーでも、背景を黒にすると明るく見え、背景が白だと暗く見えます。他の対比も一応説明だけ。色と色の境界線にできる明度対比の一種。明るい色と接する所は暗く、暗い色と接する所は明るく見える『補色対比』はわかりやすいですね。コンバージョンボタンをメインカラーの補色にして、目立たせるという方法はよく使われます。『辺縁対比』はあとで出てくる錯視の『マッハバンド』と同じ錯視の一種。これも知らないとなんでそう見えるのか違和感を覚えることがあります。全部に共通する大事な考え方としては、色は『客観的な数値』だけでは測れないということです。色の組み合わせ、全体のバランスを見て、目で見た感覚で調整していかないといけません。いった点で、実務でも重要なポイントです。同化は『明度の同化』『色相の同化』『彩度の同化』があります。実例としてみかんを挙げました。Webサイトでも、商品を魅力的に見せたい場合は、周りの色の彩度を上げるという風に使えると思います。(もちろん彩度を上げ過ぎると、商品の存在感を消しますが)また、ここでは『面積効果』という用語も出てきます。『面積効果』とは同じ色でも面積によって色の見え方が変わる現象で、これも重要です。『面積効果』で意識しておくことは、単純に面積が大きい方が濃くしっかりした色で見えます。背景色の色と文字色を同じ色にすると、文字の方が面積が圧倒的に小さいので薄く見えます。背景色と同じ見え方にするには文字色の方を濃く調整します。他にも例えば、レスポンシブデザインの場合、PCで背景を薄いグレーにした際、スマホでは面積が小さくなり、より薄まってみえます。そのため、スマホサイズでもしっかり見える濃さに調整する必要があります。色の錯覚ラスト、10位は錯視です。10個くらい錯視の種類が出てきますが、3つだけ紹介。実際の使い所デザインで特に気をつけたいのは『リープマン効果』。ハレーション(縁がギラギラ光って見えること)が起こって読みにくくなるし、非デザイナーのHPで見る配色なので、絶対避けたいところです。Webに限らず、デザイン全般に通じる内容かと思います。まとめてみると、全部同率1位から3位と言ってもいいくらい、甲乙つけ難かったです。それぞれ独立した知識ではなく、関連してる部分もありますし。順位は参考程度に受け取ってもらえたらと思います。自分は最初、『トーン』という概念を目にしても、それが実務で実際使う知識とは知らずに頭に残りませんでした。この記事で『参考書の中だけの知識ではなく、実際使う知識』という意識を持ってもらえたらと思います。あと自分みたいに『デザインやりたいけど、色彩検定必要なの?』と迷ってる人の参考になればと。参考書は書店で色々見て良さげなのを選べば、大外れはないと思います。一応自分が使ってこの記事を書くのにも参考にしたのはこの本です。2009-08-06Amazon楽天ブックスhonto色彩検定の本じゃないけど、2級3級の知識を一通り知りたいという方には、この本がオススメです。2012-09AmazonKindle楽天ブックスhonto2級3級の知識が網羅されていて、ボリューム的にも内容的にも充実してます。色彩検定の参考書としてアピールしないのか疑問な程、色彩検定の内容を学ぶのに最適な良書です。あと一冊、身近な商品などの実例で色の理由がわかるこの本もオススメです。2013-09-03Amazonhonto知っている商品などの色の根拠や効果がわかって、目からウロコな情報が満載です。2017.01.15デザイナーの必需品と言えるモリサワパスポート。購入すると自分でフォントを選択してインストールする必要があります。2015.08.30とある事情で女性ファッション関連のデザインを勉強するため雑誌を数冊購入。各誌で共通で見られたデザインがあったのでまとめてみました。2016.10.10自分の経験をもとに、『未経験からWebデザイナーになる方法』について何回かに分けて書きました。その記事の目次代わりに...[...]ロリポップの『WordPress簡単インストール』はどう簡単なのか比較してみた。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。WordPress.。