イマイチな配色、さよなら！初心者でもわかる色選びのセオリー
意外と時間のかかる「色選び」。あんなに時間をかけたのにイマイチパッとしない...という経験をしたことはありませんか？
本日はそんな色選びのセオリーについて考えていきます。
もくじ
- カラーに３つの役割を与える
- 色を選ぶ
- 最近のWEBサービスの特徴
カラーに３つの役割を与える
カラーを３つの役割をあたえ、つかう割合を決めましょう。
①メインカラー（主役色）：25％
②ベースカラー（背景色）：70％
③アクセントカラー（アクセント色）：5％
引用：http://seguimi.blog.fc2.com/blog-entry-105.html
色を選ぶ
上記でご紹介した①→②→③の順番に色を選びましょう。
メインカラーは「サービスのブランド」にふさわしい印象の色、ベースカラーは「白、グレー、メインカラーの明度を高め、彩度を低くした色」、アクセントカラーは「メインカラーの補色」がセオリーです。
引用：http://www.slideshare.net/marippe/ss-9003317
色をもっと加えて活気を出したい！という場合は、カラーを分割して追加しても大丈夫です。
引用：http://www.slideshare.net/marippe/ss-9003317
カラーを分割した場合、「色相が同じでトーンが異なる色」か、「トーンが同じで色相が異なる色」を選ぶと調和が崩れません。
最近のWEBサービスの特徴
アクセントカラーがないことが多々あります。「全体に活気をもたらすこと」がアクセントカラーの役割ですが、人物画像やインタラクションで代替しているように感じます。
引用：https://business.antenna.jp/
AntennaのWEBサイトはメインカラーが黄色、ベースカラーが白と色が少ないようだが、MVで動画を用いており、活気がある。動画に出現する色との調和もはかれています。
ogamo:)
主役？脇役？よい配色は色ひとつひとつに役割があった！
デザインで使用される色は、すべて役割を持っています。それぞれの色が、その色自身の役割をしっかりこなすことによって配色全体がまとまります。
そんな「色の役割」について、考えていきます。
目次
- 五役色とは？
- 色は役者、デザイナーは映画監督
五役色とは？
５つの色の役割を総称して五役色と呼びます。
主役色
配色の中心になる色のこと。この色を基準に他の色を選んでいきます。
出典：http://www.shiseido.co.jp/tsubaki/index.html
※赤系統の色相が主役となり、全体を引き締めている。
主役にもっとも強い色を置くと、配色全体の中心が決まり、色の見え方がすっきりとします。
脇役色(引き立て色)
主役を引き立てるための色。主役の側に反対色をおくことで、主役が際立ちます。
出典：http://www.alporto.jp
※緑の脇役色が、より一層主役の肉(赤系統の色相)を際立たせる。
脇役色の面積を大きくしたり、鮮やかすぎると、主役色が負けてしまうので気をつけましょう。
支配色(背景色)
背景として全体を包み込む色。背景色は全体のイメージに最も影響を及ぼします。
出典：https://www.sekkisei.com
※青系統の色相、トーンはライトなのでやわらかくクリアな印象をあたえる。
ユーザーに与えたい印象、メンタルモデルとマッチする配色を選択すると効果的です。
融合色(なじませ色)
主役色が全体から浮き上がったときに、離れたところに共通色相をおくことで全体の調和がとれます。
出典：https://www.muji.com/jp/muji-meets-idee/2015may.html
※青のソファは空間から浮きそうだが、ボーダー柄のバックとラグで調和がとれている。
強い色どうしのぶつかり合いが発生したときも、融合色をつかうと効果的です。
アクセント色
強い色を小さい面積に散らすことで、一変して活気をあたえることができます。
出典：https://www.beiersdorf.com
※彩度の高いハートの色を用いることで、活気が生まれている。
アクセント色を使用するときは、小さな面積に、反対色かつ高彩度の色を選ぶとアクセントの効果が高まります。
色は役者、デザイナーは映画監督
色は役者であり、デザイナーは映画監督のようなものと言われています。役者選びや、舞台の選択を誤れば、どんなにすばらしい台本（レイアウト）も駄作に。
色ひとつひとつに「意図」を与えることで、よい配色をつくることができるでしょう。
ogamo:)
カラーデザインを極める第一歩 - 色の三属性を知る
WEB、ポスター制作などで、「色のイメージ」を言葉でうまく説明できずにモヤモヤしたことはありませんか？
色を構成する要素を理解することで、今まで伝えきれなかったあなたのイメージが伝わります。
本日はそんな「色の三属性」について考えていきます。
目次
- 色の三属性とトーン
- カラーデザインを極める第一歩とは？
色の三属性とトーン
色の三属性とは、色相・明度・彩度の3つの事をいいます。
色相
色相とは、赤・黄・緑・青・紫といった色味のこと。
色相はイメージの違い表現するのに最も優れた属性です。また色相を円上に配置したものを色相環と言います。
引用元：http://commte.net/blog/archives/3877
あるひとつの色と正反対に位置する色を「捕色」といいます。捕色を使うことで、お互いの色をより引き立てあうことができます。
明度
色同士を比較して、明るい色とか暗い色というように、色には「明るさ」の度合いがあります。
色相に関係なく比較できる「明るさ」の度合いが明度と呼ばれています。この明度は、文字の読みやすさ（可読性）にかかわる大事な要素になります。
引用元：http://yocco.jugem.jp/?cid=30
彩度
彩度とは色の鮮やかさをいい、それぞれの色相でもっとも彩度が高い色を原色･純色と呼びます。
ある鮮やかな色の彩度をどんどん低くしていくと、色みを感じない色に変化していき、最後には無彩色（灰色）になります。
引用元：http://iro-color.com/dictionary/
一般的に、彩度が高い色は派手な印象を受け、印象に残りやすく、逆に彩度の低い色は、地味に感じ、印象に残りにくい色となります。
トーン
三属性のうち、明度と彩度が交差した部分をトーン(色の調子)といいます。
同じ明度と彩度の位置にある色は色相が違っていてもトーンは同じなので調子があいます。
引用元：http://creators-manual.com/tone/
カラーデザインを極める第一歩とは？
この3つの属性を正しく理解することがカラーデザインを極める第一歩となります。
色の三属性は本当に基本中の基本となる知識です。デザインに関わる人であれば、最低限知っていなければなりません。
ogamo:)
色の三原色と配色の型について知る
資料作成、WEBデザイン、あるいは洋服や小物選びで「なんだか色がパッとしない...」と悩んだ事はありませんか？
デザインでもっとも重要な要素の一つである「色（Color）」。実は良い色の選び方には原則がありました。
本日からしばらくの間、「配色の原則」について考えていきます。
目次
- 色の三原色とは？
- 良い配色は「型」が決まっている
色の三原色とは？
色の三原色とは「すべての色の元となる色のこと」を指します。「光の三原色」「色材の三原色」が色の三原色に存在します。
光の三原色：RGB
光の三原色はR（赤:Red）、G（緑:Green）、B（青:Blue）を指します。
色を混ぜ合わせるにつれて、色が明るくなるため「加法混色」といわれています。この三色の色を加えていくと、最終的に白になります。
コンピュータのカラーディスプレイの発光体には、この３原色が使用されています。
色材の三原色：CMYK
色材の三原色はY（黄色:Yellow）、Ｍ（赤紫:magenta）、Ｃ（青緑:cyan）を指します。
色を混ぜ合わせるにつれて、色が暗くなるため「減法混色」といわれています。この三色の色を加えていくと、最終的に黒になります。
カラー写真や印刷物には、この３原色が使用されています。
出展：http://commte.net/blog/archives/3877
良い配色は「型」が決まっている
配色には一種の「型」があり、いずれかの型にすっきりまとまった時に印象深い配色になります。
この型は「色相（色み）」「明度（明るさ）」「彩度（鮮やかさ）」で構成されています。
次回からは、一つずつ配色の型を紐どいていきます。
ogamo:)
人を動かすクリエイティブなコピーの基本原則
人を動かすクリエイティブなコピーには理由があります。
それは「受け手が共感する価値」を言えてるかどうか。
ボクもそうでしたが、言葉づくりに苦手意識のある人は「FACT(事実)」に固執しがちです。
FACTを「受け手が共感する切り口で言い換える」訓練をいますぐはじめましょう。
本日は手っ取り早く使える切り口を２つほどご紹介します。
受け手が生活でよく見て・触れているモノと対比する
テレビ大好き、マスメディア系上司にスマホの可能性を伝えたいときは...
✕ 「10代は毎日104分もスマホを見てますよ。」
◯ 「10代はテレビよりスマホを見ている時間が長いですよ。」
相手が生活で考え・意識していることに紐付ける
新卒社員の営業マンに30秒の大切さを伝えたいときは...
✕ 「30秒の積み重ねが将来を変えるよ。」
◯ 「30秒あればメール1本送れるよ。」（30秒で商談が動くよ。）
お金と並べると、万人に凄さが伝わりやすい
「Appleは30秒で400万円利益あげてるよ。」
Turning A Profit | See How Quickly Tech Giants Build Wealth | WorldPayZinc.com
これホントです。30秒で400万ってとてつもないですね。
クリエイティブなコピーを考える人は、受け手の目線で考え、様々な切り口で言葉をつくっています。
Design思考全般に言えることですが、すべては受け手を深く理解することから始まります。
ogamo:)
文字組で空間コントロールを身につけよう
タイポグラフィの基本技術である「文字組(もじぐみ)」。
いつも何気なく眺めているポスターや雑誌の表紙などで使われているこのテクニックについて、本日は紹介していきます。
文字組とは？
- 文字を並べ、余白を適切に配置すること
- 余白のとりかたひとつで、その文字は表情を変えます
基本は「揃える」こと
文字の左右の余白を揃えることが、文字組の基本です。
わたしたちがキーボードで打ち込んだ文字は、そのままでは左右の余白がまばらな状態です。
文字組をやってみた
すみません、わかりずらいです。
欧文の大文字や数字は文字間が不揃いになりがちです。
文字間の余白を調整することで、与える印象をコントロールできます。
ogamo:)
タイポグラフィの定義と印象のつくりかた
タイポグラフィという言葉をご存知でしょうか？
デザインの重要な要素であるタイポグラフィ。その定義や印象のつくりかたについて、簡単にまとめていきます
参考書籍はこちら↓↓
タイポグラフィの基本ルール－プロに学ぶ、一生枯れない永久不滅テクニック－ (デザインラボ)
タイポグラフィとは？
タイポグラフィとは、文字を通して言葉と思いに「見た目の姿」を与える技術のことです。
タイポグラフィを構成する要素
タイポグラフィは「文字」と「書体」によって構成されます。
文字とは？
みなさんもご存知の漢字、ひらがな、カタカナ、アルファベットのことです。
書体とは？
書体とは共通した表情をもつ文字の集まりのこと。
明朝体、ゴシック体など、書体にはそれぞれ名前がついています。
書体は「字面」「骨格」「エレメント」で構成されています。
文字と書体が印象をつくる
文字と書体は受け手に与える印象をコントロールします。
とってもざざっとですが、簡単にマッピングしてみました。
軸その１：軽いか、重いか
字面のホワイトスペースが多いと軽く、少ないと重い印象を受けます。
カタカナは全体的に軽い印象です。
軸その２：柔らかいか、堅いか
エレメントに太さ抑揚があると柔らかく、ないと硬い印象を受けます。
サンセリフ体はセリフがないため、全体的に硬い印象です。
女性雑誌はタイポグラフィの使い方がすごい！
女性雑誌はターゲット層にあわせたタイポグラフィで、うまく印象をコントロールしてるなーと関心しています。
ここだけの話、コンビニはタイポグラフィの学習にうってつけですよ。笑
その他参考になるまとめ記事
映画ポスターもタイポグラフィによって印象が伝わってきます。
matome.naver.jp
タイポグラフィーが特徴的なポスターデザインをたくさんみることができます。
www.pinterest.com
ogamo:)
