どーも！学長です。
今日はバナーデザインについて説明します！
私が新米デザイナーの時、たくさんのバナーを作りました。
バナーは「限られた空間の中でわかりやすく、かつキレイに」作らなくていけません。
すなわちバナー制作は、デザインの基本ですね。
最初は物凄く時間がかかりましたが、何個のバナーを制作し、
効率的に作る方法を自分なりに見つけました！
今回の授業はバナーデザインの制作について解説していきます。
それでは授業を始めます。
バナーを制作してみよう！
ここからは、順を追ってバナーデザインをしていきます。
わからない場合は、もう一度戻って何度も繰り返して読みましょう。
バナーの役割を考える
バナーはサイトに訪れたユーザーが、
クリックすることによって価値が出ます。
いくら綺麗に作っても、バナーはクリックされないとただの飾りになってしまいます。
「何を言いたいのか」「誰に訴求したいのか」わからないバナーは意味がありません。
この辺を最初に頭の中でまとめ、制作していきましょう！
ただ文字を打つべし！
最初から細かい部分からデザインをしてしまうと、
完成に近づいた段階で「あの要素忘れた！」みたいな事が出てきてしまいます。
とりあえず何も考えずに文字を打っていきましょう！
第一段階はこんな感じでオッケーです！
優先順位を決めよう！
文字を流し込んだら、自分なりのストーリーを作ります。
ちなみにこのバナーは転売の事業をしているクライアント様から依頼されました。
そう考える今回のターゲットは「転売に興味がある、もしくは転売事業は始めているが、
まだ実績が出ていない人で、人数限定企画という言葉に弱い人」
仮に自分がそれに当てはまる場合は、
「自分だったらどんなきっかけでこのバナーをクリックするか？」
とストーリーを考えながら、優先順位を決めていきます。
ユーザー目線に立ちます。
今回の場合であれば
1. 年末勝戦アルティメットの企画
2. １日１回●●●の情報を見て行動するだけで、
アナタの収入が＋10万円以上増える！？
3. 人数限定企画
4. 詳細はコチラ！
とこのような順番になります。
ストーリーを考えることで、文字の優先度は自然に決定されます。
もしターゲットになりそうな人が周りにいたら、
ヒアリングしてみるのも良いかもしれませんね！
メインのビジュアルを決めよう！
クライアントから素材を渡されたらそれを使うようにしますが、
もし、もらった写真がパッとしない場合は、GIMPなどで加工して使いましょう。
クライアントからの指示が何もない場合は、素材を探します。
インターネットで探すと、無料で提供しているサイトがたくさんあります。
「素材 無料」などで検索してみるといいですよ。
レイアウトを決めよう！
レイアウトのパターンを説明します。
パターンはたくさんありますが、ここでは代表的なものを紹介します。
分割レイアウト
文字と画像をハッキリ分けることで、すっきりとした印象になります。
また、写真の幅が無い時にもオススメです。
＜サンプルバナー＞
全面にイメージレイアウト
写真をバナー全体に配置するので、キレイな写真を活かしたいときなどオススメです。
食品系を扱うときに多く見られるレイアウトデザインですね。
＜サンプルバナー＞
並べるレイアウト
写真が多く、素材が扱いづらいときに使われるレイアウトです。
画像がバランス良く配置できれば、リズム感がバナーに出てきます。
楽しいレイアウトになりますね。
＜サンプルバナー＞
余白を使うレイアウト
余白を空けることによって、対称を引き立てるレイアウトです。
清潔感や、インパクトを出すときに効果的です。
＜サンプル＞
ラフ案を出そう！
初心者がいきなり画面でレイアウトを組むと、
結局パソコンとにらめっこ状態になってしまいます。
なぜなってしまうか？それは頭の中でどんなデザインにするか、整理されていないからです。
とりあえず手書きでラフを描いてみましょう。
もちろんガッツリ描かなくても良いです。整理できる程度で。
組み込んでみよう！
実際ラフで描いた案を画面にはめ込んでみます。
今回は12月1日からの企画ですので、クリスマスをイメージしてみました。
うまくレイアウトができたと感じたら、
もう少し遊び心を持ってみましょう。
「人数限定企画」と「年末勝戦アルティメット」を装飾してみました。
装飾が出来たら、最後に字間などを微調整しましょう。
そして、最後に文字のチェックをして完成です。
まとめ
今回の授業、長々となってしまいましたがとても重要なことですので、
わからなくなったら何度も読み返してください。
バナーデザインは、
数をこなしていけば短い時間でクオリティの高い作品が仕上がります。
まずは良いバナーを見つけたら、完コピでもいいと思います。
そのあと、自分なりにアレンジを加えましょう！
アレンジがなかったらタダのパクリになってしまいます（笑）
さて今日の授業はここまでです。
不明な点は学長まで連絡ください。
