商品バナー作成の事例

今回はネットショップ用の商品写真を加工した事例をレポートします!

ちょっと悲しい感じの商品バナーを
フォトショップを用いてより魅力的に
加工し直してみた。

ドロップシッピングを用いてネットショップを作っていると、時々なんじゃこりゃ~!っという商品画像に出くわすと思います。あまりにも酷い場合、フォトショぷでチャチャっと修正することもあるのですが、これがなかなかwebデザインの勉強になってお勧めですよ~!今回はそんな商品写真の加工事例について取り上げたいと思います。(商品写真の実例にはこちらのドロップシッピングの商品を参考にさせていただいております。)

まずこれが修正前の商品画像

画像加工前のバナーおわかり頂けるでしょうか、
うう・・・これは酷い・・・。(すみません!)

この商品は小型カメラのようですが、文字が画像の上にまき散らされており、読みにくく何の事なのか判断が付きにくいのが困った所です。 本来ならば、テキスト無しの商品写真だけで十分だと思います。説明文は画像とは別にHTMLテキストで記載すれば良いだけの話なのですが、今回は実例ということで、あえてこの画像をバナーとして見立て、デザイン加工してみますね!

修正後

画像加工後のバナー修正完了!

まず、商品画像を美しく見せる為、淀んだ背景色を白に!あとは一見何なのか分かりにくい商品ですので、その外観のヒントとなる商品写真を、同時に加工して入れました。これで車のキーホルダーであることが一目瞭然ですね!

他の同様の商品との差別化を図るべく、800万画素に対応している事を、インパクトをつける色と形の枠に入れてアピール。そして情報が煩雑にならないよう、別途 iPod対応や動画OKといった項目を、シールのように丸く張り付ける形で分かりやすく表現。またこういった電化製品系は最新の品かどうかが大きな魅力の1つでもあります。ですので「2010年最新版」とあえて大きく表記しました。

POINT1
まずは商品の魅力を引き上げる写真へ

商品写真の魅力こそが、コンバージョンを大きく左右します。
例えばレストランのメニューの写真が良い例ですね!
湯気やテカリ、色合い、美味しそうに見える盛り付けや飾り、そういった工夫がなされていると思います。 食べた事もない料理を注文するのですから、写真でより魅力を伝えねばなりません。

POINT2
情報整理し商品の強みを最適化

ユーザーにより分かりやすく素早く情報を伝える事こそが、WEBデザインの真髄。
しかもその商材の「強み」を見いだし、強調できればコンバージョンもアップ! 

備考
(例)
価格に強みがあるなら
金赤や黄色そして黒いとった色の安売りデザインに

今回の商品画像加工の例では、価格に強みを見いだしたのではなく機能性をアピールする設計にしました。ですので高性能である事を印象付られる落ちついた色合いのデザインで構成しています。このように商品の強みを活かすデザインが求められます。

そもそも費用対効果を考えると…

そもそも写真撮影の段階で、商品の魅力を引き出した魅力的な撮影が出来ていれば…。
無理にテキストを入れた加工を施さなくてもコンバージョンを出せることが多いと思います。
費用対効果を考えるとなんとももどかしい事です。
初期段階からの適切な作業計画が必要ですね…。