フォントの種類をそろえる

サムネイルに限らず、仕事で使用する報告書や会議の資料などにも使えるテクニックですが、画像で使用するフォントはできるだけ統一するとまとまりが出ます。

フォントというのは、日本語だと大きく「明朝体」「ゴシック体」、欧文だと「serif（セリフ）体」「sans-serif（サンセリフ）体」に分けられ、それぞれ特徴が異なります。

どのフォントを使用するのが良いというのはありませんが、異なるフォントをごちゃ混ぜにすると違和感を与えてしまいます。
例として下の文章を見てみましょう。

この文章は明朝体とゴシック体が入り混じっています。

特に気をつけていなくとも、文章の途中でフォントを切り替えるようなことはないと思いますが、文章が離れていたりすると、フォントが変わってしまっていることに気づかないケースがあります。

例として、以下の２つの画像を見比べてみてください。

上のサムネイルは全てのフォントをゴシック体で統一しているので違和感がなく、まとまっている印象になります。
それに対し、下のサムネイルは「おススメハンバーガー」がゴシック体、「選！」の部分が明朝体になっているので、その部分だけ印象が変わってしまい、違和感の元となっているのがわかります。

また、同じゴシック体・明朝体の中でも様々な種類があります。
「ゴシック体なら何でも良いや」とテキトーにしてしまうと、やはりどこか違和感が現れる原因となってしまうので注意しましょう。

下の画像は、同じゴシック体ですが片方は「小塚ゴシック Pr6N」、もう片方は「筑紫A丸ゴシック」にしている例です。

特徴がよく似たフォントであればそこまで違和感は出ないのですが、「小塚ゴシック Pr6N」と「筑紫A丸ゴシック」は全く雰囲気が異なるゴシック体なので、やや統一感が失われますね。

フォントの使い分けが意図的なものであれば良いのですが、「フォントの指定をテキトーにした結果、統一感に欠ける」という状態になってしまうのは避けた方が良いでしょう。

POINT!
1. ・サムネイルに統一感を持たせるには、フォントの種類をそろえると良い！
2. ・特に２箇所以上にテキストを配置する場合に要注意！
3. ・同じゴシック体・明朝体でも色々な種類があるので、雰囲気を崩さないように気をつけよう！

フォントの色を読みやすい色にする

通常、明度や彩度が同じぐらいの似たような色同士は、重なり合うととても見づらいです。

たとえば、赤の背景にオレンジのテキストを入れてみるとどうなるでしょうか？

明度差や彩度差がない同系統の色同士は読みにくい

読ませる気がない場合は良いかもしれませんが、サムネイルに配置するテキストは読んでもらいたいワードが詰まっているはずです。
なので、背景色とテキストの色の組み合わせには気を付ける必要があります。

白の背景に黒字がベストというわけではなく、読みやすくてサムネイルの雰囲気に合っている色であれば何でも良いです。（参考までにカラーパターンを下に用意しました）

暗い赤に白のテキスト

明るい青に暗い青のテキスト

黒に黄色系のテキスト

まずは自分自身が遠目で（パソコンやスマホから少し離れて）見てみて、パッと一目でテキストを読めればOK。
しかし、画像の制作者は何が書いてあるのか読む前から分かってしまっています。
そのことを計算に入れて、何か他のことが書いてあっても読みやすいか？という視点で観察するクセをつけると良いでしょう。

以上を踏まえて、改めてあまりおススメできないサムネイルの例と、見やすい例を見比べてみましょう。

▲読めないことはないですが、背景色と文字色が被っていて読みにくいですね。

▲背景色とは違う色のテキストにすることで、読みやすくなりました。

欧文テキスト（ABC…）をオシャレ目的で配置する場合などはあえて読みづらい色の組み合わせにすることもありますし、何なら画像の裏に隠れるように配置することもあります。
が、基本的には、とにかく読みやすさを意識すると見栄えが良くなると思って良いです。

POINT!
1. ・背景色とテキストの色は読みやすい組み合わせにする！
2. ・明度や彩度が同じぐらいの、同系統の色同士にすると読みづらくなる！
3. ・明度差や彩度に差をつけたりして、サムネイルの雰囲気に合った色の組み合わせにしよう！

枠をつけるときは余白を意識する

デザインの基本として「余白をしっかり取りましょう」と書いてあるものもありますが、少なくともサムネイルの余白に関しては、余白がないとダメということはありません。
サムネイルの多くは小さな画像サイズで一覧として表示されるため、余白を空けずに端までぎっちりテキストや画像を配置して目立たせるのも有効なレイアウトと言えるからです。

ただし、テキストに枠線をつけたり図形で囲んだりするような場合は別で、基本的に余白を少し取った方が見やすくなります。

例として、以下の２つの文章を見比べてみましょう。

余白がないので、窮屈で読みにくい

ある程度余白があるので、読みやすい

また、枠線をつける場合だけでなく、○などの図形に数字やテキストを入れ込む場合も同様です。

１

１

余白がない・狭いこと自体が悪いのではなく、余白が狭いことでテキストが読みづらくなることが問題なのです。
なので、どこもかしこも余白を空ければ良いというものではありません。
余白を空ける必要のないところで余白を空けすぎると、落ち着いた印象が強く出てしまい、にぎやかでポップな印象にしたい場合は返って余白があることが邪魔になります。

以上を踏まえて、改めて２つのサムネイルを比較してみましょう。「５選！」の数字の部分に注目してみてください。

▲５の部分が窮屈で、バランスがあまりよくありません。

▲数字の外側に余白ができたことで、バランスがよくなりました。

あえて枠線との余白を狭くしたり、むしろ枠線から飛び出させたりする手法もあると思いますが、あくまで原則としては「枠線＝余白が必要」と覚えておくと良いと思います。

POINT!
1. ・サムネイルの場合、どこもかしこも余白が必要なわけではない！
2. ・ただし、枠線でテキストを囲む場合は余白を意識しよう！
3. ・枠線のほか、丸やフキダシといった図形でテキストを囲む場合も同様！

色を使いすぎない

配色に関しては本当に難しいのですが、見やすくするための色の使い方のポイントは、トーンが全く異なる色を何色も使いすぎないことです。

サムネイルのデザインにまだ自信が持てないという場合は、２〜３色。
ある程度色の使い方に慣れてきたという場合でも、３〜５色以内でまとめるのがおススメです。

レインボーカラーを採用すれば７色使うことになりますし、カラフルなキャンディーの詰め合わせのような画像を配置すれば、それだけで多くの色が使われることになるので、そういった例外はもちろんあります。
が、わざと狙ってカラフルにするケースを除けば、基本的に色は絞った方が見やすく仕上がります。

また、下手に色を使いすぎると「素人っぽさ」が出てしまうというデメリットも大きいです。下のサンプルを見てみてください。
色を無駄に使うだけで「コレじゃない感」や、初心者が作りました感が出てしまっています。

色をたくさん使いすぎ？

反対に、色を２色に抑えるだけでとてもスッキリします。

色を抑えるとスッキリまとまる

また色の組み合わせに困ったら、「カラーパターン」「配色パターン」といったワードで検索し、サムネイルの雰囲気に合う色の組み合わせを選ぶと良いと思います。
プロが考えたカラーパターンから選んでいくうちに、自分なりの自然な配色をアレンジすることもできるようになるでしょう。

それでは以上を踏まえて、２つのサムネイルを見比べてみましょう。

▲バラバラな色を使いすぎていて、見にくい上に素人感があります。

▲使う色を絞ることで見やすくまとまり、素人っぽさもなくなりました。

ちなみにですが、どうしても多くの色を使う必要がある場合はカラーのトーンを揃える と、まとまりが出ます。

トーンとは明度と彩度を合わせたもので、パステルカラーのような薄くて軽い色同士や、ビビッドカラーのような派手で冴えた色同士で配色することで、色を多めに使ってもある程度まとまり・統一感を出すことができます。

POINT!
1. ・色を使いすぎるとまとまりがなく、見づらいサムネイルになりがち！
2. ・使う色を２〜４色程度に抑えるとスッキリまとまる！
3. ・使う色を多くしたい場合は、トーンを揃えるとある程度まとまりが出る！