バナーのデザインのコツは？文字を詰めると読まれない

バナーは、LINEの配信・Instagramの投稿・LPやホームページの中など、いろいろな場所で使います。どこで使っても、見る人が目を止めるのはほんの1〜2秒です。

バナーは、情報を詰め込むほど読まれなくなります。伝えることを1つに絞るのが、いちばん効くデザインのコツです。

バナーのデザインは「スマホで小さく」が前提

LINEのトーク画面やInstagramのフィードでは、バナーはスマホの画面の幅いっぱい、またはそれより小さく表示されます。パソコンの大きな画面で作っていると、ここを見落としがちです。

作ったら、スマホに送って、実際の大きさで見るのがいちばん確実です。パソコンでは読めた文字も、スマホでは小さすぎて読めないことがよくあります。

文字の量は、見出し1つと補足1つまで

バナーに入れる文字は、次の2つで十分です。

• 見出し：何の話か（例：「11月の空き日のご案内」）
• 補足：見る人にとっての得（例：「平日の夜に3枠あります」）

日付・料金・条件・注意書きなどを全部入れたくなりますが、細かい情報は、配信の本文やリンク先に書けば読んでもらえます。バナーの役目は、その続きを見てもらうことです。

文字の大きさと太さの決め方

• 見出しは、いちばん大きく太く：画面の横幅の半分以上を使うくらいでちょうどよい
• 補足は、見出しの半分くらいの大きさ
• 細い書体や、飾りの多い書体は避ける：小さく表示されると、つぶれて読めない

大きさに差をつけると、どこから読めばいいかが一目で分かります。全部の文字が同じ大きさだと、目が迷います。

バナーの色は3色まで

色を増やすほど、まとまりがなくなります。背景の色・文字の色・目立たせたい1か所の色の3つに絞ると、すっきりします。

文字と背景は、はっきり明るさの違う組み合わせにします。薄い色の背景に薄い色の文字は、スマホの画面では読みにくくなります。写真の上に文字を載せるときは、写真を少し暗くするか、文字の下に帯を敷きます。

お店やサービスの色を決めておくと、毎回迷わずに済みます。決め方はブランドカラーの決め方にまとめました。

ボタンと配置で、次の行動を決める

押してほしいバナーなら、「予約する」「詳しく見る」のようなボタンの形を入れると、押せることが伝わります。ボタンは1つだけにします。

配置は、左上から右下へと目が動く順番に合わせると自然です。見出しを上、補足を真ん中、ボタンを下に置くのが基本の形です。

作ったあとに確かめる3つの点

1. スマホで見て、1秒で何の話か分かるか
2. 文字が小さすぎないか（いちばん小さい文字が読めるか）
3. 押したあとに行く先が、バナーの内容と合っているか

3つ目は見落としやすい点です。バナーで「11月の空き日」と書いたのに、押した先がトップページだと、見る人は迷ってしまいます。

業種ごとの見せ方を見比べたいときは、AiCmoデザインの見本も参考にしてください。リッチメニュー・LP・ホームページの見本を、業種別に並べています。

このやり方が向いていない場合

• 商品の細かい仕様を比べてもらうための画像（表や一覧にしたほうが伝わります）
• ブランドの世界観を見せることが目的の画像（文字を入れないほうがよい場合もあります）

よくある質問

まとめ｜一瞬で伝わる形にする