newcomer-web-designer-banner-tutorial

新米のwebデザイナーが作るバナー制作時のあれ、これ

  • このエントリーをはてなブックマークに追加

もうすぐ春ですね。Webデザイナーとして一番最初やる仕事でデザインしている!と思えるようなするものと言えば、きっとバナーではないかと!思います。 バナー1つ制作するのだけでも難しいですよね。限られたスペースに訴求したい内容ときちんと伝えれるようなバナーを作らなければなりません。そんなバナー制作時に覚えているときっと便利なことや制作するコツなど。


サイズ

バナーのサイズを決めます。バナー広告の場合、ある程度はサイズに規定があります。(AdWordsの場合のサイズはこちら

仕事だとクライアントの方からサイズ指定があると思います。1種類のバナーに対し様々なサイズを用意しなければならない場合があります。その場合、私は中間のサイズから作成し、リサイズしていくようにしています。

今回は横300x縦250のサイズで作っていきたいと思います!

テーマ・文言

今回のテーマはもうすぐ春ということで「春」にしたいと思います。

バナーに入れたい文言は『もうすぐ春!新生活応援セール!』『期間3/1〜3/29』『最大50%OFF』『ボタン(詳しくはこちら)』の文言でバナーを作成していきます。 もう少しで春ということで進学、入学、入社という方に向けた架空のセールのキャンペーンバナーを作ろうということです。今回は用意されている素材などはありません。

Step1、300×250を作る

300x250 001

まずは300×250の土台を作りました。 ここからポンポンと文言や背景や素材を入れていきます。

Step2、背景を考える

春と言ったら桜!桜といったらピンク!ということで今回は背景はピンク色にしてみました。

背景だけでそのバナーの印象が決まってきますよね!色々試してみてください。 左がピンクのベタ塗り、右がピンクのグラデーションにしてみました。ベタとグラデーションだけで結構変わってきますね!!全体的のデザインのテイストを合わすので背景は後々調節して行きましょう。

Step3、とりあえず文字を入れてみる

細かいところからデザインを始める前に、とりあえず決められて文字を入れてみましょう。現状では文字がガクガクでバラバラでゴチャゴチャです。と見せたいところがわかりずらい、バランスが悪いです。

ここから徐々に全体的に整えていきましょう。 しかし文字が入るとバナーっぽくなってきますね!

Step4,訴求したい内容に優先順位を決め、バランスを考えていく

今回のバナーの内容『もうすぐ春!新生活応援セール!』『期間3/1〜3/29』『最大50%OFF』『ボタン(詳しくはこちら)』から訴求したい内容の優先順位を決めます。自分で決めてしまう場合もあれば、ディレクターさんと相談しながら進めていく場合もあります。

1.最大50%OFF

2.もうすぐ春!新生活応援セール!

3.期間3/1〜3/29

4.ボタン

優先順位によって、文字サイズやジャンプ率などここの段階で決めたいですね。

徐々にバナーっぽくなってきましたね。しかしまだまだデザインがしっかりしていません。

もっと春らしくしていきたいですね。

Step5、デザインしていく、完成へ

アイディアに煮詰まってしまった場合の時など、手描きなどで紙などに一回ラフで書いてみてもいいかもしれませんね。

デザインを進めていきましょう。レイアウトやデザインなど困った場合は様々なデザインを見てみましょう。

バナーをデザインする際のヒントやアイディア

バナー制作時に困ったらいつもお世話になっている素材サイト

バナー制作時に参考になるバナーギャラリーのまとめ

 

step6、完成、最初と見比べる

Step3.でできたものと見比べてみましょう。桜の花びらなど入れて、春らしさをイメージしたり、白いフォントで爽やかな感じを出してみたり。

注意点とかポイントとか

スペースができてしまった場合

文字と文字の間にスペースができてしまい、なんかスカスカしているなーと感じたら、背景でカバーであるとスカスカ感がなくなるんじゃないかな!と思います。 例えば、左のバナーだとなんかなにもないスペースが気になるなーって気がしますが、右のバナーだとなにもないところには桜の花びらが舞っている感じを出し、気になるなスペースを埋めています。

バナーの周りに1pxの境界線を

バナーの周りに1pxの境界線を引いてあげましょう。境界線がないとバナーなのに他のコンテンツに馴染みすぎたりするので1pxの境界線など付けてましょう。

他にも

バナーの作り方は人それぞれあると思います!色々聞いてみたり、バナーを見てみたりするのも面白いですよね! 沢山見たり、聞いたり!作ったりしていきましょー!

バナーのデザインに困ったら参考になるサイト

バナーデザインアーカイブ バナーデザインギャラリー | Banner Design Gallery

バナーデザインデータベース

【国外】Web Banner Gallery

おすすめ記事

  1. 国内の大学のブログデザインがいろいろとかっこいい!
  2. 魅力的なパワーポイントを作る際に参考になるデザインのいろいろ
  3. 国内の素敵なwebデザイナーさんのポートフォリオのまとめ

関連記事

PAGE TOP