ネットショップの運営において欠かせないもののひとつ「バナー」。
バナーを日本語に訳すと「旗」のことで、店頭などに掲げる「のぼり旗」などと同じく、ネット上でお店のことを知ってもらったり、商品やサービスの内容に興味をもってもらう役割を担っています。
バナーは、目を引く場所に設置するだけでなく、限られた情報で興味をもってもらい、クリックしてもらうことが重要です。この記事では、そんな興味を惹きつける効果的なバナーの作り方のコツや注意点、オススメのキャッチコピーをご紹介していきます。
バナーって文字をドーーンと大きくして目立たせればいいんじゃないの？
ツクルくん、そんなにバナーは簡単なものじゃないんですよ！バナーは奥が深いんです…！これからコツやポイントを紹介していくので良く読んでいってね！
目次
1.バナーを作る前に押さえておきたいポイント
1-1.何を伝えたいか、どこに掲載するかを明確にする
バナーによって、伝える内容、掲載する場所、サイズはそれぞれ違います。そして、あなたが当たり前に知っている情報でも、バナーを見る人にとっては分からないことがあるでしょう。
バナーは、誰が見ても分かりやすい内容にすることが大前提です。限られた枠の中で何を一番に伝えたいのか、どこに掲載してサイズはどのくらいなのかを改めて認識し、どうしたら興味をもってもらえるかをしっかりと考えてみましょう。
1-2.パッと見の印象で決まる！重要な素材選び
あなたがクリックしたくなるバナーはどんなものですか？パッと見て無意識にクリックしていませんか？
あなたのネットショップに訪れた人たちも、同じように第一印象で「自分にとって必要か必要じゃないか」を無意識に判断しているはずです。だからこそ、バナーの大半を占める写真や素材選びにはこだわってみましょう。
子ども用水着のバナーなのに、子ども向けということがすぐに判断できません
商品を着たキッズモデルの写真があるため、すぐに子ども用水着と判断できます。
1-3. 少ない情報だからこそ、キャッチコピーはこだわろう。
バナーに文字情報を入れない人はいないでしょう。その先にどういう情報があるのか、文字がないときちんと伝わらないからです。
しかし、バナーにたくさん文字を詰め込み過ぎると、逆に何を言いたいのか伝わりにくくなります。詳しい情報はクリックした先に載っているので、キャッチコピーは簡潔で伝わりやすい言葉にしましょう。
バナーだけでは、リンク先にレザーバッグの何が紹介されているのか分かりにくいです
レザーバッグをオーダーしたい人向けの情報があるとすぐに分かります
1-4.色の活用でイメージをコントロールしよう
ネットショップでは店舗やブランドのイメージに合わせた配色を使いますが、特別なセールなどイレギュラーな配色が必要なときもあります。
いつもより「安さを強調したい」「目立たせたい」場合、赤や黄色のように注意を促す色が効果的です。ブランドのイメージに合わなくても、コントラストや彩度を低めに設定することで馴染んでくれます。
洗練されたイメージですが、通常より安く販売しているイメージは薄い
安さは伝わるものの、サイトによっては設置したときに浮いてしまう可能性があります
赤でセール感を演出しつつ、シンプルで洗練されたサイトにも合う色合いです
バナーの配色に関してどんな色合いがいいかわからない時などは「ネットショップの配色に役に立つツール」にてご紹介しておりますので、ぜひご参考にしてください。
1-5.シリーズものには規則性を持たせる
季節ごとに味が変わる商品や、購入者へのインタビューなど、シリーズものとして連載するページのバナーには規則性をもたせましょう。
シリーズを楽しみにしている人や購入には至っていないけれど、興味をもってくれている人がいるかもしれません。そんなとき、全く違うデザインのバナーだと同じシリーズとして認識してもらえず、潜在層に届きづらくなってしまう可能性があるからです。
どちらも位置や素材に規則性があり、シリーズものということが分かりやすいですね
1-7.実際のサイズで最終確認をしよう
バナーを作るとき、画面を拡大して作業をすることがあるでしょう。
アップロード前に実際のサイズで確認をしないと、貼り付けたあとに「文字が潰れていた」「見えづらかった」ということになりかねません。二度手間にならないよう、バナー画像が完成したら実際のサイズでチェックし、きちんと情報が読み取れるかを確認しましょう。
2.バナーやチラシのデザインにおける「文字の基本」
ネットショップのバナーやチラシをつくるとき、適当にあつかってしまいがちな文字のデザイン。
日頃から、わたしたちの生活で当たり前のように目にしている文字ですが、ネットショップやブランドの情報を発信する際には、フォント選びや字間・行間など、細かなデザイン調整が重要となってきます。
今回は、デザイナーが考慮している「文字の基本」をご紹介します。
2-1. シンプルなフォントの組み合わせ
しっかりと読ませたいテキストには、シンプルで読みやすいフォントを選びましょう。
変わったタイプのフォントを使ったり、多数のフォント、サイズ、色が混在していると、人間はその内容を認識しづらくなります。フォントの組み合わせをシンプルにすることで、情報を混乱させることなく、しっかり相手に読んでもらえる可能性が広がります。
2-2. フォントが表す感情
フォントの使い方が重要であるように、「使い分け」もまた重要です。色と同じように、フォントにもその種類によって伝えられるムードや雰囲気、感情などがあります。
互いに補い合い、伝えたいイメージや内容が、より効果的に伝わるような組み合わせを選びましょう。
2-3. 読みやすさを考慮する
ネットショップに訪問してもらったり、チラシを手にしてもらっても、読みやすさを無視したデザインでは、文字を読んでもらえる可能性が少なくなります。
左の画像はテキストが小さすぎて読みづらく、右の画像は背景色と文字色の明度が近すぎて（コントラストが弱い）、内容を認識しづらくなっています。
一番長い文章となる本文は、目立つことよりも特に読みやすさを考慮しなければなりません。
2-4. 文字の字間や行間がちょうど良いか
スペースが限られている中で、ある程度のテキスト量を配置しなければならないときに必要なのが「トラッキング（文字と文字の間隔を調整して、見た目を整えること）」です。
しかし、文字と文字の間隔が狭すぎると詰まった印象のデザインになってしまい、読みづらくなってしまうので注意しましょう。
行間についても同じです。行間は全体の読みやすさにも影響するため、広すぎても狭すぎてもいけません。広すぎると締まりの無いデザインに、狭すぎると読みにくくなってしまいます。
2-5. 拡大や縮小の比率がおかしくないか
特定のスペースに入れ込むために、フォントを引き延ばしたり圧縮したりするのもよくある間違いです。計算された比率が歪み、本来あるべき形が失われてしまいます。フォントを小さくする場合は、縦横の比率を変えずに大きさを変更しましょう。
2-6. 重要性においての大きさの強弱
デザイン上で一番重要な情報や要素は、大きさや色によって注目を集めましょう。逆に比較的重要でない情報については、不必要に注目を集めないようにしなければなりません。
左の画像では、情報がほとんど同じ大きさの文字で表示されているため、一番重要な内容を理解するのに時間がかかります。反対に右の画像では、一番重要なところが強調されているので、すぐに内容を理解してもらえるでしょう。
色合いや文字の大きさなどを少し調整するだけでも、全体としての情報が分かりやすくなります。また、フォントの雰囲気を内容に合わせたことで、より伝わりやすくなっています。
2-7. 役割にあったテキスト揃え
テキスト揃えには、左揃え、右揃え、中央揃え、均等揃えなどのいくつかの種類があります。
基本的に本文などは、左揃えにするのが読みやすく最適です。右揃えは目を文章で追うのが難しくなるため、文章量が多い場合にはあまりお勧めできません。中央揃えはポスターや招待状などによく使用されますが、こちらも文字数が多い場合は読みづらくなります。
また、均等揃えは両端が揃っているため見た目が良く見えるのですが、文字の間隔がそれぞれで変わってしまい、不均等なスペースが生まれてしまいます。
そのため、読んでいる人はリズムを崩して読みづらくなり、ストレスを感じてしまう可能性があります。
2-8. そもそも文法やスペルが合っているか
ネットショップを含め、お客様へ送信するメール、商品に添える送り状などに誤字があると、店舗やブランドに「きちんとしていない」イメージをもたれてしまいかねません。
安心して利用してもらうためにも、公開する前や印刷の前に、改めてスペルや文法に間違いがないかを確認しましょう。自分が正しいと思っていた言葉も、「実は間違っていた…」なんてことがあるかも。
何気なく目にする広告や看板なども、プロのデザイナーが様々な意図をもって文字を魔法のようにあつかっているのです。ネットショップやチラシを作成する際にも、今回のような点を意識しながら、デザインに挑戦してみてください。
3.デザイン初心者さん向け、写真×文字のバナー作成でやってはいけない６つのパターンと注意点
ネットショップを作成しているとき、困ってしまうのが画像作成。
ショップのメインビジュアルやバナー画像など、おしゃれでインパクトのあるデザインを作りたいのに「伝わらない」「目立たない」そんなデザインになってしまう人も多いのではないでしょうか？
画像を作る際、もっとも重要なポイントのひとつが、写真と文字の組み合わせ。自分でバナーを作ったことのある方なら、写真と文字をセンス良く配置することが、かんたんなようでとても難しいことだと実感していることでしょう。
今回は、写真×文字のNGパターンを事例に、覚えておきたい６つのポイントを解説します。
3-1. 写真と文字のコントラストが弱い
デザインの主な目的は、“伝えたいことを相手に分かりやすく、きちんと伝える”というコミュニケーションです。
購入者さまにとって「見づらい」「分からない」と思われてしまっては、せっかく時間をかけて作った画像やサイトに意味がなくなってしまいます。さらに、「不安」や「煩わしさ」を与えてしまうと、ページを離脱してしまうことにも繋がりかねません。
写真×文字の組み合わせでよくある失敗は、写真と文字のコントラストが弱すぎて、パッと見たとき何と表記してあるか分からないこと。
そんなときは、写真に対して文字のコントラストを強くしてみましょう。また、逆に写真自体の明るさを調整したり、フィルターや透過効果を使うことでコントラストを強くすることもできます。
コントラストが弱いと、文字が読みづらくなりがち。
コントラストを強くしてデザインの一部を際立たせると、視覚的に訴える力が強まります。結果、購入者さまにパッと見でバナーの内容を理解してもらえたり、不安感を拭うことができます。
また、スタイリッシュでまとまりのある画像にしたいのなら、写真の中にある色と文字色を統一する方法もオススメです。
背景と文字の色の明るさに差をつけることでグッと読みやすくなります。
3-2. 写真と文字のイメージが合ってない
ネットショップ作成において、デザインはもちろんのこと、どんな写真を使うかでブランドのイメージが変わってくると言っても過言ではありません。写真と文字のイメージがマッチすれば、コンテンツの内容が伝わったり、ターゲットに刺さるショップになります。
たとえば、下のバナーは、海をイメージした商品なのに、都会的なビル群の写真を組み合わせています。
イメージ写真のギャップが大きいと、商品の内容がきちんと伝わらないですよね。同じように、文字のイメージが内容に合っているかも重要です。
それぞれの文字には、「楽しそう」「エレガント」「カジュアル」「モダン」などの独自の雰囲気があります。その文字のイメージと写真の内容が一致していないと不協和が生まれ、見る人を混乱させ、期待を裏切ることになりかねません。
写真を変えるだけで、一目でイメージが伝わるようになります。
あなたも普段、何気なく目にする広告などで、無意識に写真や文字のイメージで印象を判断していると思います。自分で作っていて分からなくなってしまった場合は、客観的に見てもらえる周りの人に聞いてみるのも良いでしょう。
3-3. 余白を余ったスペースと思い埋めてしまう
初心者にとって、かんたんなようで難しいのが余白のバランス。「余白があるから、つい何か埋めたくなる…」あなたは、そんなことありませんか？
しかし、余白部分を上手に使うと、デザイン全体の構成で特定の場所に注目を集めることができます。
文字をぎっしり埋めてしまいがち…。
空いているスペースをもったいない！と文字やイラストなどで埋めてしまわず、思い切って言いたいことを絞るとぐっと洗練されたイメージを与えることができます。
3-4. 内容を詰めすぎてごちゃごちゃしている
余白と同じく、情報の詰め込みすぎには注意が必要です。ポスターやフライヤーでない限り、バナーやSNSのシェア画像など小さな画像には、たくさんの情報を詰め込みすぎないようにしましょう。
情報が多すぎて、目がちらついてしまいます。
「もっといろんなことを一度に伝えたい！」という気持ちは分かりますが、情報が多いと目立つべきところが目立たなくなり、見ている側が疲れてしまう可能性があります。
作業時のプレビュー画面は原寸でないことが多いので、実際の表示サイズを考えながら作りましょう。（ネットショップやSNSに掲載したときに、「文字が小さすぎて見えない」なんてことも…）
また、フォントやスタイルをあまりに多く組み合わせると、情報量が増えてイメージが散らばってしまいます。きちんと読んでほしい文字は「装飾のないシンプルではっきりとした書体」にしましょう。
3-5. 写真の画質が悪く荒い
実際の商品やネットショップ全体のデザインが良くても、写真が悪いと全て台無しです。
解像度が低い画像を使うと、イメージよりも荒さが気になってしまいます。
写真を掲載するのに、SNSやWebサイト上から保存をしたものを使ったことはありませんか？ ネットショップ用だからといって、小さな画像を使うのはNG。
あまりに画質が悪いものを使用していると、ブランドや店舗にもずさんなイメージがついてしまいます。せっかく作るネットショップですから、お客さまに真心を込めて接するのと同じように、愛情を込めてていねいに作りましょう。
3-6. 写真が強すぎて文字が目立っていない
「かっこいい写真を使いたい！」「商品の画像を載せたい！」という気持ちのあまり、写真の印象が強すぎる…なんてことはありませんか？
大きな余白があったり、ぼかしが入っていたりする、背景として文字の邪魔になる部分のほとんどない写真が、テキストを入れる画像にはぴったりです。
あまりにもいろいろなものが写り込んでいる写真を背景に使うと、文字が読みにくく、最悪潰れてしまうこともあります。
もし、バナー用の写真を撮影するのであれば、文字を入れるための十分なスペースがあるかを考えてから撮影してみましょう。
どうしても背景が複雑な写真を使用したい場合は、背景を透過させたり、テキストボックスを半透明にしてみましょう。テキストボックスを半透明にすることで、写真の全体を隠すことなくテキストが配置できます。
文字の下に白地を引くことで読みやすくなりました。
いかがでしたか？デザイン初心者にとって、０から画像を作るのは難しいもの。
しかし、いくつかの基本的なルールさえ分かっていれば、完璧ではなくとも、わかりやすい画像は作れるのです。
4.バナー文言で心をつかむ！効果的な９つのキャッチコピー例
さて、バナーデザインの解説をしてきましたが、効果的なバナーを作るうえで、デザインだけでなく思わず目を引く「キャッチコピー」も必要不可欠です。なのでここではすぐに使えるキャッチコピーの例文をいくつかご紹介します。
4‐1.実績でアピール
「1日で3000個売れた！」
ネットショップでの売上個数はもちろん、実店舗やイベントでの販売実績もアピールポイントになります。行列の写真やお客さまの声などを加えることで説得力もアップ。
「昨年大好評！ 夏物サンダル、早くも新作登場」
シーズン物の商品を売り出すなら、前年の評判をアピールしない手はありません。
昨年買い逃してしまったお客さまやリピート買いを検討しているお客さまには、前年の売上個数やパワーアップしたポイントなどを伝えるとよいでしょう。
「満足率●％」「リピート率●％」
すでに購入した方の評価や、その後の行動が未購入者の後押しになることもあります。ただしアンケート調査結果などの明確な根拠がないまま有利な表記をしてしまうと、景品表示法に抵触してしまうため注意が必要です。
「●●●で紹介されました」
テレビ番組や雑誌、Webメディアなどでの紹介実績を添えることで、説得力はさらに増します。実際の映像・誌面などをサイト上に掲載する場合は権利者の許可が必要となるので注意しましょう。
4-2.限定感でアピール
「本日20時まで緊急開催！」
あえて予告ではなく当日告知という形をとることで、お客さまの焦燥感を煽ることができます。
「20名様限定！ ●●●最新モデル」
大量入荷が難しいなどの理由で販売数量が限られてしまう場合は、それを逆手に取ったキャッチフレーズを設定するのがおすすめ。残り個数が減ってきたら「残り３点」といった文言を都度追加するのもよいでしょう。
「12月生まれの方へ」
同じ月に生まれた人を偶然見つけると少し嬉しくなるように、対象となるお客さまをあえて絞ることで、特別な期待感を高めることができます。同様に「●●県にお住まいの方限定！」などのフレーズも有効です。
4-3.人気度の高さでアピール
「大変お待たせしました！ ●●●取り扱いスタート」
「本日発売開始！ ●●●がついに登場」
ショップにお問い合わせの多かった商品や、競合他店でよく売れている商品は、あなたのショップを訪れる他のお客さまにとっても潜在的ニーズが高いことが予想されます。
もちろん、いずれのキャッチコピーにおいても嘘や大げさな表現はNG。
キャンペーンの方法や期間、また商材によっては表現などにも法的規制がありますので十分注意しましょう。
5.バナー作成におすすめの無料ツールなら「Canva」
「自分で一から作るのは不安…」だったり、「一から自分で制作するのは難しい！」と感じている方は、テンプレートをアレンジして簡単にバナーを作れる、無料のデザイン作成ツール「Canva（キャンバ）」がおすすめです。
おしゃれな素材も豊富にそろっているので（※一部有料素材もあり）、ぜひ活用してみてください。
またCanvaを使ったバナー作成のポイントはCanva公式のこちらの解説記事がおすすめです。
まとめ
今回はネットショップの中でも重要なバナー作成についてのポイントやコツなどをご紹介いたしました。
ぜひ実際にバナーを作成する際の参考にしてくださいね。
▼こちらの関連記事も見られています▼
