デザイン

デザイン

1段上のデザインスキルを身に付ける!テキストとイメージの効果的なデザイン例10

Designmodo

Designmodo publishes web design articles, tutorials and has a great shop with the best WordPress and Bootstrap themes, plugins, UI Kits and more.

本記事は、10 Tips for Designing with Type on a Photo
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

483 views

読了時間 : 約3分26秒

ツールキットの中で重要なスキルの一つにイメージ画像の上や周りに文字をタイプしてデザインするスキルがあります。しかし、このスキルは上手に使いこなすことが難しいスキルの一つでもあります。

 

 

正しい写真を選び、ぴったりな文字を使い、仕上げたいデザインをしっかりと頭のなかにイメージする必要があります。以下に、上手にデザインするためのヒント10選をご紹介します。是非、参考にしてみてください。

 

 

 

1. コントラストをつける

まず、テキストは読みやすくないといけません。写真との相性をみて、ぴったりな色にしましょう。写真が暗めの場合は、テキストは明るい色にします。写真が明るめならば、テキストは暗めがいいでしょう。

 

 

コントラストとは、イメージ画像と比較したテキストのサイズも含みます。文字はイメージと共存するべきです。対立してはいけません。上にある Pack websiteでは、背景が大胆で大きいのに対して、文字は細く軽い感じに仕上がっています。二つの要素は相互作用していますが、コントラストを忘れてはいけません。

 

 

 

2. テキストはイメージの一部と考える

時にテキストはイメージとして働くことがあります。上手く成功させるには難しく、全てのケースにあてはまるわけではありませんが。McLarenの例のようにイメージ画像とテキストはシンプルでなくてはいけません。

 

 

3. ビジュアルの動きを利用する

テキストや写真を活かしたいなら、ビジュアルの動きを使うことが重要です。まず、イメージのロジックに合った言葉を選びましょう。そして、テキストをイメージ画像の一番重要な場所に置かないように注意してください。写真の中心や顔、商品などの上は避けましょう。

 

ビジュアルの動きに合わせるためには、メインイメージの視線の先にテキストを置くようにします。上の例では、写真上の人の目線やボディランゲージによりテキストを読むように誘導しています。ビジュアルの動きを上手く使っています。

 

 

4. イメージをぼかす

イメージ画像をぼかすことは、ツールキットにあるスキルの中でもシンプルな方法です。Adobe Photoshopなどのソフトウェアを使って背景を少しぼかせば、テキストを目立たせることができます。また、ぼかしはコンセプトを際立たせるのにも役立ちます。上の例を参考にしてください。ぼかすことで、テキストや商品を目立たせることができるのです。

 

 

 

5. テキストをボックスに入れる

写真がカラフルで、明るめの色と暗めの色が使われている場合は、テキストをフレームの中に入れて目立たせましょう。

 

 

形選びは重要です。上の例は長方形や丸ですが、言葉やイメージ画像と合うものを選びましょう。そして、ボックスの色はテキストとのコントラストを考えて選びます。ソフトな印象に仕上げたい時は、フレームを半透明にすれば背景のイメージも見せることができます。

 

 

 

6. 背景にテキストを加える

前面ではなく、背景にテキストを置くことは一番使いやすい方法です。なぜなら、背景はシンプルでテキストを置くのに適しているからです。背景は単色である場合は多いので、テキストの文字も気づかれやすく読みやすいのです。

 

 

背景を使うと、メインの写真に加工するよりもナチュラルに仕上がる上に、特別なスキルもいりません。上のCaitlin Wickerのサイトのようにテキストに影をつければ奥行きを持たせることができます。

 

 

 

7. 大きくする

もし何をしたら正解かわからなければ、大きくしてみましょう。イメージ画像でもいいですし、テキストを大きくしてもいいのです。大きなイメージ画像やテキストは目を引くことができます。また、大きな要素を使うことでテキストやイメージ画像のスケールを調整することできます。

 

 

上のコーヒー豆のように、大きなイメージ画像を使えば影やコントラストの違いが際立ちます。大きなテキストは文字を強調し、どんなイメージ画像の上にあっても読みやすくなります。

 

 

 

8. 色を加える

カラーをつけると、ビジュアル的に読みやすくなります。上の二つの例は対照的に色を使っています。下の例は背景にはない色を使っていて、一部だけ色を変えています。上の例は、背景と同じような色を使っています。どちらも効果的な方法です。

 

 

 

9. カラーキャストを使う

イメージ画像にカラーキャストを加えてその上にテキストを置く方法が最近注目されています。使いこなすには難しいですが、とてもおしゃれなデザインになります。

 

 

面白みのあるカラーを選ぶようにしましょう。背景が見えるように半透明にすることがポイントですが、テキストが読める程度に抑えます。いくつか色を試したり、写真を変えたりして、上手く見せるために練習する必要があります。どんな色を使えばいいかわからない時は、ブランドカラーに似た色にしましょう。

 

 

 

10. シンプルにする

長年使われているデザインが証明するように「シンプルにする」ことが効果的なのはテキストやイメージ画像にも当てはまります。写真とテキストを見せることが一番重要なのです。効果を加えることは逆効果になる場合もあります。

 

 

シンプルな文字と分かりやすいイメージ画像を使うことがベストです。イメージ画像のハイライトを邪魔することなく見せることができ、テキストも読みやすくなります。

【コンビニでも使える!メルペイ初回利用1500円分招待コード】

当サイト限定招待コード:CMUTDF

 
・利用可能店舗:メルカリ、コンビニ、ドラッグストア等
・金額:500円分
※さらにメルペイスマート払で1000円分ポイント!
 友達招待でさらに500円分ポイント!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

ピックアップ! さらに今このキャンペーン中です↓

dポイント最大10%『4・5・6月の金・土曜限定!』
■キャンペーン期間:2020/4/1日(水)0:00 ~ 6/30(火)23:59

 

 

【MOV初回限定 合計2,000円相当無料クーポン3枚】

クーポンコード:seleqt2000

 
対応地域:神奈川県、東京都、大阪府、京都府、兵庫県(新登場)
 
2000円オフで登録» »MOVの初回利用2000円オフのクーポンを使って登録はこちら!
 
アプリDLはこちらから↓

MOV《モブ》- タクシー配車

MOV《モブ》- タクシー配車

DeNA Co., Ltd.無料

 

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【UberEats初回1000円オフクーポン】
interjpq2206j2tw

 

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き

 

1000円オフで登録» »当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber Eats: 地元で人気の料理をお届け

Uber Eats: 地元で人気の料理をお届け

無料

 

おすすめ新着記事

おすすめタグ