サイトロゴ

Enjoy Creating
Web & Mobile Apps

MENU BOX
WEB
MOBILE
OPEN

ホーム

 > 

 > 

【意外と難しい?】写真の上にテキストを配置する時のテクニック

【意外と難しい?】写真の上にテキストを配置する時のテクニック

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

バナーデザインでもチラシデザインでも、そしてWebデザインでも多用する手法。
それは写真素材の上にテキストを重ねて配置する…という手法です。

写真を配置するスペースとテキストを配置するスペースを完全に分けるとなると、それぞれのスペースが必要となり、写真を小さめに配置せざるを得ない場合もありますよね。
そこで、写真の上にテキストを配置することで、写真を大きく見せながらテキストも配置する…ということが可能となります。

良いとこどりで一石二鳥!みたいな感じですが、下手をすると写真の上のテキストが見づらくなってしまったり、写真もテキストも目立たない中途半端な感じになってしまったり…ということにもなりかねません。

写真の上にテキストを配置する場合、どのようなポイントに気をつけたら良いのか?確認していきましょう!

– 目次 –

画像上のテキスト配置について

コピースペースを利用する

写真の上にテキストを配置する際、まず第一の候補となるのが『コピースペースを利用する』テクニックです。

 用語解説:コピースペースとは?

後ほど紹介する袋文字帯を敷くといったテクニックは、よくも悪くもテキストが目立ってしまいがちですが、コピースペースを利用したテキスト配置は、さりげなくテキストを配置できるのが大きなメリットです。

さりげなさを出せるので、落ち着いた雰囲気や高級感を出したい場合にも向いています。
もちろん、テキストのジャンプ率を高めにしたり斜めに配置したりすることで、賑やかでポップな雰囲気を出すこともできます。
ジャンプ率についての記事は、こちらをご覧ください。

どのような場面でも使えるので、とても汎用性が高いテクニックと言えます。
それでは、まずはコピースペースを利用したテキスト配置の例を見てみましょう。

コピースペースを利用したテキスト配置の例1

ただ単に空いてるスペース(コピースペース)に白のテキストを配置しただけですが、これだけで十分にオシャレに決まっていますね。
シンプルな手法ゆえに、写真とテキストがお互いの邪魔をしにくいと言えます。
なので、デザイン初心者でも失敗しにくい方法ではないかと個人的には思います。

また、上の写真の例はコピースペースがはっきりしており、背景のカラーも黒に近い色なので白テキストそのまま配置すれば良いですが、素材によってはテキストに一工夫必要な場合もあります。
その例が下の画像です。

コピースペースを利用したテキスト配置の例2

このままでも決してダメではないですが、背景の空がグラデーションになっているため、テキストの一部がやや読みづらい感じになっています。
かといってテキストの色を暗い色にしてしまうと夏っぽさが失われてしまうので、テキストの色は変えたくないですよね。

このようなケースでは、テキストにさりげなく影をつけると、テキストカラーを変えることなくテキストの可読性を上げられます。

コピースペースを利用したテキスト配置の例2

ただし影を強くつけすぎてしまうと悪目立ちしてしまう上、素人っぽさが出てしまいます。
テキストシャドウはさりげなく!…がポイントです。

    POINT!
  1. ・コピースペースを利用して写真の上にテキストを配置しよう!
  2. ・コピースペースを利用したテキスト配置は、写真素材とテキストのバランスを取りやすい!
  3. ・テキストが読みづらい場合は、さりげなく影をつけると良い感じに!

背景に半透明の白を敷く

前章ではコピースペースを利用しましたが、コピースペースがない、あるいは狭い写真素材の場合はどうすれば良いのでしょうか?
対策の一つとして、テキストの背景に半透明の白を敷くというテクニックがよく使われます。

下のサンプル画像をご覧ください。
スイーツが主役であると考えた場合、テキストを配置するスペースは画像の上の方にありますが、そのままテキストを配置したのでは読みづらくなってしまうことが予想できます。

そのままではテキストを配置しづらい画像例1

それでは、上の画像の上部に半透明の白を敷き、その上にテキストを配置してみようと思います。

テキストの背景に半透明の白を敷いた画像

可読性を高めつつ、写真を完全に隠してしまうことなくテキストを配置することができました。

ベタ塗り背景の上にテキストを配置しても良いのですが、写真とテキストの境界がくっきりし過ぎてしまい、写真素材の印象が薄くなる場合があるので注意が必要です。

下の画像は、背景を半透明ではなく完全不透明の白背景にしたものですが、どこか野暮ったい印象になってしまっています。

テキストの背景に不透明の白を敷いた画像

背景を不透明の白にすることでテキストは読みやすくなるのですが、その分テキストが目立ち過ぎて写真が脇役っぽい感じがしますね。

もちろん、写真素材を飾り(脇役)で使い、テキストを主役にしたい場合は、背景を不透明にしてテキストコンテンツを際立たせるのもアリでしょう。

半透明でないとデザイン的にダメというわけでは決してなく、状況や目的によって使い分けることが大切だと思います。

    POINT!
  1. ・コピースペースがない(狭い)場合、テキストの背景に半透明の白を敷くというテクニックが使える!
  2. ・背景を半透明にすることで、写真の存在感を殺さずにテキストの可読性も高めることができる!
  3. ・テキストを際立たせたい場合は、背景を不透明にしてしまうのもアリ!

袋文字にする

YouTubeのサムネイルなどではテキストを袋文字にする(テキストの縁取り)テクニックがよく使われます。

縁取りによって画像とテキストの境界が明確になるため、背景に何も敷かずにテキストの可読性を高められるのが大きなメリットであり、特徴です。

ただし、袋文字は明朝体では返って見づらくなる場合があり、フォントの太さもある程度必要です。

そのためタイトルには向きますが、本文や補足情報にはあまり向かないということは覚えておくと良いでしょう。

下は写真素材の上にテキストを袋文字にして配置した例です。
テキストが読みやすく、小さな画像サイズでもテキストが目に入ってくるようになっています。

写真の上に袋文字を載せた例

このように袋文字にすることで、写真素材にコピースペースがなくてもテキストを自由に配置することができるので便利が良いです。
ただし、袋文字にするとポップな雰囲気になりがちなので、高級感や落ち着きを出したい場合にも向かないと言えます。

YouTubeのサムネイルでよく使われるのは、
・小さなサムネイル画像でもテキストを確実に読めるようにしたい
・親しみを感じさせたい場合が多く、高級感などは必要ない

からではないかと思います。

また余談ですが、サムネイルだけでなく動画の字幕にも、袋文字が使われることが多いですね。

写真素材を気にせずお手軽にテキストを配置でき、テキストを読みやすくでき、目立たせることができる袋文字ですが、やり過ぎ(過剰な装飾)はNGです。
悪目立ちしてしまうので、袋文字は多くても2〜3重までにしておくと良いでしょう。

ちなみにですが、ゴシック体であってもフォントウェイトが細かったり、縁取りを内側にしてしまうと下のような頼りない印象になってしまうので気をつけましょう。

細いフォントの袋文字は微妙…

細いフォントの袋文字は微妙…

また、袋文字はテキストと写真が分離された印象になるため、写真素材の良さや特徴を殺してしまいがちという点にも注意が必要です。
写真はおまけという場合なら良いのですが、写真の魅力を最大限に引き出したい場合は違う方法を考えた方が良いかもしれません。

    POINT!
  1. ・テキストを袋文字にすることで、写真素材のスペースに関係なくテキストを配置できる!
  2. ・袋文字はポップな印象になり、また明朝体や細いフォントには向かない場合があるので注意!
  3. ・良くも悪くも写真素材との明確がくっきりしてしまうため、写真素材を最大限に活かしたい場合は別の手法を考えてみよう!

« »

カテゴリーリンク

著者について- author profile -

ROYDOプロフィール写真
Michihiro

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

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

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

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

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

Twitterアイコン Instagramアイコン