Webサイトにおいて「画像」はとても重要な役割を担っています。
とくに、ECサイトやネットショップで使われる商品画像やサイトトップのヘッダー画像などは、そのサイトや商品の顔になるといっても過言ではありません。


例として上の画像のように、同じ内容の商品が並んでいたとき、皆さんはどちらの商品をクリックしますか?
恐らく、多くの人が右の商品をクリックしようとするはずです。

このように、同じような内容の商品であったとしても、画像の見え方が違うだけでその商品がユーザーに与える印象は大きく変わります。なかには「写真だけを見て選んだ」という人もいるでしょう。

どれだけ良い商品を扱っていたとしても、使用している画像が悪ければ、その魅力を正しく伝えることはできません。画像が与える印象を良くするためには、良い機材とカメラで、かつプロのカメラマンさんに撮ってもらうのが一番です。しかし、そう簡単にはできないことも多いと思います。

そこで今回は、商品画像の質をワンランク上げるPhotoshopを使った画像加工について、3つのステップでご紹介いたします!


背景の切り抜き

まずは、背景の切り抜きです。
取り扱っている商材によっては切り抜かない方が良いということもありますが、基本的に商品画像は白背景が良いとされます。
白背景の商品画像は、商品以外に余分な情報がないため見栄えが良く、写真を撮ったときの環境や背景の色に商品の印象が左右されないことから、「伝わりやすい」という点でとても優れているからです。

切り抜きに使用するPhotoshopのおすすめツールは「切り抜き選択ツール」です。
背景画像と商品画像の境界があまりにも分かりづらいとき以外は、ほぼこのツール1つで切り抜くことが可能です。



画像の切り抜きたい部分にカーソルを合わせるとPhotoshopが自動で画像内の情報を判別してくれるため、そのままクリックか、ドラッグで切り抜きたい箇所を囲うと選択することができます。


明るさ・コントラスト

次は画像の明るさ・コントラストを調節します。
この調節で使用するツールは、Photoshopのメニューから「イメージ>色調補正」の中にある「レベル補正」という機能です。

他にも同じように使える機能はありますが、今回は私が最も使用するこちらで紹介します。

レベル補正ツールとは?



レベル補正ツールはヒストグラムと3つのスライダーから構成され、右の三角がハイライト、真ん中の三角が中間値、左の三角がシャドウの値を指しており、それぞれを左右に動かすことで画像の明るさ・コントラストを調節します。

① まずは中間値を動かし、全体の明るさを調整します。(中間値を左に動かすと、くすみを消せます。)

② 次に、明るくなりすぎてコントラストが低くなってしまわないようシャドウを調節。
(左の矢印と真ん中の矢印を近づけると、コントラストが上がります。)

③ これでシャドウのコントラストを付けれたので、後はお好みでハイライトを調節し、明るさのメリハリを出します。(右矢印をやや左側に)

主にハイライトは、艶っぽくテカリのあるものに向いていますが、あまり高めると白飛びしてしまうので注意が必要です。


これだけでもだいぶ印象を変えることが出来ます。元画像と比べると、加工したものの方が新鮮で美味しそうに見えますね。



色味のトーンアップ

最後に、「イメージ>色調補正」の中から「カラーバランス」を使用し、画像の色味を整えます。

どうしても画像を明るくすると色味も連動して白っぽくなってしまうため、このツールを使用し、本来の商品イメージに合うよう色味を整えます。
このとき、色味を調節していると画像全体の明るさが落ちてくることがあるので、画像が暗くなったと感じる場合は、再度明るさとコントラストを調節しましょう。

色味を調節するポイントとして、食品や温かみのあるものは赤や黄色などの「暖色」を強め、逆に真面目なものや、涼しい印象を与えたいものは「寒色」に寄せると、その商品にあったイメージに色味を調節することが可能です。



あまりハッキリと違いはわかりませんが、色味を大きくいじりすぎるとかえって不自然になってしまうため、ここでの調整は気持ち程度で大丈夫です。



まとめ

この3つの手順だけで、画像のクオリティは格段に変わります!

今回紹介したツール以外にも、彩度を上げることで華やかさを演出したり、レンズフィルターを使った色味調節など様々な方法や技術はありますが、まずこの3点を抑えるだけで、何も加工を加えていない他の商品と大きく差をつけることが出来るようになります。

EC、Webサイトにおいて、画像はもっとも直感的にユーザーに印象伝えることができる大切な要素です。
より商品の良さを伝えるためにも、適切に加工された画像を使用してクリック数に繋げましょう!



弊社ではWeb制作の構築や運営に伴い、写真の撮影や加工もおこなっております。制作の中で新しく写真が必要になった際は、ぜひお気軽にお問い合わせください。
新規Webサイト制作・リニューアルのサービス内容はこちらから

Written by