WEB

新米デザイナー必見!バナーデザインを効率的に美しくする10のステップ

新米デザイナー必見!バナーデザインを効率的に美しくする10のステップ

はじめまして。最近デザイナーとしてLIGに仲間入りしたのっちと申します。
ニット帽と牛乳がものすごーく好きです。
牛乳については会社のウォーターサーバーから水を飲むたびに「中身、牛乳に変えてくんないかな」と半ば本気で思っています。

さて、そんな牛乳一筋25年目の牛乳エキスパートな私ですが、デザイナー歴はまだまだひよっこです。

好きな業務の1つはバナー制作なのですが、最初の頃は「決められた空間に文字と画像を詰めて、さらには綺麗に見せて…」と、まるでジグソーパズルのようなあの作業にもの、すごーーく時間がかかっていました。

これは新米デザイナーなら、誰でも一度は通る道だと思います。

そこで今回は、新米デザイナーが知っておきたい“美しい”バナーを“効率的”に制作するためのフローについてまとめます。

▼目次
1. 制作フローに入る前に

2. バナーを作ってみる

3. おまけ

1. 制作フローに入る前に

バナーの役割について今一度考えてみる

バナーの持つ本来の役割は、当然ながらユーザにクリックされることにあります。クリックされなければただの飾りです。

どんなに綺麗に作り込んだバナーでも、何を一番に言いたいのかよくわからなかったり、誰に訴求したいのかなどが分からないバナーでは意味がありません。

この辺りをきちんと考慮しつつ、以下制作フローを追っていきたいと思います!

2. バナーを作ってみる

STEP1. とりあえず何も考えずに要素を全部並べる

細かい部分からデザインをはじめてしまうと、ほぼ完成した段階で「あの要素忘れた!」みたいなことがあるので大変です。
決まっている文言や要素は、ひとまず流し込んでみるのがいいかと思います。

img_1

まずはこんな感じでおっけーです!

STEP2. 優先順位を決める

要素を流し込んだら、画像をいじりだす前に自分なりのストーリーを決めます。

テキストを見るかぎり、今回のターゲットはふんわりと「“期間限定”や“今だけ!”などの言葉に弱い、甘いものが好きな女性かな」と想像できます。

自分がそれにあてはまる場合は「自分だったらどんなページを見ているときに、どんなきっかけでこのバナー押すかなー」と、ストーリーを考えながら優先順位を決めます。今回であれば

  1. 抽選で50名様にプレゼント
  2. 秋のとろ~りとろけるかぼちゃタルト
  3. 期間限定・11/30まで

という順番になるんじゃないでしょうか。

img2

ストーリーを考えることで、文字の優先度は自然に決定されます。ターゲットになりそうな人が近くいる場合は、ヒアリングしてみるといいかもしれません。

また、ディレクターさんがいる場合は相談をしてみたり、どんなページにバナーが置かれるのかなどのリサーチもしておきましょう。

 
※11月5日11時30分追記 誤植があったため文章を修正しました。

STEP3. メインビジュアルを決める

もらった素材があれば、その中から一番バランスがよさそうだったり文字が乗りやすそうな素材を選びます。
いまいちな写真しかない場合は、面倒くさがらずにきちんと加工しましょう。

加工ってあんまり得意じゃないんだよねー、という方には過去の記事「ゼロから始めるPhotoshopのトーンカーブの使い方と基本手順」がオススメです。

ビジュアル探しにはこちらの記事「これが全部無料なの?フリー写真素材サイトまとめ14選」も便利です!

STEP4. 適切なレイアウトを選ぶ

それでは何通りかレイアウトをちゃっちゃと組んでみましょう。よく使う基本形を紹介していきます。

分割してレイアウトする

bunkatsu

文字と写真をはっきりと分けることで、すっきりした印象を与えることができます。写真の幅が足りないときにもおすすめです。
▼サンプルバナー
11100_1

 

イメージを全面に使う

zenmen

ビジュアルを全面に押せるので、綺麗な写真を活かしたいときなどにおすすめです。今回のような食品系を扱う場合も、これで組むと綺麗に見えることが多いと思います。
▼サンプルバナー
20140618-140013

 

並べる

naraberu

写真の種類が多く、素材が扱いづらいときによく使うレイアウトです。
バナー自体にリズムが生まれるので、見ていて楽しい気持ちにさせたいときなどにも効果的です。
▼サンプルバナー
felissimo1

 

余白を使う

yohaku

ぽっかりと余白をとることで、お互いの要素を引き立てるレイアウトです。清潔感やインパクトを出しやすくなります。
▼サンプルバナー
trippin

STEP5. 手書きでラフを描いてみる

いきなり画面でレイアウトを組んでしまってもいいのですが、頭の中でジャグリングするよりも、ちゃんと絵に描いてみたほうがすっきりすると思います。

手書きの時点ではそんなに作り込まなくてもいいと思うので、ちゃかちゃんっと仕上げて大丈夫です。

今回はこんな感じで描きました。(性格が周りの枠のふにゃふにゃ具合にもろ出ています。)

tegaki

STEP6. モノクロで組んでみる

手書きのラフができたら、モノクロ画像で組んでみます。
いきなり色付きで組み始めると、色にひっぱられてデザインを決める→でもやっぱり色変更、というのを繰り返し時間がかかってしまうので(よくやります)、まずはすっきりとモノクロで組んでみましょう。

banner_2

STEP7. フォントの可読性を高める

モノクロで組み終わったら、フォントを決めつつコントラストをつけていきます。
コントラストのつけ方はいろいろありますが、ここでは「抽選で50名様にプレゼント」を例にしてみます。

  • 文字の大きさを変える

font1

  • ウェイトを変える

font2

  • 組み方を変える

font4

  • アクセントをつける

font3

フォントの選び方は人それぞれですが、キーワードからイメージを広げ、フォントを選ぶといいかと思います。

こちらのブログ記事が参考になります。

  • フォント選びは印象から – Webデザイン講座おしゃれチップス

STEP8. カラーにする

あまりに色を入れると全体的に印象がぼやっとしがちになってしまうので、迷ったときは写真などに使われている色をピックアップするとまとまりやすいです。
季節柄、秋っぽく仕上げていきたいと思います。

こんな感じになりました。

img8

STEP9. 遊び心を足す

個人的には、ここがバナーを作る際のハイライト! “お楽しみ”ポイントです!

まずはフォントの中で遊べそうな文字を探しましょう。「ふわふわ」とか「ぷるん」とかの擬音は遊びポイントです。
遊んであげるとバナー全体に動きが出るため、ちょこっと可愛くしたいときにオススメです。

今回は「とろ~り」の部分が遊びやすそうですね。とろ〜りな雰囲気を出していきたいと思います。

img7

こんな感じになりました。
“とろ〜り”は、下へしたたり落ちるようなイメージで。

STEP10. 全体を整える

最後にフォントのカーニングや画像の配置を微調整します。
文字数が少ないときは、真ん中にぎゅっと寄せてあげるとスカスカに見えません。

おまけ

美しいバナーの参考サイト

美しいバナーを意識する際、私が参考にしているサイトを3つ紹介させていただきます。いやー美しい。かわいい。好みです。

  • マイフェイバリット関西
  • felissimo
  • SEILIN ONLINE SHOP

Pinterest活用のススメ

バナーのまとめサイトや自分のお気に入りサイトを参考にするのももちろんおすすめですが、私はバナートレースなど、デザイン練習をする際にはPinterestを活用することが多いです。

実際デザイナーさんがアウトプットの場所として使っていることもあるので、ピンされるデザインもクオリティの高いものが集まりやすい場所だと思います。まだ活用したことがないという方は、ぜひぜひこの機会に。

  • Pinterest

まとめ

いかがでしたでしょうか。

バナーデザインは、やればやるほど短い時間でクオリティが上がっていくと思います。
良いバナーを見つけては、いろんなテイストをストック→トレースを繰り返していくのがオススメです!

その他「もっとここはこうしたらいいのに!」とか「このサイトもむっちゃオススメだよ!」などなど、あればぜひ教えていただけたら嬉しいです。

以上、最後までお付き合いいただきありがとうございました!それでは、また。

078_01

この記事を書いた人

のっち
のっち ライター 2014年入社
長野チームでライターしてます。自撮りと牛乳が大好き♩ フリー素材PAKUTASOさんにて牛をかぶったりしています。

こちらもおすすめ

現場のプロが教える WEBデザイン 新・スタンダードテクニック37

現場のプロが教える WEBデザイン 新・スタンダードテクニック37

  • 著者秋元 英輔,安藤 真衣子,五十嵐 亮太,稲葉 聡,大串 肇,小見 祐介,日下部 忠之,倉持 友喜,小杉 厚太,後藤 寛一,シオミ ユタカ,菅原 のびすけ,清野 奨,高遠 和也,高橋 としゆき,中村 大騎,羽野 めぐみ,肥田 真紀子,松本 奈央,miccweb,宮崎 優太郎,森崎 嘉友
  • 価格¥ 3,024(2015/11/16 17:52時点)
  • 出版日2015/08/18
  • 商品ランキング72,892位
  • 単行本256ページ
  • ISBN-104844365185
  • ISBN-139784844365181
  • 出版社エムディエヌコーポレーション