DESIGN IT YOURSELF.

BUROKI


top

blog

  • top
  • blog
  • 写真に文字を乗せる画像作成時のデザインバリエーション

写真に文字を乗せる画像作成時のデザインバリエーション

design_thing

  • top
  • blog
  • 写真に文字を乗せる画像作成時のデザインバリエーション

写真に文字を乗せる画像作成時のデザインバリエーション

2020.09.22.

スポンサーリンク

スポンサーリンク

このブログのサムネイル画像をつくるときにボクもよくやっている「文字が載っている画像」。YouTube動画のサムネイル画像ではもはやおなじみになっていますね。

ですが、写真の上に文字を乗せるということは、文字と写真のふたつの要素をバランス良く配置し、見る人に双方を伝える必要があり、意外とテクニックが必要になってきます。今回のブログは写真の上に文字を乗せるときのいろんな手法をご紹介しようと思います。

BUROKIアイコン

サムネイル画像作成時の参考にどうぞ。

index

このブログの目次

1. 写真と文字のコントラストに気をつける

まずはじめに気をつけたいことは、文字が載っている写真の場合、文字を読ませつつ伝わる写真にしなければいけません。要は「文字」と「写真」両方の要素を共存させなければいけないということです。

例えば下の比較写真のように、左側は写真の色味と同じような文字の色では文字が読みづらく、共存していないですよね。

写真と文字のコントラスト比較画像
左側がコントラストが低く、右側はコントラストが高い

たまに「あえて」明るめの写真の上に白い文字を乗せたりする広告などもありますが、あえてそういう風に見せるにはそれ相応のネームバリューが必要になってくるので、基本を知ることも含め、できるだけコントラストは意識しましょう。

コントラストとは?

コントラストとは直訳すると「対比」という意味で、デザインのコントラストでいうと色やトーン、形などの差違のことをいいます。

今回のわかりやすい例ですが、暗い写真の場合は白などの明るい文字色にし、明るい写真の場合は黒などの暗い文字色にすると写真と文字のコントラストが高くなり、文字と写真が共存しやすくなります。

写真と文字のコントラストが高い画像例
写真の色味と逆の文字色にすることで読みやすくなります

このように、写真の上に文字を乗せる場合はまずコントラストを意識しましょう。

2. フォントを写真の雰囲気に合わせて選ぶ

デザインのコントラストのことはなんとなく理解できましたね。

文字を読ませるためのコントラストと同じくらい大事なのは、乗せる文字のフォント選びです。フォントにはしっかりしたフォントや手描きフォント、柔らかみのあるフォントなどいろんな種類のフォントがあり、どんなフォントを使うかによって写真の持つ雰囲気がガラッと変わります。

違うフォントを使った画像例
左と右ではフォントを変えただけですが、かなり雰囲気が変わりますよね

フォントの選び方が難しい!という方は、画像を作成するときにまず「何をどう伝えたいか?」を考えるとおのずとフォントを選べるようになります。

3. 写真の上に黒のレイヤーを乗せる

使用する写真によってはどうしてもいろんなものが載っていて描写が細かいものや、明るすぎる空の写真だったり、文字を乗せるために色味を加工するにも限界があったりしますよね。そんなときは写真の上にレイヤーを重ねる方法もあります。

photoshopの場合の方法ですが、

  • 1. 写真レイヤーの上に新規レイヤーを作成
  • 2. 新規レイヤーを黒に塗りつぶす
  • 3. 黒に塗り潰したレイヤーの透明度を下げて透過させる

という方法です。
ちなみにボクはけっこうこの方法で画像作成しています。

黒のレイヤーを敷いたものとの比較画像
写真全体を暗くするには有効な方法です

写真を無理やり暗くするので文字は乗せやすくなりますが、画像が全体的に暗くなりがちなので、黒のレイヤーの透明度は10から20くらいがオススメです。

webサイトのタイトル画像などで使用する場合は暗くなりすぎるとイメージに関わるので、できるだけ明るくなるようにバランスに気をつけて透明度を設定しましょう。

4. 文字にシャドウをつける

写真を暗くするのはちょっと・・という方は、文字にシャドウ(影)をつけて文字の可読性を上げる方法もあります。

photoshopでのシャドウの付け方ですが、

  • 1. 文字レイヤーを選択
  • 2. 文字レイヤーをダブルクリックし、レイヤースタイルを開く
  • 3. スタイルからドロップシャドウを選択
  • 4. 数値や距離、シャドウカラーなどを設定

といった方法です。
シャドウがあるものとないもので比較画像をつくってみました。こんな感じです。

文字のシャドウ比較画像
右側が文字にシャドウをつけた画像ですが、読みやすくなってますよね

文字に影をつけるので、設定次第では文字まわりが黒くなりすぎることもあるので、できるだけ自然に読みやすくするのがコツです。

5. 写真をモノクロに加工する

最後は手っ取り早く文字を乗せる方法を・・それは写真をモノクロ加工するやり方です。

写真をモノクロにしてしまうとカラーを気にする必要がなくなるので画像をつくりやすく、かつクールかつおしゃれな雰囲気を出すことができます。

モノクロ加工の比較画像
写真をモノクロにするだけなので操作自体は簡単ですね

photoshopで写真をモノクロにする方法はいくつかあって、写真をグレースケールモードにすることでモノクロになりますし、色調補正から「白黒」を選択することでモノクロにすることもできます。

自分に合った加工方法を見つけてもらえたらと思います。

乗せる文字数はできるだけ少なく、余白を大事に

今回は写真の上に文字を乗せる場合のいろんなやり方を紹介してみました。

冒頭で「文字」と「写真」のふたつの要素を共存させる必要があると書きましたが、作成する画像自体は1枚です。1枚の画像に対してふたつの要素があるわけですから、それぞれの要素はできるだけ削ぎ落としたほうがいいです。

写真はできるだけゴチャゴチャしていないものを選び、乗せる文字はできるだけ簡潔に文字数を少なくする。引き算で考えて作成することが大事です。またバリエーションのテーマが決まったらご紹介しようと思います。

サムネイルのつくり方について書いたブログもよかったらどうぞ。

スポンサーリンク

BUROKI写真

BUROKI写真

はじめましてBUROKIです。

ベンチャー企業にて11年間webやグラフィックデザインとブランディング経験を経て、2019年5月よりフリーランスデザイナーになりました。完全独学でフリーランスになった異色の経歴の持ち主だと思います(笑)

制作実績やインハウスデザイナーのことなど日々更新しています。デザイン制作のご依頼やお問い合わせなども受け付けてますので、なんでもお気軽にご相談ください。

ベンチャー企業でマスターデザイナーとして働いた後、フリーランスになりました。制作実績やインハウスデザイナーのことなど日々更新しています。制作のご依頼なども受け付けてますので、なんでもお気軽にご相談ください。

ご依頼・お問い合わせ

ご依頼・お問い合わせ

related contents

関連コンテンツ一覧
スポンサーリンク

文鳥とデザイナー

スポンサーリンク

blog list

ブログ一覧

think

絶対に後悔しない!デザインを開始する前に決めておきたい制作ルールまとめ

クライアントさまから制作依頼をいただき、打ち合わせでどんなデザインにするか?を決めることは当然のこととして誰しもが認識していると思います。 …

2023.09.27.

think

chocoZAPに9ヶ月通い続けたからこそ言えるリアルな口コミを書いてみた

いまコンビニジム「chocoZAP(ちょこざっぷ)」のテレビCMが頻繁に流れていますね。 俳優さんも起用し、けっこうな頻度でCMが流れているので、気にな…

2023.09.06.

think

2023年8月の活動報告。8月はこんなデザイン制作をしていました

9月になりましたが、まだまだ暑い日が続きますね・・。 今年の夏は相方の誕生日にディナーを行ったくらいで(サムネイル画像はそのときのものです)…

2023.09.04.

design_thing

依頼する前に知ってほしい。デザインに使用する写真に関するいろんなこと

webサイトやチラシ、看板、会社案内、ポスターなど・・。 ほとんどの制作物には写真が使われていて、今や写真はデザインを構成する主な要素といって…

2023.08.29.

private

豊中市の少路駅近くにある「ステーキハウス神楽 豊中店」で相方の誕生日を祝う

8月末は毎年恒例の相方の誕生日祝い。 せっかく豊中市に引っ越してきたので、今回は豊中のお店に行こう!ということで、比較的家の近くにある「ステ…

2023.08.26.

think

2023年7月の活動報告。7月はこんなデザイン制作をしていました

毎年言っていると思いますが、暑い日が続きますね・・。 夏真っ盛りですが夏らしいことは一切せず、花火をベランダから見たくらいで今年の夏は終わり…

2023.08.07.

blogをもっと見る

制作のご相談・お問い合わせはフォームから

デザインのご依頼や予算のご相談、お問い合わせなどお気軽にお問い合わせください。
また、書いてほしいブログのリクエストやファンレター(笑)もお待ちしております。

問い合わせフォームはこちら

topトップページ

aboutブロキについて

designデザイン

voiceお客さまの声

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル