ホームページ

バナーデザインはこうやってできる!

どーも!学長です。

今日はバナーデザインについて説明します!

私が新米デザイナーの時、たくさんのバナーを作りました。

バナーは「限られた空間の中でわかりやすく、かつキレイに」作らなくていけません。

すなわちバナー制作は、デザインの基本ですね。

最初は物凄く時間がかかりましたが、何個のバナーを制作し、

効率的に作る方法を自分なりに見つけました!

今回の授業はバナーデザインの制作について解説していきます。

それでは授業を始めます。

バナーを制作してみよう!

ここからは、順を追ってバナーデザインをしていきます。

わからない場合は、もう一度戻って何度も繰り返して読みましょう。

app_13

バナーの役割を考える

バナーはサイトに訪れたユーザーが、

クリックすることによって価値が出ます。

いくら綺麗に作っても、バナーはクリックされないとただの飾りになってしまいます。

「何を言いたいのか」「誰に訴求したいのか」わからないバナーは意味がありません。

この辺を最初に頭の中でまとめ、制作していきましょう!

ただ文字を打つべし!

最初から細かい部分からデザインをしてしまうと、

完成に近づいた段階で「あの要素忘れた!」みたいな事が出てきてしまいます。

とりあえず何も考えずに文字を打っていきましょう!

mihon

第一段階はこんな感じでオッケーです!

優先順位を決めよう!

文字を流し込んだら、自分なりのストーリーを作ります。

ちなみにこのバナーは転売の事業をしているクライアント様から依頼されました。

そう考える今回のターゲットは「転売に興味がある、もしくは転売事業は始めているが、

まだ実績が出ていない人で、人数限定企画という言葉に弱い人」

仮に自分がそれに当てはまる場合は、

「自分だったらどんなきっかけでこのバナーをクリックするか?」 

とストーリーを考えながら、優先順位を決めていきます。

ユーザー目線に立ちます。

今回の場合であれば

1.  年末勝戦アルティメットの企画

2. 1日1回●●●の情報を見て行動するだけで、

     アナタの収入が+10万円以上増える!?

3.  人数限定企画

4.  詳細はコチラ!

とこのような順番になります。

sikou

ストーリーを考えることで、文字の優先度は自然に決定されます。

もしターゲットになりそうな人が周りにいたら、

ヒアリングしてみるのも良いかもしれませんね!

メインのビジュアルを決めよう!

クライアントから素材を渡されたらそれを使うようにしますが、

もし、もらった写真がパッとしない場合は、GIMPなどで加工して使いましょう。

クライアントからの指示が何もない場合は、素材を探します。

インターネットで探すと、無料で提供しているサイトがたくさんあります。

「素材 無料」などで検索してみるといいですよ。

レイアウトを決めよう!

レイアウトのパターンを説明します。

パターンはたくさんありますが、ここでは代表的なものを紹介します。

分割レイアウト

bunkatsu文字と画像をハッキリ分けることで、すっきりとした印象になります。

また、写真の幅が無い時にもオススメです。

<サンプルバナー>

lawson-flesh_300x250_7

全面にイメージレイアウト

名称未設定-1

写真をバナー全体に配置するので、キレイな写真を活かしたいときなどオススメです。

食品系を扱うときに多く見られるレイアウトデザインですね。

<サンプルバナー>

miysukoshi-osechi2014

並べるレイアウト

名称未設定-1

写真が多く、素材が扱いづらいときに使われるレイアウトです。

画像がバランス良く配置できれば、リズム感がバナーに出てきます。

楽しいレイアウトになりますね。

<サンプルバナー>

kitte-natsufes

余白を使うレイアウト

余白レイアウト

余白を空けることによって、対称を引き立てるレイアウトです。

清潔感や、インパクトを出すときに効果的です。

<サンプル>

20140804-150013

ラフ案を出そう!

stockvault-pencils123918

初心者がいきなり画面でレイアウトを組むと、

結局パソコンとにらめっこ状態になってしまいます。

なぜなってしまうか?それは頭の中でどんなデザインにするか、整理されていないからです。

とりあえず手書きでラフを描いてみましょう。

もちろんガッツリ描かなくても良いです。整理できる程度で。

組み込んでみよう!

実際ラフで描いた案を画面にはめ込んでみます。

今回は12月1日からの企画ですので、クリスマスをイメージしてみました。

年末商戦バナー前

うまくレイアウトができたと感じたら、

もう少し遊び心を持ってみましょう。 

「人数限定企画」と「年末勝戦アルティメット」を装飾してみました。

年末商戦バナー

装飾が出来たら、最後に字間などを微調整しましょう。

そして、最後に文字のチェックをして完成です。

まとめ

今回の授業、長々となってしまいましたがとても重要なことですので、

わからなくなったら何度も読み返してください。

バナーデザインは、

数をこなしていけば短い時間でクオリティの高い作品が仕上がります。

まずは良いバナーを見つけたら、完コピでもいいと思います。

そのあと、自分なりにアレンジを加えましょう!

アレンジがなかったらタダのパクリになってしまいます(笑)

さて今日の授業はここまでです。

不明な点は学長まで連絡ください。

ABOUT ME
若旅 宏和
1979年生まれ群馬県在住のグラフィックデザイナー兼ウェブデザイナー。 2014年からデザイン情報発信サイト『デザガク』を開設。 主にクチコミとウェブからの集客で受注し、一切営業しないスタイルを貫いている。 制作実績では3,000万円以上稼ぐアフィリエイターのLP、数千万の売り上げを達成した教材LP、さらに、メジャー格闘技団体「RIZIN」のスポンサーポスターや、ブランディングデザインにおいても好評を得ている。 公益社団法人日本グラフィックデザイナー協会(JAGDA)正会員。