
【マンションバナー研究会】は、マンションバナーの作り方や新しい技法を常日頃研究し、がんばるマーキュリーで研究結果を報告するシリーズ連載です。マンションバナー制作に役立つ内容を書いていきます。
みなさん。こんにちわ。ガッキーです。
今年もよろしくお願いします。
これまで”がんばるマーキュリー”では、バナーを作ったことのない方に向けて、「配色の基本」や「GIFアニメーションバナーの作成方法」、「HTML5でつくるアニメーションバナー」や「誰でも簡単に作れちゃう!マンション広告バナーの作り方」など、マンションのバナーに関する記事をいくつか書いていきました。
マンションのバナーを制作するのに必要なレイアウトの方法や、バナーの制作方法はなんとなく分かったけど、さらに制作時間を短縮したいと思いませんか?
作り慣れている方なら、素材さえ揃っていれば数十分で出来ちゃうマンションのバナーでも、作り慣れていない方だとなかなか思うようにバナーを制作するのって難しいですし、頻繁に行われるキャンペーン用バナー制作に悩む担当者の方も多いのではないでしょうか。
そこで今回は、私がよく目にするマンションのバナーレイアウトのテンプレートを作ってみました!
このテンプレートを使えば、レイアウトにかかる時間が少なくなり、あとは配色を考えるだけでOK!!
しかも、配色の基本はコンバージョンにつながる配色の基本を参考にしていただければきっと、今よりも格段に作業時間が短縮されると思うんです。
バナーのテンプレートは各サイズごとにillustratorで作成しているのでダウンロードして使ってみてください!!
バナーテンプレの使い方
まずは、テンプレートをダウンロードしてみてください!
⇒ダウンロードはこちら
ダウンロードしたZIPフォルダを解凍すると中には4つのファイルがあります。
今回は、300×250、728×90、320×50の3種類のバナーサイズを用意してみました。

300×250 バナーテンプレート

728×90 バナーテンプレート

320×50 バナーテンプレート
AIファイルを開いてみてください。
1サイズに6パターンのバナーが作成できるようになっています。
ここから実際にバナーを作成しながら進めていきましょう。
まずは、バナーを作るのに必要な画像を用意します。

今回は、このフリー素材を使ってバナーを作ってみます。
使いたい画像が決まったら、画像のファイル名を「image.jpg」に変更してください。
変更したら、ダウンロードした際に元々あった画像「image.jpg」と置き換えます!
画像を置き換えると「リンクファイルを更新しますか?」というメッセージが出てきます。
「はい」を選択してください。
一瞬にしてアートボード上に並んでいる6つのバナーすべての写真が新しい写真に変えることができます。
つづいて、写真に合いそうな形のバナーを選び、訴求したいポイントを書き換え、マンションのチラシやWEBサイトで使われている色を参考にして配色していきます。
また、パーツごとにグループ化しているのでドラッグするだけで、簡単にパーツをそれぞれのバナーと入れ替えることができます!
後は、バランスを見てフォントサイズや字間を調整するだけで完成です。

完成見本
いかがでしたか?
今回は、マンションバナーでよく見かける6つのレイアウトを作ってみましたが、バナーのテンプレートは簡単に作ることができるので、自分が作るバナーのレイアウトをテンプレート化すると、今よりももっとバナー制作が楽になると思います。
ぜひ、今後のバナー制作にお役立てください!