奈良 Web制作/集客 エイプリルデザイン April Design

デザイン初心者もできる?思わずクリックしたくなる、プロっぽいバナー制作のコツと制作依頼の方法

「Photoshopもいちおう触れるけど、素人っぽい…」バナーデザインに悩める初心者に朗報の作り方とコツ!
新人やデザインの苦手なWeb担当者は、「ダサい」など言われた方も少なくないはず。

「バナーっていうのかい?贅沢な名だねぇ。」
「今からお前の作る画像はバーナーだ!分かったら返事するんだ」

・・・という事態にならないよう、汚名返上しませんか?

自作や格安バナー制作で済ませたい事業主様にも、1分くらいは読んでいただきたいです・・・。

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

バナーくらい、簡単に作ることできそう、どこに依頼しても一緒…?
いいえ。

自分で作る内製派にはデザイン力アップの方法を、注文ご検討者様にはデザイナーによってタイトルバナー制作の依頼価格や集客効果の違う部分をお伝えします。

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

ダサいバナーに見えるデザインのやり方は「初心者あるある」な失敗が起きています。

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

【大前提】バナーサイズは見せたい場所に合わせて制作!【作る前にチェック】

いくらでも、好みのサイズ感で作れるバナー。
ですが実は、おすすめ画像サイズがあります。

作ってからバナーをあてこんじゃうと、プラットフォームの規定サイズと合わないか、バランス崩れが起きる恐れが高いです。

  • SNSなどの規定サイズ
  • 美術的にキレイに見える比率
  • 挿入したいWebページで自然に見える大きさ

など。
ムダ作業を防ぐには、制作前にサイズ確認し、実際に作るバナーサイズを確定すべき。

推奨Twitterヘッダーサイズ 1500x500px
Facebookヘッダーサイズ 640x312pxが安全圏。(PC:820x312px、スマホ:640x360px)
インスタフィード投稿画像サイズ 1080x1080pxが定番タイプ。縦長画像・横長画像でもそれなりに表示OK。
2020年6月の公式発表で4:5の縦長が推奨に変化。
「画面占有率が高く、アテンション高まる可能性」からだそう。なるほど。
リスティング広告に使えるっぽいの 250x300px、728x90px、160×600pxなど。
作っておくと便利なバナーサイズ一覧(ネットワーク広告対応)
メルマガ横幅サイズ平均 スマホでもPCでもキレイに読める600px台か、PCでも華やぐ800px台が人気そう。
100%幅の画像を想定してなので、メルマガ自体の横幅も同様。

ワードプレス/ブログ/アメブロへのバナーの貼り方

バナーの貼り方手順をサクッと。ワードプレスブログを想定。

  1. 「メディア」へ画像をアップロード
  2. 埋め込みたいエリアやウィジェット、記事でエディタを開く
  3. HTMLモードでコードを貼り付け、またはブロックエディタ画面からのシンプルな画像挿入は可。

アメブロサイドバーなら、画像アップ後、「フリースペース編集」内に以下HTMLを貼り付け。

アメーバブログへのバナー掲載方法

バナー設置コード例

以下はノンWeb制作者でもバナー設置できる、スタイリングつきHTML。
「text-align:center」が中央ぞろえになります。

<p style="text-align:center"><a href="リンク先URL">
<img src="/wp/hoge.png(画像URL)" alt="画像の説明"></a></p>

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

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

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

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

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


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

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

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

レイアウトがおかしい

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

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


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

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

視線の動きや、視覚情報の理解には心理学的なルールが。
「目」を無視した9割のバナーは「目線が定まらず、どう見ていいかわからない」印象になるはず。

中身がよくても、見るのがしんどいとクリック率に悪影響です。

作る作業にのめりこみ過ぎず、全体バランスをたまにチェックしてみてください。

簡単でセンスのいいバナーレイアウト配置はコレ!

「デザイナーじゃないけどデザインせざるを得ない・・・」系のあなたに。
とっつきやすいバナー配置テクをまとめました。

文字だけ/コピーメインのバナー

デザイン素材があまりなくても作れる、初級レイアウト。
文字バナーだらけにするとホームページの見た目が重くなるのが、欠点。

補助申請受付中のバナーデザイン

とりあえず写真の力に頼る、レイアウト

写真撮影の得意なノンデザイナー向きの、写真で訴えるデザイン。
ただ、撮影センスや写真加工が下手だと、一気にもさくなります。

食品、旅行/ホテル、無形サービス、デジモノ、ペット広告などに。

食品バナー

以上、ディテールは微妙でも、ぱっと見でいけてる感は出やすい作り方だと思います。

色の使いすぎ

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

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

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


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

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

「とりあえず」派手カラーや原色でバナーを作ると。。

目立つからって原色の赤ばかり多用したり、赤にオレンジ、イエロー、というド派手な色使い。
全部きつい色で、どれが大切かわからないデザインに…。

バナーも作るさいに配色計画を立て、優先順に強調するのがコツです。
色だけに頼らないメリハリの付け方も学んでみてください。

バナーを貼り付けたいWebページになじませて作る。

   

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

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

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

スタイリッシュバナーに程遠い!シャドウ・立体感など「効果」大好きデザイン

   

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

デザイン初心者は、闇雲に画像の効果を付けやすいです。

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

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

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

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

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

   

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

【動く】うざいバナーの貼り方してない?【×印のない広告】

ハイクオリティなバナー広告も、貼り方によっては「うざい」存在に。

  • アニメーション多用
  • スマホでドーンと表示され、×印のない広告
  • やたら追従してくるうざいボタンだらけ

こんなバナーは嫌われる広告の典型例です。
アピりたい気持ちを抑え、ユーザーを不快にさせないように注意しましょう。

また、全画面表示されるなど、とくに最悪な広告は、一応規制対象になっているはずです。

文字サイズ・書体の選び方がまずいデザイン

小さすぎるフォントサイズ

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

文字サイズや書体の多用はダメ!

「このフォントかわいい!こっちはおしゃれ。」
…気分で適当に書体やサイズを決めちゃっていませんか?

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

ダサいフォントは、パソコンに元から入っている標準書体が多い!

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

他にもあると思いますが。

高品質なバナーデザインは、フォントにも意図があってこだわっています。

そっ閉じ級のダサいフォント例まとめ

バナーやWebデザイン用フォントのおすすめ一覧

逆に、失敗しない書体チョイスを雑に紹介しておきます。

万能系

  • ヒラギノ角ゴシック
  • 游ゴシック
  • ヒラギノ明朝
  • 游明朝
  • しっぽり明朝

女性的

女性向けでは「うつくし明朝」「あずきフォント、こまどり(手書き風)」など繊細、ポップ、ナチュラル系が人気。

フォントやバナーデザインが、ブランドイメージと違う作り方

バナーに企業・商品などのイメージに合わないフォントを使ってはいけません。

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

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

バナーに高級感を出すコツ

  • 明朝体、細字フォント
  • 余白を埋めすぎないレイアウト
  • ごく少量の、エレガントなグラデーション・メタリックパーツ

かっこいいバナーの特徴

光岡自動車様:大人め男性

  • 明朝体、細字か、または思いっきりボールド体
  • 余白大きい、かガッツリ画面ギリギリを狙う
  • 少量グラデ〜ガッツリベタやグランジまで。
  • 直線、シアーな図形をスマートに使う

かっこいいバナーは、大人のビジネス感な方向性と、元気・冒険・近未来・ファイト一発的な躍動感タイプに大きく分かれそうです。
つまり、シンプル v.s.強力な世界観、いづれに近いかはっきりさせるべきでしょう。

かわいいバナーの特徴

かわいいバナーはパステル・にぎやかカラフル・イラスト・手描き風に集約されそう。

  • twitter@famima_now

  • pinterest

要素を減らし、彩度を下げると大人かわいいムードに。要素を増やし、にぎやかにするとフレッシュな女子からキッズまで対応できます。

コナミスポーツLP

とりあえず吹き出しを使うと、女子度が上がりますね。
モコモコフレームや「のんびり」「ゆる〜く」などのひらがな擬音コピーも頻出。

http://katakana-net.com/2013/10/zoo-katakana.html

個性派イラストが光る、キッズデザイン。

「タイトルバナー制作なんて、簡単ですぐ作れるww」と舐めるのは、初心者の誤解

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

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

失敗しないバナーの作り方は、画面設計から。

「あんなちっちゃなバナーだから…」と軽く見ていませんか?
バナーの作り方も、ホームページ制作みたいな設計図を描いて進めます。モレなく効果的な見せ方が叶うはず。

Step1.伝えたい説明を、適当なフォントでいいので流し込んでみる。
Step2.強弱をつけ、いらない要素を削ったり。
Step3.背景やテキストディテールを仕上げる。
Step4.カラーリングしていく。
Step5.再度チェック・調整。

こんな感じ。

思わずクリックしたくなるバナーに。訴求力を高める工夫も必要!

  • Bad

  • Good

「きれいにできたんちゃう?( ´▽`)」と思ってしまったあなた!
「ビジネス春メク」デザイナーとしては、販促のお話もさせていただきます。

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

そこで、キャッチコピーやサブの情報を取捨選択し、来て欲しいお客様にぴったりな言葉を試行錯誤することで、そのバナーがさらに「売れる」デザインになっていくんです。

人は自分に関係のないものは無視します。
「これは自分向けのサービスだ!」と分かりやすかったら、思わずクリックしたくなるのでは?
想像してみてください。

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

バナークリック率を上げるには?

「やばい!ウケると思ったあの広告、全然クリックされない・・・」

リスティングに限らず、サイト内で気合いと期待を込めた広告が、うまくいかなくても落ち着きましょう。
社内では「一番押されそう」と思った大きなバナーも、バンバン無視されるものですから。

  • 要素を欲張りすぎ
  • 1つの広告効果を期待しすぎ
  • デザイン/コピーが悪い・普通すぎ
  • 貼る場所があまり見られていないか、効果的でない

など、怪しい点を改良してみてください。
・・・ただ、どこがマズイか気づくのは、難しいですが。。

Web広告バナーでもっとおしゃれなデザインを作る参考サイトまとめ【レベルアップ用】

1.20update

理論はわかったけどヒントが欲しい・・

Webバナーを効率よくおしゃれに作るには、「すでに公開されて、効果的と思われるプロデザイン」を大量に調べるのがおすすめします。
なので、キレイで流行りのバナーを集めた参考サイトをいくつかご紹介。

バナーデザインアーカイブ/日本

手堅いバナーまとめといった印象がある、バナーデザインアーカイブも押さえておきたいですね。
2021年1月現在、全部で2129件なので、いいのがなければ他サイトも活用を。

Pinterest(ピンタレスト)/日本・海外

Pinterestは画像と写真のためのSNS。
インスタグラムみたいな拡散や交流ってニュアンスは、かなり弱いです。

ボードを作って、好みのバナーデザインをポチポチと集めれば、自分だけのギャラリー集が完成します。

旅行バナー例と見どころ

https://www.tour.ne.jp/w_special/hawaii_bigisland/

「新提案」で新規性をアピールし、「贅沢旅」と銘打って欲張りな女子のワガママなラグジュアリー願望をくすぐっている・・・といったところでしょうか。

【もはや子連れ用ホテル】キッズ広場、おもちゃレンタルも!リーズナブルな「ホテルオーシャン那覇国際通り」

「もはや子連れ用ホテル?」というキャッチコピーが筆者独自の気づきを反映し、印象的なタイトルバナーに。
クリック率が上がりそうな。

作りたくない人は、おしゃれなバナー無料素材サイトで。

商用もできる、無料バナー素材サイトもたくさん。
「作りたくないけど明日アップしなきゃ(汗)」「5000円とかで依頼するのも厳しい…」ピンチの時には頼ってくださいね。

ただ、完成品のバナー素材は少なく、テンプレート式で編集力を要するサイトが多い印象。
まぁ、完成品で無料は(いろんな意味で)やってられない・・・とも言えますが(汗)

以下カコミ内は、当方提供のフリーバナーです。デザイン編集・再配布・販売不可・ノンデザイナーの方は、商用可。
やっつけなので、ご自由に。著作権はApril Designのままです。

(簡易デザイン)フリーバナーby April Design

ーーー ▼ここから素材▼ ーーー

  • 50%OFFセールバナー 250x300
  • メルマガバナー

バレエ教室体験レッスンバナー

ピアノ教室体験レッスンバナー

食品・野菜ラベル

「遺伝子組み換え・ゲノム編集していない」ラベルを自作してみました。
非公式である旨ご理解の上、Web素材限定でお使いください。

ーーー ▲ここまで素材▲ ーーー

*フリー素材以外の画像や文言は無断使用不可です。

ワンポイントメモ

「お問い合わせバナー」は、どちらかというとテキスト主体のボタンが増えました。ワンポイントやアイコンのみなど限定的なパーツだったり。
「何でもバナー」の時代は終わったのだと。

今でも残っているのは、ボタン風の表現ですかね・・・。

コテコテの画像バナーにするなら、ご連絡先や文章など考慮したオリジナル制作が一番ご希望に添えます。

Canva(キャンバ)なら、バナーやインスタ画像をオンラインで無料デザイン作成可能。/日本・海外

「PhotoShop買いたくない、覚えたくない・・・」そんな方にはCanvaが最適。
テンプレートから簡単にそれっぽいバナーを作ることができます。

「どっかで見たような…」デザインの一例にもなりそう。

バナーの文字部分に便利(なのか?)無料ロゴやおもしろ画像ジェネレーターと普通に便利な素材サイト

怪文書ジェネレーター

「怪盗ルパン見参!」的なロゴが作れます。

吹き出しデザイン

定番吹き出し。PNGもAI形式もあり。商用可。

Bg-Pattrens

幅広いソフトで使える背景パターン集。商用可。

テンプレの限界

ただ、テンプレ使っても繊細な仕上がりは難しいもの。
スキルの壁と、ツールの限界です。

ポジショントークでなく、やはり「本当に作れる」と素材に作らされたようなデザインは違います。

バナー制作平均費用と業者による価格の違いは何?【事業者用】

以上を踏まえてまとめると、バナー外注デザイン制作料金に差があるのは、

  • バナーサイズ
  • 有料素材を使うか、素材は用意できるか、プロ撮影までするか
  • 技術/物理的に大変さ。Gifなど動きのあるバナーなどは高額。
  • コピーライティングやデザイン・提案的な難しさ
  • 規模・生産体制?

あたり。

当然、ホームページデザイン同様、

  1. 「見た目のみで、指示通りのものさえ作ってくれれば」いいのか?
  2. 「的確な切り口や世界観、キャッチコピー提案」まで期待するのか?

など慎重に検討し、「安い」以外でもご判断いただければ・・・と願っています。

バナー発注の平均価格相場

デザイン外注の平均費用は、サイズ別に変わることが多いです。

小バナー(〜120px×60px、300pxx250pxなど)4,000円〜
中バナー(336px×280pxなど)7,000円〜
大バナー(264px×800px〜)1万円〜

こ*ならなど激安系はリーズナブルですが・・・ね。

バナー広告の費用相場

では、実際に広告掲載するとなった時、おいくら円ほどかかるのでしょうか?
「自社ホームページに貼る自サービスの広告画像」でなく、Googleやメディアに掲載してもらうケースの費用です。

*当方は特にリスティング運用者ではないため、費用感は薄目でご参考を。

バナー広告媒体費用
Google広告50円~100円/クリック
100円~500円/1,000imp
その他純広告型バナー広告数十万円~数千万円/期間
バナー広告の費用がまるわかり!制作費用から掲載費用、代理店手数料まで

■ デザイン初心者もできる?プロっぽいバナー制作のコツまとめ

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

  • 伝わりにくいデザイン
  • レイアウトがおかしい
  • 色の使いすぎ
  • 意味なし派手カラー
  • 「効果」大好き
  • 文字サイズが小さすぎる
  • 文字サイズや書体の多用
  • 元から入っているフォント
  • ブランドイメージに合わない
  • 簡単に作れるという誤解
  • 訴求力を高める工夫も必要!

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

バナー制作ご依頼方法

当方ではバナー、ヘッダー画像作成のみのご相談も承っております。
基本的にバナーだけでホームページ制作の代用にはなりませんので、ご了承下さい。バナー制作のご依頼詳細はサービス/料金ページへ。

*アメブロヘッダーも作らなくはないです。が、過去記事で効果が微妙・おすすめしない理由をお伝えしています。

おまけ:バナー作成は、自作で十分?

「でも自分でバナー作成するほうが安い・・・」という方にちょっとオモシロイ記事を。

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

*「ほら!大して効果ないんじゃ・・・」と感じるかもしれませんが😇   
この方の場合、マーケティング知識やコンテンツ力などすでにお持ちで、よりデザインをよくしたら?
という状態だったと思われます。

webデザイン, ブログ, ホームページ運営

ホームページ制作奈良 エイプリルデザイン
ビジネス春メク🌸Webカウンセラー

Web運営サポート(ブログ/SEO対策/マーケティング)対応のホームページ制作とブランディング。
名刺、集客診断だけでも、お気軽にご相談ください。
サービス/費用

  • ネットショップ担当と制作会社を経験。
  • 元ダンス部 (ง ˙ω˙)ว

SNSをフォロー ▼

診断/ご相談

^