テキストの色は１〜２色程度に

画像内のテキストを目立たせる方法の１つに、テキストに色を付けるというテクニックがあります。

テキストを変形させるわけでは無いので、テキストの大きさやバランスといったレイアウトは崩れないですし、最も無難かつ効果的なテクニックではあるのですが、それでもやりすぎは厳禁です。

まずはダメな例として、以下の画像をご覧ください。

夜景の写真ですが、今回注目して頂きたいのは画像の左下のテキスト部分です。
もはや解説するまでもなく、どこがいけないのかはっきりとわかると思います。笑

カラフルで存在感だけは出せていますが、色の組み合わせがバラバラで、しかも読みづらい色の字もありますね。
ここまで分かりやすく極端な失敗をすることはないと思いますが、テキストをカラフルにしようと思ってやや過剰に色をつけてしまうことはあり得るので、気をつけましょう！

ちなみに、同じテキストグループに色をつける場合は、できれば１色に決めた方が良いです。多くても２色程度におさめるとスッキリします。

ただし、レインボーカラーを使って狙ってカラフルにする場合もあります。こういう場合は色のトーンをそろえることが重要です。

▲シンプルに１色でまとめた例です。
この写真のように、テキストが主役ではなく景色（写真）が主役の場合、テキストは無理に目立たせなくてもOKです。

▲同じテキストグループに複数の色をつける場合は、２色程度におさめておくとスッキリします。
また、単語は色を分けずに同じ色にした方が、可読性が上がります。

POINT!
1. ・画像中のテキストに色をつける場合、過剰にならないように！
2. ・同じテキストグループの色は、できれば１色でまとめた方が良い！
3. ・同じテキストグループに複数の色をつける場合でも、２色程度におさめておくとスッキリまとまる！

グラデーションにする場合も要注意

色（単色）の使いすぎだけでなく、微妙な色の組み合わせのグラデーションにも注意が必要です。

たとえば、下の画像はテキストを緑→赤へのグラデーションにしたものですが…？

…あ、うん。キレイと言えないこともないんですが、結果的にたくさんの色が使われていることになり、過剰気味に見えてしまっています。
この色の組み合わせのグラデーションがどんな時にも絶対にダメということはありませんが、読んでもらう必要があるテキストをグラデーションにするのであれば、青色→水色など、類似色でまとめるとスッキリします。

または、色→白、色→黒というふうに、片方を無彩色にするという方法もおすすめです。

それではグラデーションのポイントを押さえたところで、サンプルを見ていきましょう。

▲オレンジ色から黄色へのグラデーションです。
オレンジ色と黄色は近い関係にある（似た色）なので、グラデーションにした時の色の移り変わりが自然で、調和しやすいです。

▲薄いオレンジ色から白へのグラデーションです。
このように、片方を無彩色にすると自然と使われる色が抑えられるのでごちゃごちゃとした印象になりません。

POINT!
1. ・グラデーションにする時は、色の組み合わせに注意！
2. ・赤系統と黄系統、緑系統と青系統など類似色でまとめるとスッキリする！
3. ・または、片方を無彩色（白・黒）にするのも、見やすくするためにはおすすめ！

袋文字は重ねすぎない

画像の上にテキストを配置すると、テキストの色をどう調整してもテキストが読みづらくなってしまうケースも多いです。
そんな時に多用されるテクニックが袋文字と呼ばれる、テキストの周りを囲む線の追加（文字の縁取り）です。

袋文字にすることで、背景画像がどのような画像であれテキストを確実に目立たせ、可読性を高くすることができます。
しかし袋文字にすると、画像とテキストが完全に分離されるので、悪い意味でも目立ちやすくなるとも言えてしまうのです。

テキストの可読性を確保するのにとても便利な袋文字ですが、それゆえに過剰な袋文字は悪い意味で目立ってしまい、せっかくの画像の雰囲気をぶち壊しにしてしまうこともあります。

▲これでもかというほどテキストが縁取りされていて、夜景の写真の雰囲気と全く合っていません。
黒字で書かれたテキストの外側に、白の縁取り→黒の縁取り→白の縁取り…という構造になっているのですが、ここまで過剰にしてしまうとサンプルのように「しつこい・くどい・悪目立ち」といったマイナスイメージを与えてしまいます。

ではどの程度の袋文字なら良いのか？ですが、これはどのようなイメージの画像を作りたいか？…によります。

今回サンプルとして使っている夜景の画像のように、落ち着いた・高級な・大人なイメージにしたいのであれば、そもそも袋文字にしない方向でデザインした方が良いと思います。

一方、例えば「○○やってみた！！」系の、ちょっとやんちゃで元気な雰囲気が大事なYouTubeのサムネイルなどは、多少、過剰気味な袋文字でもOKだと個人的には思います。

▲元気でインパクトが大事な画像作成の場合は、このようにテキストを袋文字でバーンと目立たせるのも有効です。
ただし、それでも袋文字は２重までにしておくと良いと思います。（上のサンプルはテキスト→縁取り→縁取り…という２重構造になっています）

３重までいくといくら元気さやパワフルな雰囲気を出したくても、それ以上にしつこさが出てしまうと言えるので、あまりおすすめはしません。

POINT!
1. ・袋文字は可読性を高められるが、過剰にすると悪目立ちしてしまう！
2. ・高級感や落ち着いた雰囲気を大事にしたい場合は、なるべく袋文字にしない方向で！
3. ・元気でパワフルなイメージを出したい場合は、２重の袋文字でもOK！

テキストは変形させない

Photoshopなどの画像編集ソフトにはワープテキスト機能というものがあり、これを使うとテキストをアーチ状に変形させたり、独特な形に変形させることができます。
ですが、基本的にテキストは変形させない方が良いです。

もちろん、ロゴマークに付随するテキストや、読めなくても良い飾りのテキストであれば、テキストの変形が有効なこともあります。
ですが、バナーやブログのアイキャッチ画像、YouTubeのサムネイル画像などに入れ込むテキストは、ちゃんと読んでもらいたい場合がほとんどです。

読んでもらいたいのに、変形によって読みにくくなってしまっていると、まさに本末転倒。
読んでもらいたいテキストは、たとえば下のサンプルのように変形させない方が無難です。

▲全く意図の読めないテキストの変形のせいで、全体的なバランスや雰囲気が崩れてしまっています。

色やグラデーション、袋文字に関しては、「やり過ぎがダメというだけで、控えめにしたらOK」という感じでしたが、テキストの変形に関しては、するならする、しないならしないの２択だと言えます。

というのも、中途半端な変形にするのであれば、全く変形させない方がマシという結果になることが多いです。
逆に言えば、変形させるのであれば、分かりやすいぐらいに変形させた方がデザインの意図が伝わります。

ただし当然ですが、テキストを変形させるのであれば、なぜその変形を加えるのか？その目的を明確にすることが大切です。

一番やってはいけないのが、なんとなく物足りないからとか、編集しました感を出すためとかで、無目的に変形させてしまうことです。

POINT!
1. ・読んでもらいたいテキストは、基本的に変形させない方が無難！
2. ・変形を軽めにおさえれば良いというわけでもない！
3. ・どうしても変形させるのであれば、その意図を明確にすることがダイジ！