バナーデザインでもチラシデザインでも、そしてWebデザインでも多用する手法。
それは写真素材の上にテキストを重ねて配置する…という手法です。
写真を配置するスペースとテキストを配置するスペースを完全に分けるとなると、それぞれのスペースが必要となり、写真を小さめに配置せざるを得ない場合もありますよね。
そこで、写真の上にテキストを配置することで、写真を大きく見せながらテキストも配置する…ということが可能となります。
良いとこどりで一石二鳥！みたいな感じですが、下手をすると写真の上のテキストが見づらくなってしまったり、写真もテキストも目立たない中途半端な感じになってしまったり…ということにもなりかねません。
写真の上にテキストを配置する場合、どのようなポイントに気をつけたら良いのか？確認していきましょう！
写真の上にテキストを配置する際、まず第一の候補となるのが『コピースペースを利用する』テクニックです。
用語解説：コピースペースとは？
後ほど紹介する袋文字や帯を敷くといったテクニックは、よくも悪くもテキストが目立ってしまいがちですが、コピースペースを利用したテキスト配置は、さりげなくテキストを配置できるのが大きなメリットです。
さりげなさを出せるので、落ち着いた雰囲気や高級感を出したい場合にも向いています。
もちろん、テキストのジャンプ率を高めにしたり斜めに配置したりすることで、賑やかでポップな雰囲気を出すこともできます。
ジャンプ率についての記事は、こちらをご覧ください。
どのような場面でも使えるので、とても汎用性が高いテクニックと言えます。
それでは、まずはコピースペースを利用したテキスト配置の例を見てみましょう。
ただ単に空いてるスペース（コピースペース）に白のテキストを配置しただけですが、これだけで十分にオシャレに決まっていますね。
シンプルな手法ゆえに、写真とテキストがお互いの邪魔をしにくいと言えます。
なので、デザイン初心者でも失敗しにくい方法ではないかと個人的には思います。
また、上の写真の例はコピースペースがはっきりしており、背景のカラーも黒に近い色なので白テキストそのまま配置すれば良いですが、素材によってはテキストに一工夫必要な場合もあります。
その例が下の画像です。
このままでも決してダメではないですが、背景の空がグラデーションになっているため、テキストの一部がやや読みづらい感じになっています。
かといってテキストの色を暗い色にしてしまうと夏っぽさが失われてしまうので、テキストの色は変えたくないですよね。
このようなケースでは、テキストにさりげなく影をつけると、テキストカラーを変えることなくテキストの可読性を上げられます。
ただし影を強くつけすぎてしまうと悪目立ちしてしまう上、素人っぽさが出てしまいます。
テキストシャドウはさりげなく！…がポイントです。
前章ではコピースペースを利用しましたが、コピースペースがない、あるいは狭い写真素材の場合はどうすれば良いのでしょうか？
対策の一つとして、テキストの背景に半透明の白を敷くというテクニックがよく使われます。
下のサンプル画像をご覧ください。
スイーツが主役であると考えた場合、テキストを配置するスペースは画像の上の方にありますが、そのままテキストを配置したのでは読みづらくなってしまうことが予想できます。
それでは、上の画像の上部に半透明の白を敷き、その上にテキストを配置してみようと思います。
可読性を高めつつ、写真を完全に隠してしまうことなくテキストを配置することができました。
ベタ塗り背景の上にテキストを配置しても良いのですが、写真とテキストの境界がくっきりし過ぎてしまい、写真素材の印象が薄くなる場合があるので注意が必要です。
下の画像は、背景を半透明ではなく完全不透明の白背景にしたものですが、どこか野暮ったい印象になってしまっています。
背景を不透明の白にすることでテキストは読みやすくなるのですが、その分テキストが目立ち過ぎて写真が脇役っぽい感じがしますね。
もちろん、写真素材を飾り（脇役）で使い、テキストを主役にしたい場合は、背景を不透明にしてテキストコンテンツを際立たせるのもアリでしょう。
半透明でないとデザイン的にダメというわけでは決してなく、状況や目的によって使い分けることが大切だと思います。
YouTubeのサムネイルなどではテキストを袋文字にする（テキストの縁取り）テクニックがよく使われます。
縁取りによって画像とテキストの境界が明確になるため、背景に何も敷かずにテキストの可読性を高められるのが大きなメリットであり、特徴です。
ただし、袋文字は明朝体では返って見づらくなる場合があり、フォントの太さもある程度必要です。
そのためタイトルには向きますが、本文や補足情報にはあまり向かないということは覚えておくと良いでしょう。
下は写真素材の上にテキストを袋文字にして配置した例です。
テキストが読みやすく、小さな画像サイズでもテキストが目に入ってくるようになっています。
このように袋文字にすることで、写真素材にコピースペースがなくてもテキストを自由に配置することができるので便利が良いです。
ただし、袋文字にするとポップな雰囲気になりがちなので、高級感や落ち着きを出したい場合にも向かないと言えます。
YouTubeのサムネイルでよく使われるのは、
・小さなサムネイル画像でもテキストを確実に読めるようにしたい
・親しみを感じさせたい場合が多く、高級感などは必要ない
からではないかと思います。
また余談ですが、サムネイルだけでなく動画の字幕にも、袋文字が使われることが多いですね。
写真素材を気にせずお手軽にテキストを配置でき、テキストを読みやすくでき、目立たせることができる袋文字ですが、やり過ぎ（過剰な装飾）はNGです。
悪目立ちしてしまうので、袋文字は多くても２〜３重までにしておくと良いでしょう。
ちなみにですが、ゴシック体であってもフォントウェイトが細かったり、縁取りを内側にしてしまうと下のような頼りない印象になってしまうので気をつけましょう。
細いフォントの袋文字は微妙…
また、袋文字はテキストと写真が分離された印象になるため、写真素材の良さや特徴を殺してしまいがちという点にも注意が必要です。
写真はおまけという場合なら良いのですが、写真の魅力を最大限に引き出したい場合は違う方法を考えた方が良いかもしれません。
これまでに、可読性の高いカラーパターンを自動で生成するアプリや、『第３火曜日』といった形式で通知をスケジュールできるアプリなどを制作。
サブでWebデザイン・フロントエンドエンジニアとしても活動しています。
📝ツール・言語：JavaScript/React Native/Kotlin/Android Studio/Swift/SwiftUI
🎓資格：基本情報技術者/ウェブデザイン技能検定３級
