スキルアップ
PR

パワポ資料の配色で迷った時に参考にしたいサイト7選

Risa
記事内に商品プロモーションを含む場合があります

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

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

この記事では、参考にしたい配色サイト7つ

  • 単色の配色の参考になるサイト
  • いい感じのグラデーションを作りたいとき参考になるサイト

に分けてご紹介します。

また、パワポでの資料作成に慣れていない方向けに、コピーしたカラーコードをパワポに反映する方法スライドの配色で気をつけたいポイントも解説していますので、どうぞお役立てください!

PR

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

Flat UI colors 2

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のサイトはこちら

サイトからコピーしたカラーコードをパワポに反映する手順

ここでは、カラーコードをパワポで使う方法がわからない方向けに解説します。
(ご存知の方は、読みとばしてくださいね!)

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

カラーコードとは

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

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

サイトからカラーコードをコピーします
パワポを開きます
お好きな図形を描きます

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

図形を選択した状態で「書式設定」をクリック、カラーパネルを開きます
カラーコードを入力するボックスへ、コードを貼り付け(Ctrl+V)します

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

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

資料作成を効率化。パワポのスライドマスター活用法
資料作成を効率化。パワポのスライドマスター活用法

パワポ資料の色選びで気をつけたいポイント

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

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

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

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

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

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

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

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

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

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

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

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

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

コントラスト比とは

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

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

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

コントラスト比の説明①

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

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

コントラスト比の説明②

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

コントラスト比の説明③

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

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

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

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

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

Adobe colorのアクセシビリティツールの画像

まとめ

以上、「パワポ資料の配色で迷った時に参考にしたいサイト7選」でした。

最後までお読みいただき、ありがとうございました。いかがでしたか?
このブログや記事に関する感想は、ぜひマシュマロに投げてくださいね💌
SNSでシェアするほどでもないけど‥という方も、匿名でコメントいただけます

Profile
risa
risa
デザイナー・ブロガー
会社員生活を経て、フリーランスでデザインしたり文章を書いたりしています。「ビジネスやサービスの魅力をつたえる」「視覚的にわかりやすく情報整理する」のが得意。最近はインタビューも。コーヒー、読書、写真、目的地のない散歩が好き。夫と娘と3人暮らし。
記事URLをコピーしました