PPT グラフ配色 使い方

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

1. COLORSにアクセスする

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

COLORS – https://colors.design4u.jp

ここにはCOLORSにあらかじめ用意されたカラーサンプルが並んでおり、任意のサンプルを選択して編集することができます。

COLORSのホーム画面

"PPT-2021-5-6 254-1" 

2. 編集画面の表示

続いてはカラーの編集画面を開きましょう。今回はカラーサンプル「Blue」を利用します。サンプル右下の鉛筆マークをクリックしてください。

"PPT-2021-5-6 254-2" 

クリック後画面が遷移し、カラー編集画面が表示されます。

カラー編集画面

"PPT-2021-5-6 254-3" 

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

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

"PPT-2021-5-6 254-4" 

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

カラーピッカー

"PPT-2021-5-6 254-5" 

4. 画像の読み込み

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

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

"PPT-2021-5-6 254-6" 

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

ルリコンゴウインコ

"PPT-2021-5-6 254-7" 

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

"PPT-2021-5-6 254-8" 

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

5. カラー（基準色）の抽出

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

＊色の選択は手動です。自動ではありませんあしからず！

"PPT-2021-5-6 254-9" 

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

"PPT-2021-5-6 254-10" 

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

"PPT-2021-5-6 254-11" 

6. カラーの調整

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

"PPT-2021-5-6 254-12" 

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

"PPT-2021-5-6 254-13" 

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

"PPT-2021-5-6 254-14" 

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

"PPT-2021-5-6 254-15" 

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

"PPT-2021-5-6 254-16" 

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

"PPT-2021-5-6 254-17"