新米デザイナーが作る!バナーの作り方

Pocket

こんにちは!あけましておめでとうございます。ユイPです。
今年もよろしくお願い致します。
私は学生の頃、年末年始は巫女さんのバイトをしていたので今年は久しぶりにゆっくりしたお正月を過ごす事が出来ました。
お正月が終わったら次のイベントはバレンタインですね!


さて、今回のテーマはズバリ!「バナー制作」です。

私がデザインチームに配属になって半年が経ちますが、この半年間での私の主な業務はバナー制作でした。これまで制作したバナーの数は約300個弱です。
そんな私がこの半年間でバナーについて学んだことを踏まえて、制作過程を解説していきたいと思います!

バナーとは、広告や宣伝のために使われる下のような画像の事です。

バナーをクリックする事で見せたいページに飛ぶ事が出来るので、主に「クリックしてもらう」事が役割となります。
表示される場所は自社サービス、もしくは他社のサービス上です。
文字のみのバナー、画像と文字を組み合わせたバナー、縦型や横型と種類やサイズも色々とあります。

掲載場所やターゲットによってバナーのデザインや訴求ポイントは大きく変わります。
種類は多々あれど、「このバナーで誰に何を伝えたいのか」まずはそこをしっかりと踏まえて制作する事が大事です。

ちなみに私がバナーを作り始めた初期のバナーは大体こんな感じでした。

作り始め感満載ですね…。

今回はこのような依頼が来たという設定で制作していきます。
————————————————————————————————
▽サイズ 1080×360
▽掲載場所:自社サイト内
▽少女漫画の特集のバナー(無料試し読みあり)
▽ターゲット:女性
▽掲載文言
【もうすぐバレンタイン!青春する準備はいい?甘い恋物語10冊無料♡】
▽イラスト素材2点(どちらを使っても両方使ってもよい)

————————————————————————————————

早速作っていきますが、まずは深く考えずにキャンバスを作成してイラストや文言を何も加工せずに配置します。

とりあえず女の子のイラストのみを使用することにして、イラストは右、文言は左側かなとざっくり配置しました。フォントも普通のゴシック体のままです。
後から加工しやすいように文言はここであらかじめ分解しておきます。
色やサイズを変えそうだな…という場所は特に細かく分解します。ちょっとめんどくさい作業ですがのちのち作りやすくなりますよ。(もうすぐ/バレンタイン!/青春/する準備はいい?/甘い/恋/物/語/が/10冊/無料/♡)
素材の画像の編集(透過作業など)があればここで行っておきます。今回使用しているイラストは自前です!

また私は実際に作品を扱うバナーの際、作り始める前に公式サイトを検索してみたりどんな内容のお話なのか軽く試し読みしてみたりしています。
作品に100%合わせる必要はないですが、どんな作品か知っておくと純粋に作りやすいです。

バナーの目的はただ見てもらう事ではありません。クリックしてもらう事です。そのためには、どこに目をつけてもらうか考えて制作していかなければなりません。まだほぼ加工してないこの状態で、文言の強調したい部分を決めていきます。

見やすく、遊び心も加えながら大体こんな感じかなと文字を置いてみました。
今回まず一番強調するべき点は「無料」だと考え、無料の文字を一番サイズを大きく目立つ位置に配置しました。
あとは何が無料なのかも伝わらなければ意味がないので無料の次に「恋物語」も強調していきたいですね。恋物語と書いてラブストーリーです。

ピンクで囲ってある部分①がメインとなる目立たせたい文言、青で囲ってある部分②がそれを修飾するサブとなる文言です。
強調したい部分が決まったらフォントや背景も決めていきます。

文言のテーマ的に背景はやっぱりピンクかな~フォントは可愛らしく落ち着いたやつがいいかな~というイメージでこのようにしてみました。
あとはやはり「恋物語」の特集だし女性がターゲットならば男の子も欲しいな?いうことでイラストの配置も少し変えてみました。

強調したい部分や大体のレイアウトも決まった所でさあ色をつけていくぞ!

…といいたい所ですがその前にまずとても大事な作業があります。
「字間の調整」という作業です。

現時点でのバナーをよく見てみると…

このピンクで○した部分や線の部分、文字が詰まりすぎていたり、広がりすぎていたり…なんとなくまとまっていないと思いませんか?
見やすいバナーにするために、ここを調整していきます。調整は使うフォントを決めてからやりましょう。
(Photoshopでの細かい調整のやり方やそもそも字間って何?という方はこちらの記事をご覧ください。→たのしい文字組み 字間を調整してみよう)

調整したものがこちらになります。
細かいですが、文字のバランスが良くなって見やすくなったと思いませんか?
同時に「青春する準備はいい?」という文言の「する」や「は」や、「恋物語が」の「が」といった接続詞のひらがなを少し小さくした事で文章にメリハリがつきました。

また文字の位置の揃えも調整しました。
文章の端っこと端っこのラインをあわせてあげるとバランスよく整います。
変則的な組み方をする場合でなければ、端っこは出来るだけ揃えておく事が大事です。

文字の調整も終わった所で、次に背景を装飾していきます。
え?文字の装飾じゃなくて背景からやるの?と思うかもしれませんが、私の場合は背景の装飾を決めてからその背景の上でも見やすい文字の装飾を行っていきます。

ピンクの色合いを少し変え、キラキラしたテクスチャを載せてみました。なぜこれにしたかというとチョコレートっぽさを感じたからです。

背景が決まったところで遂に念願の(?)文字に色をつけていきます。

まず強調したい部分から色を決めていきます。
ここが強調したい部分にはやはり濃いめの色、赤や青、オレンジ…背景が黒の時は白、など目立つ色を使っていきます。

まずこのように色を置いてみました。
このようなバナーの場合、色数は多くても3~4色程度に抑えて出来るだけごちゃつかないようにしたいです。
ただこれでは色合いも同系色でメリハリがなく、白文字も少し読みづらいですし何より面白みがないですね…。
なのでメリハリを意識しつつ、遊び心も感じられるように装飾していきます!

こんな感じになりました。
茶色の地を入れて文字を黄色にした事で目立たせたい文言が更に強調されましたし、画面に締まりが出たと思います。
何よりピンクと茶色の色合いがバレンタイン感をより強めてくれました!

ここまできたらあとはもう色味や文字、イラストの位置などレイアウトを再度確認して調整するのみです。
字が間違っていないか…文字間の調整の見落としがないか…などもここで確認してしまいましょう。

微調整が終わってしまえば晴れて…完成です!
「もうすぐバレンタイン!青春する準備はいい?甘い恋物語が10冊無料♡」バナーが完成しました。


いかがでしたでしょうか。

今回の記事ではイラストを使用し、「無料」という文言を強調させるようなバナーを制作しましたが、最初に書いた通りバナーにもたくさん種類があります。今回この記事で作成したバナーは、オシャレさというよりかは「見やすさ」や「訴求力」が重視されるバナーです。
普段私はそのようなバナーを作る事が多いのですが、最初の頃はやはりオシャレに作りたくて細めのフォントを使ったり色数を少なくしたりして作ってしまっていました…。それが悪いわけではありませんが、求められているものと遠いものを作ってしまうのはいい事ではありませんよね。

最初に書いた事の繰り返しとなってしまいますが、掲載場所やターゲットによってバナーのデザインや訴求する部分は大きく変わります。
「このバナーで誰に何を伝えたいのか」ターゲットを見据え、求められているものを作る。そこをしっかりと踏まえて作る事がバナー制作において大事な事だと思います。

私もまだまだ勉強中です。日々先輩方に助けて頂いています。
これからもたくさんバナーを作ってもっと成長していきます!

長くなってしまいましたが以上、ユイPがお送りいたしました。
皆さんもこの1か月、バレンタインに向けて美味しいチョコレートをたくさん食べてください♡

————————————————————————————————

デジマースブログ公式ツイッター・インスタグラムを開設いたしました。

★Twitter https://twitter.com/digi_design_
★Instagram https://www.instagram.com/digi_design_/

記事と合わせましてこちらもよろしくお願い致します。

Pocket