セブではたらく(インターン)
セブではたらく(インターン)
2014.10.31

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

のっち

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

  • 1
  • 2