デザインを独学で学ぶには、まずはWEBバナーを作ってみるのが近道! 〜演習編〜

デザインを独学で学ぶには、まずはWEBバナーを作ってみるのが近道! 〜演習編〜

お世話になります。
ディレクター兼デザイナーの“ななつ”です。

お待たせしました。
デザインとはなんぞや? を学ぶためのオススメ教材としてバナー制作を提案してみた件、後編の公開です。

そもそもの考え方や大事なポイントなどは、前回の講義編にてまとめております。
今回はそれを前提に話を進めていきますので、ご入用の方は以下よりご参照いただけますと幸いです。

それでは早速始めてまいりましょう。
よろしければ暫しの間、お付き合いくださいませ。

お題

今回は実際にバナーを作成してもらい(読んでいるだけでもOKです)、デザイン制作を体験してみる学習課題風の記事となります。

ですので、まずは作成するバナーのお題を発表したいと思います。

デザインを学ぶバナー制作の課題

はい、社会人なら何故かよく見かける転職系のバナーですね。ターゲティング広告怖い。

いわゆるLP誘導バナーになりますが、この手の制作案件は大抵クライアントからある程度の要望が伝えられます。要はオリエンってやつですね。
以下が今回のクライアント要望になります。

※Landing Pageの略。検索エンジン等の外部サイトから遷移した際の着地先ページのこと。

課題におけるクライアント要望例

さっそくこれらの仕様をもとに、制作を進めてまいりましょう。

考えるべきポイント

さあデザイン着手や! というわけには当然行かず。
すでに講義編でもお伝えしたとおり、デザイン制作を行うには事前に考えるべきポイントが多数あります。

誰に、何を、どうやって伝えれば、求める結果になるのか。

つまり目的を達成するためのデザインとは何かを考え抜く必要があるのです。
そのためには大別して以下の検討項目が重要になると思います。

目的を達成するデザインを考えるための4つのポイント

今回作成するのはWEBバナーですので、求める結果はクリック一択です。
ですので、その他の3項目に関して考えていきましょう。

ターゲットを考えてみよう

まずは兎にも角にも外せない“誰に”向けて作るのかという話。つまりターゲット設定です。

ポイント1:ターゲット設定

新卒で転職希望するか? という不安は感じつつ、要は若手ビジネスマンをターゲットにしたい、というのがクライアント要望です。

いや、もうターゲット決まってない?

もちろんこれでQ.E.D. 証明終了。と話が済むわけではありません。
現状で判明しているターゲット層は、図で言うとこんな感じです。

バナー制作のターゲット設定図

この新卒〜3年目の若手ビジネスマンの中には、当然転職を全く考えていないグループも存在します。
ですので、重箱の隅をつつくようですが、ターゲットは“転職を考えている”新卒〜3年目の若手ビジネスマンということになります。

バナー制作のターゲット設定のさらなる深堀り

グッとターゲット層がクリアになった気がしますが、もう少し踏み込んで考えていきましょう。

なぜ彼らは転職を考えていると思いますか?

例えば給与面。
もう少し給料の高い会社に転職したい人もいるでしょう。

例えば職場の人間関係。
現状に馴染めず、もっと自分に合った会社を探している人もいるかもしれません。

もしかしたら昔からの夢だったパン屋を開いてみたい、と機会を伺っている可能性もあります。

では彼らを一緒くたに転職を考えている新卒〜3年目の若手ビジネスマンという枠組みにはめて、最適なデザインを展開はできるのでしょうか?

複数ターゲットの最適なデザインは実現可能か?

はい、難しいと言わざるを得ません。
当然ですね。みんな考えていることも、求めているものも異なるのですから。

ですが、このままでは当然バナーは完成しません。
そこで考え方を少し変えてみましょう。

彼らの置かれている状況や、彼らが欲しているものを即物的な名詞ではなく、感情面で捉えてみてください。

ほら、彼らに共通する何かが見えてきませんか?
その何かが今回のデザインの核になるのではないでしょうか。

商材を考えてみよう

ターゲット設定が見えてきたら、次は“何を”にあたる商材についてです。

ポイント2:商材の強みを考える

クライアントが考えている商材の訴求点は、すでにお伝えしたとおりです。

  • 100を超える豊富な求人情報量
  • 未経験者完全OKのみの求人を掲載
  • 事前面接対策会を無料で開催

すなわち、これらが今回のバナーでターゲットにクリックしたいと思わせる重要なメリットになります。

いずれの訴求点も、なんとなく心に響きそうな魅力を感じませんか?
これらが魅力的に見えるのは、ターゲット設定が明確だからに他ありません。

前述した転職を考えている新卒〜3年目の若手ビジネスマンに対して用意された訴求点は、そのいずれもが彼らに共通する何かを解決し得るポイントになるからです。

ターゲット設定と商材の強みの整理

では次に、なぜこれらが解決策として成立するのかを考えてみましょう。

例えば豊富な選択肢というのは、現状に悩むターゲットからすると視野を広げる1つのきっかけになるかもしれません。
視野が広がれば、現状抱えている悩みも実は簡単に解決できることに思い至る可能性もあります。

検討する上で重要なポイントは、事前に与えられた訴求点はあくまでも機能そのものであり、ターゲットが欲するゴールイメージではないことです。
ゴールイメージを想起できるからこそ、ターゲットにとって解決策であることが伝わるのではないでしょうか?

では、ゴールイメージを伝えることができる最適なヴィジュアルとは何でしょうか?
ターゲットは何を見たら“解決策がそこにある”と感じてくれるでしょうか?

このように商材のメリットを噛み砕いていくことで、与えられた訴求点をどう見せれば効果的かを考える指針となります。

これってまさにデザインそのものじゃないですかね?

方向性を考えてみよう

最後に、ターゲットに対して商材を“どうやって伝えるか”、すなわち実際のデザインの方向性を考えていきましょう。

ポイント3:デザインの方向性

とはいえ、すでにある程度の方向性は見えていると思います。
そのためにターゲットと商材を深堀りしてきましたので。

ですが、今回制作するのは300×250(px)のレクタングルバナーです。
メディアサイズも小さく、デザインに落とし込める内容は限られています。

ここまで考えてきた様々なポイントを全て入れ込むのか、何かに絞り込んで特化させるのか……。
少なくとも訴求点だけでも3要素ありますからね。

今回の課題は、このあたりの情報整理について考えてみることにも狙いがあります。

もしここまでの流れを踏まえて、本当に一度自分で作ってみたいという方がいらっしゃいましたら、以降の内容は制作後にお読みいただけると良いかもしれません。
次項からは実際の作例を掲載していきますので、比較してみることで学べることも多くあるかと思います。

講評

ここまでお疲れさまでした。

今回は演習編として銘打っておりますので、大々的に講評なんて言ってみましたが……。
まぁ“ななつろぐ”は一方向のメディアですので、作例をお見せして、それを解説する形でお茶を濁したいと思います。

どうしても講評させてみたいんや、という奇特な方が多数いらっしゃいましたら、何かしら方法を考えます。

制作例

もったいぶっても仕方がないですので、今回の課題をもとに“ななつ”が作成したバナーをお見せしたいと思います。

課題に対するバナーデザインの作例

はい、ある程度デザインの方向性がバラけるかと思い、4パターン作ってみました。
訴求点が3方向ありますので、プラスアルファ1案です。

みなさんが考えた方向性に近いものが1つでもあればよいのですが、どうですかね?

まずは豊富な選択肢押しから解説してみます。

バナーデザイン作例1:豊富な選択肢押し

パッと見で選択肢が多いことがストレートに伝わるデザインにしてみました。
ゴールイメージである写真素材自体は背景的な扱いにしているので、その分コピーにメッセージを載せ、直接的に語りかける切り口ですね。

転職希望組の中でも、特に現状に閉塞感を感じているターゲットをメインに、未来への広がりがこんなにもあることを伝えられると良いかな、と考えてみました。

次は未経験者歓迎押しですね。

バナーデザイン作例2:未経験者歓迎押し

打って変わってワンシーン押しでデザインしてみました。
いわゆるアットホーム感の演出ですね。

次のステップに進みたい、でも自分が歓迎されるかわからず不安を抱えているターゲットを想定した方向性です。
新しいことに挑戦したいと考えるユーザーに安心感を与えることを目的にしています。

続いてアフターフォロー押しのご紹介。

バナーデザイン作例3:アフターフォロー押し

こちらの訴求点に関しては、ヴィジュアルのみでゴールイメージを想起させるのは中々難しいかと考え、コピーメインでデザインを進めました。
面接のヴィジュアル単体ではサービス内容を表現し切ることは難しい上に、未来への希望よりも待ち構えている現実的な課題を意識させてしまうかと思ったので。

ですので、メリットをわかりやすく読ませるためのデザインですね。
これなら私でもできるかも、と良い想像を広げてもらうことが目的になります。

最後に、3つの訴求点を全て組み込んだパターンです。

バナーデザイン作例4:訴求点3つ全部のせ

実際のバナー制作案件でも、基本的には複数案を提示し、クライアントに選んでもらう形式が多いです。

ですので、各訴求点をそれぞれ強調した案を提案しつつ、全てを入れ込んだ抑えの案も作っておくべきかと考えました。

デザイン的なポイントとしては、わかりやすくメリットが3つあることを表現する箇条書き案ですね。無難ではありますが、最もクライアント意向を反映しているかもしれません。

シンプルになりすぎないように、多少のお得感/限定感をコピーで追加しています。

最後に

最後までお付き合いいただき、ありがとうございました。

作成してみた(頭で考えていた)バナーと比較して、いかがでしたでしょうか?
ぶっちゃけデザイン精度よりも、どこまで思索できていたかの方が重要な気がしています。

大切なのは出来上がったデザインの全ての要素に対して、自分が自信を持って説明できうるかということだと思います。なぜこの色なのか、なぜこの形にしたのかなど。

なんとなくこうしてみた。という点が残っているようであれば、残念ながらまだ検討が足りないかもしれないです。
なぜならそうした曖昧な点は、別デザインの方が良かったのでは? という可能性を否定できない余地となりかねませんから。

どこまで行っても、デザインは目的を達成するためのツールだと“ななつ”は考えておりますので。
それがバナー制作の体験で、少しでも伝われば演習としては上々ですかね。

それではここで改めてタイトルに立ち返り、デザインとは何か?を端的に表現したジョン・マエダ氏の至言で締めくくりたいと思います。

デザインは問題への解決策であり、アートは、問題への問いかけである。

本当は実際のデザイン作業時に知っておくと良いテクニック的な話も掲載しようと思っていたのですが……。例のごとくテキスト量が膨大化しそうでしたので割愛いたしました。本当に申し訳ない。

機会があればバナー制作テクニック的な話もいずれ記事として扱うつもりですので、気長にお待ちいただけますと幸いです。

以上になります。
今後とも、どうぞよろしくお願いいたします。

ななつ