集客したいネットショップ/ホームページ制作 奈良 大和高田 April Design

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

Photoshopもいちおう触れるようになったけど、どうも素人っぽくなってしまう…と悩んでいませんか?
新人やデザインの苦手Web担当者は、「ダサい」など言われた方も少なくないはず。
個人事業主さまも、「お金かかるから」と自分で作るか、格安バナーサービスで済ませてしまっているかもしれませんね。

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

こんなバナー、簡単でしょ?
〇〇業者/〇〇さんのものとの違いがわからない!
と周囲から思われやすい「バナーデザイン」について、プロとの違いとポイントをちょっと解説します。

初心者バナーになるポイント

ダサいと感じさせてしまう、デザインのやり方は、次のような似たような症状が起きています。

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

数秒では伝わりにくい

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

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

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

Good


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

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

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

レイアウトがおかしい


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

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

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


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

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

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

色の使いすぎ


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

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

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

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


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

結構「イイ感じ」になってきませんか?(どんな時も3色まで!とは言い切れないんですが)

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


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

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

   

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

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

   

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

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

「ベベル」「エンボス」など立体感エフェクトの利用は超慎重に・・・!!
ぷっくり可愛い・かっこいい・・・のは絶妙な使用ができているから。初心者さんがやると、とりわけ素人っぽくなりやすい効果がこの、立体系デザイン。

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

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

   

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

文字サイズが小さすぎる

バナーなどで文字を画像化すると、ユーザーがその文字を大きくしたりできないので、読めるサイズでデザインする必要が。文字サイズ10px以下で日本語はかなり厳しいです。スマホ画面では10pxくらいになってしまっている、というケースもありますのでご注意ください。

文字サイズや書体の多用

「このフォントかわいー!こっちはおしゃれ。」…気分で書体を選んだり、場当たり的にサイズを決めていませんか?

デザインは統一感を出すことがコツ。フォントは2書体以内、サイズ感も3種類くらい以内にしておくと、無難なまとまりが出せます。

パソコンに元から入っている標準フォント

日本語無料フォントは少なめで、有料フォントだと、そこそこ高額。無料フォントからイメージ通りの書体を選ぶのすら、挫折する人も。
個人や中小・零細企業では、経費や手間から、PCに標準で入ってきたフォントで作りがちですが、プロと比べるとその差に納得。 高品質なバナーデザインは、フォントにも意図があってこだわっています。

フォントやデザインがブランドイメージに合わない

企業・商品などのイメージに合わない書体、ということもあります。高級感の演出に丸ゴシックなどカジュアルなもの、大衆食堂の広告に、繊細な明朝体などは基本的に不向き。フォントの扱いがいい加減なバナーは、初心者だと分かりやすいですね。逆に、使いこなせるとグッと引き締まります。

デザインも同様です。ターゲット、訴求イメージを意識したバナー制作を。

「早くチャチャッと」作れるという、初心者の誤解

ヘッダー1つとっても、画像選びと文字組みだけで、プロと素人は大きな違いが。 素人さんは「バナーなんて」と、イメージ画像も2−3個比較してすぐデザインし始め、配色・パーツ配置もなんとなく・・・と思考不足が最大の課題。

細やかな調整、たくさんの配置や表現を比較・検討するデザインへの努力が、プロにはあるんです。簡単そうなシンプルに見えても、サクッとできた風に感じても、手抜きはしていません。
デザインは「しっかり考える」「設計する」ものという認識は、脱・素人バナーの助けになります。

クリックさせる、訴求力を高める工夫も必要!

  • Bad

  • Good

「きれいにできたんちゃう?( ´▽`)」と思ってしまったあなた!
「効くデザインを支える」デザイナーとしては、販促のお話もさせていただきます。

いくら安く作っても、クリックされにくいバナー、期待感が低いデザインなどでは、問題ですよね。勿体ない!

そこで、キャッチコピーやサブの情報を取捨選択し、来て欲しいお客様にぴったりな言葉を試行錯誤することで、そのバナーがさらに「売れる」デザインになっていくんです。
人は自分に関係のないものは無視します。「これは自分向けのサービスだ」と分かりやすかったら?と想像してみてください。

難しそうなものにも、反応しません。だから、「私でも簡単にできる!」サービスが良くも悪くも人気ですね。もし、自社商品・サービスが理解しにくいものなら、消費者にもわかる言い方を研究すると良いでしょう。

■ まとめ

素人バナーになるポイントを切り口に、プロっぽい基本ポイントをみてきました。

  • 数秒では伝わりにくい
  • レイアウトがおかしい
  • 色の使いすぎ
  • 「とりあえず」な派手カラーや原色
  • シャドウ・立体感など「効果」大好き
  • 文字サイズが小さすぎる
  • 文字サイズや書体の多用
  • 元から入っている標準フォント
  • ブランドイメージに合わない
  • 「チャチャッと」作れるという誤解
  • 訴求力を高める工夫も必要!

いかがでしょうか。当制作ではデザイン視点からも訴求・販促視点からも、貴社サービスを伝えたい人に伝えることに、手間を惜しみません。

バナー作成ご依頼について

運用サポートの方がメインですが、バナー、ヘッダー画像作成も承っております。基本的にバナーだけでは、ホームページ制作の代用にはなり得ませんので、ご了承下さい。最低発注単位など、詳細はサービス/料金ページへ。

おまけ

「でも自分でやったほうが安いし・・・」という方にちょっとオモシロイ記事を。


出典:http://xn--e–0g4awc3c1451cnh5a.com
  

ダサいから良いと思ってたサイトデザインを、プロに頼んだ結果→cvのために大事なのは○○

*これ、読むと「それ見ろ!大して効果ないんじゃ・・・」といっているように感じるかも(^^;;   
そういうことでなく、この方の場合、Web集客の理解やコンテンツ力など武器をすでにお持ちで、さらにデザインをよくしたら? というステージだったと思われます。   
*ヘッダーバナーは、ややごちゃつきが残りますが、それは別の話としてご覧下さい。

「効く」ホームページ制作 奈良 April Design

  • ユーザー層・目的確認、提案で、貴社ホームページの成長を促進します。ネットショップ運営経験から、集客販促に強いWebデザイナーです。
  • 完全オリジナルデザイン。魅力を届ける、伝わるHPを丁寧に制作。
  • 完成後も安心。アクセス解析/SEOなど更新サポートもお任せください!競合や時勢を意識し、責任をもってサイト改善/運営していきます。

ホームページ新規制作・リニューアルしたい、Webを活用できず悩んでいる方。 まずはお気軽にApril Designまでご相談ください!(大阪、その他地域も歓迎)

制作のお問合せ

よろしければシェアお願いします。
^