判断に必要な情報はひと通り入っているのに、なぜかバナーから次の行動につながらない。そんな手応えのなさを感じたことはないでしょうか。
バナーデザインで見直すべきなのは情報の量ではなく、使う人が何から順に確かめるのか、その順番に情報が並んでいるかです。
この記事では、AIが生成した少人数向けレンタルスペースのSNS広告バナーを題材に、用途・場所・価格・設備・予約をどう並べ替えたのかを順に解説します。
解説するのは、デイトラのWebデザイナーであるトムです。読み終えるころには、情報は揃っているのに判断が進まないバナーを、自分で並べ替えられるようになります。
・情報が揃っているのに伝わらないバナーで起きていること
・「大事な順」ではなく「決める順」で情報を並べる考え方
・用途・場所・価格・設備・予約を並べ替える具体的な手順
・ワイヤーフレームとBefore/Afterで見る、並べ替え前後の変化
公式LINEでは、デイトラ受講に関する個別のお悩み相談も承っております！
「デイトラは積極的に情報を開示し、ミスマッチをなくす」方針を取っているので、あなたの状況に合わせて、中立の立場から回答いたします。
今回のお題は少人数向けレンタルスペースのSNS広告バナー
明日の打ち合わせ場所を探しているのに、欲しい情報がしっかり読まないと明確に伝わらない。
これだけで、別の候補へ移る要因になります。
まずはこちらのバナーを、4秒だけ見てみてください。
今回のAIで生成したバナーには、判断に必要な情報がほぼ入っています。
判断に必要な情報は揃っています。
でも、予約まで迷わず情報が得られる状態には、実はなっていません。
今回は、使う人がどんな順番で確かめるのかを基準に、どう情報を整理し組み直していくのかを解説していきます。
またどこを変えたのか、そもそもなぜ変える必要があるのかについても、要点ごとにその理由を解説していきます。
題材は、少人数の打ち合わせ・勉強会・ワークショップに使えるレンタルスペースのSNS広告です。
画像生成AIへ伝えたのは、次の要件です。
- 平日30%オフ
- 駅から徒歩3分
- 1時間1,500円から使用できること
- 空き状況を確認できること
- 清潔で明るい印象
具体的な文言、写真、配色、レイアウト、情報の強弱はAIに任せています。
また、添削用の欠点はあえて指定せず、最初に生成された1枚をそのまま使用しています。
Beforeバナーで料金より先に見せるべき情報はどれか【3択クイズ】
ここで問題です。
このレンタルスペースのバナーで、料金よりも先に見せるべき情報はどれでしょうか。
- A. 平日30%OFF
- B. 駅から徒歩3分
- C. Wi-Fi完備
3秒で考えてみてください。必要なら、ここで動画を止めても大丈夫です。
正解はB. 駅から徒歩3分です。
「Aの割引きじゃないの？」と思った方も多いのではないでしょうか。
30%オフもWi-Fiも、判断に必要な情報ではあります。
なぜ「駅から徒歩3分」が料金より先なのか
まず前提として、レンタルスペースはオンラインのサービスではなく、実際にその場所へ行って利用する施設です。
安くても、自分の家や会社からすごく遠かったり、自分が利用するイメージができなければ、それだけで候補からは外れてしまいます。
料金を見る前に、そもそも自分が行ける場所かどうかを判断できるようにする必要があります。
30%オフも大事ではあります。
ただし利用者がその情報を確認したいタイミングは、「ここは行けるんだ。じゃあいくらなのかな」と、行けるかどうかを判断してからの順番になります。
ここが今回の判断ポイントです。
Call To Action（コール・トゥ・アクション）の略で、見た人に取ってほしい行動を促す要素のことです。バナーでは「今すぐ空き状況をチェック！」のようなボタンがこれにあたります。
今回のポイントは「大事な順」より「決める順」
「大事な順」より、「決める順」。
使う人が次に何を知りたいか。その順番に合わせて情報の優先順位を、決めて並べ替える。
今回のキーワードは「大事な順」より「決める順」です。
ここからは、使う人が次に何を知りたいのか、その順番に合わせて情報の優先順位を決めて並べ替えていきます。
まず既存バナーのいい部分は活かす
情報を並べ直す前に、既存バナーのいい部分は活かしていきます。
今回そのまま使えそうだと判断したのは、次の4点です。
- 清潔で明るい写真
- カジュアルで使いやすい雰囲気
- 判断に必要な情報が揃っていること
- 色数が増えすぎていないこと（配色はOK）
配色なんかは全体的に見ても、そんなに悪くありません。
今回はこの良さを活かしたまま、情報の順番を整えていきます。
判断に必要な情報を6つのグループに分ける
今回は、利用を検討するユーザーが判断するために必要な情報を、6つのグループに分けて並び替えました。
- 用途：打ち合わせ・勉強会であるということ
- サービス：レンタルスペースであるということ
- 場所：どこにあるのか
- 価格：いくらで使えるのか
- 設備：何が使えるのか
- 予約：どう予約するのか
この順番です。
ここからは、それぞれの項目ごとに解説をしていきます。
バナーデザインの情報整理①用途はどんな場所かが伝わる言葉にする
まずは用途です。少し小さいので拡大して見ていきます。
この一番上にある文言は「少人数の打ち合わせ・勉強会・ワークショップにぴったり！」と記載されています。
ここで必要なのは褒め言葉ではなくて、どんな用途に使える場所なのかというところです。
少し文字も大きくしていきたいので軽微な調整ではありますが、Beforeで「ぴったり！」と入っていたところをカットして、「少人数の打ち合わせ・勉強会・ワークショップに！」の文言に調整していきます。
ブラッシュアップする際は、この後に「レンタルスペース」が続くような形で大きく見せて、最初の2つを確認できるようにする方向で調整をしていきます。
バナーデザインの情報整理②場所は駅名まで具体化する
次に場所です。クイズのBの答えだった場所ですね。
Beforeにも「駅から徒歩3分」とはありますが、駅名がなくて「どこの駅なんだよ」という感じですよね。
これでは30%オフや料金より弱く見えてしまいます。
アフターでは、仮の場所として「梅田駅 徒歩3分」へ具体化をしました。
自分が行ける場所かどうか、会議や打ち合わせの候補の会場に適切か、その場で判断できるようにしています。
こうした情報の漏れも、バナーではよく起こり得ることです。
必要な文言や情報の抜けがないかという点もしっかり書き出して読み、情報を調整していく必要があります。
※今回の「梅田駅」は架空案件用の仮設定です。実案件では必ず確認してください。
バナーデザインの情報整理③価格は支払う金額を主役にする
次は価格です。
Beforeでは「1時間1,500円から」と「平日30%オフ」が離れてしまっていますね。
アフターでは、通常料金1,500円からと、実際に支払う1,050円からを1つのまとまりに見せて、30%オフは補助へ役割を下げています。
このグループの主役は割引率ではなく、この施設は実際に何時間いくらで使えるのかというところです。
また、割引の情報の根拠が必要だったり、注釈などが必要になる場合もあります。
それも併記する必要性があるので、実際の案件では注意していきましょう。
税込表記と料金条件も、実案件では必ず確認してください。
バナーデザインの情報整理④設備は抽象的な説明を使えるメリットに変える
次に設備です。Beforeには次の4つが記載されています。
- Wi-Fi完備：快適に使える高速回線
- 備品充実：ホワイトボードなど無料で利用OK
- 少人数に最適：2名から8名程度にぴったりの広さ
- カンタン予約：会員登録なしですぐ予約OK
ただし、これはすごく細かいですよね。
実際のバナーだと横並びで4つ書いてあるので、遠目に見るとほとんど文字は読めなくなってしまいます。
そこで、文言を削る必要がありますね。
よってアフターでは、次の3項目に整理しました。
| 整理後の項目 | 受け取ってもらいたい印象 |
|---|---|
| 高速Wi-Fi完備 | 仕事やオンライン会議で問題なく使えそう！ |
| 会員登録不要 | 会員登録せず使えるなら、急な利用も楽そう |
| ホワイトボード無料 | 有料じゃなくて無料で使えるのはありがたい |
「高速Wi-Fi完備」で、仕事やオンラインで問題なく使えそうという印象が伝わります。
「会員登録不要」なら、会員登録せずに使えるので急な利用も楽にできそうですね。
「ホワイトボード無料」については、コワーキングスペースを使ったことのある人なら分かると思うのですが、ホワイトボードは結構有料のところが多いんですね。
なので無料で使えるのは結構ありがたいなと受け取ってもらえる、1つの利用するフックになります。
そして、あと1つ「少人数に最適」という文言も入っていましたが、これは用途の説明と情報が重複していて、重要度がこの中の情報で言うと低いのでカットしていきます。
バナーデザインの情報整理⑤予約は次の行動を一つに絞る
最後は予約です。次の行動を1つに絞るというところですね。
Beforeの部分を少し拡大したものを読んでいくと、次のようになっています。
- 空き状況はすぐ確認！
- まずは空き状況をチェック！
- 空き状況の確認へ
ここもかなり冗長になっていて、同じ情報が重複してしまっている状態になっています。
行動を促すボタンだったり訴求は1つで十分です。
ここは「今すぐ空き状況をチェック！」にまとめました。
次に何をすればいいかは、一度で分かれば十分ですね。
整理した情報でワイヤーフレームを組む
これらを調整したワイヤーフレームがこちらになります。
色や写真を入れる前の、デザインの下書きですね。
上から順番に1度読んでいきます。
- 少人数の打ち合わせ・勉強会・ワークショップに！
- レンタルスペース
- 梅田駅 徒歩3分
- 平日のご利用が1時間／通常料金1,500円（税込）→ 1,050円（税込）〜／30%OFF
- 高速Wi-Fi完備／ホワイトボード無料／会員登録不要
- 今すぐ空き状況をチェック！
調整すると、見栄え以上に情報の伝わり方が大きく変わったのが分かるのではないでしょうか。
こちらが既存のバナーと比較したものになります。
使う人が迷わず決めるための順番を整理することで、情報の伝わりやすさを改善することができました。
色や写真を入れる前の、情報の配置だけを決めた下書きのことです。装飾で印象をごまかせない状態なので、情報の順番や役割が整理できているかを確かめるのに向いています。
完成形と比較する
そこへ写真・配色・アイコンを加えた完成形がこちらになります。
情報の並びは次のとおりです。
- 最初に用途とレンタルスペース
- その次に、クイズで選んだ場所「梅田駅 徒歩3分」をアクセントの形で入れた
- その後に「平日のご利用が1時間」と条件を示す
- 通常料金1,500円と、実際に支払う金額1,050円からを1つのまとまりで見せる
- 下に設備3項目（高速Wi-Fi・ホワイトボード無料・会員登録不要）
- 一番下に空き状況チェック
30%オフは、支払う金額よりも少しコントラストを弱くしました。
写真はBeforeの清潔で明るい雰囲気の画像をそのまま残して、「梅田駅 徒歩3分」の丸い表示が、この机や椅子とぶつからない位置に調整をしています。
こちらがビフォーアフターのバナーを比較したものになります。
必要な情報を大きく変えたわけではありません。
使う人が確認する順番に合わせて、場所 → 支払う金額 → 具体的な設備 → 予約へと流れる順に並べ替えたことが、既存のAIバナーとの大きな違いです。
まとめ：バナーデザインは「大事な順」より「決める順」
最後に、今日持ち帰ってほしいことをおさらいします。
情報は、作る側が大事だと思う順番・事業者目線ではなく、実際に利用するユーザーの目線で整理するというところです。
実際に利用するユーザーが判断に必要な順番に並べ替えるということを、ぜひ意識してみてください。
自分のバナーができたら、次に何を知りたいかを上から1つずつ声に出して読んでみてください。
AIは必要な情報を1枚に納めることはできます。
その先の、相手が決める順番を作るのはデザイナーの仕事です。
バナーデザインの情報の並べ替えに関するよくある質問
Q. 情報は揃っているのに伝わらないバナーは、どこから直せばいいですか？
情報の並び順からです。動画の例では、情報を足したり減らしたりするのではなく、使う人が確認する順番に合わせて場所・価格・設備・予約を並べ替えることで伝わり方を改善しています。
Q. 「大事な順」と「決める順」は何が違うのですか？
「大事な順」は作り手や事業者が大事だと思う順番、「決める順」は実際に利用するユーザーが判断に必要な順番です。動画では、割引率より先に「行ける場所かどうか」を見せるべきだと解説しています。
Q. 割引価格はどう見せるのが親切ですか？
割引率ではなく、支払う金額を主役にします。動画では離れていた「1時間1,500円から」と「平日30%オフ」を1つのまとまりにし、実際に支払う1,050円からまで見せて、見る人に計算を任せない形へ変えています。
Q. 設備の説明が多すぎるときはどう絞ればいいですか？
抽象的な説明を、使う人が受け取れるメリットに言い換えたうえで項目を減らします。動画では4項目を「高速Wi-Fi完備」「会員登録不要」「ホワイトボード無料」の3項目に絞り、用途の説明と重複する「少人数に最適」をカットしています。
Q. 実務で場所や価格を扱うときに気をつけることはありますか？
クライアントに必ず確認することです。駅名や場所は実店舗の場合ほとんど決まっているため勝手に決めず、割引の根拠や注釈、税込表記と料金条件も実案件では確認したうえで併記します。
バナーデザインの判断力を身につけるならデイトラ「Webデザインコース」
本記事で解説したバナーデザインの情報の並べ替えの考え方は、独学でも押さえることはできます。
ただし、実務で通用するレベルまで体系的に習得するには、現役で活躍するメンターから添削を受けながら学べる環境が近道です。
デイトラの「Webデザインコース」は、実務レベルを想定したカリキュラムと、現役プロによる質問対応が特徴のオンラインスクールです。
広告費を最小限に抑え、口コミと品質で支持を得てきたからこそ、業界の数分の一という低価格で学べます。
今回のような「使う人が何から順に決めるのか」という判断の作り方を、手を動かしながら学びたい方は、ぜひ一度カリキュラムをチェックしてみてください。
なお、バナー添削シリーズでは他のテーマも解説しています。合わせて読んでみてください。
「自分に合うか不安…」という方は公式LINEへ
「独学とスクール、どちらが自分に合っているか分からない」
「複数のコースのうち、どれを選ぶべきか相談したい」
そんな方は、デイトラ公式LINEに登録してみてください。
自分に合ったコースの診断や、無料の学習動画などの特典もプレゼント中です。
無理な勧誘は一切ありませんので、まずは情報収集として気軽に登録してみてくださいね。
トム（@yuhei_design）
デイトラのWebデザイナーです。印刷会社に7年務めたのち、2021年に独立しました。現在はLP制作やUIデザインに従事しながら、デザイン×生成AIの実践的な活用方法を発信しています。
