バナー制作でおさえておきたいポイント

Pocket

こんにちは。ユイPです。
最近2年使ったiPhone 7をiPhone XSに機種変更しました。画面とカメラの綺麗さにはテンションがあがりますが、まだ使いこなせている気はしません。

今回は「バナー制作の時におさえておきたいポイント」がテーマです。
以前「新米デザイナーが作る!バナーの作り方」という記事を書きましたが、あれから約10ヶ月…制作したバナーの数も10ヶ月前の時点では約300個でしたが、この記事を書いている時点で約800個まで増えました。1000個までもう少し。

前回の記事ではバナーの作り方を作業工程と共に解説していきましたが、今回はタイトルの通り、「バナー制作時におさえておきたいポイント」を解説していきたいと思います。

※前回の記事と少々書いてある事が被る部分もございます。
※またこの記事で使われているバナーは全て架空のバナーです。


バナーとは広告や宣伝などのために使われる画像の事です。
バナーの目的は主に「見た人にクリックしてもらう」事です。
掲載場所やターゲットによってデザインや訴求ポイントは変わってきますが、クリックしてもらうために「このバナーで誰に何を訴求したいのか」を考えて作っていく事が大切です。

これを踏まえて制作時のポイントを解説していきます。


1.めりはりをつける

例えばこの2つのバナーだったら、どちらの方が大事な文言がより強調されていると思いますか?
答えは下です。文字サイズの強弱や色の差がついているので「人気作品”無料”」という言葉が一番見せたい部分なんだなとわかります。
めりはりは文字サイズ、フォント、文字色などでつける事が出来ます。

掲載場所や内容によっては、文字や色のトーンが統一されたものなども使用されています。
そういったバナーは訴求力が重視されているのではなく、「雰囲気にあった」バナーである事が多いかと思われます。
広告などで使われるバナーは目を引く事が大事になってくるので、人の目に触れてほしい部分がどこかを考えて、強調する部分と控えめでいい部分、差をつけて作っていきましょう。

2.不自然な”余白”は埋める

このバナー…どうにも真ん中の文言と写真の間の余白が気になりませんか??文字や写真/絵を調整すれば埋められそう?…そんな時はどうにかして埋めてしまいましょう。

という事で文字の組み換え、写真のサイズ調整などをしてみた所、見事に埋まりました。
変な余白があるとなんだかそこに目が行きがちですし、画面も寂しくなります。文字を大きくする、組み方を変えてみる、文字間や行間の調整、画像があればその位置を調整してみる、図形や線を足してみる…など余白の埋め方は色々あります。
もちろん余白を活かしたデザインというのもありますので、埋めるのは”不自然な”余白です。

3.要素を散らばせない

人の目線は左上から始まり右下で終わる、Z型の流れのレイアウトが見やすいというのはどんな媒体にも言える事ですね。
もちろんバナーも、そういった流れを意識して自然と読みやすいように制作しています。

例えばこのバナー、要素が四方に散っているし、図形は多いし、どこが大事でどこから読めばいいのか…読めない事はないけど散らばっていてなんだか気持ち悪い…。
なので流れを意識して作ってみます。

これなら、上の情報と下の情報、混乱せずにスッと読む事が出来ると思います。要素を分散させずに、図形や線を使う時もバランスには注意しましょう。

4.困ったら位置変え・傾ける

基本の法則は守っているけれど遊び心がない。つまらない。そんな時は思い切って文字の位置を変えたり、傾けてみたりしましょう。

ちなみに傾ける時は左下から右上に向かって↗この角度で傾けた方が文章が読みやすいです!

5.表示されるサイズを考えて作る

私は普段1020×360のサイズのバナーを作る事が多いです。そのサイズを開いていると、普通にPhotoshopの画面いっぱいくらいに大きく表示されていますよね。
ここで陥りがちなのが、「スマートフォンの画面サイズで見た時に、文字がちゃんと読めるか?」という問題です。

このバナー、PCの画面では大きく見えていても、実際にサイトに掲載されたら…(スマートフォンでこのブログを読まれている方には既に見えづらいかもしれません)

こんな風に小さくなりますよね。こうなった時、このバナーの上の部分の白文字、読めますか?正直読みにく~~いですよね。
こうならないためにも、ある程度サイズが小さくなった時の事も考えて制作しましょう。
今回はこのように調整してみました。

白文字の部分に太字の効果をかけ、背景に濃い色を引いてみました。先ほどのよりは少しは見やすくなったかと思われます。

このように情報量が多いバナーだと限界もありますが、出来るだけ配慮して制作しましょう。

6.文字間・行間の設定はしっかり

文字が主役なバナーにとって、これは本当にとっても大事な事です。

文言・配置は同じでも、上のバナーよりも下のバナーの方が、読みやすいと思いませんか?文字間を調整する事で「55%OFF」の部分は更に大きく強調されていますし、緑枠の中の説明文も間を開ける事で読みやすく、無駄な余白もなくなりました。少し調整するだけで、こんなにも変わります。
文字は手動で調整してバランスを美しく整えましょう!


以上が、私がおさえておくべきだと思うポイント6つになります。

とは言え私もまだまだ勉強中で完璧ではありません。上記の内容も最初からわかっていたものではなく、色んなバナーを見て学んだり、たくさん指導して頂いて覚えたものです。
バナー作りにこれから携わる方は、色んなバナーを見て、学んで、たくさん作ってみてください!

それでは、また。
ありがとうございました。

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です