2020.09.24
259
はじめまして。最近デザイナーとしてLIGに仲間入りしたのっちと申します。
ニット帽と牛乳がものすごーく好きです。
牛乳については会社のウォーターサーバーから水を飲むたびに「中身、牛乳に変えてくんないかな」と半ば本気で思っています。
さて、そんな牛乳一筋25年目の牛乳エキスパートな私ですが、デザイナー歴はまだまだひよっこです。
好きな業務の1つはバナー制作なのですが、最初の頃は「決められた空間に文字と画像を詰めて、さらには綺麗に見せて…」と、まるでジグソーパズルのようなあの作業にもの、すごーーく時間がかかっていました。
これは新米デザイナーなら、誰でも一度は通る道だと思います。
そこで今回は、新米デザイナーが知っておきたい“美しい”バナーを“効率的”に制作するためのフローについてまとめます。
▼目次
1. 制作フローに入る前に
2. バナーを作ってみる
- とりあえず何も考えずに要素を全部並べる
- 優先順位を決める
- メインビジュアルを決める
- 適切なレイアウトを選ぶ
- 手書きでラフを描いてみる
- モノクロで組む
- フォントの可読性を高める
- カラーにする
- 遊び心を足す
- 全体を整える
3. おまけ
1. 制作フローに入る前に
バナーの役割について今一度考えてみる
バナーの持つ本来の役割は、当然ながらユーザにクリックされることにあります。クリックされなければただの飾りです。
どんなに綺麗に作り込んだバナーでも、何を一番に言いたいのかよくわからなかったり、誰に訴求したいのかなどが分からないバナーでは意味がありません。
この辺りをきちんと考慮しつつ、以下制作フローを追っていきたいと思います！
2. バナーを作ってみる
STEP1. とりあえず何も考えずに要素を全部並べる
細かい部分からデザインをはじめてしまうと、ほぼ完成した段階で「あの要素忘れた！」みたいなことがあるので大変です。
決まっている文言や要素は、ひとまず流し込んでみるのがいいかと思います。
まずはこんな感じでおっけーです！
STEP2. 優先順位を決める
要素を流し込んだら、画像をいじりだす前に自分なりのストーリーを決めます。
テキストを見るかぎり、今回のターゲットはふんわりと「“期間限定”や“今だけ！”などの言葉に弱い、甘いものが好きな女性かな」と想像できます。
自分がそれにあてはまる場合は「自分だったらどんなページを見ているときに、どんなきっかけでこのバナー押すかなー」と、ストーリーを考えながら優先順位を決めます。今回であれば
- 抽選で50名様にプレゼント
- 秋のとろ～りとろけるかぼちゃタルト
- 期間限定・11/30まで
という順番になるんじゃないでしょうか。
ストーリーを考えることで、文字の優先度は自然に決定されます。ターゲットになりそうな人が近くいる場合は、ヒアリングしてみるといいかもしれません。
また、ディレクターさんがいる場合は相談をしてみたり、どんなページにバナーが置かれるのかなどのリサーチもしておきましょう。
※11月5日11時30分追記 誤植があったため文章を修正しました。
STEP3. メインビジュアルを決める
もらった素材があれば、その中から一番バランスがよさそうだったり文字が乗りやすそうな素材を選びます。
いまいちな写真しかない場合は、面倒くさがらずにきちんと加工しましょう。
加工ってあんまり得意じゃないんだよねー、という方には過去の記事「ゼロから始めるPhotoshopのトーンカーブの使い方と基本手順」がオススメです。
ビジュアル探しにはこちらの記事「これが全部無料なの？フリー写真素材サイトまとめ14選」も便利です！
STEP4. 適切なレイアウトを選ぶ
それでは何通りかレイアウトをちゃっちゃと組んでみましょう。よく使う基本形を紹介していきます。
分割してレイアウトする
文字と写真をはっきりと分けることで、すっきりした印象を与えることができます。写真の幅が足りないときにもおすすめです。
▼サンプルバナー
イメージを全面に使う
ビジュアルを全面に押せるので、綺麗な写真を活かしたいときなどにおすすめです。今回のような食品系を扱う場合も、これで組むと綺麗に見えることが多いと思います。
▼サンプルバナー
並べる
写真の種類が多く、素材が扱いづらいときによく使うレイアウトです。
バナー自体にリズムが生まれるので、見ていて楽しい気持ちにさせたいときなどにも効果的です。
▼サンプルバナー
余白を使う
ぽっかりと余白をとることで、お互いの要素を引き立てるレイアウトです。清潔感やインパクトを出しやすくなります。
▼サンプルバナー
STEP5. 手書きでラフを描いてみる
いきなり画面でレイアウトを組んでしまってもいいのですが、頭の中でジャグリングするよりも、ちゃんと絵に描いてみたほうがすっきりすると思います。
手書きの時点ではそんなに作り込まなくてもいいと思うので、ちゃかちゃんっと仕上げて大丈夫です。
今回はこんな感じで描きました。（性格が周りの枠のふにゃふにゃ具合にもろ出ています。）
次のページ