配色とフォントの工夫

人が五感を通じて得る情報の中で、視覚から得るものが最も多いといわれています。
視覚的な表現の工夫として、配色とフォントの工夫について学びましょう。
ポスターやプレゼンテーションのスライドの作成にも活かせます。

配色の工夫

まずは配色の基本から学びましょう。

色の三要素

色は、色相、彩度、明度の3つの要素から成り立っています。

要素 説明
色相 色の違い。
彩度 色の鮮やかさの度合い。
明度 色の明るさや暗さの度合い。
色相
明度と彩度

色相環

色の関係を表した図を色相環といいます。

色相環

色相環で向かい合った色を補色といいます。

補色を組み合わせた例
補色を組み合わせた例

色相環で隣り合った色を類似色といいます。
また、同じ色相で、明度と彩度の異なる色を同系色といいます。

類似色を組み合わせた例
類似色を組み合わせた例

補色を組み合わせると派手な印象に、類似色や同系色を組み合わせるとまとまりのある印象になりますよ。
伝えたい情報によって、配色を工夫しましょう。

カラーバリアフリー(色覚バリアフリー)

色の感じ方(色覚)は人によって違いがあります。そのため、情報を色の違いだけで表現すると、うまく伝わらない場合があります。
色覚の違いによらず、誰にでも正しく情報を伝えるための工夫を、カラーバリアフリー(色覚バリアフリー)といいます。
下の例では強調したい部分の色を変えていますが、更に下線を引くことで、色の違いが判別できなくても意図が伝わるようにしています。

カラーバリアフリーの例①線を引いて強調する
カラーバリアフリーの例① 線を引いて強調する

テレビのリモコンの4色のボタンは、色の名前を文字でも書くことで、誰でも判別できるようになっています。

カラーバリアフリーの例②色名を書く
カラーバリアフリーの例② 色名を文字でも書く

色の感じ方が異なる「色覚多様性」を持つ人の割合は、日本では男性の約5%、女性の約0.2%で、40人のクラスなら各クラスに1人いる計算になります。
また、世界では約2億人いるといわれています。これは血液型がAB型の男性の人口に匹敵します。

思ったより多かったです。
誰でもわかる配色にしたいんですが、他の人にはどう見えているか、ちょっと想像がつきません。

色覚の違いをシミュレーションするスマートフォンアプリが便利ですよ。
自分が作ったコンテンツがどう見えるか、一度アプリを使ってチェックしてみると良いですね。
また、多くの人にとって見分けやすい色の組み合わせや、避けたほうがよい組み合わせを知っておくことも有用です。

色の組み合わせの例

色の組み合わせの例

画像出典:TOKYOユニバーサルデザインガイドライン(視覚情報版)

「見分けしやすい色の例」の字は、誰にとっても読みやすいな。

赤と緑の組み合わせはクリスマスカラーとしてよく目にしますけど、実は見分けにくい配色なんですね。
つい使ってしまいがちです。

見分けにくいとされる色の組み合わせでも、明度の差があると見分けやすくなります。
少しの工夫で、情報を伝わりやすくすることができますよ。
明度の差が小さい例と大きい例

フォントの工夫

フォントとは、文字のデザインのことです。
同じフォントの大きさでも、フォントの種類や太さによって、読みやすさが異なります。
また、誰にでも読みやすいよう工夫されたフォントを、ユニバーサルデザインフォント(UDフォント)といいます。

フォントの例
フォントの例

上の例では、フォントの大きさはすべて同じです。

フォントによって、読みやすさも、受ける印象も随分と違いますね。

一般的に、「ゴシック体」などの線の太いフォントの方が、多くの人に見やすいとされています。
特に、見出しや、遠くから見ることの多いプレゼンテーションのスライドに適しています。

一方で、「明朝体」などの線の細いフォントの方が、長い文章が読みやすいといわれています。
そのため、本や新聞の本文などによく使われます。

伝えたい情報や場面に合ったフォントを選ぶことが大切です。

フォントの選択の例

今まで配色やフォントは感覚で選んでいたので、今回、きちんと知識として学べてよかったです。

学んだ知識をもとに、ぜひ身の回りのモノを改めて見てみてください。
きっと、今まで気づかなかった情報デザインの工夫に気づけるはずですよ。
それでは、キーワードを振り返りましょう。

情 報 こ と ば キ ー ワ ー ド

色相

色の三要素の一つ。色の違い。

彩度

色の三要素の一つ。色の鮮やかさの度合い。

明度

色の三要素の一つ。色の明るさや暗さの度合い。

色相環

色の関係を表した、円環状の図。

カラーバリアフリー
(色覚バリアフリー)

色覚の違いによらず、誰にでも正しく情報を伝えるための工夫。

フォント

文字のデザイン。

Well done!

次のステップに進みましょう!

次のステップに進む

← 前のステップにもどる