「なぜか素人っぽい」を卒業する｜プロのバナーから学ぶ5つの見方

Canvaを使って、AIで作った画像を配置して、文字を入れてみる。

「よし、とりあえず1枚できた」

最初はこれだけでも結構うれしいものです。

でも、完成したバナーをスマホで見てみると、

「……なんか素人っぽい」

と思うことがあります。

写真もそれなりにきれい。
文字も間違っていない。
色も変ではない。

それなのに、プロが作ったバナーと並べてみると、なぜか違う。

私自身も、バナーを作り始めた頃は、この「なんか違う」がよく分かりませんでした。

どこが悪いのか説明できないので、とりあえず文字を動かしてみたり、色を変えてみたり、装飾を足してみたり。

それで良くなることもありますが、逆にごちゃごちゃしてしまうこともあります。

そこで意識するようになったのが、

「良いデザインを見て終わりにしない」

ことでした。

「なぜ、このバナーは見やすいんだろう？」

「なぜ、最初にこの写真が目に入ったんだろう？」

「なぜ、ここには何も置いていないんだろう？」

こうやって見るようにすると、少しずつデザインの見え方が変わってきます。

この記事では、私がバナーを分析するときに意識している5つの見方を紹介します。

この記事はこんな人向けです

• バナーを作ってみたけれど、なんとなく素人っぽく見える

• プロのバナーを見ても、何を参考にすればいいか分からない

• Canvaの操作はできるけれど、レイアウトで迷う

• 「センスがないから上達しない」と感じている

• 自分のバナーを自分で修正できるようになりたい

まだバナーを1枚も作ったことがない方は、まずこちらの記事からどうぞ。

この記事では、実際に1枚作ってみたあとに、

「じゃあ、どうやって改善すればいいの？」

という部分を扱います。

なぜ良いバナーを「分析」するのか？

デザインを勉強するとき、最初は、

「このフォントがおしゃれ」

「この色の組み合わせがきれい」

「この装飾を使ってみよう」

というところに目が行きやすいと思います。

もちろん、それも大切です。

ただ、私が実際にバナーを作っていて感じたのは、

「なぜそうなっているのか」を考えるほうが、自分の制作に活かしやすい

ということでした。

例えば、あるバナーを見て、

「写真がおしゃれだな」

で終わるのではなく、

「写真を大きくしているから、最初にここへ目が行くのかな？」

と考えてみる。

あるいは、

「なんでここには何も置いてないんだろう？」

と考えてみる。

すると、単なる「おしゃれなデザイン」が、少しずつ

「こういう意図で作られているのか」

に変わってきます。

私も最初は、バナーを見ても「おしゃれ」「きれい」で終わることが多かったです。

でも何枚も見ながら考えているうちに、

以前よりも「ここが気になる」「ここを直せそう」と思える場面が増えてきました。

完璧な答えを当てるためではなく、

自分のバナーを見直す基準を増やすために、私はこの5つのポイントを使っています。

良いバナーを見るときの5つのポイント

初心者のうちは、いきなり細かい部分を見るよりも、次の順番で見ると分かりやすいです。

【バナー観察シート】

1. 目的と雰囲気
誰向けで、何を伝えるバナーなのか？

2. 主役
最初に目に入るものは何か？

3. 文字の優先順位
どの文字から読ませようとしているか？

4. 余白と配置
窮屈になっている場所はないか？

5. 次の行動
見た人に何をしてほしいのか？

では、ひとつずつ見ていきます。

1. 誰向け・何のためのバナーなのかを見る

まず見るのは、細かいデザインではありません。

「このバナーは誰に何を伝えたいんだろう？」

というところです。

例えば、高価格帯のスキンケア商品なら、

• 落ち着いた色

• 上品な写真

• 余白の多いレイアウト

• 明朝系の文字

などが使われているかもしれません。

一方で、子ども向けの商品なら、

• 明るい色

• 大きな文字

• イラスト

• 楽しい雰囲気

になるかもしれません。

ここで大事なのは、

「30代だからこの色」

というように、年齢だけで決めつけないことです。

商品の価格帯やブランドの雰囲気、伝えたい価値によってもデザインは変わります。

見るポイント

• このバナーは誰に向けている？

• 何の商品・サービス？

• 高級、親しみ、楽しさ、安心感など、どんな印象を出したい？

• 写真や色、フォントはその雰囲気と合っている？

まずはこのくらいで十分です。

2. 最初に目に入るものは何か？

次に見るのが、**「最初にどこを見たか」**です。

バナーを開いた瞬間に、

「写真を見た」

「人物の顔を見た」

「大きな文字を見た」

など、人によって最初に目に入るものがあります。

ここで確認したいのは、

「一番見せたいものが、本当に最初に目に入っているか？」

です。

例えば新商品のバナーなら、商品を見せたいかもしれません。

キャンペーンなら、「50％OFF」の文字が主役かもしれません。

採用広告なら、人物の表情が重要になることもあります。

つまり、主役はバナーの目的によって変わります。

全部を目立たせようとすると、逆に何も目立たなくなることがあります。

これは自分でバナーを作るときにも、かなり使える考え方です。

3. 文字の「読む順番」を見る

次は文字です。

バナーには、

• メインコピー

• サブコピー

• 商品名

• 補足情報

• CTA

など、複数の文字が入ることがあります。

全部同じ大きさ・同じ太さだと、どこから読めばいいのか分かりません。

そこで見るのが、文字の優先順位です。

例えば、

メインコピー
↓
サブコピー
↓
CTA

という順番で読ませたいなら、その順番が見た目にも分かるようになっているかを確認します。

ここで見るポイント

• 一番大きい文字は何か？

• 次に目に入る文字は？

• 補足情報は主張しすぎていないか？

• CTAは見つけやすいか？

ただし、必ずこの順番でなければいけないわけではありません。

デザインによっては、商品写真を先に見せることもあります。

大切なのは、

「自分が見てほしい順番になっているか」

です。

4. 余白を見る

ここは、私自身もバナーを作るようになってから意識が変わった部分です。

最初は、空いている場所を見ると、

「ここ、何か入れたほうがいいかな？」

と考えがちでした。

文字を追加したり、図形を入れたり、装飾を足したり。

でも、あとから見返すと、その追加したものによって逆に窮屈になっていることがあります。

最近は、

「何も置かないことにも意味がある」

と考えるようになりました。

余白があることで、

• 商品が目立つ

• 文字が読みやすくなる

• 高級感が出る

• 全体が落ち着いて見える

といった効果があります。

見るポイント

• 画面の端に文字が近すぎないか

• 文字同士が詰まっていないか

• 商品と文字がぶつかっていないか

• その余白のおかげで、商品やコピーが目立っているか？

• 文字を置くための余白になっているか？

• CTAの周りに余白があり、押す場所が分かりやすいか？

• 余白が大きすぎて、情報が離れすぎていないか？

特に、

「この空白はなぜあるんだろう？」

と考えてみるのがおすすめです。

5. 最後に「次に何をするか」を見る

最後はCTAです。

CTAとは、

「詳細を見る」「購入する」「申し込む」など、見た人に次の行動を促す要素

です。

バナーは、ただ見てもらえば終わりとは限りません。

商品ページを見てほしいのか。

申し込んでほしいのか。

購入してほしいのか。

目的によって、CTAの内容も変わります。

見るポイント

• CTAがどこにあるか

• 背景と同化していないか

• 文字が読みやすいか

• 「何をすればいいか」が分かるか

• メインの情報を邪魔していないか

CTAは「右下に置けば正解」というわけではありません。

読者がバナーの内容を理解したあとに、自然と見つけられる位置にあるか

を見ます。

【実践】自分のバナーを5つの視点で見直してみる

ここからは、1本目の記事で作った「秋のスキンケアバナー」を例にしてみます。

今回は、最初に作った状態と、あとから調整した状態を比べてみます。

Before：最初に作った状態

最初に見直してみると、気になったのはこの3つでした。

① サブコピーが背景に負けている

縦書きにしたサブコピーが背景の暗い部分と重なっていて、少し読みにくくなっています。

文字そのものを変える必要はありません。

背景との重なり方を変えるだけで改善できそうです。

② CTAが端に近すぎる

「詳細を見る」のボタンが右下ギリギリに寄っていました。

配置したときはそれほど気にならなかったのですが、全体を見てみると少し窮屈です。

③ メインコピーの存在感が弱い

右側には比較的広い余白があります。

その割にメインコピーが少し小さく、バナーを見たときに何を伝えたいのかが弱く感じました。

After：少し調整してみる

そこで、今回は大きく作り直すのではなく、3か所だけ調整しました。

① サブコピーを移動

暗い背景と重ならない位置へ移動しました。

これだけでも文字がかなり読みやすくなります。

② CTAを少し内側へ

画面の端から少し離しました。

ボタン自体を大きく変えなくても、周囲に余白ができることで窮屈さが減りました。

③ メインコピーの存在感を調整

余白とのバランスを見ながら、メインコピーを少し大きくしました。

結果として、

商品、メインコピー、サブコピー、CTAの役割が整理され、どこを見ればよいかが以前より分かりやすくなりました。

現象原因修正サブコピーが読みにくい暗い背景と重なり、明暗差が弱い明るい背景側へ移動するCTAが窮屈に見える画面端との距離が近い端から少し内側へ寄せる何を伝えたいか弱いメインコピーが主役になっていない文字サイズ・太さ・位置を調整する

ここで伝えたいこと

今回やったことは、特別なテクニックではありません。

画像を加工したわけでもありません。

派手な装飾を追加したわけでもありません。

「どこが気になるのか」を見つけて、少しずつ位置や大きさを調整しただけです。

ここが、今回の記事で一番伝えたいところです。

バナーを作ったあと、

「なんか微妙だな……」

で終わらせるのではなく、

「文字が背景に負けているのかな？」

「端に寄りすぎているのかな？」

「主役が分からなくなっているのかな？」

と原因を探してみる。

それだけでも、修正の方向がかなり見つけやすくなります。

保存用｜バナーを見るときの5つのチェックリスト

最後に、今回の内容をまとめます。

バナーを見たり、自分のデザインを見直したりするときは、これだけ確認してみてください。

1. 誰向け・何の内容か、一目で分かる？

2. 最初に目に入る「主役」が決まっている？

3. 文字に読む順番がついている？

4. 文字や商品が窮屈になっていない？

5. 見たあとに「次に何をすればいいか」が分かる？

全部できている必要はありません。

まずは1枚のバナーを見て、この5つについて自分なりに考えてみるだけでも十分です。

デザインは「センス」だけではない

バナーを作り始めた頃は、

「センスがある人じゃないと、こういうデザインは作れないのかな」

と思うこともあると思います。

私もそうでした。

でも、実際に作って、失敗して、他のバナーと見比べていくと、少しずつ見方が変わってきます。

「なんとなくおしゃれ」

から、

「ここを主役にしているから目に入るのか」

「この余白があるから商品が目立つのか」

「この文字は補足だから小さくしているのか」

というふうに、見る理由が少しずつ分かるようになる。

そして、それが自分で作るときにも使えるようになります。

私自身、まだ勉強中です。

だからこそ、難しいテクニックを覚えることよりも、まずは普段見ているバナーを少し違った角度から見ることを意識しています。

もし次にバナーを見かけたら、

「最初にどこを見た？」

と考えてみてください。

そこから始めるだけでも、今までとは少し違って見えてくるはずです。