資料作成の配色で迷ったときに参考にしたいサイト7選

risa

資料を作る時、会社やサービス、ブランド関連の資料であればそれらのテーマカラーをもとに配色を決めることが多いと思いますが、色に指定がない場合はどのかに迷う方が多いのではないでしょうか。

資料作成の際にどのような色を使うのが最適か迷った時におすすめなのが、配色の組み合わせを公開してくれているサイトを参考にイメージに近い色を探してみることです。

この記事では資料の配色に迷ったとき、参考にしたい配色サイトを

単色の配色の参考になるサイト
グラデーションカラーの参考になるサイト

に分けてご紹介します。

単色の配色の参考にしたいサイト4選

Flat UI colors 2

各パレットごとにカラーのトーンが揃っているので、時間がない時にさくっとカラーを選びたい時に便利です。カラーをクリックするだけでコピー完了するのも嬉しいところ。

ちなみに各パレットのカラーは、13個の国をイメージしたもののようです。

遊び心があるところもgoodなポイントですね！

Flat UI colors 2のサイトはこちら

Actionable color palettes

各パレットをクリックすると、下の画像のようにカラーの使い方の一例を示してくれます。

使いたいカラーは決まっているけれど、それぞれのカラーをどれくらいの割合で使用するといい感じの配色になるか迷う時に参考になりそうです。

こちらのサイトでも、パレットのカラーをクリックするだけでコピーが完了します。

Actionable color palettesのサイトはこちら

coolors

coolorsは、検索機能が充実しているカラーサイトです。

検索窓をクリックすると、

カラー（赤・オレンジなど）
スタイル（あたたかみがある・冷たいなど）
トピック（クリスマス、ハロウィーンなど）

などから最適なカラーを検索することができます。

具体的なカラーは決まっていないけれど、テーマやコンセプトがはっきりしている時には、coolorsの検索機能を活用してみるとよいかもしれません。

Coolorsのサイトはこちら

Color hunt

ひとつ前のCoolorsと同じく、Color huntにも検索機能があります。

Color huntは「Pastel」「Vintage」などテーマ別の検索が充実しており、コンセプトが決まっている資料のためのカラーをピックアップしたい時に活用できそうです。

Color huntのサイトはこちら

グラデーションカラーの参考になるサイト3選

Grabient

Grabientのサイトはこちら

Coolhue

Coolhueのサイトはこちら

Webgradients

Webgradientsのサイトはこちら

サイトからコピーしたカラーコードをPowerPointへ反映する手順

ここでは、取得したカラーコードをPowerPointへ反映する方法がわからない方向けに解説します（ご存知の方は読みとばしてくださいね！）

この記事の冒頭でご紹介したサイトでカラーコードを取得（コピー）してPowerPointの画面で入力すると、取得したカラーを自分の制作物で使用することができます。

カラーコードとは

色を表現するため、文字で表現された符号のこと。
#（シャープ）からはじまる6桁の数字。

サイトからカラーコードを取得してパワポで使う手順を書いておきます。

サイトからカラーコードをコピーします

パワポを開きます

お好きな図形を描きます

図形でなくテキスト等でもOKです！

図形を選択した状態で「書式設定」をクリック、カラーパネルを開きます

カラーコードを入力するボックスへ、コードを貼り付け（Ctrl＋V）します

ちなみに、パワポのスライドマスター機能を使うと、資料ごとにテーマカラーを作成できますよ。テーマカラーを設定すると、自動的にグラデーションカラーを生成してくれます。

スライドマスターの活用方法についてはこちらの記事で解説しているので、スライドマスターの使い方を知らない方はぜひ参考にされてくださいね！

資料作成の際、配色で気をつけたいポイント

パワポ資料の配色を選ぶときに気をつけたいポイントはこちらです！

色数は2〜3色以内に収める
色のコントラストに注意する

色数は2〜3色以内に収める

伝えたいという熱量のあまり、多くの色を使いたくなる方もいるかもしれません。

しかし色数が多くカラフルな資料はごちゃごちゃした印象を与えてしまうことがあり、本当に伝えたいことが伝わりにくくなってしまいます。

あくまでも、色を使うのは伝えたいことを伝えるため。

色数は2〜3色に収めるのがおすすめです。

私が資料のデザインをする時には

文字色
メインカラー
サブカラー

を設定することが多いです。

ただし、デザインによっては楽しくにぎやかな印象を与えるために色数を多くする方が目的に沿っている場合もあります。

その際は、ベースとなる色（とくに文字色とメインカラー）は絞っておくのがよいと思います。

色のコントラスト比に注意する

コントラスト比とは

コントラスト比とは、色の濃淡差のことです。

背景と文字色に濃淡の差を作っておかないと、背景に埋もれて文字が読めなくなってしまうことがあります。

コントラストの例をご紹介すると…

▲薄い色の背景に薄い色の文字を配置すると、濃淡の差があまりないので文字が読みにくくなります。

背景と文字色の濃淡の差を大きくしてみると…

▲どうでしょうか。濃淡差があると、文字の視認性が高まると思います。

このように、背景と文字色の色の濃淡の差がつくよう配慮すると、読み手に負荷を与えず、内容が頭に入りやすい資料になるかもしれません。

コントラスト比を確認するには

コントラストの判断に自信がない方は、コントラスト比を数値で教えてくれるツールを使うと安心です。

Adobe Color内のアクセシビリティツールでは、背景と文字色のカラーコードを入力するとコントラスト比を算出してくれます。

文字のPt数別のコントラストについても、合格・不合格を判断してもらえますよ。