【MotionBoard】ダッシュボードのデザインを良くする小技－色彩編

3-1 目立たせたくない場合

こちらは、ボード左の積み上げ棒グラフのチャートエディタの画面です。
このチャートは年齢別の人口を表しています。

注目すべきデータがある場合はその部分を黄色にしても良いかもしれませんが、今回は特別目立たせたいデータは無い想定とします。
今一番目立っているオレンジを別の色に置き換え、全体としてまとまりのあるチャートへと変えていきます。

オレンジの他に使われている色は青、黒ですが、黒の方は濃さの違う色をすでに3色使っているので、オレンジに変わる色として新たに青色を1色足します。
色数が多い色の組み合わせを選んでいた場合は、不必要に目立っている色を削除するだけでも大丈夫です。

今回、もともと使われている青色はこちらでした。

右側にある円と四角のうち、内側の四角の部分を編集します。
色相（外側の円）はそのままに、少し薄い色を作成しました。

オレンジを薄い青に変えたチャートが下の図です。
一気にまとまりのあるチャートへと変わりました。

＜COLUMN＞
■MotionBoardの色の選択方法

こちらはMotionBoardの色選択に使うカラーパレット（青枠）とカラーピッカー（赤枠）です。

左の青枠のカラーパレットは、簡単に色を選択することができます。
また、上部に16進数カラーコードを入力することで色を選択することもできます。

右側の赤枠のカラーピッカーは、色を細かく編集することができます。
外側の円からは、色相（色み）が読み取れます。
この色が何色なのかは、ここを見ればわかります。

内側の四角からは、彩度と明度の2つの情報が読み取れます。
彩度は色の鮮やかさを表します。
四角の右の方にいくほど彩度は高く、色は強く鮮やかになります。
明度は色の明暗を表します。
四角の上にいくほど明るく、下に行くほど暗い色になります。

3-2 目立たせたい場合

積み上げ棒グラフの色を変更した後のボードです。
右上の対極棒が一番目立っています。

目立っている理由は、オレンジの部分がわずかしかないためです。
目立たせたい部分がある場合、使う箇所を絞ることが重要です。

また、目立たせたい部分に使う色の選び方も重要です。
オレンジの部分を紫に変更すると、途端に目立たなくなってしまいます。

目立たせたい部分に使う色は、ボードで使われている色の真逆の色相（色み）を使います。
このボードでは、青色がすでに使われている色です。

色相を表す円で、使われている色の反対側の色（補色）を見ます。
その付近の色が、目立たせたい部分に使う色の候補となります。

今回の場合は、すでに使われている青色の、矢印で示された反対側の赤枠の部分が候補となります。
オレンジは赤枠の中にあるため目立ちましたが、紫は赤枠の外にあるため目立ちづらくなっていました。

また、目立つはずの色を選んでも、暗い色になっていたり薄い色になっていたりと、思った通りに目立たない場合があります。

明るさや鮮やかさを変更し、目立つ色へ変更しましょう。

ここまでチャートの色を変更してきましたが、ボタンアイテムや図形アイテムも同様に色を変更していきます。
今回は黒と青とオレンジが使われているため、この中から使う色を決めます。
特別な事情が無い限り、むやみに色数は増やさない方が良いです。

最終的に、下のようなボードができあがりました。

＜CAUTIONS！＞
●ハレーションに注意
強く鮮やかな色は、使い過ぎないようにしましょう。
特に、同じ明度の彩度が高い色を使った場合、ハレーションと呼ばれる現象が起き、不快感を感じさせることがあります。
なんだか画面がチカチカして見づらいと感じた場合、片方の色を薄くしたり、画面レイアウトを見直して色の使用箇所を離すことで回避できます。

・色の変更と、余白の追加をした例

●色を使い過ぎない
多くの色を使うと、目立たせたい場所があっても思うように目立たなかったり、調整が難しく時間がかかったりと、良いことがありません。
MotionBoardで用意されている色の組み合わせのうち、1～2色のものを選んで手を加えていく方法が簡単で早いのでオススメです。

背景の白と、色の組み合わせから選んだ似たような1～2色、そして目立たせるための色の最大4色を使うのが、まとまりのあるボードを簡単に作るコツです。
慣れてきたら、より多くの色を使用したボードを作成してみてもいいかもしれません。