スライドの配色は3色で｜ロゴの色から決めて全ページにそろえる

来週の講座のスライドを、夜にパソコンで1枚目から見返していくと、表紙は青、2枚目の見出しは赤、図の中には緑と紫が並び、大事なところに引いた黄色の線は白い背景に溶けて読めなくなっています。作っていたときは1枚ずつ「目立つように」と色を足していったので、通して見るまで、ページごとに色がばらばらになっていることに気づきませんでした。

スライドの配色は、背景・文字・強調の3つの役目に1色ずつを割り当てれば足ります。この記事では、3つの役目の分け方、強調の色を自分のロゴや名刺から1つ選ぶ決め方、薄い色を文字に使わない理由、強調を1枚1か所に絞る使い方を順に書き、最後にCanvaでカラーコードを入れて全ページをそろえるところまで進めます。

書いているのは、商工会議所や自治体の講座で登壇し、講演やセミナーのスライドの制作もお引き受けしている会社です。

スライドの配色は、背景・文字・強調の3色で足りる

色を3つにすると聞くと、好きな色を3つ選ぶ話に思えますが、先に決めるのは、色ごとの役目のほうです。背景はスライドのいちばん広い面で、基本は白にします。文字は見出しと本文に使う色で、真っ黒より少しやわらかい濃いグレーか紺にします。強調は、その1枚でいちばん見てほしい語や数字にだけ使う色で、ここに自分らしい色を1つ入れます。

強調の色を薄くした色は、見出しの下に敷く帯や、図の枠の背景に使ってかまいません。同じ色の濃さ違いなので、ページを見たときに色が増えたようには見えません。

背景に色を敷くのは、表紙と区切りの1枚だけ

すべてのページの背景を紺にしたり、写真を敷いたりすると、文字を白に変える必要が出て、ページによって文字の色が2通りになります。背景に色を敷くのは、表紙と、本題の区切りに1枚ずつはさむ見出しのスライドだけにして、そこには文字の色（紺など）を敷き、文字は白にして、強調の色は使わない（表紙だけは、ロゴの明るい色を小さな飾りに使ってもよい）と決めておくと、通して見たときに色が増えた感じがしません。残りのページは白い背景にそろえておけば、区切りのスライドが出たときに、話の段落が変わったことも伝わります。

色を決める前に、1枚に載せる中身を絞っておく

文字が多くて読みにくいスライドを直すときは、話すためのスライドと配るための資料を分け、言いたいことを一文の見出しにして、口で言える部分を消していきます。そのうえでまだ詰まって見えるときに見直すのが、1行の長さ、四辺の余白、色の数の3つで、色は文字色・強調色・背景の3色までにすると、どこが大事かが分かりやすくなります。1枚1メッセージへの直し方は文字が多いスライドを見やすくするに書いたので、色を決める前に、まず1枚に載せる中身を絞っておくと、このあとの色の置き換えが短い時間で終わります。

強調の色は、自分のロゴか名刺から1つ取る

強調の色を新しく考えると迷いが長くなるので、すでに自分の看板として使っている色から取ります。ロゴがあればロゴの色、無ければ名刺やホームページ、インスタのアイコンで使っている色です。講座の資料が名刺やチラシと同じ色になっていると、聞いていた人があとでホームページを開いたときに、同じ人の話だと気づいてもらいやすくなります。

ロゴを作ってもらった制作会社やデザイナーがいれば、色のカラーコードを聞いてみてください。自分で作ったロゴなら、作ったときのCanvaのデザインを開き、ロゴの色の部分を選んでカラーパネルを見れば、使っている色のコードが確かめられます。どちらも難しく、手元に紙の名刺しか無いときは、名刺の色に近く、白い背景で文字にしても読める濃い色を1つ選び、そのコードを自分の色として控えておけば、次の資料からも同じ色を使えます。

選ぶときに確かめたいのは、その色で白い背景に文字を書いても読めるかどうかです。ウェブのアクセシビリティ（障害の有無にかかわらず使いやすくすること）の国際的な指針（WCAG 2.1）では、文字と背景のあいだに、少なくとも4.5:1のコントラスト比（明るさの差）を求めていて、大きな文字は3:1でよいとしています（WAIC「WCAG 2.1 日本語訳」達成基準1.4.3）。スライドはウェブページとは違いますが、明るい黄色や水色は白との差が小さいので、文字にすると後ろの席からは読めなくなりやすい、という目安として使えます。確かめるときは、候補の色で本文と同じ大きさの文字を白い背景に1行書き、画面から少し離れて読みにくいと感じたら、同じ系統のもっと濃い色に替えます。

ロゴに色が2つ以上あるときは、濃いほうを強調にする

ロゴに色がいくつか入っている場合は、白い背景で文字にしても読める濃い色を強調の色にして、明るい色は文字に使わないと決めておきます。当社のロゴも青・水色・黄色の3色で、社内のデザインルールでは、白い背景の文字に使うのは青だけにし、黄色と水色は文字には使わずに、小さな印やマーカーの面にとどめています。スライドでも、明るい色は表紙の小さな飾りだけに使い、本文のページには出さないと決めておけば、通して見たときに色が増えた感じがしません。

強調の色は、1枚に1か所だけ使う

3色を決めても、強調の色を1枚に何か所も使うと、いちばん伝えたいところが埋もれて、聞き手はどこを見ればいいかが分かりにくくなります。強調の色は、その1枚で声に出して言いたい一文の中の、いちばん大事な語か数字の1か所にだけ使います。見出しの「申し込みが増えたのは、3月から」なら「3月から」だけを強調の色にして、ほかは文字の色のままにしておきます。

表やグラフで、見てほしい行や棒が1つあるときも同じです。表では見てほしい行の背景だけを強調の色の薄い色にして文字は濃いままにし、グラフでは見てほしい棒だけを強調の色にして、ほかの棒は文字の色を薄くした色にします。全部に色を付けたグラフより、1本だけ色の違うグラフのほうが、何を言いたい1枚なのかが一目で伝わります。

強調は、色に太さを添えておく

強調した語は、色を変えるのと一緒に文字を太くしておきます。配った資料が白黒で印刷されると、色によっては強調の語と本文の区別がつきにくくなりますが、太さを添えておけば、印刷したあとでも、どこが大事な語かが分かります。配る資料があるときは、一度白黒で試し刷りをして確かめておきます。

Canvaでカラーコードを入れて、全ページをそろえる

3色が決まったら、それぞれのカラーコード（「#」から始まる6けたの英数字）をメモ帳に書き出しておきます。背景の白なら「#FFFFFF」、文字の濃いグレーなら「#333333」のように、背景と文字の色もコードで決めて、強調の色のコードと3行で並べます。Canvaでは、文字や図形、背景など色を変えたい部分を選び、カラーパネルを開いて、カラーコードの入力欄に「#」から始まるコードを入れると、その色に変えられます（Canvaの配色の解説ページ）。見た目で近い色を選ぶと、ページごとに少しずつずれた青が混ざるので、毎回同じコードを入れて合わせます。

はじめに、文字・図形・背景をそれぞれ1か所ずつ選んで色を変えてみて、どこにカラーコードを入れるのかを手で覚えておきます。そのあと1枚目から順に、見出しと本文を文字の色へ、大事な語を強調の色へ変えていき、ほかの色は残さないようにします。図の中の色も同じで、Canvaで図を作るときの5つの順番の最後に、書体と色をそろえて色ごとに役目を決める工程を置いているので、詳しい作り方はCanvaで図解を作る方法を見てください。

見た目は、話の順番が決まってから整える

色の置き換えは、スライドの中身と順番が決まってから行うほうが、やり直しが少なくて済みます。セミナーの構成は、聞き終えた人に持ち帰ってほしい1つを先に決め、見出しだけの骨組みを後ろから並べると決めやすく、その組み方はセミナーのスライド構成にまとめました。骨組みができ、1枚ずつの見出しが一文になっていれば、強調の色をどの語に使うかも、その一文から選べます。

全部を置き換えたら、Canvaの画面の表示を縮めて、全ページを一覧で並べて見てください。表紙と区切りのスライドを除くどのページも、基本の3色と、帯や図に使う同じ濃さの薄い色だけでできていて、強調の色が1か所ずつ光っていれば仕上がりです。会場で映す機会があれば、本番の前に一度スクリーンに出して、後ろの席から文字が読めるかも確かめておくと安心です。

今夜は、来週のスライドの1枚目を開いて、強調の色に使う1色をロゴか名刺から選び、カラーコードをメモ帳に書き出すところまで進めてみてください。3つのコードが並べば、あとは1枚ずつ置き換えるだけで、次の講座の資料がそろっていきます。

講演やセミナーのスライドは、スライド／デザイン制作でもお引き受けしています。色や配置を整えるだけでなく、話の順番から一緒に整理するところから始められます。