サイトロゴ

Enjoy Creating
Web & Mobile Apps

MENU BOX
WEB
MOBILE
OPEN

ホーム

 > 

 > 

画像のテキストの装飾は控えめに!

画像のテキストの装飾は控えめに!

この記事にはプロモーションが含まれています。

グラフィックアートなど芸術作品として画像を作成する場合は、画像の中にテキストを入れることはあまり無いですが、バナーやチラシ、アイキャッチ画像などは画像の中にテキストを配置することが多いです。(下のサンプル画像のような感じで)

サンプルバナー画像

そこで悩みの種となるのが、テキストをどう目立たせるか?というところなのですが、画像作成初心者のうちはとにかく目立たせようとして逆に失敗してしまうことが多いです。(漏れなく僕も同じ失敗を重ねてきました)

そこで今回は、テキストの装飾のポイントを紹介していきます。

– 目次 –

テキスト装飾の注意点

テキストの色は1〜2色程度に

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

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

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

テキスト装飾画像のだめな例

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

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

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

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

良いテキストカラーの例1

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

良いテキストカラーの例2

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

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

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

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

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

グラデーションの悪い例1

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

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

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

グラデーションの良い例2

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

グラデーションの良い例

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

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

袋文字は重ねすぎない

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

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

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

袋文字の悪い例

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

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

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

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

良い袋文字の例

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

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

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

テキストは変形させない

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

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

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

テキスト変形の悪い例

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

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

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

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

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

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

« »

カテゴリーリンク

著者について- author profile -

ROYDOプロフィール写真
Michihiro

モバイルアプリ(iOS・Android)ディベロッパー&デザイナー

これまでに、可読性の高いカラーパターンを自動で生成するアプリや、『第3火曜日』といった形式で通知をスケジュールできるアプリなどを制作。

サブでWebデザイン・フロントエンドエンジニアとしても活動しています。

📝ツール・言語:JavaScript/React Native/Kotlin/Android Studio/Swift/SwiftUI

🎓資格:応用情報技術者/基本情報技術者/ウェブデザイン技能検定3級

Twitterアイコン Instagramアイコン