「Photoshopもいちおう触れるけど、素人っぽい…」バナーデザインに悩める初心者に朗報の作り方とコツ！
新人やデザインの苦手なWeb担当者は、「ダサい」など言われた方も少なくないはず。
「バナーっていうのかい？贅沢な名だねぇ。」
「今からお前の作る画像はバーナーだ！分かったら返事するんだ」
・・・という事態にならないよう、汚名返上しませんか？
自作や格安バナー制作で済ませたい事業主様にも、4分くらいは読んでいただきたいです・・・。
(1分でも・・・・)
バナーを研究し、手を動かし、こだわるべき点が分かるのが王道ですが、「予算がもったいない！プロデザインも、良し悪しがわからなくて依頼しにくい」など思ってしまいますよね。
こんなバナー、簡単に作ることできそう、どこに依頼しても一緒…？
いいえ。
自分で作る内製派にはデザイン力アップのコ方法を、事業者様にはデザイナーによって依頼価格や集客効果の違う部分をお伝えします。
このOGPバナーもリフレッシュしたい病が・・・←
目次
- 初心者がバナーデザインで失敗しがちなポイント
- 数秒では伝わりにくいバナーデザイン
- レイアウトがおかしい
- 色の使いすぎバナー
- 「とりあえず」派手カラーや原色でバナーを作ると。。
- スタイリッシュバナーに程遠い！シャドウ・立体感など「効果」大好きデザイン
- 文字サイズが小さすぎるデザイン
- 文字サイズや書体の多用はダメデザインに・・・
- ダサいフォントは、パソコンに元から入っている標準書体が多い！
- フォントやバナーデザインが、ブランドイメージと違う作り方
- タイトルバナー制作くらい、早くチャチャッと作れる＝初心者の誤解
- バナーをクリックさせる、訴求力を高める工夫も必要！
- Web広告バナーでもっとおしゃれなデザインを作る参考サイトまとめ【レベルアップ用】
- バナー制作平均費用と価格の違いは何？【事業者用】
- ■ デザイン初心者もできる？プロっぽいバナー制作のコツまとめ
初心者がバナーデザインで失敗しがちなポイント
ダサいバナーに見えるデザインのやり方は「初心者あるある」な失敗が起きています。
- 数秒では伝わりにくい
- レイアウトがおかしい
- 色の使いすぎ
- 派手カラーや原色
- 「効果」大好き
- 文字が小さすぎる
- 文字サイズや書体の多用
- パソコン標準フォント
- ブランドイメージに合わない
【大前提】バナーサイズは見せたい場所に合わせて！【制作前にチェック】
いくらでも、好みのサイズ感で作れるバナー。
ですが実は、おすすめ画像サイズがあります。
作ってからバナーをあてこんじゃうと、プラットフォームの規定サイズと合わないか、バランス崩れが起きる恐れが高いです。
- SNSなどの規定サイズ
- 美術的にキレイに見える比率
- 挿入したいWebページで自然に見える大きさ
など。
ムダ作業を防ぐには、制作前にサイズ確認し、実際に作るバナーサイズを確定すべき。
| 推奨Twitterヘッダーサイズ | 1500x500px |
|---|---|
| Facebookヘッダーサイズ | 640x312pxが安全圏。(PC：820x312px、スマホ：640x360px) |
| インスタフィード投稿画像サイズ | 1080x1080pxが定番タイプ。縦長画像・横長画像でもそれなりに表示OK。
2020年6月の公式発表で4:5の縦長が推奨に変化。 「画面占有率が高く、アテンション高まる可能性」からだそう。なるほど。 |
数秒では伝わりにくいバナーデザイン
Webバナーに書かれたテキストは、ざっと見で判断し、理解や読むのに時間がかかりそうだと無視されます。
特にスマホではPCより小さくなり、文字が多いと読みにくくなってしまう問題も。
部署や上司の指示通り、ではなく一番の訴求ポイントを軸に、余分なメッセージはなくしましょう。
訴求ポイントがいくつもあり伝わり辛く、クリックしたり見る意欲を削いでいますね。
また、次項の「レイアウトのばらつき」もある例です。
※Web担当者さんも、社内で訴求したいポイントを全て盛り込むよう指示されたら、この説明が参考になれば嬉しいです(^ ^)
「伝わる」バナーデザイン制作例
出典：http://nonamedesign.info/banner/
少ない文字数で、メリットが伝わるキャッチコピーに。
これくらいなら、一番言いたいことがよくわかりますね(^^)
※このバナーは引用のための余白等があり、スマホでは通常の縮み方以上に小さくなっています。ご了承くださいm(._.)m
クリックした先のページで詳しく説明&アピールしましょう♪
レイアウトがおかしい
出典：https://matome.naver.jp/odai/2135900004901188101
「こっちは右よせかしら・・・これは中央揃えなイメージ。」
「どう揃えるんだろ・・・でも、それっぽいイラスト入れたから十分おしゃれよね？？」
整列のやり方を統一していないのも素人っぽくなります。
文字揃えとパーツの並べ方を絞りましょう。初心者さんはまずは１ルールで。
出典：http://nonamedesign.info/banner/
ざっくりした違和感は、目が滑るか？でチェック
視線の動きや、視覚情報の理解には心理学的なルールが。
「目」を無視した9割のバナーは「目線が定まらず、どう見ていいかわからない」印象になるはず。
中身がよくても、見るのがしんどいとクリック率に悪影響です。
作る作業にのめりこみ過ぎず、全体バランスをたまにチェックしてみてください。
色の使いすぎバナー
出典：http://nonamedesign.info/banner/
デザイン初心者さんが配色すると、つい色を使すぎてしまいます。
まずは以下3色を基本に配色しましょう。
- ベースカラー：70％(淡い色や基本色が無難)
- メインカラー：25％（デザインのキーカラー）
- アクセントカラー：5％（目立たせポイントの色）
くらいの割合でデザインします。
＊これは当方のデザインです。
結構「イイ感じ」になってきませんか？（どんな時も3色まで！とは言い切れないんですが）
「とりあえず」派手カラーや原色でバナーを作ると。。
出典：http://nonamedesign.info/banner/
目立つからって原色の赤ばかり多用したり、赤にオレンジ、イエロー、というド派手な色使い。
全部きつい色で、どれが大切かわからないデザインに…。
バナーも作るさいに配色計画を立て、優先順に強調するのがコツです。
色だけに頼らないメリハリの付け方も学んでみてください。
バナーを貼り付けたいWebページになじませて作る。
また、ホームページや内容にマッチするか、無視していませんか？
もし幼稚園バナーが真っ黒だったり、レモン飲料バナーが真っ赤だったら？
「怖い」「レモンとは思わなかった」＝【なんか違うと感じ、クリックしない】となってしまいます。
「やさしい」「信頼」「温度」・・・などなど、人は色に意味を関連づけていたり、コーラなど、ロゴとのイメージで結びつけたりしています。
なので、適切な色選びを。
スタイリッシュバナーに程遠い！シャドウ・立体感など「効果」大好きデザイン
デザインソフトといえば、Photoshop。へ〜効果ってここでつけるのね。
じゃ、ドロップシャドウ適用！プクッとしたのも手軽でおしゃれ〜(^-^)
デザイン初心者は、闇雲に画像の効果を付けやすいです。
そして大抵は、ソフトの初期設定か、カンに頼った設定にしています。
楽しくって、つい物足りず、複数の効果を適用してさらに悪化・・・（´-`）.｡oO
「ベベル」「エンボス」など立体感エフェクトの利用は超慎重に・・・！！
ぷっくり可愛い・かっこいい・・・のは絶妙な使用ができているから。
初心者さんがやると、とりわけ素人っぽくなりやすい効果がこの、立体系デザイン。
下手に使うと最近のデザインにはあまりマッチしないので、まずはドロップシャドウやグラデーションから使いこなしてみましょう。
比較すると、こんな感じ。
細かな設定や使い分けが絶妙にこだわるからこそ、繊細でシンプルな装飾になります。
「絶対に、シャドウは何ピクセル！」と決まっているものではないですが、強いていえば「なじみつつも、文字などを程よく目立たせたりできているか？」がプロとの分かれ目でしょうか。
最低限としては、読みにくくしてしまうほどであれば素人的かと。
文字サイズが小さすぎるデザイン
バナーなどで文字を画像化すると、ユーザーがその文字を大きくしたりできないので、読めるサイズでデザインする必要が。
文字サイズ10px以下で日本語はかなり厳しいです。スマホ画面では10pxくらいになってしまうケースもありますので、ご注意ください。
文字サイズや書体の多用はダメデザインに・・・
「このフォントかわいー！こっちはおしゃれ。」
…その時の気分で書体やサイズを決めてデザインしていませんか？
デザインは統一感を出すことがコツ。
フォントは２書体以内、サイズ感も３種類くらい以内にしておくと、無難なまとまりが出せます。
ダサいフォントは、パソコンに元から入っている標準書体が多い！
日本語無料フォントは少なめで、有料フォントだと、そこそこ高額。
無料フォントからイメージ通りの書体を選ぶのすら、挫折する人も。
個人や中小・零細企業では、経費や手間から、PCに標準で入ってきたフォントで作りがちですが、プロと比べるとその差に納得。
他にもあると思いますが。
高品質なバナーデザインは、フォントにも意図があってこだわっています。
そっ閉じ級のダサいフォント例まとめ
- 「MSゴシック」「ポップ体」：最もプロデザイナーに忌み嫌われる「ダサいフォント」
- Comic Sans：使用禁止運動まで起こった、世界一ダサいフォント
- 長体と太っちょ、斜めった変形：すべての既存フォントは、比率をムリに引き伸ばすと、無事死亡。
フォントやバナーデザインが、ブランドイメージと違う作り方
バナーに企業・商品などのイメージに合わないフォントを使ってはいけません。
「高級感の演出」に丸ゴシックなどカジュアルなもの、「大衆食堂の広告バナー」に、繊細な明朝体などは基本的に不向き。
フォントの扱いがいい加減なバナーは、初心者だと分かりやすいですね。逆に、使いこなせるとグッと引き締まります。
デザインも同様です。ターゲット、訴求イメージを意識したバナー制作を。
バナーに高級感を出すコツ
- 明朝体、細字フォント
- 余白を埋めすぎないレイアウト
- ごく少量の、エレガントなグラデーション・メタリックパーツ
かっこいいバナーの特徴
光岡自動車様:大人め男性
- 明朝体、細字か、または思いっきりボールド体
- 余白大きい、かガッツリ画面ギリギリを狙う
- 少量グラデ〜ガッツリベタやグランジまで。
- 直線、シアーな図形をスマートに使う
かっこいいバナーは、大人のビジネス感な方向性と、元気・冒険・近未来・ファイト一発的な躍動感タイプに大きく分かれそうです。
つまり、シンプル v.s.強力な世界観、いづれに近いかはっきりさせるべきでしょう。
タイトルバナー制作くらい、早くチャチャッと作れる＝初心者の誤解
ヘッダーバナー制作１つとっても、画像選びと文字組みだけで、プロと素人は大きな違いが。
素人さんは「バナーなんて」と、イメージ画像も２−３個比較してすぐデザインし始め、配色・パーツ配置もなんとなく・・・と思考不足が最大の課題。
細やかな調整、たくさんの配置や表現を比較・検討するデザインへの努力が、プロにはあるんです。簡単そうなシンプルに見えても、サクッとできた風に感じても、手抜きはしていません。
デザインは「しっかり考える」「設計する」ものという認識が、脱・素人バナーの第一歩です。
失敗しないバナーの作り方は、画面設計から。
「あんなちっちゃなバナーだから…」と軽く見ていませんか？
バナーの作り方も、ホームページ制作みたいな設計図を描いて進めます。モレなく効果的な見せ方が叶うはず。
Step1.伝えたい説明を、適当なフォントでいいので流し込んでみる。
Step2.強弱をつけ、いらない要素を削ったり。
Step3.背景やテキストディテールを仕上げる。
Step4.カラーリングしていく。
Step5.再度チェック・調整。
こんな感じ。
バナーをクリックさせる、訴求力を高める工夫も必要！
-
Bad
Good
「きれいにできたんちゃう？( ´▽｀)」と思ってしまったあなた！
「ビジネス春メク」デザイナーとしては、販促のお話もさせていただきます。
いくら安く作っても、クリックされにくいバナー、期待感が低いデザインなどでは、問題ですよね。
勿体ない！
そこで、キャッチコピーやサブの情報を取捨選択し、来て欲しいお客様にぴったりな言葉を試行錯誤することで、そのバナーがさらに「売れる」デザインになっていくんです。
人は自分に関係のないものは無視します。
「これは自分向けのサービスだ」と分かりやすかったら？
と想像してみてください。
難しそうなキャッチコピーにも、反応しません。
だから、「私でも簡単にできる！」サービスが良くも悪くも人気ですね。もし、自社商品・サービスが理解しにくいものなら、消費者にもわかる言い方を研究すると良いでしょう。
Web広告バナーでもっとおしゃれなデザインを作る参考サイトまとめ【レベルアップ用】
1.20update
理論はわかったけどヒントが欲しい・・
Webバナーを効率よくおしゃれに作るには、「すでに公開されて結果も出ていると思われるプロデザイン」を大量に調べるのがおすすめします。
なので、キレイで効果的なバナーを集めた参考サイトをいくつかご紹介。
バナーデザインアーカイブ/日本
手堅いバナーまとめといった印象がある、バナーデザインアーカイブも押さえておきたいですね。
2021年1月現在、全部で2129件なので、しっくりくるのがなければ他でも探しましょう。
Pinterest(ピンタレスト)/日本・海外
Pinterestは画像と写真のためのSNS。
インスタグラムみたいな拡散や交流ってニュアンスは、かなり弱いです。
ボードを作って、好みのバナーデザインをポチポチと集めれば、自分だけのギャラリー集が完成します。
Canva(キャンバ)で即席デザインする手も。/日本・海外
「PhotoShop買いたくない、覚えたくない・・・」そんな方にはCanvaが最適。
テンプレートから簡単にそれっぽいバナーを作ることができます。
「どっかで見たような…」デザインの一例にもなりそう。
ただ、テンプレ使っても繊細な仕上がりは難しいもの。
スキルの壁と、ツールの限界です。
ポジショントークでなく、やはり「本当に作れる」と素材に作らされたようなデザインは違います。
バナー制作平均費用と価格の違いは何？【事業者用】
以上を踏まえてまとめると、バナー外注デザイン制作料金に差があるのは、
- バナーサイズ
- 有料素材を使うか、素材は用意できるか、プロ撮影までするか
- 技術/物理的に大変さ。Gifなど動きのあるバナーなどは高額。
- コピーライティングやデザイン・提案的な難しさ
- 規模・生産体制？
あたり。
当然、ホームページデザイン同様、
- 「見た目のみで、指示通りのものさえ作ってくれれば」いいのか？
- 「的確な切り口や世界観、キャッチコピー提案」まで期待するのか？
などを慎重に検討いただけると、自ずと「安上がり」軸以外でもご判断いただけるかもしれません。
バナー発注の平均価格相場
| 小バナー（〜120px×60px、300pxx250pxなど） | 4,000円〜 |
|---|---|
| 中バナー(336px×280pxなど) | 7,000円〜 |
| 大バナー(264px×800px〜) | 1万円〜 |
激安系は若干づつリーズナブルですが・・・ね。
■ デザイン初心者もできる？プロっぽいバナー制作のコツまとめ
素人バナーになるポイントを切り口に、プロっぽい基本デザインのコツをみてきました。
- 伝わりにくいデザイン
- レイアウトがおかしい
- 色の使いすぎ
- 意味なし派手カラー
- 「効果」大好き
- 文字サイズが小さすぎる
- 文字サイズや書体の多用
- 元から入っているフォント
- ブランドイメージに合わない
- 簡単に作れるという誤解
- 訴求力を高める工夫も必要！
当デザイン制作では、デザイン視点からも訴求・販促視点からも、サービスを伝えたい人に伝えることに、手間を惜しみません。
バナー制作ご依頼について
運用サポートの方がメインですが、バナー、ヘッダー画像作成も承っております。
基本的にバナーだけでは、ホームページ制作の代用にはなり得ませんので、ご了承下さい。バナー制作のご依頼詳細はサービス/料金ページへ。
おまけ：バナー作成は、自作で十分？
「でも自分でバナー作成するほうが安い・・・」という方にちょっとオモシロイ記事を。
ダサいから良いと思ってたサイトデザインを、プロに頼んだ結果→ｃｖのために大事なのは○○
ttp://biancaweb.net/blog/design/
＊「それ見ろ！大して効果ないんじゃ・・・」と感じるかもしれませんが😇
この方の場合、Web集客の理解やコンテンツ力などをすでにお持ちで、さらにデザインをよくしたら？
というステージだったと思われます。
