バナー画像制作

僕は現在、Web制作会社でフロントエンドエンジニアとして勤務しているのですが、デザインの方も勉強したいと考え、最近Webレビュー記事をいくつかあげています。今回、自分でもデザインを作ってみたいと考え、手始めにバナー画像を制作してみました。

お題は、こちらのこばやすさんの記事からいただきました。

お題の内容はこちら。

バナー設置場所：自社ECサイトのサイドメニュー
商品概要：冬限定一口チョコ。普段高いが今だけ割引価格で売っている
ターゲット：20〜40代の働く男女
イメージカラー：白、水色
バナーサイズ：W300×H280px
---------------------------------
キャッチコピー：ちょっと一息。贅沢をお裾分け
割引期間：11月1日〜12月31日まで
割引価格：10～20％割引

それでは、バナー画像の出来上がりと、どんなところを意識して作ったかを自分用に振り返っていきたいと思います。

出来上がったバナー画像

構図

今回は、チョコレートのバナー画像で、チョコレートの視覚的な魅力を存分に引きだしたいと考え、なるべく大きくチョコレートが映る構図にしたいと考えた。そこで、参考にしたバナー画像はこちら。（参考バナー①↓）

参考バナー①は、右側にスイーツをどんと大きくのせ、左側に末広がりで情報を載せる構図が、「情報が見やすく、食べ物の見栄えもいい」と思い、こちらの構図を丸っとパクらせていただいた。（○○％OFFを白抜きで目立たせるアイディアも一緒にいただいた）ただ、今私の制作したバナー画像を見返すと、スペースの都合上、左上が不自然に空いてしまっている。何かしら模様で埋めたりするなど、対応策を考えるべきだった。
また、参考バナー①は楽し気、明るい雰囲気を押し出すために文字を斜めにして勢いを出していたが、お題のチョコのバナー画像は高級感を出す、というテーマのため文字は水平にして、落ち着いた印象を出すようにした。唯一の例外はコピーの「ちょっと一息。贅沢をお裾分け」を高さをずらして配置したところ。実は、左側の文字稿部分を全て横文字で統一してしまったため、日本語コピーが入るとどうもしっくりこなくなってしまい、苦肉の策で右側の写真部分に押し込んだ。そのままだと単調な感じになってしまったため、高さをずらすと、リズミカルになり、「ちょっと一息」の一休みする感じと相性がよかったため、採用した。
また、今回の文字配置は、10%-20%OFFを最も目立たせるように意識した。今回のバナー画像の設置場所は「自社ECサイトのサイドメニュー」であるため、バナーを目にする人は、あらかじめ商品情報をある程度知っている人、と想定した。そのため、前々から商品自体に興味を持っていたが、値段がネックで手を出せなかった人に、手を出してもらうため、割引額を押し出す情報設計にした。

背景

イメージカラーが「白、水色」、ターゲットが「20〜40代の働く男女」であるため、大人の落ち着いた印象を出したいと思い、濃い目の水色を背景に置きたいと考えた。また、イラストの柔らかい印象より、写真の硬質な印象の方が、高級感の演出にふさわしいと考え、濃い水色の写真を使いたいと思った。冬の印象を出せる氷の画像が見つかったため、背景として採用した。

フォント

日本語、数字、英字でそれぞれ、落ち着いたスマートな雰囲気を出せる以下のフォントを選択した。
日本語→砧 iroha 31nire StdN
英語　→Vendura
数字　→Centaur

バナーを作ってみた感想

情報の配置をどうするか、にとても悩んだ。多分、順番としては、以下の流れがふさわしいのだと思う。
①どんな人にどうやって情報を届けるかを決める（ペルソナ設計）
↓
② ①にふさわしい構図を決める
↓
③実際に構図をphotoshopで再現してみる
今回は、①の設計が曖昧なままバナーを作り始めてしまったために、二転三転してしまった感があるので、次はもう少し①の設計を丁寧に行いたい。

あと、他の人がどんな流れでバナー画像制作を行っているのか、すごく気になった。