グラフの配色をサポートするツール「COLORS」をリリースします

  • このエントリーをはてなブックマークに追加

プレゼン資料の色選びの中でも意外に奥が深く、調節が難しいのがグラフです。グラフ作成ツールの自動配色がしっくりくることはそうありませんし、出来合いのカラーパレットでは、その時々で要素やグループの数が変化するグラフにうまく対応しきるのは困難でしょう。そこで当サイトではグラフの配色をサポートするツールを開発しました。まだできることは限られていますが、当記事にてお披露目したく思います!

目次

  1. グラフ配色サポートツール「COLORS」
  2. 配色サンプル
  3. 特徴
  4. 使い方
  5. 高度な使い方
  6. よくある質問
  7. ご利用にあたって
  8. 仕様
  9. 既知の問題
  10. 最後に

2019/11/10、COLORSバージョン1.5のリリース伴い、本ページの記載内容を更新しました。

グラフ配色サポートツール「COLORS」

COLORSのカバー画像

さて、今回作成したツールですが、名前は「COLORS(カラーズ)」といいます。COLORSは、ビジネス文書に適したグラフの配色作りをサポートするツールです。会社のコーポレートカラーやプロダクトのテーマカラーを基に色を生成することができるため、文書のトーン&マナーにフィットしたグラフカラーを作成できます。なお、ツールはWebアプリケーションとして開発されており、Webブラウザーで指定のURLにアクセスするだけで手軽に利用可能です。

COLORS – https://colors.design4u.jp

配色サンプル

何はともあれ、COLORSでどのようなグラフカラーが作成できるのか見てみましょう。COLORSは〈任意の画像から色をピックアップしてグラフの配色を生成する〉というつくりになっているため、以下にターゲットとなる画像(文書)と、COLORSの配色を適用したグラフサンプルを掲載します。

SAMPLE 1
ターゲットとなる画像・文書
ルリコンゴウインコの画像
ターゲットのカラーを基に配色したグラフ
ルリコンゴウインコの画像のカラーを基に配色したグラフ

COLORSでこの配色を見る

SAMPLE 2
ターゲットとなる画像・文書
プレゼン資料
ターゲットのカラーを基に配色したグラフ
プレゼン資料のカラーを基に配色したグラフ

COLORSでこの配色を見る

SAMPLE 3
ターゲットとなる画像・文書
パンフレット
ターゲットのカラーを基に配色したグラフ
パンフレットのカラーを基に配色したグラフ

COLORSでこの配色を見る

特徴

COLORSは、グラフに特化した配色サポートツールです。グラフで効果的な色の組み合わせが作成できるよう次のような特徴をもっています

会社やプロダクトと相性の良いグラフカラーを作れる。

COLORSは、特定の色を基準にグラフの配色を生成します。そのため会社のコーポレートカラーやプロダクトのテーマカラーを基準に指定することで、それらと親和性の高いグラフカラーを作成できます。

生成したカラーは、円グラフや棒グラフなど異なる種類のグラフに適用可能。

色はたとえ同じ色であっても、その大きさや形状により印象が変わります。そのため、特定のグラフでバランスの良い配色が、他の種類のグラフでも同様に利用できるとは限りません。しかしCOLORSでは、配色を円グラフや棒グラフ、折れ線グラフなどの各種グラフにリアルタイムに反映しながら編集できるため、複数種のグラフで汎用的に利用できるグラフカラーを容易に調整することが可能です。

グラフの要素数に合わせて配色を生成できる。

グラフに使用するカラーパレットは、事前の定義が難しいという側面があります。なぜならグラフはその時々で扱う要素の数やグループ構成が変わり、もしカラーパレットの数が多ければ色を間引いたり、不足した場合には逆に補うなどの調整が必要になるためです。しかしCOLORSでは生成するカラーバリエーションの数を任意に変更できるため、必要なときに必要な分のグラフカラーを作成できます。

モノクロ印刷に強い。

ビジネス文書はしばしばモノクロで印刷されることがあり、そのときグラフが読み取れなくなるようなことは極力避ける必要があります。COLORSでは色のバリエーションを作る際、「明度(明るさ)」に差をつけて色を生成するため、モノクロ印刷時(彩度が失われた状態)であっても意味が失われるリスクを低減できます。

使い方

続いては、実際にCOLORSを使用する方法を見てみましょう。

1. COLORSにアクセスする

Webブラウザーで以下のURLにアクセスしてください。COLORSのホーム画面が表示されます。

COLORS – https://colors.design4u.jp

COLORSのホーム画面
COLORSのホーム画面

2. カラーピッカーの起動

続いてはカラーピッカーを起動しましょう。カラーピッカーとは、任意の画像からグラフに使用する色を抽出する機能です。カラーピッカーを起動するには、ホーム画面左上ローカルナビの「カラーピッカー」リンクをクリックします。

ホーム画面左上部

クリック後画面が遷移し、カラーピッカーの操作画面が表示されます。

カラーピッカー
カラーピッカーの画面

3. 画像の読み込み

続いて画像を読み込みます。カラーピッカー画面左下の「画像を読み込む」ボタンをクリックしてください。クリック後、ファイル選択ダイアログが表示されます。

カラーピッカー画面左下部
カラーピッカーの画面

ファイル選択ダイアログでは、左図の画像を読み込むものとします。今回はこちらの「ルリコンゴウインコ」を基に、グラフカラーを生成します。

ルリコンゴウインコ
ルリコンゴウインコの画面

画像を読み込んだ直後の画面は以下のとおりです。

画像ロード直後のカラーピッカーの画面

4. カラー(基準色)の抽出

スポイトツールを使って画像の任意の箇所をクリックし、色を抽出します。今回は「 #1168AD」を選択しました。

  • *色の選択は手動です。自動ではありませんあしからず!
色の抽出を行っている画像

もう2色追加してみましょう。カラーピッカー画面中央下部の「+(プラス)」ボタンをクリックするこで、カラー(基準色)を追加できます。続いて「 #1F662E」と「 #F4D002」を選択したものとします。

色の追加と抽出を行っている画像

色の選択が完了したら、画面右下の「選択完了」ボタンをクリックしてカラーピッカーを終了します。

カラーピッカーを終了する画像

5. カラーの調整

ホーム画面にもどると「カラーと設定」セクションに選択した3色がセットされています。

カラーが選択された状態のホーム画面

今回はブルー系で3色、グリーン・イエロー系で2色づつ、計7色を生成するものとします。「カラーと設定セクション」の各カラーの「生成する色の数」をそれぞれ「3」「2」「2」と設定してください。

カラーの生成数が変更された状態のホーム画面

続いて「グラフカラーセクション」の「a)カラースライダー」を左右にずらし、各カラーが自然なかたちでつながるように調整します。調整する際は「b)階段グラフ(明度の差のグラフ)」の段差(高さの差)が均等になるようにするのがコツです。

カラースライダーを操作する|ホーム画面

3色目のイエローについては、明るさの順番(暗→明/明→暗)を逆転した方がバランスがとりやすいでしょう。「カラーと設定」セクションの「明るさのパターン」を変更し「明るい色から暗い色へ」を指定します。ついで「カラースライダー」操作して、再度「階段グラフ」が均等になるよう調整します。

明るさのパターンを変更する|ホーム画面

「カラースライダー」にセットされた色は、リアルタイムに「サンプル」セクションのグラフに反映されます。生成した色が各グラフでどんな見え方になるか確認してください。

サンプルセクション|ホーム画面

生成した配色のカラーコードは、「カラーコード」セクションに16進数とRGB形式で表示されます。また画面最下部の「COPY」ボタンをクリックすると、テキスト形式でカラーコードをクリップボードにコピーできます。

カラーコードセクション|ホーム画面

高度な使い方(Ver1.5新機能)

明るさの微調整

グラフの色の作成中、カラースライダーを左右にずらすだけではうまく調整しきれない「わずかな明るさの差」が発生することがあります。以下のサンプルでは、グレーとグリーンの境界のみ明るさの差が小さくなっており、できれば全体のバランスに合わせて差をより大きく広げたいところです。

グラフカラーセクション|ホーム画面

そんなときには「カラーと設定」セクションの「カラーの微調整」機能を試してみてください。スライダーを左右にずらすことで、明るさをわずかに変更できます(右にずらせばわずかに明るく、左にずらせばわずかに暗くなります。左右いっぱいまでずらすと、カラースライダーを一個ずらしたときと同じ明るさまで変化します)。

カラーと設定セクション|ホーム画面

グレースケール表示のエミュレーション

プレゼン資料が社内の関係者向けに印刷される場合、その多くはモノクロ(グレースケール)です。COLORSでは「グレースケール」表示モードを使用することにより、それらの見え方を事前にチェックできます。COLORSホーム画面右上のボタンより、フルカラー/グレースケールのカラーモードを変更してください。

フルカラーとグレースケールの切り替えボタン|ホーム画面

カラーモードをグレースケールに変更することで、「グラフカラー」セクションおよび「サンプル」セクションの色がグレースケールに変化します。

グラフカラーセクションとサンプルセクションのグレースケール表示|ホーム画面

よくある質問

作成した配色を他の人に共有する際、おすすめの方法を教えてください。

COLORSの設定情報は、WebブラウザーのアドレスバーのURLに含まれています。共有したい配色が画面に表示されている状態でホーム画面のURLをコピーし(ホーム画面最下部の「COPY」ボタンでもコピーできます)、共有したい相手に通知ください。同URLにアクセスすれば、同じ配色が再現されます。

スマートフォンやタブレットでもCOLORSを利用できますか?

はい、制限付きで利用できます。COLORSは現状スマートフォン・タブレットについては「配色の確認」用途の利用を想定しており、”カラーピッカーが利用できない(カラーピッカーはPC環境でのみ利用可能)”点にご注意ください。

ご利用にあたって

COLORSは無償で利用できます

COLORSの使用およびCOLORSの生成した配色の使用にあたり、商用/個人用を問わず使用料が発生することはありません。特別にご連絡いただく必要もありません。

著作権

COLORSアプリケーションの著作権は作成者である「Presentation Design」に帰属します。

仕様

設定可能な値と最大値

「カラーと設定」セクション|ホーム

登録可能なカラーの最大数 10色
生成する色の数(カラー一色あたり) 1〜10色
生成する色の最大数(アプリケーション全体) 20色

「サンプル」セクション|ホーム

円グラフに割り当て可能な色の数 1〜7色
集合棒グラフに割り当て可能な色の数
積み上げ棒グラフに割り当て可能な色の数
折れ線グラフに割り当て可能な色の数 1〜4色

カラーピッカー

読み込み可能な画像フォーマット PNG, JPG, GIF
  • *カラーピッカーはPC環境でのみサポートされます。

動作確認済みのブラウザー

COLORSは以下のWebブラウザーで動作確認を行っています。

Webブラウザー種別 バージョン
Microsoft Edge 42.17134
Internet Explorer 11.1006
chrome(Windows) 77.0
Safari(macOS) 12.1.1
chrome(Android) 77.0
Safari(iOS) 12.1.2

既知の問題

スポイトツールの色の取得位置が見た目と異なる

「カラーピッカー」画面のスポイトツールの色取得位置は通常カーソルの〈左下部〉ですが、「Safari」ブラウザーを使用した際にこれが〈左上部〉になる場合があります。ご不便おかけし申し訳ないのですが、当面はカーソルの左上部で色を取得いただけますようお願いします。

最後に

グラフカラーの調節というのは、正面から取り組むと意外に奥が深く・また地味に手のかかる作業です。そのため、前々からツールによる省力化を考えていたのですが、やっと実現にこぎつけることができました。まだ手動の操作が必要なところも多々残っているものの(将来的には自動化したい。。)、少しコツをつかめば、きっと皆さんのお役に立てると思います。これからも開発を続けていく予定ですので、お気づきの点などあれば、当記事へのメッセージやSNSなどでコメントいただけるとうれしいです。

最後に当ツールにおける色の操作は「chroma.js」というjavascriptのライブラリーによって実現しています。日本ではあまり知られていないようですが、とても優秀なライブラリーなので気になる方はぜひチェックしてみてはいかがでしょうか。

chroma.js api docs!

この記事をシェアする

  • このエントリーをはてなブックマークに追加

書籍版もあわせてどうぞ。

当サイトがふたたび本になりました。今回はリアリティにこだわったサンプルスライドを多数収録。そのまま実際の仕事に転用してプレゼン資料を改善したり、一方じっくりと解説を読み込み、デザインノウハウを学ぶ使い方も。「プレゼン資料のデザインに自信が持てない…」「普通のプレゼン資料じゃなくて、もっと伝わる資料が作りたい」というビジネスパーソンにオススメの1冊です。

「デザイン」の力で人を動かす!プレゼン資料作成「超」授業 プレゼン上手に明日からなれる

●著者:宮城信一 ●価格:本体1,880円(税込2,068円) ●仕様:A5正寸判(210x148mm) / オールカラー / 224P / ISBN:978-4-8156-0191-1 ●発行:SBクリエイティブ

Amazonで購入詳しく

Facebookで更新情報を配信しています。

更新情報をメールで受け取る

*過去のニュースレター

デザイン・テンプレートのダウンロードはこちら。

プレゼン資料の「品質」と「生産性」を向上させるなら。
パワーポイント向けデザイン・テンプレート、無料公開中。

トップへ