2024.12.02

プレゼンテーション資料における配色のコツ

R.Y

目次

はじめに

みなさんはプレゼンテーションの資料を作成するとき、色選びや配色に困ったことはありませんか？配色のルールを知るだけで、資料が見やすく、狙い通りのイメージを伝えられるようになります。

今回は、プレゼンテーション資料における配色のコツを簡単にご紹介します。配色については文部科学省後援の公的資格である色彩検定(2、3級)の内容からお伝えします。

色彩検定協会/カラーコーディネーター

色彩検定協会/カラーコーディネーター
色彩検定とは色に関する幅広い知識や技能を問う検定試験です。1994年には文部省の認定をうけ、名称も「文部省認定ファッションコーディネート色彩能力検定」と変更して現在に至っています。

色についての基本情報

色には色相、明度、彩度​があり、この3つを調節することで色は変化します。

色相

赤や青、緑、黄のような色みの違い。

明度

色の明るさの違い。明度が低いと暗い色になり、高いと明るい色になります。
明度を高くすると白を混ぜたような色に近づきます。

彩度

色の鮮やかさの違い。彩度が低いとくすんだ色になり、高いと鮮やかな色になります。
彩度を低くすると無彩色(黒やグレー)に近づきます。

プレゼンテーション資料における配色のルール

3色に抑える

　配色の黄金比率として「75：25：5の法則」というものがあります。最も大きな面積を占めるベースカラー、イメージを司るメインカラー、重要な部分を目立たせるアクセントカラーと言います。この3色が75％：25％：5％の比率になるとバランスの取れた配色になります。
　プレゼンテーション資料においても、3色にまとめることで見やすい資料になります。

ベースカラー：背景色(一般的には白)

メインカラー：プレゼンテーションの内容とのイメージが伝えられる色

アクセントカラー：重要なキーワードなどに使用する色

メインカラーの選び方

メインカラーはプレゼンテーションの内容や雰囲気、伝えたいイメージを届ける大きな役割を持ちます。色と人間の心理には大きな関わりがあるからです。色から受ける印象として以下のようなものがあります。

・硬軟感
明度が高い色は柔らかく、明度が低い色は硬い印象になります。また、暖色系の方がやや柔らかく、寒色系はやや硬く感じられます。

例）

・興奮感
色には興奮感を与える色と、気持ちを落ち着かせる色があります。

興奮感を与える色：暖色系で高彩度の色

例）

鎮静する色：寒色系で彩度が低い

例）

このように色によって人に与える印象は異なります。国や文化によっても色の捉え方は変化するため、メインカラーを選ぶ際はその色がどういう意味を持つのか考えて選択するのが良いです。

アクセントカラーの選び方

　色の選び方としては、まずメインカラーを決定してからその色に合わせてアクセントカラーを選ぶと良いです。なぜなら、メインカラーと共存したときに目立つ色をアクセントカラーにする必要があるためです。アクセントカラーはメインカラーの補色(反対色)となる色を設定すると、資料の中で目立つことができ、直感的に重要であることを読み手に伝えることができます。

　補色(反対色)とは、色相環において反対側に存在する色のことです。色は光の波長によって色相が少しずつ連続的に変化します。それを円状に表したものを色相環と言います。色相環で反対側にある色は一番遠い色となるため、調和することなく目立つことができます。
　
　例）メインカラーが青→アクセントカラーはオレンジ
色相環

色相環

3色を超える場合の色選び

　プレゼンテーション資料では円グラフや棒グラフも登場します。そのようなとき、先ほど説明した3色で抑えることは難しいと思います。多色使いしたい場合は、次の方法で色を増やすと、調和のとれた配色になります。

① 明度(濃淡)違い
メインカラーや背景色の色相は同じまま、明度だけを変えたカラーを使用します。背景色が白であるならば、薄いグレーを使用することが最も簡単です。資料の雰囲気やアクセントカラーの効果を崩さず、色を増やすことができます。

例）

これらのカラーを実際にグラフに落とし込むと下図のOK例になります。異なる色相で配色されているNG例と比較すると、まとまった印象になることが分かります。

②    近い色相
色相環で近くにある色を使​用します。色相差が1～3に位置する色(PCCS色相環において)は共通性を感じられ、まとまりや調和が生まれやすいと言われています。
PCCS：一般財団法人日本色彩研究所が開発した表色系のこと。
（正式名称Practical Color Co-ordinate System：日本色研配色体系）

例）

これらのカラーを実際にグラフに落とし込むと下図のOK例になります。色相環で離れた位置にある色相で配色されているNG例と比較すると、まとまった印象になることが分かります。

一般財団法人日本色彩研究所

一般財団法人日本色彩研究所
(一財)日本色彩研究所はまもなく１００年の歴史をもつ、日本で唯一の色彩に関する総合的な研究機関です。色彩設計・心理・測色・色見本製作など色彩に関する各分野の専門スタッフがご相談に応じています。
③トーンを合わせた異なる色相
トーンとは明度と彩度を複合した概念のことです。PCCSでは12トーンに分類されています。トーンを合わせた色で多色使いにすることで、異なる色があってもまとまりのある配色になります。使用するトーンによって人に与える印象も大きく変化します。

実際にトーンを合わせた色で配色を行うと下図のOK例のようになります。OK例の棒グラフではペールトーン(上図で左上に位置する)を使用しています。高明度、低彩度の淡い配色で、軽く柔らかい印象になります。また、OK例の円グラフではダルトーン(上図で左から2列目の上から3番目に位置する)を使用しています。彩度は中程度、明度はやや低めのくすんだ配色で、落ち着いた印象になります。NG例とは同じ色相を使用していますが、トーンを揃えるだけでまとまった印象になることが分かります。

PowerPointでの色の作成・調節

PowerPoint上で色を細かく調整したい場合は「色の設定」ポップアップを開きます(開き方は下記参照)。カラーモデル項目のRGB、またはHSLの2通りの方法で調整することができます。


「色の設定」ポップアップ開き方
「図形の書式」タブ→「図形の塗りつぶし」ボタンを押下→「塗りつぶしの色(Ｍ)」を選択

RGBを使用した色の作成

R(赤)、G(緑)、B(青)の3色の光を混ぜ合わせて色を作成します。各色0～255までの256段階で調節します。光の三原色は混ぜ合わせるほど色が明るくなります。また各色を最大の255にすると白色になります。

また、2色を混ぜ合わせると以下のように色を作成することができます。

・R(赤)＋G(緑)＝Y(黄)

・G(緑)＋B(青)＝C(シアン：青緑)

・B(青)＋R(赤)＝M(マゼンタ：赤紫)

HSLを使用した色の作成

　HSLとは、Hue（色相）、Saturation（彩度）、Luminance（輝度）の頭文字で表されるカラーモデルのことです。色合い(色相)、鮮やかさ(彩度)、明るさ(明度)の各項目で色を調節することができます。色の明るさ(明度)だけ変えたいときなどに使用すると便利です。
　先ほど説明した「3色を超える場合の色選び」の明度(濃淡)違いの色と近い色相の色もこちらを使用して作成することができます。

・明度違いの色→「明るさ(L)」項目のみ調節

・近い色相の色→「色合い(U)」項目のみ調節

「Hex」項目を使用した色の作成

　上記の方法で色を作成するのが難しい場合は、さらに簡単な方法があります。上の画像を見て分かるように、RGBまたはHSLのどちらを選択しても「Hex」という項目が表示されています。一瞬でパレット上にない色を作成したい場合は、この「Hex」項目を使用するのがおすすめです。また、さきほど「3色を超える場合の色選び」の中でご紹介したトーンを合わせた異なる色相を作成したい場合もこちらを使用することで簡単に色をパレットに用意することができます。
　こちらは作成したい色のカラーコードを入力することで、自分で調節することなく色を作成することができます。カラーコードは＃に続く6桁の16進数で表されています(Hexは「16進数の」という意味のhexadecimalの略)。使用したい色をWeb上にある色見本から選び、カラーコードを「Hex」項目に入力するだけで作成することができます。色見本にはたくさんの色が用意されており、相性の良い色も知ることができます。参考になると思うので気になる方はぜひ調べてみてください。

ColorMagic

ColorMagic
AIを活用しており、配色のイメージで言語化されたキーワードからカラーパレットを選ぶことができる。色の作成や写真からの配色自動抽出も可能。

Adobe Color

Adobe Color
カラーハーモニールールに従った色の作成ができる。また写真から色を自動抽出することも可能。カラーパレットも豊富に用意されており、探索機能からイメージに近い配色を見つけたり、トレンドのカラーパレットから選択することもできる。

おわりに

　今回はプレゼンテーション資料における資料における配色のルールについてご紹介しました。PowerPoint上での色の作成方法についてもお伝えさせていただいたので、お役に立てれば幸いです。
66 件
    　
  • banner
  • banner

関連する記事

関連するキーワード