<p class="thumb"><img src="http://web-marketing.zako.org/images/2018/02/data-color-picker.png" alt="" width="620" height="359" class="alignnone size-full wp-image-31396" /></p>

<p>複数のデータを比較するグラフを作成する際に、どのようにしたらよいか迷いがちなのがデータ系列ごとの色分け。適当に色分けしてしまうと見栄えも悪いし視認性も悪いものになってしまいます。</p>
<p>今回ご紹介するのは、そんなグラフのデータ系列の配色を簡単に生成してくれるツールです。</p>
<!--more-->

<h3 id="datacolorpicker">グラフで使う色を生成してくれる「Data Color Picker」</h3>

<p>「<a target="_blank" href="https://learnui.design/tools/data-color-picker.html">Data Color Picker</a>」は、<strong>グラフのデータ系列ごとの色を、サンプルを見せながら生成してくれる</strong>ウェブツール。</p>
<p>基準となる色を決めると、指定したデータ系列の数だけ配色を意識した色を生成してくれます。</p>

<h4 id="">基準となる色からグラフに適した色分けを生成</h4>
[caption id="attachment_31395" align="alignnone" width="620"]<img src="http://web-marketing.zako.org/images/2018/02/data-color-picker-set.png" alt="" width="620" height="526" class="size-full wp-image-31395" /> 基準の色を設定する。[/caption]
<p>まず基準となる色をカラーピッカーで選びます。すると指定した数だけ、配色を生成します。基準となる色は左右端の２つで設定可能です。</p>

[caption id="attachment_31394" align="alignnone" width="620"]<img src="http://web-marketing.zako.org/images/2018/02/data-color-picker-number.png" alt="" width="620" height="329" class="size-full wp-image-31394" /> 生成する色の数を変更できる。[/caption]
<p>生成する色の数は最大で8個です。</p>

[caption id="attachment_31393" align="alignnone" width="620"]<img src="http://web-marketing.zako.org/images/2018/02/data-color-picker-dark.png" alt="" width="620" height="594" class="size-full wp-image-31393" /> 背景色を暗くしてシミュレーションできる。[/caption]
<p>背景色を暗くした状態でどのような視認性を得られるかテストすることもできます。</p>

<h4 id="-1">生成したカラーコードを一括でクリップボードにコピー</h4>
[caption id="attachment_31397" align="alignnone" width="620"]<img src="http://web-marketing.zako.org/images/2018/02/data-color-picker-code.png" alt="" width="620" height="120" class="size-full wp-image-31397" /> 「COPY HEX VALUES」ボタンでカラーコードを一括コピー。[/caption]
<p>生成した複数色のカラーコードを、一括でコピーすることができます。</p>

<p>サンプルにもありますが、生成された色の左から大きな数字のデータに使用していくのがセオリーになります。
興味がある方は<a target="_blank" href="https://learnui.design/tools/data-color-picker.html">Data Color Picker</a>へどうぞ。</p>