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

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

8月になりましたが・・大阪は2日からまさかの緊急事態宣言再発令ということで・・。 コロナのことはあまり書きたくないのですが、ずっと同じことを繰…

2021.08.05.

favorite

ちゃんとoisixの20周目の夕食フォトギャラリーまとめ

8月2日から大阪は再度緊急事態宣言が出されそうですね。 いやー、また自粛生活でしょうか・・お店は相変わらず20時には閉店。これ本当にいつまで続く…

2021.08.01.

think

フリーランス3年目、自分の強みを改めて書き出してみた

フリーランスになって約2年以上が経過し、いろんなクライアントさまとお仕事する機会も増えてきていて、その際に打ち合わせなどで話していくうちに「…

2021.07.30.

design_thing

illustratorで横長の円形オブジェクトをふわっと変形させる方法

デザインしてると場合によっては人物やキャラクターがセリフを言っているように見せるためにフキダシが必要になることってありますよね。フキダシの…

2021.07.28.

private

駒川商店街にある「ishi-so」でスープカレーとマンゴーラッシーを食す

ひさしぶりに駒川のグルメ案内ブログです。 ランチ時間に駒川商店街のちょっとはずれにある「スープカレーとカフェ ishi-so(イシソ)」へ行ってきま…

2021.07.26.

favorite

ちゃんとoisixの19周目の夕食フォトギャラリーまとめ

連日暑い!暑すぎますね! もうさすがに梅雨明けかな?朝ラン継続していますが熱中症にならないか心配しながら走っています・・。長居公園にあったセ…

2021.07.22.

blogをもっと見る

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

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

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

topトップページ

aboutブロキについて

designデザイン

voiceお客さまの声

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル