思わずクリックしたくなる バナーデザインのきほん

ありそうでなかった! バナーデザインの入門書がついに発売。バナーは情報量の多い Web 上に掲載されるので「パッと一目で情報を伝える」必要があります。なので、目に留めてもらう工夫が必須! この本では「パッと見て伝わるバナーデザイン」を作ることを目的とし、8 つの基本と 6 つのカテゴリーに分けた工夫やテクニックをご紹介します。基本も応用もしっかり解説しているので、デザイン初心者の方でもこの本を読めば、伝わるバナーが作れること間違いなしです!

Web 広告や記事のアイキャッチに使われるバナーは、限られた面積の中で一目で内容を伝え、しかもクリックしてもらう必要がある、独特の条件を背負ったデザインです。『思わずクリックしたくなる バナーデザインのきほん』 (カトウヒカル 著、インプレス、2022 年 2 月刊) は、そのバナーに的を絞った入門書で、版元は「パッと見て伝わるバナーデザイン」を作ることを目的に、「8 つの基本と 6 つのカテゴリー」に分けた工夫やテクニックを紹介する本だと説明しています。著者のカトウヒカルは、書店掲載の書誌 (出版社提供) の著者紹介によれば、刊行時点で 1984 年生まれ、2012 年より Web デザイナーとして活動し、kanvas (カンバス) という屋号で企業のホームページ制作を行い、それまでに 100 サイト以上の制作に関わって半数はデザインから HTML/CSS コーディング、CMS の組込までワンストップで対応、2020 年 2 月からは Web デザインの授業を視聴できるサービス「Web デザイン 1on1 レッスンチャンネル」を主催し、Twitter でバナーデザインの Tips を発信していた人物です。判型は版元登録で B5 変型判です。

7 つの章の構成、伝わるバナーの基本からあしらいと演出まで

書店掲載の目次では、1「伝わるバナーってどう作るの?」から 7「あしらいと演出で心惹かれるデザインに」まで 7 つの章が並びます。1 が総論で、2「小さくてもわかりやすく! レイアウトのコツ」、3「パッと伝わる文字の見せ方」、4「全く違う情報をわかりやすく伝えるグルーピング術」、5「人の顔や視線を使って目を引くデザインに」、6「イマイチな写真をよく見せる補正し加工」、7 の六つの切り口が続き、版元紹介文の「6 つのカテゴリー」と数の上で一致します。書店掲載の内容説明は「小さなサイズのデザインの攻略法、全部教えます」「広告・アイキャッチなどに、今日から使えるテクニック収録」と要約しており、レイアウト、文字、グルーピング、顔と視線、写真、あしらいという順に、バナーを組み立てる要素を一つずつ扱う章立てです。

小さな面積で一目で伝える、バナー特有の制約という技術背景

版元の紹介文が指摘するとおり、バナーは情報量の多い Web 上に掲載されるため「パッと一目で情報を伝える」必要があります。ポスターや紙面と違って、見る人はバナーを読むつもりで画面を開いていません。記事や検索結果を追う視線の途中で、小さな面積が一瞬だけ視界に入るのがバナーの置かれる状況で、そこで伝えられる情報はごく少なく、どの要素を最初に見せ、どれを削るかという優先順位の決定がデザインの大半を占めます。成果はクリック率という数字で評価され、複数の案を並べて比較する A/B テスト の対象になりやすい素材でもあるため、感覚だけでなく、なぜその配置だと目に留まるのかを説明できる基本が求められます。この制約下で判断基準を先に揃えることが、基本と応用を分けて学ぶ意味です。

レイアウト / 文字 / グルーピング / 顔と視線、目次が示す優先順位の考え方

目次の並びは、そのままバナーの情報設計の順序として読めます。レイアウトのコツと文字の見せ方は、小さな面積で可読性を確保する土台です。グルーピング術は、価格や期間、商品名、行動を促す文言のように性質の違う情報を、近づける / 離す / そろえるといった操作でひとまとまりに見せる技術で、要素が多いバナーほど効きます。人の顔や視線を使う章は、見る人の注意が人物の顔と、その視線の向く先へ引かれる性質を利用する考え方で、写真の補正と加工の章とあわせて、素材の質が伝わり方を左右する部分を扱います。最後のあしらいと演出は、ここまでで骨格ができたバナーに惹きつける要素を加える段階で、装飾は骨格の後という順序が章立てに表れています。

デザイン初心者と兼任の Web 制作者に向く前提、向かない使い方

版元は「デザイン初心者の方でも」読める本だと明記しており、デザインの体系的な教育を受けていない人が最初に手に取る前提で書かれています。SNS 運用や EC サイトの担当としてバナーを自作することになった人、普段はコーディング側だがバナー制作も任される Web 制作者、Web デザインの独学を始めたばかりの人には、7 つの章がそのままチェックリストとして働きます。一方で、本書はバナーという一点に絞った本で、公開されている目次には配色やツール操作を主題にした章はありません。Web サイト全体の設計、配色理論、Figma や Photoshop の操作を体系的に学ぶには別の本が必要で、そうした土台を求めるなら Web デザイン本ガイド で挙げている入門書を先に置くほうが効率的です。また刊行は 2022 年で、扱われる考え方は面積と視認性の原則に根ざしているため古びにくい一方、掲載媒体の仕様や流行の表現は変わるので、実際の入稿サイズや規約は各媒体の要件で確認する前提で読む本です。

バナーを頼まれるたびに感覚で作って感覚で直すことを繰り返している人にとって、小さな面積で何を最初に見せるかという判断基準を持てることが、この本の具体的なペイオフです。一枚あたりの制作時間が短くなり、修正依頼に理由を添えて応えられるようになる場面を想像できるなら、投じた金額の回収は早い一冊です。