ブログ

2016.01.14

初心者でもできる!商品写真を簡単に加工する方法と押さえたいポイント
初心者でもできる!商品写真を簡単に加工する方法と押さえたいポイント

Web制作

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

 

 

 

ホームページ制作でお悩みですか? アクシスのホームページ制作サービスをご覧ください。

WEBコンサルティング

最適化・最大化させる。

制作、集客、解析、改善、検証まで一気通貫した完全オーダーメイドのWebコンサルティング。
お客様のビジネスゴールに向けた戦略的コンサルティングを行います。

VIEW MORE くわしく見る

ホームページ制作

キレイなだけじゃない。

競合分析・サイト設計から更新・運用までトータルサポート。
Web集客のプロが在籍しているアクシスだからこそ実現するデータに基づき最適化されたHPを制作します。

VIEW MORE くわしく見る

ネット集客・広告

来てほしい人が来てくれる。

御社にとっての最適解は、本当にリスティング広告で集客することですか?
リスティング運用者全員がWebコンサルタントのアクシスでは、そこから話を始めます。

VIEW MORE くわしく見る

解析・分析・改善

あなたのサイトを丸裸に。

Webサイトの現状を正しく把握し、目指すべき姿とのギャップを知る。
“2軸思考”であなたのWebサイトを丸裸にし、Webサイトで今何が起きているかを正しく把握します。

VIEW MORE くわしく見る

お問い合わせ

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