初心者でも簡単おしゃれ！思わずクリックしたくなるバナーデザインのコツ 制作依頼

初心者がバナーデザイン/ヘッダー作成で失敗しがちなポイント

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

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

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

バナーサイズは好きな大きさで作成できますが実は、おすすめ画像サイズがあります。

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

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

など。

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

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

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

アメブロサイドバーなら、画像アップ後、「フリースペース編集」内に以下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広告100万円の広告費のうち、50万円しか適切に出稿できてない」なんてこともおこるようで、バナーデザインと文言も、責任重大かと。

日本のデザインはなぜダサい？→万人ウケと説明過多のせい

確かに、日本のデザインは誰にでも通じるよう各方面に配慮し、てんこ盛りになりがち。

「上層部の意見でコロッと覆る」シーンもあり、保守的な組織事情も拍車をかけています。

極力、本当に良い方の提案が受け入れていただけるよう、円滑にコミュニケーションしたいものですね・・・。難しいのですが。

フロア名をカッコ良くしようと横文字だけにした結果、意味が分からなすぎてテプラを貼られていた銀座LOFT、4月の大改装で分かりやすくなったぞ！！！

pic.twitter.com/H6o3FQhNuz

なぜわが国伝統の着物でないのか。奇をてらい、どこの国かわからないし、はっきり言ってダサい。
わが国の長い歴史の中で洗練されてきた着物文化があるのだから、それをしっかり全面に出すべき。 https://t.co/65B3NqYAn9

— 山田宏 自民党参議院議員 (@yamazogaikuzo) 2021年6月7日

おしゃれが仇となる時も

シュッとしてれば成功、ではないのもデザインの深さ。ちょっと前に話題になったローソンの小洒落たパッケージなんかがその一例。

デザインの利用場所、ペルソナなど効果に関わるファクターを考え、自己満にならないようご注意を。

デザインする側も、依頼者側も、謙虚さと自問自答が大事ですね。

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

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

少ない文字数で、メリットが伝わるキャッチコピーに。
これくらいの文言なら、一番言いたいことがよくわかり、押したくなるかと。

※このバナーは引用のための余白等があり、スマホでは通常の縮み方以上に小さくなっています。ご了承くださいm(._.)m

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

レイアウトがおかしいバナー広告画像は、かなりダメな例。

「こっちは右よせかしら・・・これは中央揃えなイメージ。」

「どう揃えるの？でも、かわいい無料イラスト素材入れたから、十分おしゃれよね？？」

整列のやり方を統一していないのも素人っぽくなります。

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

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

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

視線の動きや、視覚情報の理解には心理学的なルールが。

「目」を無視した9割のバナーは「目線が定まらず、どう見ていいかわからない」印象になるはず。

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

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

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

「デザイナーじゃないけどデザインせざるを得ない…」ホームページ担当者に、お手軽バナー配置テクをまとめました。

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

デザイン素材があまりなくても作れる、初級レイアウト。

文字バナーだらけにするとホームページの見た目が重くなるのが、欠点。

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

写真撮影の得意なノンデザイナー向きの、写真で訴えるデザイン。

ただ、撮影センスや写真加工が下手だと、一気に素人臭くなります。

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

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

色の使いすぎ

デザイン初心者が配色すると、つい色を使すぎてしまいます。

まずは以下3色を基本に配色しましょう。

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

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

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

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

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

目立つからって原色の赤ばかり多用したり、赤にオレンジ、イエロー、というド派手な色使い。

全部きつい色で、どれが大切かわからないデザインに…。

バナーも作る時に配色計画を立て、伝えたい内容の優先順に強調するのがコツです。

色だけに頼らないメリハリの付け方も学んでみてください。

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

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

もし幼稚園バナーが真っ黒だったり、レモン飲料バナーが真っ赤だったら？

「怖い」「レモンとは思わなかった」＝【なんか違うと感じ、クリックしない】となってしまいます。

「やさしい」「信頼」「温度」・・・などなど、人は色に意味を関連づけていたり、コーラなど、ロゴとのイメージで結びつけたりしています。

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

おしゃれでスタイリッシュなバナーに程遠い！「効果」大好きデザイン

「デザインソフトといえば、Photoshop効果。

ドロップシャドウやプクッとしたデザインもおしゃれで可愛い❤️」

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

そして大抵は、ソフトの初期設定か、カンに頼って設定しちゃいます。

楽しくて、つい複数の効果を適用して、また悪化（´-`）.｡oO

「ドロップシャドウ」「ベベル」「エンボス」など立体感エフェクトの利用は超慎重に！！

かっこいいデザインは絶妙な使用ができているから。

初心者がとくに素人っぽくなりやすい効果が、立体系デザイン。

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

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

細かな設定や使い分けが絶妙にこだわるからこそ、繊細でシンプルな装飾になります。

「絶対に、シャドウは何ピクセル！」と決まっていませんが、「なじみつつも、文字などを程よく目立たせられているか？」がプロ感、でしょうか。
最低限、読みにくくならないエフェクトに抑えるべき。

文字サイズ・書体の選び方が下手なデザイン

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

バナーなどで文字を画像化すると、ユーザーが文字を大きくしたりできないので、読めるサイズでデザインする必要が。

文字サイズ10px以下で日本語はかなり厳しいです。(PCは良くても)スマホ画面で豆粒サイズになってしまわないよう、ご注意ください。

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

「このフォントかわいい！こっちはおしゃれ。」

…気分で適当に書体やサイズを決めちゃっていませんか？

デザインは高い統一感がコツ。フォントは２書体以内、サイズ感も３種類くらい以内にすると、無難にまとまります。

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

日本語無料フォントは少なめで、有料フォントだと、そこそこ高額。

無料フォントから最適な書体を選ぶのすら、挫折する人も。

個人や中小・零細企業では、経費や手間から、PCの標準フォントで作りがちですが、プロと比べるとその差に納得。

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

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

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

• 「MSゴシック」「ポップ体」：最もプロデザイナーが避ける「ダサいフォント」
• Comic Sans：使用禁止運動まで起こった、世界一ダサいフォント
• 長体と太っちょ、斜めった変形：文字の比率をムリに引き伸ばすと、無事死亡。

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

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

女性的

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

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

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

「高級感の演出」に丸ゴシックなどカジュアルなもの、「大衆食堂の広告バナー」に、繊細な明朝体などは基本的に不向き。

フォントの扱いがいい加減なバナーは、初心者だと分かりやすいですね。逆に、使いこなせるとグッと引き締まります。

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

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

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

高級感デザインは、旅館・ホテル、料亭、和食、不動産、ブランド品など高額で格調高い商品にぴったりです。

かっこいいバナーの特徴

光岡自動車様:大人め男性ヘッダー

【東京2020大会を観に行こう】CAMPAIGN：エネルギッシュ

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

かっこいいバナーは、大人のビジネス感な方向性と、元気・冒険・近未来・ファイト一発的な躍動感タイプに大きく分かれそうです。

つまり、シンプル v.s.強力な世界観、いづれに近いかはっきりさせるべきでしょう。

かわいいバナーの特徴

かわいいバナーと言っても「パステル・にぎやかカラフル・イラスト・手描き風」、と客層にあった表現を選べていますか？世界観混ぜこぜを防ぐべく、審美眼や描きわけをみがくべし。

• 

  twitter＠famima_now

• 

  pinterest

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

コナミスポーツLP

とりあえず吹き出しを使うと、女子度が上がりますね。

モコモコフレームや「のんびり」「ゆる〜く」などのひらがな擬音コピーも頻出。

katakana - カタカナ（日本のカッコイイを集めたお土産屋さん）

東京都世田谷区奥沢の自由が丘駅近くにある、セレクトショップのウェブサイト。通信販売も行っています。

katakana-net.com

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

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

ヘッダーバナー制作１つとっても、画像選びと文字組みだけで、プロと素人は大きな違いが。

素人さんは「バナーなんて」と、イメージ画像も２−３個比較してすぐデザインし始め、配色・パーツ配置もなんとなく・・・と思考不足が最大の課題。

細やかな調整、配置や表現を何度も検討するデザインへの努力が、プロにはあるんです。簡単そうなシンプルに見えても、サクッとできた風に感じても、手抜きはしていません。

デザインは「しっかり考える」「設計する」ものという認識が、脱・素人バナーの第一歩です。

ブログバナー(アイキャッチ)で80倍のPV向上可能

画像は当方のブログバナーの「ピンタレストアナリティクス」によるビフォーアフターです。

過去のバナーデザインと比べ。リデザイン後は最大８0倍ものPVアップに貢献しています。

時代とデザインクオリティを上げないと、もう苦しくなってきました。

嫌われない、いいバナーの作り方は、画面設計から。

「ちっちゃなバナーだから…」と軽く見ていませんか？

バナーの作り方も、ホームページ制作みたいな設計図を描いて進めます。モレなく効果的な見せ方が叶うはず。

こんな感じ。

【動く】うざいバナーの貼り方とは？【×印のない広告】

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

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

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

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

よく見せる広告コピー、詐欺誘導も嫌われる！

商品より効果が高いように見せたり、実は添加物まみれの食品をデザインの高級感でごまかしたり。

誤誘導させるバナー広告も嫌われるしバレます。

有料記事で全部見れませんが、やはり、という調査結果のようです。

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

• 

  Bad

• 

  Good

「きれいにできたんちゃう？( ´▽｀)」と思ってしまったあなた！

「ビジネス春メク」デザイナーとしては、販促のお話もさせていただきます。

いくら安く作っても、クリックされにくいバナー、期待感が低いデザインは、もったいない！

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

「自分向けサービスだ」振り向かせるデザインは思わずクリックしたくなる

人は自分に関係ない広告は無視します。

難しそうな文言にも、反応しません。

だから、「簡単にできる」サービスが良くも悪くも人気ですね。もし自社商品が理解しにくいものなら、消費者にもわかる言い方の研究が必須に。

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

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

リスティングに限らず、サイト内で気合いと期待を込めた広告が、うまくいかなくても落ち着きましょう。

社内では「一番押されそう」と思った大きなバナーも、バンバン無視されますから。

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

など、怪しい点を改良してみてください。

デザインの問題に気づくのは、難しいですが…。

いけてる広告作りが叶う「40:40:20の法則」

実は、「マーケティング的にいけてるバナー」は、デザインよりターゲティングと商品の品質が最重要なんです。エド・バーネットの提唱する「40:40:20の法則」で説明されているようです。

具体的な広告の影響力の内訳は「ターゲティングが40％・商品の品質が40％、デザイン・コピーライティングが20％」とのこと。

体感上も「商品やペルソナが甘いので、広告やデザインだけでなんとかするのは…」困難です（）

一方で、高い効果を期待したり、目の肥えたペルソナ向けや、本物感を訴えるなら激安バナーや「見かけ」思考の作成者は不適切だとも思います。

バナー広告なら平均クリック率の目安データも参考に。

以下はリスティングなどのWeb広告における、平均クリック率(CTR)のデータと改善ポイントの考え方。

ランディングページやコンバージョンポイント(CTA・お問い合わせオファー関連)、商品に課題が見えないようなら、クリック率悪い原因って、やはりバナー広告がまずい疑惑が上がりますね(汗)

「及第点バナー」なら作れる人は、記事を見て、本当の要因分析と着手ができるようにレベルアップしたいものです。