バナーデザインから学ぶデザイナーが制作時に意識しているポイント 【前編】

2020/10/10

デザイン業界では1+1=2ではない

この記事を読んでいる人は、デザイナーの方でデザインの良いアイデアがないかなと、探している人かもしれませんし、もしくは、今までデザインなど全くやったことがないが上司から突然、「今回は〇〇さんにバナー制作をお願いしたい!」と無理やり頼まれ、どうしていいのか分からず不安で不安でネット中を、助けを求めて走り回ってる悲劇のヒロインかもしれない。

そんな方々に向けて今回は、私がバナーをデザインする際にどういった点に重点を置いて作成しているのかを書いてみたいと思います。

勿論、デザインという分野は人それぞれの価値観や生まれ持った感性のようなモノが交錯する世界だと思っているので、正解がある意味無いジャンルと言っても過言ではないです。
例えば、「1+1=3」みたいなモノが一般社会的には「不正解!馬鹿なのかお前!小学校からやり直せ!」という具合だが、デザインの世界においては、時として「大正解!!素晴らしい!!!キミは天才だ!!」という結果になるのもこのデザインというジャンルの醍醐味ではないかと思ってます。

そんな不思議で楽しいデザインの世界から今日は「バナーデザイン」について初心者の方でも、なるほど!って思える形で書いていくので気楽に読んでくださいね。
そして今回は内容が多くなるので前編、後編2回に分けて書いていこうと思いますので宜しくお願いします!

 

 

バナーデザインはこう作る

今回素材にするバナーはこちらの、弊社と株式会社プロモストで行う合同ウェビナーのFacebookイベントページバナーです。


※因みに今回のバナーは実在するイベントなので歯科医院様でご興味ある方は下記リンクから是非!
◉プロモスト × BOPコミュニケーションズ【歯科医院様限定】完全無料オンラインセミナー

 

▶構図を決めよう

このバナーデザインでまず私が初めに行った事は「構図」を決める事。
「構図」が何かというと、簡単に言うならデザインで使う画像やテキストなど要素の配置決めといったところです。

今回のバナーの例で言うとまず、「登壇者2人を左右に配置」、バナー最上部から「メイン/サブタイトル」「本文」「会社ロゴと登壇者名」最下部に「日程」という配置にしました。

 

この配置にした理由としては2人の登壇者の写真が2人とも丁度カメラ目線で撮られていることから左右に配置し建物でいうところの2本の柱のようなイメージでメインキャストとしての存在感を出し、「メイン/サブタイトル」「本文」「会社ロゴと登壇者名」を登壇者に対して逆三角形に配置し、スッキリとレイアウトされて尚且つ見やすさも意識したイメージでまとめました。

 

▶大小を付ける

次に私が意識するポイントとして「重要性の高い要素」と「低い要素」を区別し、大きさにきっちり差をつけるという事。
つまり全てのテキストを、なんでもかんでも大きく、ド派手にすれば良いという事ではないので注意。

バナーの場合だと、やはりそのバナーで訴求したいターゲットに向けた「メインタイトル」をとにかく大きく目立つように配置することが非常に大切です。
次の画像は最重要箇所を「赤いエリア」で、それ以外を「黄色いエリア」で配色しています。

この参考ウェビナーバナーでいうと大きく分けると「メイン/サブタイトル周り」「開催日時」「登壇者」など重要な箇所(赤いエリア)は大きく目立つように配置します。 そして黄色いエリアは赤いエリアより若干「フォントサイズ」や「配色」や「エフェクト(装飾効果)」を下げめに設定し重要度の順番を崩さないように配置していく事が大切です。

バナーデザインの場合はデザインエリアも小さく限られているので、重要度があまりにも低過ぎる要素は、そもそも記載していないと思いますので、まぁそこまで極端な強弱は必要無い場合が多いです。

 

まとめ

いかがだったでしょうか。
バナーデザインから学ぶデザイナーが制作時に意識しているポイントの前編ということでしたが、
私自身も経験があるんですが、デザインを勉強し始めた頃というのはどうしても、突然、画像をバシバシ配置して、色付のテキストでタイトルを入力して、はい終了!制作時間10分!みたいな作り方をしてしまいがちなんですよね。
ちょっと難しい事言っちゃいますが、やはり、そのデザインの完成形を見る1人のユーザーとして、第三者的な意識を持ってデザインするという事がデザイナーとしては非常に大切になってくると私は思ってます。

それでは、今日のおさらいです!
デザインをする際はまず、そのデザインの全体像である「構図」を組み立ててみましょう。
そしてその構図に配置していく要素には必ず「大小の区別」をつけましょう!という事。
今日はこの2点を覚えて置いてもらえたらバッチリです!

次回、後編では「配色」と「背景」についてお話していきたいと思います。
この配色と背景というのはなんか脇役っぽいイメージがしますよね、でも!意外とこの部分の技術がキッチリしてるのとしてないのではデザインの完成形に劇的な変化があらわれてしまう箇所なので、次回の後編も是非是非、お楽しみに!

 

シェア
ツイート