webバナーはどう考えて作るのか?webデザイナーの作り方

バナーの作り方

デジタルが普及するにつれて、企業もますますデジタル戦略を考えた事業運営を行わなければならなくなってきました。

それに伴いデザインの必要性、重要性を感じている企業、事業主の方は多いのではないでしょうか?

「新規にお客様を獲得するには、デジタル戦略が重要なのは分かってるけど、わが社にはデザインできる人がいないし、そもそもデザインってセンスだよね?」と考えている人も多いと思います。

でもそれは違います。

デザインは知識と経験なんです。デザイナーは知識と経験をもとに広告物を作りエンドユーザーの心を動かします。

センスであればもって生まれたものなので、身に就ける事はできないですが、知識と経験さえ伴えばある程度の物は作れるようになります。

今回はデザイナーがどの様に考え広告物を作っていくのかを記載しました。ノンデザイナーの方やデザインの重要性を感じている方、webデザイナーってどの様に考えて広告物をつくるのか知りたいといった方のヒントになれば嬉しく思います。

バナーの作り方〜最初のステップ〜

この段落では、雑貨ショップの店長さんがネット広告を出稿したいので、バナー広告を作って欲しいといった設定、ストーリー形式で記載しました。

〜ストーリ〜

私は某市内のwebデザイナー。今日も事務所の一室でブログを書きながら、過ごしていた。

ブログの記事が書き終わり休憩にでも行こうかとそっと腰をあげたその時。

「すいませーん」

との声が聞こえた。普段はあまりお客さんが事務所に来る事はないので、営業の方かなと思いながら事務所の扉をあけた。そこには、がっちりした体格の40代くらいの男性が立っていた。

男性「私ネットショップを運営していまして、今度web広告を出稿するんです。ただバナー広告を作れる人がいなくて・・・。バナー作成の依頼っていけますか?」

私「大丈夫ですよ。対応可できます。どうぞ中へお入りください。」

久しぶりのお客さんが来たので私は少し緊張していた。お客さんを客室に招き、コーヒーを入れた。

私「どうぞお掛け下さい。本日はお越し頂きありがとうございます。今日はどのようなご相談ですか?」

男性「通販サイトを運営しているんだけど、今回売ってみたい商品があるんだ」

私「どのような商品ですか?」

男性「ラッキースターといって星の形をした雑貨なんだよ」

私「これはどの様なシーンで使われるのですか?」

男性「結婚式場とかでフラワーシャワーの代わりに使う人がいるんだ。」

私「そうなんですね。今までどの様な層のお客様が購入されましたか?」

男性「これから結婚式を挙げる30代くらいの女性が購入する事が多いよ」

男性「これがラッキースターだよ。この写真でバナーを作ってくれないか?」

素材写真

私「わかりました。」

この様な形でお客様から相談を受けたとします。

素材は写真1枚と店長さんとのお話のみ。これを材料にしてバナー作っていきます。

バナーデザイン作成編

ここからバナーを作成するに至ってどの様に考えて作っていくのか過程を記載しました。

ヒアリングした内容を整理する

まずヒアリングした内容を整理します。

バナーを作る目的・・・ラッキースターを売りたい為、通販サイトに誘導するバナー広告を作りたい。

ターゲット層・・・結婚式を挙げる30代くらいの女性

実際はもう少し詳しくお話をお聞きし、ポイントを整理するのですが、文章が長くなりすぎるので、今回は割愛します。

ただデザインする上で必ずお聞きする事があります。それは広告を作る目的とターゲット層です。この2つは必ずお聞きします。この2点がないとデザインする事は難しいです。

ノンデザイナーの方であっても何かをデザインする時は、作る目的、ターゲット層は必ず聞きましょう。

商品のUSPを考える

今回の依頼はラッキースターを売りたい。通販サイトに誘導するバナー広告を作りたい。といった目的がある為、商品の特徴や強みは何なのか?USPを考える必要があります。

USPとは商品やサービスが持っている独自の強みを意味するマーケティング用語です。

まずラッキースターのUSPを紙にいくつも書きだします。

・ラッキースターを結婚式で使うと、夫婦生活が円満に送れそう。縁起物のイメージが強い

・花に比べると独創的で斬新

・ポップな雰囲気づくりが出来る

・花に比べるとカラフル

といった様に商品の強みを何個も考えます。その中から商品が輝けるキャッチコピーを考えます。

これらの特性を意識して私が考えたキャッチコピーは「結婚式をポップに彩るLucky Star」です。

このキャッチコピーで独創的、ポップ、結婚式で使うものといった事が伝わるのではと考えた結果です。

フォントや色を考える

次にフォントや色を考えます。ターゲット層は30代の女性なので「色はピンクをどこかで使いたいな」とか「フォントはポップな雰囲気を伝える為に可愛い感じのゴシックかな」といったように考えていきます。

一般的に配色はべースカラー:75%、メインカラー:25%、アクセントカラー:5%の割合で考えると良しとされています。

今回の場合、ウエデイングが関係している為、ベースカラーはウエディングドレスをイメージさせる白。

メインカラーは女性が好みそうなピンクに決めました。

そしてフォントは女性ウケが良く、かわいい雰囲気をもったノトサンズを選びました。

フォントや色の選び方

これが正解というのは無いと思いますが、ターゲット層や商品のイメージを意識してフォントや色を選んでいく事は大切です。

レイアウトを考える

レイアウトの仕方

次にレイアウトを考えていきます。「キャッチコピーは目立って欲しいから左上かな」とか「誘導させないといけないから、誘導文を下に配置したいな」とかレイアウトを考えていきます。

この時、構図を考えて作ると良いと思います。私は構図を考えますが、線にしっかりあわせる必要はないと感じています。

ある程度で良いのかな?と思っています。理由はしっかり線に合わせても違和感を感じる事があるからです。

気持ちの良い所を探す作業が必要です。

ひたすら考える

レイアウトがある程度決まればひたすら考えます。

①ポップな雰囲気を感じさせたいので、「結婚式をポップに」の文言は動きをつける。

②彩るって文字はカラフルにしてみよう。

③背景は白一色じゃなくて、結婚式をイメージできるようにフラワーシャワーの様な画像を作ろう。

④商品はフラワーシャワーより頼りになるぜ感を出したいので、ドーンとおいてみよう。

⑤販売サイトに誘導するにはクリック出来そうな形が必要だな

といった様にお客さんの目的を達成出来るように様々な視点から考えます。

この様に考えてデザインした結果。この様なデザインに仕上がりました。

バナーの完成はまじか

最後に微調整を行っていきます。

文字間や細かな配置を微調整していきます。例えば、文字間を狭めたり、広めたりしてみてどの様に見えるか確認したり、余白の部分は気持ち良いのかなど試しながら確認していきます。

神は細部に宿ると言いますが、最後に微調整を行うと良いデザインに仕上がります。

このようにしてデザイナーは広告物をデザインしていきます。

バナーデザイン完成

いかがですか?素材から考えると少しは集客出来そうなバナーデザインに仕上がりました。

この様に知識と経験を合わせて商品をエンドユーザーに伝える事がデザインなんです。

デザインといった言語に対し、様々な意見はあると思いますがこの様な考え方でデザインを行っているデザイナーさんは多いです。

最後に

今回はwebデザイナーがどの様に考えてバナーを作っているのか?といったテーマで記事を記載しました。

「デザインってセンスだよね」と思っていた方は「意外と考えて、知識と経験で作られているんだな」と感じ取っていただけたでしょうか。そう感じて頂けたら嬉しいです。

そして知識と経験が伴えば作れるものという事も伝わればと思います。

少しでもこの記事があなたのお役に立っていたら幸いです。

更新日時:2023年5月15日

\シェア/
ページトップボタン
無料相談受付中