初心者でもできる？プロっぽいバナーデザインのコツ

「Photoshopもいちおう触れるけど、素人っぽい…」バナーデザインに悩める初心者さまに朗報！
新人やデザインの苦手なWeb担当者は、「ダサい」など言われた方も少なくないはず。
自作や格安バナー制作で済ませたい事業主様にも、4分くらいは読んでいただきたいです・・・。
(1分でも構いません・・・・)

バナーを研究し、手を動かし、こだわるべき点が分かるのが王道ですが、「予算がもったいない！プロデザインも、良し悪しがわからなくて依頼しにくい」など思ってしまいますよね。

こんなバナー、簡単そう、どこに依頼しても一緒…？
いいえ。

自力派さんには、バナーデザイン力アップのコツを、事業者様向けには、デザイナーによって集客効果の違ってきそうな部分をお伝えします。

初心者がバナーデザインで失敗しがちなポイント
数秒では伝わりにくいバナーデザイン
レイアウトがおかしい
色の使いすぎバナー
「とりあえず」な派手カラーや原色
シャドウ・立体感など「効果」大好きデザイン
文字サイズが小さすぎるデザイン
文字サイズや書体の多用はダメデザインに・・・
パソコンに元から入っている標準フォント
フォントやデザインがブランドイメージに合わない
「早くチャチャッと」作れるという、初心者の誤解
バナーをクリックさせる、訴求力を高める工夫も必要！
■ デザイン初心者もできる？プロっぽいバナー制作のコツまとめ

初心者がバナーデザインで失敗しがちなポイント

「ダサいバナー」と感じさせてしまう、デザインのやり方は、次のような「初心者あるある」症状が起きています。

数秒では伝わりにくい
レイアウトがおかしい
色の使いすぎ
派手カラーや原色
「効果」大好き
文字が小さすぎる
文字サイズや書体の多用
パソコン標準フォント
ブランドイメージに合わない

数秒では伝わりにくいバナーデザイン

バナーに書かれたテキストは、ざっと見で判断し、理解や読むのに時間がかかりそうだと無視されます。
特にスマホではPCより小さくなり、文字が多いと読みにくくなってしまう問題も。
部署や上司の指示通り、ではなく一番の訴求ポイントを軸に、余分なメッセージはなくしましょう。

訴求ポイントがいくつもあり伝わり辛く、クリックしたり見る意欲を削いでいますね。
また、次項の「レイアウトのばらつき」もある例です。

※Web担当者さんも、社内で訴求したいポイントを全て盛り込むよう指示されたら、この説明が参考になれば嬉しいです(^ ^)

「伝わる」バナーデザイン制作例

出典：http://nonamedesign.info/banner/

少ない文字数で、メリットが伝わるキャッチコピーに。
これくらいなら、一番言いたいことがよくわかりますね(^^)
※このバナーは引用のための余白等があり、スマホでは通常の縮み方以上に小さくなっています。ご了承くださいm(._.)m

クリックした先のページで詳しく説明&アピールしましょう♪

レイアウトがおかしい

出典：https://matome.naver.jp/odai/2135900004901188101

「こっちは右よせかしら・・・これは中央揃えなイメージ。」
「どう揃えるんだろ・・・でも、それっぽいイラスト入れたから十分おしゃれよね？？」
整列のやり方を統一していないのも素人っぽくなります。

文字揃えとパーツの並べ方を絞りましょう。初心者さんはまずは１ルールで。

出典：http://nonamedesign.info/banner/

ざっくりした違和感は、目が滑るか？でチェック

視線の動きや、視覚情報の理解には心理学的なルールが。大抵は、これを無視したバナーは「目線が定まらず、どう見ていいかわからない」印象がするはず。
中身がよくても、見るのがしんどいとクリック率に悪影響です。

色の使いすぎバナー

出典：http://nonamedesign.info/banner/

デザイン初心者さんが配色すると、つい色を使すぎてしまいます。
まずは以下3色を基本に配色しましょう。

ベースカラー：70％(淡い色や基本色が無難)
メインカラー：25％（デザインのキーカラー）
アクセントカラー：5％（目立たせポイントの色）

くらいの割合でデザインします。

＊これは当方のデザインです。

結構「イイ感じ」になってきませんか？（どんな時も3色まで！とは言い切れないんですが）

「とりあえず」な派手カラーや原色

出典：http://nonamedesign.info/banner/

目立つからって原色の赤ばかり多用したり、赤にオレンジ、イエロー、というド派手な色使い。全部きつい色で、どれが大切かわからないデザインに…。
配色計画を立て、優先順に強調するのがコツです。
そして、色だけに頼らないメリハリの付け方を学んでみてください。

また、ホームページや内容にマッチするか、無視していませんか？

もし幼稚園バナーが真っ黒だったり、レモン飲料バナーが真っ赤だったら？
「怖い」「レモンとは思わなかった」＝【なんか違うと感じ、クリックしない】となってしまいます。
「やさしい」「信頼」「温度」・・・などなど、人は色に意味を関連づけていたり、コーラなど、ロゴとのイメージで結びつけたりしています。

なので、適切な色選びを。

シャドウ・立体感など「効果」大好きデザイン

デザインソフトといえば、Photoshop。へ〜効果ってここでつけるのね。
じゃ、ドロップシャドウ適用！プクッとしたのも手軽でおしゃれ〜(^-^)

デザイン初心者は、闇雲に画像の効果を付けやすいです。
そして大抵は、ソフトの初期設定か、カンに頼った設定にしています。
楽しくって、つい物足りず、複数の効果を適用してさらに悪化・・・（´-`）.｡oO

「ベベル」「エンボス」など立体感エフェクトの利用は超慎重に・・・！！
ぷっくり可愛い・かっこいい・・・のは絶妙な使用ができているから。

初心者さんがやると、とりわけ素人っぽくなりやすい効果がこの、立体系デザイン。

下手に使うと最近のデザインにはあまりマッチしないので、まずはドロップシャドウやグラデーションから使いこなしてみましょう。

比較すると、こんな感じ。

細かな設定や使い分けが絶妙にこだわるからこそ、繊細でシンプルな装飾になります。
「絶対に、シャドウは何ピクセル！」と決まっているものではないですが、強いていえば「なじみつつも、文字などを程よく目立たせたりできているか？」がプロとの分かれ目でしょうか。
最低限としては、読みにくくしてしまうほどであれば素人的かと。