バナーのデザインチェックで、ディレクターが重要視しているポイント

こんにちは、ディレクターの遠藤です。2022年にノヴィータに入社し、アドクリエイティブチームにてWeb広告の制作に特化した業務を担当しています。今回は、Webデザイン初心者やこれから学習しようとしているWebディレクター向けに、私が実際に行っているデザインチェックのポイントを紹介します。

私はディレクターとして案件に携わっていますが、デザインやコーディングといった制作自体は未経験です。バナーもLP（ランディングページ）も作ったことがない、いわゆる「ノンデザイナー」です。今回の記事は、アドクリエイティブチームのディレクターとして、Web上に掲載されるバナーのデザインチェックをどのように行っているか、社内のLT大会で発表した内容を元にしています。バナーやLPなどのWeb広告制作以外でも参考にしていただけるよう、できるだけ分かりやすく、平易な表現でまとめています。ディレクター、デザイナー問わず、ぜひ読んでいただけると嬉しいです。

バナー・LP制作のディレクション業務について

バナー・LP制作をはじめとしたWeb広告制作のディレクション業務で、私が行っていることは大きく3つあります。

企画・提案

事前の調査・分析
新規Web広告の訴求提案、検証提案
既存Web広告の改善提案

構成

企画テーマに沿った構成要素の決定
コピーライティング
使用する画像選定
レイアウト検討

品質管理

デザインチェック
広告レギュレーションチェック
HTMLの表示チェック（LP制作時）

構成について

デザインチェックの説明をする前に、構成について補足します。

Web広告の多くは、飛び先であるLP（ランディングページ）に詳しい説明や情報が掲載されています。バナーの広告としての目的は、表示ユーザーに興味を持ってクリックしてもらい、LPに遷移してもらうこととなります。つまり、画像一枚で広告としての目的を達成しなければいけませんが、一枚の画像の中にすべての情報を盛り込むということと同義ではありません。

構成の段階では、興味を持ってもらうために「訴求」と呼ばれる伝えるべき内容を決め、それを軸にして盛り込む内容を決めていきます。バナーの画像サイズは正方形や長方形などさまざまありますが、どれもそれほど大きなサイズではありません。構成は限られたスペースにどのような要素を入れると広告の目的が達成できるかを考え、情報が伝わりやすいよう取捨選択を行ったうえで優先順位をつけ、レイアウトしています。

基本の構成要素は以下の通りです。

メインコピー：最も伝えるべき内容
サブコピー：メインコピーを補足するもの
画像やイラスト
CTA（Call To Action：行動喚起、”詳しくはこちら”などの誘導文言）

メインコピー、サブコピー、CTAといったテキスト要素が同じ粒度で並んでいると伝えたいことがぼやけてしまうので、要素の優先順位は構成段階で整理しておきます。

デザインチェックについて

デザインチェックは品質管理で行う業務です。今回はGDN（Google Display Network）や、YDA（Yahoo Display Ads）をはじめとしたディスプレイ広告に掲載するバナーのデザインチェックについて説明します。

デザインチェックの主なポイント

1．メインコピーが目立っているか

バナーは一枚の画像で情報を伝えるものです。限られたスペースの中で、伝えたい内容が最も伝わりやすくなっているか、目立っているかが重要です。

デザインチェックでは、優先順位が適切に反映されているか確認します。優先順位は要素の大きさや色、視線の流れに沿っているかといった視点で確認し、あわせて訴求、意図が変わるような要素の優先順位変更が起こっていないかを確認しています。

デザインでは色や装飾などの要素が加わることになるので、デザイン時に要素のレイアウトや大きさが変わることで、構成と比較して訴求軸が変わって見えたり優先順位が変わって見えたりするなどの影響が出てしまうことがあります。具体例については後ほどご説明します。

その他、実際に広告が掲載されているイメージ（掲載面に合成したもの）を作成して、配信されたときにどのように見えるかも確認しています。

2．伝えたい内容がぱっと見て分かる「らしさ」があるか

バナーではテキスト情報以外のビジュアル表現も重要な要素です。ユーザーはバナーが視界に入った一瞬で要不要を判断するため、ユーザーにとって興味のある情報なのかを判断してもらうためにも「らしさ」が表現されていることが重要です。

「らしさ」を表現する方法は大きく2つが考えられます。1つ目は「モチーフ」の利用です。例えば、時短を押し出した商品のバナーであれば時計やタイマーなどのモチーフを用いると効果的です。これらのビジュアル表現は構成で指定することは少ないため、デザイナーのアイデアにより効果的なデザインとして制作されます。デザイナーが採用した「モチーフ」が、バナーで伝えたい内容を引き立てているか、適合しているかを判断しています。

もう1つの「らしさ」の表現は「雰囲気」です。「モチーフ」は具象的なイメージを想起させやすいものを指しますが、「雰囲気」は属している国や文化、季節や環境により想起される色やフォルムのイメージを指します。例えば日本では、緑は自然・お茶・虫などを想起させます。また、業界によってもそれぞれの「らしさ」があり、化粧品業界と不動産業界ではデザイン表現が異なるのは明らかです。

商品を想起させる「モチーフ」や「雰囲気」が表現されているバナーは、パッと一目で意図や意味が伝わるものになっています。「らしさ」については、経験値が物を言う部分もあり、デザイン経験のない私は上長やデザイナーの意見を参考にしながら判断しています。

優先順位が変わってしまう場合の具体例

具体例を挙げて説明します。

通販化粧品の場合

目的：購買数の向上
訴求軸：人気訴求
構成要素

メインコピー：購入本数約10万本突破！
サブコピー：今なら30％オフで始められる！
画像：商品画像
CTA：お試しはこちら

優先順位

メインコピー > 画像 > CTA > サブコピー

上記の内容で作成したバナーの構成案が以下です。

一方、優先順位を入れ替えた場合は以下となります。

メインコピーとサブコピーの優先順位が変わっただけでも訴求が変わってしまうのがわかると思います。先にも記載した通り、構成では要素の大きさが優先順位として捉えられますが、デザインは色や装飾などでも優先順位が変わって見えることがあります。このような訴求のズレが発生していないか、デザインチェックでは意識して確認しています。

デザインチェックのためにやっていること

バナーにとってメインコピー＝伝えるべき内容（訴求）は最も重要なものです。広告目的に対してどのような訴求を行うか、訴求によってどんな表現が用いられているか、様々な事例を見ておくことが重要と考えています。

アドクリエイティブチームでは様々な広告を調査してまとめて訴求軸作成の参考にしたり、最新情報をアップデートしたりしています。こうした調査を行ったおかげで様々な訴求の広告に触れ、要素の優先順位が変わることで別の訴求に変わってしまう可能性があることを知りました。データを集めて精査するのは大変ですが、やっていて損はないと思います。

バナーは伝えたい情報を一枚で齟齬なく見せる

バナーは広告である以上、伝えたい情報が画像一枚で余すことなく伝わるようになっていなければなりません。そのうえで、表示ユーザーに行動して欲しい「クリック」を喚起する必要があります。デザインチェックでは、単なる表現テクニックだけでなく、情報の伝わり方もデザインとして捉えてチェックしています。バナーの遷移先であるLPでは、購入などの行動を喚起したい場合が多いため、バナー単体だけで見るのではなく、購入までの全体の流れを踏まえてバナーを設計していきます。

ディスプレイ広告は、Webサイトだけでなく、SNSやアプリにも表示されるため、ユーザー接点の多い広告です。いつどのような状態でバナーを見るかわからない中、どのユーザーにも伝えたいメッセージがしっかり伝わるようになっているかを確認しなければなりません。

バナーのチェックで大切なことはここで述べたこと以外にも様々ありますし、広告の仕様変更によりチェックするべき内容も変わります。そのバナーを閲覧しているユーザーが置かれている環境も様々ですし、トレンドも変わっていきます。その中で最適な提案・制作を行うために、先行事例の研究や、いち消費者として広告に多数触れるなど、努力をしていきたいと考えています。