最近ではパソコンを使用してYoutubeやニコニコ動画、ブログで使用するサムネを作成する人も増えてきたように思います。
サムネでは文字を使用することが多く、文字を目立たせることで見る人の気をひくことが可能となります。
そこで、今回は「目立つ文字」を作成するための配色をメインにまとめておこうと思います。
※今回は背景色の組み合わせ情報です。文字の縁取りの色の組み合わせは紹介していません。
目立つ文字色の基本
まず、目立つ文字を作ろうとして少し調べると「補色」というキーワードが出てくると思います。
補色とは
ある特定の色の正反対の色のことで、互いを最も目立たせることのできる色です。
ある特定の色を見続けた場合（数分間見続けたあと白色を見る）、色の残像が目に残ると思います。
その残像として残る色が正反対の色「補色」なのです。（MacやiPhoneで色反転という機能を使用するときに表示される色も元の色の補色です。）
色相環
補色をわかりやすく表したもが上の図の色相環で、円の反対側の色が補色です。
目立つ文字の色
「背景色」に補色はダメ
補色関係の組み合わせでは目立つことはできるのですが、読みにくくなってしまうものがほとんどです。
例として文字を赤色、背景を水色にしてみます。
目立つ色合い
目立つのですがものすごく読みにくくなってしまいます。
補色関係の色はオススメできません。
補色関係の文字・背景が気になる方はこちらのページから確認してみましょう。（http://www.wave440.com/php/iro.php）
目立つ組み合わせ
補色がダメならば、文字を目立たせるための文字・背景色はどのように決めれば良いのでしょうか。
結論から言うと、文字・背景共に「彩度を低く・コントラストを高く」すれば見やすい目立つ文字を作ることができます。（とにかく目立たせたいのなら彩度を高くするのもあり）
文字サンプル
| 赤 | 青 | 黄 | 緑 | |
| 彩度低い（おすすめ） | サンプル（990000） | サンプル（000099） | サンプル（999900） | サンプル（009900） |
| 彩度中間 | サンプル（cc0000） | サンプル（0000cc） | サンプル（cccc00） | サンプル（00cc00） |
| 彩度高い | サンプル（ff0000） | サンプル（0000ff） | サンプル（ffff00） | サンプル（00ff00） |
| 彩度低い | サンプル（990000） | サンプル（000099） | サンプル（999900） | サンプル（009900） |
| 彩度中間 | サンプル（cc0000） | サンプル（0000cc） | サンプル（cccc00） | サンプル（00cc00） |
| 彩度高い（おすすめ） | サンプル（ff0000） | サンプル（0000ff） | サンプル（ffff00） | サンプル（00ff00） |
白色の背景の場合は、文字を彩度の高いものにすると目がチカチカして見にくくなってしまいますが、黒色の背景にするとみやすく目立たせることが可能です。
特に、「黒と赤」「黒と黄」の組み合わせは相性が良いです。
背景
| 赤 | 青 | 黄 | 緑 | |
| 彩度低い（おすすめ） | サンプル（990000） | サンプル（000099） | サンプル（999900） | サンプル（009900） |
| 彩度中間 | サンプル（cc0000） | サンプル（0000cc） | サンプル（cccc00） | サンプル（00cc00） |
| 彩度高い | サンプル（ff0000） | サンプル（0000ff） | サンプル（ffff00） | サンプル（00ff00） |
| 彩度低い | サンプル（990000） | サンプル（000099） | サンプル（999900） | サンプル（009900） |
| 彩度中間 | サンプル（cc0000） | サンプル（0000cc） | サンプル（cccc00） | サンプル（00cc00） |
| 彩度高い（おすすめ） | サンプル（ff0000） | サンプル（0000ff） | サンプル（ffff00） | サンプル（00ff00）
|
以上のサンプルから、おすすめの目立つ背景・文字は「白色＋彩度の低い色」もしくは「黒色＋彩度の高い色」です。
おすすめ配色例まとめ
「赤＋黒」「赤＋白」「赤＋黄」「黄＋黒」「黒+白」「黒+オレンジ」
多くの色を使ってしまうとまとまりのない見た目となってしまうので、シンプルなもので十分だと思います。
目立つ文字テクニック
文字の途中で文字色、背景色を入れ替える
目立つ文字
文字の大きさを変える
目立つ文字
など、色の他にも文字を目立たせるテクニックはあります。
今回の記事がサムネの文字のデザイン作りの参考になればと思います。
以上「【目立つ文字・背景色】色相環から考える配色・デザイン！組み合わせ例」でした。
