バナーのデザインで悩んだ時に参考にしたい5つのパターン

こんにちは!新卒デザイナーの浅本です。

バナーをデザインする際、小さいスペースに必要な要素を入れなければならないので、どう配置すれば良いのか悩んだことがある方も多いのではないでしょうか?

この記事では、バナーデザインを取り上げるだけではなく、どんなところが参考になるのかを合わせてご紹介します!

バナーのアイデアで煮詰まっているデザイナーさんや、デザインの勉強のためにバナーのコピーをしようと思っている学生さんは是非読んでみてください。

写真の上に文字をのせるデザイン

バナーは表現できる領域が限られているので、写真の上に文字を乗せるデザインにすることもあると思います。背景に写真を使ってもしっかりと文字が目に入ってくるように工夫したいですね!

白のグラデーションをかけて写真をフェードアウトさせて、黒い文字をのせる一般的な手法です。バランスの良い位置でフェードアウトさせているのもいいですね。

写真に黒色のフィルターをのせたような表現です。黒く塗りつぶしたレイヤーを20〜30%乗算でのせています。少し暗くしただけで、白い文字を引き立たせつつ、写真の雰囲気も活かせる手法ですね。

写真自体の色味を淡くすることで、黒色の文字がしっかり見えるようになっています。

アイコンを使ったデザイン

具体的な写真やイラストでは表現しにく事柄を訴求したい…でも文字だけではメリハリがないし、訴求力が弱い…。

そんなときはアイコンを上手く使うのも1つの手法です。デザイン的にもバランスが取りやすくなりますよ!

数字で根拠を示すデザイン 

数値というのはとても訴求力の高いものなので、大きく配置してあげることでその訴求力を活かすことが出来ます。数値自体がアイキャッチになっています。PRできる数値がある場合には有効なデザインです。

言葉を強調したいときのデザイン

文字に輪郭線をつけたり文字の背景に図形を配置したりすることで目立たせています。なにか物足りない感じた時に有効なデザインです。

一部の文字色や文字サイズを変えてメリハリをつける方法は、キャッチコピーが長いときなどに有効です。また、一部の文字を斜めに配置して変化をつけると、視線を掴みやすくなります。

ボタンをバナーの中に入れたデザイン

バナーの中にボタンのようなデザインを入れるとクリック率が高まる傾向にあります。しかし、狭いスペースに上手く配置するのは難しいですよね。2つの例で見てみましょう!

統一感のある配色にまとめながらも、文字を大きめにしてボタンが目立つようにしています。「こちらから」という文言や、「>」マークでクリックしたくなる工夫をしています。

こちらは補色を使ってボタン部分を目立たせているデザインです。スペースが小さくても補色を使うことでバランスよく目立たせることが出来ていますよね!

まとめ

いかがでしたか?

小さいスペースに必要な要素を入れなければならないバナーのデザインですが、その参考になるものはありましたか?少しでもバナーデザインの参考になれば幸いです。

以上、新卒デザイナーの浅本でした!

浅本 侑樹

浅本 侑樹

2012年より専門学校HAL大阪 Web開発学科でWebデザインやWebプログラミング、システム設計、ネットワーク構築などを広く学ぶ。 2016年4月に新卒でbasicに入社。デザイナーとして配属され、CIを始めとしたデザインを担当している。 趣味は写真撮影と料理。

Recommend Articles

1

【イベントレポート】UX、デザイン思考、サービスデザインのための「チームで使える共感ペルソナ™入門 」

サービスの設計をする際にペルソナを決めるのはもちろんですが、それをチームでうまく共有し活用するのは想像以上に難しいですよね。チーム内でうまく共有できず、いつの間にかペルソナが忘れられてしまっている…なんてことは少なくないのではないでしょうか。そうしたペルソナ作成の難しさを解決するヒントをさぐるため、先日、株式会社アイ・エム・ジェイ R&D室主催のイベント「UX、デザイン思考、サービスデザインのための『チームで使える共感ペルソナ™入門 』」に参加してきました!

2

別に最初から正社員じゃなくても良い〜未経験からWebデザイナーになるまで私が行ったこと〜

今年の7月からデザイナーとして働いているのですが、実は元からデザイナーだったのではなく、アルバイトとしてベーシックに入社したという経緯があります。なぜ正社員ではなく、アルバイトからスタートして、どのような経緯でデザイナーにコンバートしたのかをここにシェアして、今後未経験の業界に転職を考えている人、特にWebデザイナーへの転職を考えている人への参考になればと思います。

3

「実績や得たノウハウを発信するところまでがシゴトの報酬」 iOSエンジニア堤修一さんの仕事論に迫る| dotFes 2016 shibuya

2016年10月からサンフランシスコでFyusion社でiOSエンジニアとして活躍されている堤修一さん。今回はdotFes 2016で行われた「デザイン×ライフスタイル 制作者として海外で働くということ」というテーマのセッションで、海外で働くためのワークスタイルを語られました。

4

バナーのデザインで悩んだ時に参考にしたい5つのパターン

簡単なようで難しいバナーをデザインすることって難しいですよね。小さいスペースに必要な要素を入れなければならないので、悩んだことがある方も多いのではないでしょうか?この記事ではバナーデザインを取り上げるだけではなく、どんなところが参考になるのかを合わせてご紹介します!バナーのアイデアで煮詰まっているデザイナーさんや、デザインの勉強のためにバナーのコピーをしようと思っている学生さんは是非読んでみてください。

5

ネクストステージのデザインチームを作りたい

スキルフルな仲間を巻き込んで実行していく熱量をもったネクストステージのデザインチームで世の中に価値を提供し、事業創造を通して社会の問題解決をしていく。 そのプロセスで社会的なデザイナー不足という問題を解消するために、価値あるデザイナーを多く創出する、そんな仕組みを作っていきたいと考えています。

Basic Designers’ Portfolio

ferret

ferret One

phocase

留学Debut

Designer Wanted!

  • Kunihiro Okamura
  • Hikaru Kobayashi
  • You
  • Fumiya Shibusawa
  • Yuki Asamoto

この内容で送信します。よろしいですか?