ブログ

ECサイトで使う商品写真をphotoshopでレタッチする4つの手順

2016.01.14

2-(1)
弊社では、独自サイトや楽天、Yahoo!などでECサイトを運用しており、上記の5つのように必ず商品画像加工をしています。
そもそも、商品写真を加工する必要があるのでしょうか。加工する前の写真をご覧下さい。
_MG_3289

  • 商品が中心からずれてる
  • レンズやバック紙に付いた塵の写り込んでいる
  • 商品の影が前後ろの両側にあり、自然ではない
  • 写真全体的に暗く商品もはっきりとしていない

ECサイトにおいて商品は、実際に手にすることができなく商品画像で商品の質感やサイズ感を伝えなければなりません。商品が見えづらい商品写真より綺麗に商品が見えたほうが、消費者の購買行動の動機にもなるでしょう。以上のことから、購買行動を移してもらうためにも商品写真を加工する必要があります。

そこで今回は、Photoshopを使用した加工の方法です。Photoshopにあまり触れた事がなく、商品写真を加工する担当になった方や、Photoshop初心者でも商品写真を加工できるように、たったの4つの工程をするだけでできる加工の方法を紹介させていただきます。普段、商品写真を加工している方は、弊社がどのように加工をしているのか、参考になればと思います。

※Photoshop CS5の画面を使ってご説明させていただきます。

目次

 

STEP1.画像の切り取り

編集したい画像をPhotoshopへ表示させます。
切り取りの方法は、ツールパネルにある切り抜きツールを押します。
弊社のECサイトは、画像アスペクト比が1:1なので、1:1に切り抜きをします。
切り抜き

切り抜きたい箇所をドラッグをします。
ドラッグをすると、下記画像のように不要な箇所は黒くなります。これで良ければ、赤色で囲ってあるをクリック。あるいは、Enterキーで切り抜きが完了します。
Screenshot_2 (2)

 

STEP2.サイズの変更

そのまま、一眼レフやデジタルカメラ、スマートフォンで撮影した写真のサイズでは、Web用に使う画像としては画像解像度が高いです。高すぎるとサイトの読み込みや画像を表示するスピードが遅くなります。それを防ぐためにも、各々のサイトに合ったサイズで変更する必要があります。
手順は、「イメージ」⇒「画像解像度」をクリックします。
解像度

「画像解像度」をクリックすると、下記のような画面が出ます。
弊社では、画像サイズを1000px × 1000pxにしています。amazonにも出品しており、画像の長編が最低1000pxなのでこちらの数値にしております。幅と高さに数値を入力ができたら「OK」を押してサイズの変更が完了します。
解像度_詳細_r

 

STEP3.背景を白くする

背景の色は白が最適です。より商品が強調され、どんな色の商品でも相性が良く、さらに反射による色被りを避けられるというメリットがあるからです。
ここでは、トーンカーブ使って説明していきます。
「イメージ」⇒「色調補正」⇒「トーンカーブ」をクリックします。
色調補正

3個あるスポイトのうち、1番右にある「画像内でサンプルして白色点を設定」をクリックして、背景の白くしたい箇所にクリックをしていきます。
背景の色が白っぽくなり、それで良ければ「OK」を押して、背景の色を白く変えることで出来ます。
トーンカーブ

トーンカーブ前と後で比較してみましょう。
画像を並べると差が良くわかると思います。加工後の方が商品の強調さや色の発色も実物と近いものになります。
bbb

 

STEP4.保存方法

加工が出来たら、最後に保存方法です。
「ファイル」⇒「Webおよびデバイス用に保存」をクリックします。
web用に保存
保存が出来る拡張子は3つあります。

  • 写真画像:「JPEG」
  • 色数が少ない:「GIF」
  • 背景を透過:「PNG」

「最高画質」で保存をすると綺麗ですが、ページを読み込むスピードが遅くなってしまい、消費者がページから離脱する可能性があります。
弊社では、「JPEG」 「やや高画質」 画質:「60」で保存をしています。
拡張子や画質が決まり「保存」を押して自分で保存したいフォルダを選んで保存をすれば、すべての加工は終了です。
Screenshot_10

 

5.押さえたいポイント

人物の加工では関節に注意する
弊社では、人物が商品を持っているカットがあります。人物が商品を持っていると商品のサイズ感が伝わりやすいためです。
ここで気を付けている点は、膝や首などの関節で人物を切らないということです。
下記の画像で比較してみました。左の画像は、人物のバランスが分からないので、不気味であり不自然です。
人物の加工では顔出しがNGの場合があります。その時は、首では切らずに口元。足はどこに関節があるか想定できるように、なるべく関節と関節の間でトリミングをすると自然な感じになります。
比較

 

6.おわりに

Photoshopは多機能であり、何をどのように使えばいいのか分からないと思います。今回のように加工をして、さらにポイントを押さえると初心者の方でも、簡単に綺麗に商品写真の加工が出来ます。試してみてはいかがでしょうか。

 

他にも画像加工の方法を紹介していますので、よろしければご覧ください。

参照:photoshopで背景を切り抜き、背景を透明(透過)にする方法

参照:Photoshopで写り込んで欲しくない人や不要な物を消す方法

参照:Photoshopで背景を透明にし、別の背景と組み合わせる方法

参照:Photoshopの使い方:部分的に色を置き換える方法

 

本記事に関する提供サービス
・ホームページ制作

« » もどる

提供サービス

最新情報をお届け

メールアドレスを登録していただくと、おすすめ情報やアクシスブログの更新情報をお届けいたします。

メールフォームからの
お問い合わせ

集客やサイト改善などWebに関することなら、
何でもお気軽にお問い合わせください

メールでのお問い合わせ・ご相談

専用のお問い合わせフォームよりご連絡ください

お問い合わせフォーム

お電話でのお問い合わせ・ご相談

0120-439-241