ECコンサルティング企業に入社してバナー制作で苦戦した話

はじめまして。株式会社トゥエルブ、デザイナーの大谷です。

7月に入社をし、主にデザイン周りとコンサルティングの手伝いをしています。どうぞよろしくお願いいたします。

まずWEBデザイナーとして3ヶ月働いてみて感じたこと

デザイナーとして入社しましたが、デザイン以外にも商談に同行したり、楽天の運用をしてみたり、自社ECの立ち上げに取り掛かったりと、毎日新しいことをしているといった感じです。私自身、飽き性な部分が多少あるので、毎日違うことができるという環境がとても合っていて、楽しく働いています。

第一の壁：バナー制作

早速ですが、入社して、私が最初に苦戦したのがバナー制作です。

私自身、webスクールでデザインを学び、その過程でバナー制作をしたことがあります。しかし、当時はバナーの目的や掲載箇所、ターゲットなど自分で好きに決めて制作していたので、クライアント様ありきのバナー制作は未経験でした。

そもそもバナーとは？

直訳すると、「垂れ幕」「旗」「のぼり」です。Web上で、他のWebページを紹介したり、案内したい情報を目立たせたりする役割があります。

バナーの目的・役割

ユーザーに見つけてもらいやすくする。見てほしい情報（期間限定イベントの周知や、特定の商品のアピールなど）を紹介し、クリックしてもらうことです。

バナーは画像なので、文字と比べて視覚的に頭にも残りやすいです。サイトを流し見したとしても、文字と比べると読み飛ばされにくく、目に止まりやすいです。

バナーを使用するメリット

Webページ上で目に止まりやすく、印象に残りやすい、ということです。

「バナーの目的・役割」で書いたことと重複する部分もありますが、バナーは文字と比べて視覚的に印象に残りやすいので、普段自分が興味のない情報でも目に止まりやすいと思います。画像で訴求できるので、文字ではイメージしにくいものでも、写真で直接的に伝えることが可能です。私自身も、文字リンクよりはバナーのほうがデザインやキャッチコピー、情報に惹かれクリックすることが多いです。セールなどお得な情報も、例えばメルマガやサイト内で文字だけで「ただいまセール期間！」と書かれているよりは、セールの対象商品の写真と一緒にセールを謳っている画像が貼ってあるほうが、なんとなくの気持ちでも押してしまうことが多いような気がします。

バナーを使用するデメリット

メリットがあるならデメリットもあるだろうと思いましたが、特に思い浮かびません。強いて挙げるとしたら、制作する手間がかかること、遷移先のサイトや紹介している商品へのイメージとバナーのデザインが合ってなかったりする場合、思ったように成果が出ないことだと思います。

実際にバナーを作る上で苦戦したこと

ここまで長々とバナーについて書きましたが、ここからは私が制作中に苦戦した点を書いていきます。

レイアウト

レイアウトが、私が今まで苦戦した理由の8割を占めている気がします。

使用する画像、文言が決まっていても、レイアウトが決まらず、自分で色々試してみるものの、ただただ時間がすぎていくことが多かったです。特にバナー内に載せる情報が少なすぎる・多すぎる場合、自分なりに頭を抱え試行錯誤しても、結果何を伝えたいバナーなのかわからないものが出来上がり、また作り直し…なんてことがしょっちゅうありました。デザインの経験も知識もまだまだな私が1からデザインを考えるのは100年早かったです。

ここ最近は、自分が制作するバナーに似た情報のバナーなどを検索し、レイアウトを参考にさせていただいてます。こっちの方がレイアウトに費やす時間も少なく圧倒的に効率が良かったです。

画像選び

バナーの画像選びも、結構時間がかかってしまいます。

文字などの情報で画像の対象物が隠れて視認性が悪くなり、ぱっと見でどんなジャンルで、何を伝えたいバナーかわからなくなってしまったりすることが多いです。そんなときは、ひたすら似たような画像を探して当てはめてみたり、それでも納得行かないときは、例えば、化粧品関連の画像を探していると仮定します。「化粧品」「コスメ」で自分の求めている画像が出てこないときは、「化粧している人」「洗面所」「鏡」など連想ゲームを繰り広げて、なんとか自分の中の理想に近づけるような画像を探し当てます。それでもどうにもならないときは、対象物を切り抜いて力技で文字と重ならないようにしています。力技は合成感がすごい出る上に、時間も結構掛かるのであまり使いたくないです。

画像選びに関してはまだ最適解を見出だせてないので、模索中です。

文字

文字は文字でも、カーニング・文字詰めのことです。恥ずかしながら、言われるまでカーニング・文字詰めについて、気にしたことがありませんでした。

まず、カーニングとは特定の文字に対して、その文字単体の右側のスペースを調整したいときに使用します。そして文字詰めとは、文字の前後の空間を詰めたいときに使用します。日本語フォントの間隔を調整する場合は、文字詰めを一般的に使用します。気にしてよく見ないと気づかないと思いますが、漢字・ひらがな・カタカナ・アルファベットなど異なる文字が並ぶと、文字同士の間隔のバランスが崩れ、読みにくいことがあります。異なる文字だけでなく、例えば同じカタカナの中でも、文字の前後の空間が違うときがあります。言われなければ気づかなくても、実際に文字間隔を調整すると、調整前がどれだけバランスが悪かったかがすぐわかります。

また、盲点だったのが文字サイズです。バナーは普段Photoshop（パソコン）で制作しているのですが、バナーを見る機会はスマートフォンからが多いと思います。スマートフォン用で細長いバナーを作る機会が結構多いのですが、細長いバナーに最低限の情報をどうにか詰め込み、いざ設置しスマホで確認してみると、意外と文字サイズが大きく、もう少し文字を小さくして余白が作ることが可能だった、ということがありました。逆も然りで、バナー内のボタンが意外と小さかった、ということもありました。バナーを完成させ、パソコン上で見るときと、実際に設置してからスマートフォンで見るのでは結構印象が違うのだと知り、それからは完成後一度自分のスマートフォンに完成したバナーを送り、見えやすさなど確認するようにしています。

テキスト量の制限

これは番外編ですが、バナー全体の面積に対して20%しかテキストを載せてはいけないという制限付きのバナーを作る機会がありました。訴求したい内容はたくさんあっても、文字量を増やすと一文字あたりのサイズはとても小さくなってしまうし、反対に目立たせるように文字を大きくすると載せられる文字数が限られてしまうので、ここ最近で一番苦労した記憶があります。

バナー制作後、クライアント様に提出

永遠に終わらないんじゃないと私に思わせてくるバナー制作ですが、なんとか完成させ、最終的にクライアント様に提出します。文字色の変更や多少の文言の変更はあっても、嬉しいことにデザインを褒めていただけることが多いです。褒めていただいたり、バナーの効果があったと言っていただくと、とてもやる気に繋がるし、頑張ってよかったと思います。

まとめ

元々バナー制作が自分でも得意だとは思っていませんでしたが、ここまで苦戦するとも思っていませんでした。ただ、今回こうして書き出してみて、気をつける点など視覚的にも改めて認識できたので、苦手意識を持たず、めげずに向き合っていこうと思っています。