ForYourImages MAGAZINE

トリミングで印象が変わる!デザイン初心者に覚えてほしいバナー制作テクニック

2018/04/19
2018/04/19

トリミングで印象が変わる!デザイン初心者に覚えてほしいバナー制作テクニック

トリミング・コピー位置の違いでバナーの印象を変えよう

画像素材を使って、ウェブ用のバナーやビジュアルをデザインするとき、文字やロゴなどの要素をどのようにレイアウトするか迷ったことはありませんか?

もちろん、画像素材のコピースペース(余白)を有効に活用することが大切なのですが、ベースとなる画像素材をトリミング※、コピーの位置を変えてデザインすると、同じ画像でも随分と異なった印象を与えることができます。同じ素材でも多くの表現ができる事はメリットですよね。

※画像の一部を切り出して加工する方法

今回はForYourImagesで販売している下記の素材を例にトリミング・コピー位置の違うバナーを4パターンつくってみました。

使用したForYourImagesの画像素材「クッションを抱えて遠くを見つめる女性」

FYI00465847© apjt / ForYourImages

 

パターンA: 被写体とキャッチコピー一体タイプ

パターンAのバナーデザインですが、こちらは顔の向き(目線)の先にコピーがあることでコピーと人物の関係性が強くなります。モデルが笑顔の理由=コピーの内容となるのでコピーも直接的な表現が効果的です。

 

パターンB: ゆったり上品タイプ

パターンBでは、モデルの顔の向きを画面の外に出すことで空間に広がりがうまれ、より上品な表現に向いているかもしれません。バナーではスペースが限られてしまい窮屈な印象になりがちですが、よりのびのびとした印象になるでしょう。

 

パターンC: キャッチコピー優先タイプ

パターンC。まずコピーが読まれるレイアウトです。真っ先に伝えたいお得な情報をタイトル的に配置すると効果的かもしれません。またはキャッチコピーをきっかけとして、読んだあとに画像をみると意味が分かるようなストーリーがあると広告としての完成度も高まるかもしれません。

 

パターンD: 画像(被写体)優先タイプ

パターンDは、まず画像(被写体の人物)が見られるレイアウトです。インパクトのあるモデルの画像などであれば効果的にユーザーの目を引くことができるでしょう。写真の下の方は文字を置けるシロ場(余白)を確保できることが少ないので帯をしいたりしますが、画像とコピー要素を分けてしまうとバナーとしてのまとまりが薄れてしまいます。薄いグラデーションをしいたり袋文字にしたりと文字の置き方もいろいろ検討してみましょう。

その他、目元をトリミングで隠したり、手元だけを見せることでモデルを象徴的な見え方にすることも可能です。まずはいろいろなトリミングを試してみてください。

 

これだけでデザインの幅が広がる!

いかがでしたか?このようなバナー広告のデザインにはモデルの表情、文字の色や大きさなど様々な要素が影響するため、ご紹介したトリミングルールに当てはまらない場合も多いかもしれませんが、ちょっとした違いで印象は変わりますし、クリック数も劇的に変わるかもしれません!

初心者のデザイナーやWEB担当者でも、この表現を知っているだけでデザインの幅が広がると思います。ぜひこの記事の内容を参考に一つ上のデザインを目指してみてはいかがでしょうか?

高品質で気軽に使える写真素材のForYourImages