オンラインホワイトボードのLPへリンクするバナーを作成しよう（前編）

1.お題を確認しよう

「オンラインホワイトボード申し込みにつながるランディングページ」のバナーを作成してみましょう。

今回作成するバナーはすでにあるランディングページへリンクするものです。

ランディングページの完成イメージはこちらのレッスンで確認できます。
「オンラインホワイトボードのLPを作ろう④」料金表・お問い合わせの画面を作成しよう

作成するバナーのサイズはSNSでの広告用を想定し、1200px×628pxとします。

2.商品の背景を確認しよう

ランディングページを作成した時の指示内容を再度確認します。
オンラインホワイトボードの背景を確認しましょう。

オンラインホワイトボードとは、時間や場所に関係なく、オンライン上でポストイットのようなUIなどを使用し、コミュニケーションすることができる会議ツールです。

出来上がっているランディングページと合わせて、商品の背景を知ることで、バナー作成の際の参考にしていきます。
ポイントはこちらです。

ポイント

ランディングページがどのようなキーワードで制作されたのかを確認します。

キーワード

3.ターゲットを確認しよう

次はターゲットを確認しましょう！

実際にオンラインホワイトボードに興味を持ってバナーをクリックするのはどのような人たちか考えてみましょう。

主に、企業に務めている人たちを想定しています。

今回はこちらのターゲットを意識して作成してみましょう。

ランディングページはこのターゲットで作成されました。

バナーも同様にこのようなスムーズに会議を進めたい、便利ツールが欲しいという人がバナーをクリックするということを想定します。

4.バナーに入れる文言を決めよう

ランディングページを確認し、より興味を持ってもらえそうな言葉を探します。

メインビジュアルにあるキャッチコピーを前面に出すとWEB会議で使う便利なツールということがわかりやすく伝わるかと思います。

ランディングページで使用されているキャッチコピー、キーワードを参考に今回はこの文言を使用してバナーを作成します。

バナーに入れる情報

5.構成を考えよう

バナーの構成を考えます。
今回すでに作成されているランディングページを確認します。

このランディングページをみるためにバナーをクリックするので、バナーから移動してきたページに違和感を感じないようにします。

雰囲気がかけ離れていると、クリックしたバナーと表示されたランディングページが同じサービスのものと思えなくなってしまうためです。

そのため、バナーで興味をひき、もっと知りたいと思ってもらえるようなデザインにする必要があります。

今回作成するバナーのサービスは「BtoB」です。
「BtoB」の場合、ターゲットである企業担当者は、予算や、他社商品の特徴を比較検討しながら最終決定を行っています。

こういった背景を考えると、バナーの構成にも工夫が必要です。

いくつか構成のパターンを作成してみます。その中からより最適だと思うものを選んでいきましょう。

6.バナーで使用する素材を用意しよう

ランディングページがすでにありますが、必ずしも同じ画像素材を使用しないといけないということではありません。

バナーでは悩みを解決するためにこんなツールがある。ということを知ってもらって、詳しくサービスを知りたい。と思ってもらえるようなものにします。

バナーで興味を持ってもらいランディングページに移動するので、バナーとランディングページの雰囲気は違いすぎないようにします。

今回はこの素材を使用します。

イラストAC：オンライン

使用する色

ランディングページで使用されている色の中から選びます。

資料請求へのボタンはランディングページと同じ色にした方が、バナーからそのランディングページに移動してきた時もわかりやすくなります。

今回使用する色はランディングページでのメインカラー、資料請求のボタンで使用されている色です。

ランディングページの色

コントラスト比を確認

すでにランディングページで使用されている色ですが、コントラスト比の確認をしておきます。
ランディングページではボタンの色がメインビジュアルで使用されている色の補色になっていることもあり目立って見えています。

バナーは、他の記事や投稿に紛れてしまうため、ボタンで使用する背景の色とテキストの色のコントラスト比を確認しましょう。

コントラスト比の達成基準を満たしていない場合、ランディングページで使用している色から離れすぎないような色を選択します。

今回使用する色は17px以下の文字は今回使用しないこと、すでにあるランディングページと離れすぎない色ということでこのようになりました。

使用する色はCCライブラリに登録しておくと作業を進めやすくなります。

今回使用する色