webデザイナー大阪 > webデザインの実践レポート > 貰った送料無料バナーをデザイン調整してみた

貰った送料無料バナーをデザイン調整してみた

バナーのwebデザインのメモ

貰った送料無料バナーを調整してみた
まるで小姑のように

今回はドロップシッピングで配給された送料無料バナーを、自分なりにデザイン変更してみたのでメモとしてこっそり記事にしておきます。( デザインの捉え方は人それぞれですので、これが正解というわけではありませんのであしからず…。 )

[ 修正前 ] 元の送料無料バナー

というわけで、このバナーが修正前の送料無料バナーです。
これはDSP側から無料で配布された素材の1つで、どなたが作成したバナーなのか分かりませんがこれはこれで素敵です。このままでも十分GOODなのですが、自分のサイトに掲載するには、もうちょっとだけ調整しておきたいと感じたのです。あえてここでは小姑目線で厳しく見て調整してみることにしました。

送料無料バナー

まず気になるのは余白のバランス

まず気になってしまったのは、余白バランス。
特に「お買い上げ3000円以上で」の部品と「送料無料」の部品の配置バランスが気になります、aの余白よりbのほうが大きくなってしまっています。ここはaの余白ほうが大きいほうが情報にまとまりが出ますね。

余白バランス

さらにフォントのカーニングに注目

そしてこの下の図にあるように、カーニングもちょっと気になりますね。
aとbとcの隙間が開きすぎている感じがします、
あああ、気になって気になって仕方ありません。

フォントのwebデザイン

[ 調整後] 余白と文字のカーニングを調整してみた

さてでは、まずは余白と文字のカーニングだけを調整してみました。本当に微妙な差ですし、デザインの感じ方は人それぞれなのでズバリこれが良いというわけではありません。皆さんも 、自分ならもっとここはこうしたほうがいいと思う、といった指摘がそれぞれにあると思います。あ、ちょっと11の文字詰めがキツすぎたかな、失敗失敗。

デザイン調整後のバナー 

[ もうひと調整 ] 英数字のフォントを変えてみた

では、もうひと調整してみましょう。数字のフォントを変えてみました。
フォントの大きさもちょっとだけ大きさも変えてメリハリをつけてみました。いや、変えなくてよかったかな。うーん、エクスクラメーションマークを入れたほうがもっとインパクトが出るかな? 

フォントの種類を変更したバナー

だが、ここまでの作業は結局は自己満足

さてここで根本的な話です。
正直なところ、見た目のデザインだけ微調整しても意味ないですよね。
せっかく無料でいただいたバナーなのですし、調整して効果アップするかといったらそうではありません。これこそデザイナーの自己満足というものですね。でもついつい気になってしまって…。

では、ここでビジュアルの調整より
もっともっと重要な設計の見直しをしてみたいと思います。

よりユーザーに分かりやすく情報を伝えられないか検討

そういや、13日から72時間限定と言われても、15日当日に訪れたユーザーはどう思うだろうか…。なんだかややこしいですね72時間って3日間ってことですよね、正午から72時間ってことは15日の正午、いや、16日の正午までってことでしょうかね、うーんうーん、なんだか分かりにくいですね。

というわけで調整したのがこちら 

バナーのwebデザイン例

ならばあえてここは13日、14日、15日と日付を出してみました。
期間中訪れたユーザーは瞬時に理解していただきやすくなるかもしれませんね。けれど 「16日の正午まで」というのは、逆にややこしくなりそうだったのであえて切ってしまったんですが、これはちょっと損したかも。入れておくほうがいいかな。失敗失敗。

まとめ

こういったネットショッピング用のバナーは数ピクセルズレてようが余白バランスが崩れてようが、ぶっちゃけると大抵、大して効果に変わりはありません。ただ小姑なwebデザイナーが違和感を感じる程度です。いやですね、年をとると小姑目線になってしまうのです!!