入門）画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅力的なお店づくりが出来るようになる。(C)

(C) 2013 Estore Corporation

専門(入門）画像編集講座


内容１．はじめに

２．画像編集ソフトについて

３．画像の補正

４．画像のトリミング

５．画像のリサイズ

６．画像に文字をのせる

７．画像の境界線

８．バナーの作成


１. はじめに


本講座の目的

１

基本的な画像の編集方法を学び、より魅力的なお店づくりが出来るようになる。


ネットショップで買い物をする際役立つ情報

２

出典：株式会社Ｊストリーム

商品写真約７割が「商品写真」

の充実が大切と回答


売上の方程式

３

売上 = 来店数 × 転換率 × 受注単価

来店数・・・お店に来店されたお客様の数

転換率・・・来店されたお客様のうち、

実際に購入にいたった割合

受注単価・・・１受注当たりの平均金額


売上の方程式

４

売上 = 来店数 × 転換率 × 受注単価

5万円 = １,０００人 × ０.５％ ×１万円

10万円 = １,０００人 × １.０％ ×１万円

15万円 = １,０００人 × １.５％ ×１万円

魅力的な商品画像やバナーを掲載し転換率を上げる


受講後できるようになること

５

・商品本来のイメージが伝わる画像補正

・商品を魅力的に見せるトリミングとリサイズ

・文字をのせたバナーの作成

(C) 2013 Estore Corporation ６

２. 画像編集ソフトについて



７

■画像加工ソフト

無料

Adobe Photoshop Elements

GIMP

14,490円

有償

PhotoScape



８

■PhotoScape（無料）をダウンロードする

http://photoscape.softonic.jp/



９

■画像編集を開く

どちらからをクリックし「画像編集」を開く。



１０

■編集する画像を開く

① 任意のフォルダをクリックし選択。

② 編集したい画像をクリックして開く。

編集画面

１

２ ① で選択したフォルダ内の画像のみが表示される。

(C) 2013 Estore Corporation １１

３. 画像の補正



１２

■画像の回転撮影時についた傾斜は、画像を回転させて修正する



１３

■明るさとコントラストの調整撮影で暗くなった画像は、明るく修正し見栄えよくする



１４

■色味の調整写真が極端に色味がかっている場合は調整する

赤み黄み青み

本来の色



１５

■画像の回転

撮影時についた傾斜は、画像を回転させて修正する



１６

■画像の回転方法

1

２

「ホーム」のタブをクリック

「任意の角度に回転」をクリック



１７

■画像の回転方法編集画面が開いたら「つまみ」を左右に移動、もしくは、回転したい角度を数字で入力し、画像を水平に修正する。

調整が終ったら「OK」ボタンをクリックして編集画面を閉じる。

3

4



１８

明るさとコントラストの調整

■明るさを調整し見ばえを整える



１９

■明るさとコントラストの調整方法

「明るさ,カラー」のボタンをクリック ※右端の「▼ボタン」をクリックしないよう注意する。

1

２



２０

明るさとコントラストの調整

■明るさとコントラストの調整方法

3

4

調整が済んだら「OK」ボタンをクリックして終了。

「明るさ」と「コントラスト」のつまみを動かし調整する。両方のつまみを同量で動かし調整をすると、比較的簡単に見ばえを整えることができる。



２１

■色味の調整写真が極端に色味がかっている場合は調整する

赤み黄み青み

本来の色



２２

■色味の調整方法

補正したい画像を開き ①「ホーム」のタブをクリック ②「明るさ,カラー」ボタン右端の「▼ボタン」をクリック ③「カラーバランス」を選択

1

２

3



２３

色味の調整

■色味の調整方法

目立つ色味つまみの調整

赤みつまみを「Green」と「Blue」側に移動

黄みつまみを「Blue」側に移動、必要な場合は「Green」と「Red」側にも移動

青みつまみを「Red」「Green」側に移動

④編集画面が開いたら、下部の表を参考につまみを移動し色味を調整する。

⑤調整完了後「OKボタン」をクリックして終了する。

4 5

(C) 2013 Estore Corporation ２４

４. 画像のトリミング



２５

トリミングの注意点

■訴求ポイントとなる部分を切り出して見せる

どの部分の画像か分かるよう、見せたい事が伝わるようにする

イメージ

イメージ

襟元UP

ウエスト部分リボンUP

レディースファッション通販

「リアルキューブ」

http://realcube.jp/



２６

■例）商材別のトリミング箇所

商材トリミング箇所

洋服襟元、袖口、裾、ファスナーなどの空き部分、生地、ボタンやステッチ、ネームタグ、洗濯表示 etc

果物切り分けた部分、盛り付け例、木になっている状態、生産者の顔入り、盛り付け例 etc

食べ物外装、外装から取り出した中身、付属調味料、調理例 etc

家具人やサイズ比較できる物が一緒に写っている etc



２７

用意する画像の例

全体(正面）

全体(側面）

全体(背面）

中身

細部

大きさ

カラーバリエーション

利用イメージ



２８

画像のサイズ

■トリミングは画像のサイズを統一して見やすくする

商品ページ

ショッピングカート部分

商品一覧ページ



２９

画像のサイズ

■トリミングは画像のサイズを統一して見やすくする

商品ページ

ショッピングカート部分

商品一覧ページ



３０

画像のサイズ

■画像の推奨サイズ

商品ページショッピングカート部分

画像のサイズは、横640pix ×縦任意で統一

拡大表示

拡大表示の最大サイズ

横 640pix ×縦任意



３１

トリミングの方法

■トリミングの比率を決める

トリミングをする画像を開いたら、 ①「トリミング」のタブをクリック ②「自由トリミング」をクリックし「比率の選択画面」を開く

1

２



３２



予め設定された比率を使う場合は、希望の比率ををクリック。

予め設定されている比率以外に、任意で縦横の比率やサイズを決める場合に選択。

画像比率が横（幅）×縦（高さ）の比率＝ 3：4 横（幅）×縦（高さ）の比率＝ 4：3

どちらも「3：4」の比率を選択

3

4



３３



任意でトリミングの比率を設定したい場合、 ⑤「比率の設定」にチェックを入れ、値を入力 ⑥「OKボタン」をクリックし、ウインドウを閉じる

6

5

後の工程でサイズの調整が行えるので、ここでは⑤の「比率の設定」を使用する



３４


■トリミングの範囲を決める（横×縦＝4：3の場合）

マウスを右に移動

1 画像の上でマウスを左クリックしながら右側に移動し選択枠をつくり、マウスから指を離す。 ※マウスを下方向に移動した場合、比率が反転し「横×縦＝4：3」になるので注意する。

2

選択範囲が、横×縦でpix表示される。画像の推奨サイズ「横640pix」以上になるようにする。

マウスを下に移動



３５


■トリミングの範囲を決める（横×縦＝3：4の場合）


1

マウスを下に移動

画像の上でマウスを左クリックしながら下側に移動し選択枠をつくり、マウスから指を離す。 ※マウスを右方向に移動した場合、比率が反転し「横×縦＝4：3」になるので注意する。

選択範囲が、横×縦でpix表示される。画像の推奨サイズ「横640pix」以上になるようにする。

2



３６


■トリミングの範囲を決める

3

選択範囲内にマウスを合わせると、カーソルが現れる。

カーソルを表示させたまま、マウスを左クリックしてトリミング範囲を動かし、切り出す範囲を微調整する。



３７


■トリミングした画像を保存する

5

④トリミングする範囲が確定したら「トリミング」ボタンをクリックし画像を切りだす。 ⑤トリミングをやり直したい場合は⑤のボタンで修正する。「元に戻す」・・・クリックするたびに、直前の状態に戻る。「やり直す」・・・元に戻したものを取りやめる。「すべて元に戻す」・・・最初に編集画像を開いた時の状態。

4

(C) 2013 Estore Corporation ３８




３９

■リサイズとは画像を拡大縮小してサイズを変えること

1920 x 2560（縦横比 3：4）

480 x 640 （縦横比 3：4）



４０

■リサイズの方法

リサイズする画像を開きます。 ①ホームのタブをクリック ②「リサイズ」ボタンの右端の「▼」マークをクリックし、リサイズする寸法の一覧を出す

1

2



４１

リサイズする時の注意点やポイント

■リサイズの方法

3

リサイズ寸法の選択一覧から、「幅の調整」を選択し、編集画面を開く。

4 5

横幅のリサイズしたい寸法を入力する。画質が粗くなるのを防ぐため、リサイズ前の画像より大きな寸法は入力しない。 ※ショップサーブの商品画像は、横幅640pixを推奨。入力後、「OK」ボタンをクリックで、リサイズ完了。

(C) 2013 Estore Corporation ４２




４３

■画像だけでは伝わらない情報は文字にする

味噌ラーメン？？

・カレー味噌ラーメン

・4食入で1,480円

・36％OFF ・送料無料



４４

■例）文字で追加された情報

文字は短く端的に、読みやすく入れる



４５

■文字の入力

1

２

①「オブジェクト」のタブをクリック。 ②テキスト入力ボタン「T」の文字をクリックし、テキスト編集画面を開く。


■文字の入力


４６

別ウインドウの「テキスト入力画面」が開いたら、枠内に文字を入力する。改行したい場合は、予め、枠内で改行しておく。 ※入力した文字は、そのまま画像の上に反映される。

3


■フォント、文字の大きさや色の選択


４７

フォントの選択

文字サイズの変更

文字色の変更

パレットから、変更したい文字色を選択しクリックします。

それ以外の色に変更したい場合は、「More Colors」をクリックし「色の設定」画面を開きます。

6 5 4




４８

文字の入れ方

色が確定したら「色の追加」ボタンをクリックし、「作成した色」のパレットに保存する。

文字を基本色以外に変更したい場合、囲みの中をクリックし好きな色を選択する。

右サイドの矢印を上下に移動し「明るさ」を決める。作成中の色が小窓に表示されるので、確認しながら調整する。

⑩の保存された色をクリックで選択し、「OK」ボタンをクリックすると画面が閉じ、文字色の変更が完了する。

7

9

8

10

11



４９


文字の色が変更されたのを確認し、「OK」ボタンをクリックし、テキスト編集画面を閉じる。



５０

■文字位置の移動文字をクリックしテキストの囲み線を表示させる。囲み線の中で左クリックし、そのまま状態のままマウスを動かし文字を移動する。テキストの囲み線の外で、クリックをすると囲み線が消え文字の移動が完了となる。



５１

■文字の装飾

文字の上でダブルクリックをすると、「テキスト編集画面」が開く。

1 ２

３

各項左から順に ①太文字、傾斜をつける、アンダーラインを入れる ②文字の左寄せ、センター寄せ、右寄せ ③文字の透明度の調整（スケルトン）



５２

4 ５ 7

6

文字にアウトライン（縁取り）を入れる場合は、 ④「適用」にチェックを入れる ⑤アウトラインの色を選択する ⑥アウトラインの太さを決める ⑦アウトラインの種類を決める

■文字の装飾



５３

シャドウ（影）の調整をします。 ⑧シャドウを付ける場合はチェックを入れる ⑨シャドウの色を選択 ⑩シャドウの透明度を調整 ⑪シャドウの方向を調整

８９ 11

10

■文字の装飾

(C) 2013 Estore Corporation ５４




５５

■境界線の設定

境界線なし細い境界線太い境界線

ナチュラルポップ

グレーなどの淡い色で1pix程度の細い線がおすすめ



５６

■境界線のメリット、デメリット

メリット画像を強調できる、デザイン性や個性が出せる

デメリットサイトに窮屈さが出ることがある画像サイズが統一されていない場合、目立ってしまう



５７

■境界線の入れ方

1

２

3

4

①ホームのタブを選択 ②「フレームライン」のボタンをクリックし編集画面を開く

③境界線の色を選択 ④境界線の太さを選択編集が済んだら「OK」ボタンを押して終了する

(C) 2013 Estore Corporation ５８




５９

■バナーの役割購入者の注目を引き、売りたい商品へダイレクトに誘導する

商品ページ

商品ページ

商品ページ



６０

バナーのポイント

■興味をひく企画

訴求内容購入者の意識

季節のイベント必要性が大きい

送料無料・ポイント○倍、セールお得感

売れ筋、人気商品売れているという安心感

雑誌、テレビで紹介メディアに対する信頼感、安心感

数量限定、期間限定今しか買えないという焦り

お試し価格・商品・セット安価で商品を試せるお得感、安心感



６１

バナーのポイント

■キャッチコピーは短く分かりやすく内容を端的にストレートに伝える

■文字は見やすく大きめに一目で内容がわかるよう大きめの文字にする。

■クリック感を出す今すぐクリック、購入はこちらなどの文字を入れる

■何のバナーか一目でわかる画像使用する画像から、内容が連想できるようにする。


２－５．バナーの作成

■バナーの作成方法トップページのセンター用フリーエリアにバナーを掲載する場合

左サイドバー

右サイドバー

ヘッダ

左サイドバー

ヘッダ

横：480pix 縦：任意

横：650pix 縦：任意

センター用バナーエリアのバナーサイズは、レイアウトによって異なりますトップページ

６２



６３

■バナーの作成方法

Ｖ ③別ウインドウが開いたら、トリミングの「比率の設定」にチェックを入れ、作成するバナーのサイズを入力する

1

2

3

バナーに使用する画像を開き、 ①「トリミング」のタブをクリック ② 「比率の選択画面」から「比率/サイズの割り当て」を選択



６４



画像の上でマウスを左クリックしながら右側に移動し選択枠をつくり、マウスから指を離す。 ※マウスを下方向に移動した場合、比率が反転するので注意する。

4

選択範囲の大きさがpixで表示される

ので、トリミングする範囲がバナーの作成サイズ以上の大きさになるようにする。

5

6 トリミングする範囲が決まったら「トリミング」ボタンをクリック



６５


Ｖ

Ｖ

7

8

9 トリミングが完了したら、 ⑦「ホーム」のタブをクリック。 ⑧「リサイズ」ボタンをクリックし編集画面を開く。

バナーの作成サイズを入力し、「OK 」ボタンをクリックしリサイズする。



６６


Ｖ 11

10

Ｖ

12

次に画像に文字をのせていきます。 ⑩「オブジェクト」のタブをクリック ⑪テキスト入力の「T」ボタンをクリック ⑫編集画面が開いたら、テキストを入力し、文字の大きさやアウトラインを設定する。



６７


Ｖ

13

14

Ｖ

15

最後は、境界線（枠）の設定です。 ⑬「ホーム」のタブをクリック ⑭「フレームライン」のボタンをクリック ⑮編集画面が開いたら、境界線の色と太さを選択



６８


Ｖ

Ｖ

15

16

⑮「保存」ボタンをクリックし設定画面を開く。 ⑯「名前をつけて保存」をクリックし、パソコンに保存する



６９

・バナーの設置場所別のサイズトップページレイアウト（右サイドバーあり、なし）

詳しくは、DVDのメニューからセミナー資料を確認ください

■バナーの設置方法、設置場所別のバナーサイズ

・バナーをセンターエリアに設置する方法



７０

■素材集やフォントの活用 Yahoo!やGoogleで素材やフォントを検索。

【無料の素材やフォントの検索キーワード例】

無料素材 SALE / 無料素材バナー / フリーフォント / 無料フォント日本語…etc

有料の素材サイトや素材集を使えばデザインの幅が広がります。


セミナー

７１

テーマにあわせて、詳しくノウハウを身につける

http://www.ebs.estore.jp/

売れる商品撮影に必要な基本が身につく！


セミナー

７２

http://www.ebs.estore.jp/


代行サービス

７３

各種代行サービス http://clubestore.jp/service/index.html


ストアーデスク

７４

困ったときは電話サポート

専門スタッフがお答えします

Ｅストアーストアーデスク

TEL ：0570-05-1210／03-3595-1251（IP電話のみ）

FAX ：03-3595-2938

MAIL：[email protected]

電話受付時間：平日10時～18時

※お問い合わせの際は「ショップＩＤ」をお知らせください

(C) 2013 Estore Corporation ７５

ありがとうございました

入門） 画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅 力的なお店づくりが出来るようになる。(C)

Documents

入門）画像編集講座(C) 2013 Estore Corporation 本講座の目的 # 基本的な画像の編集方法を学び、より魅力的なお店づくりが出来るようになる。(C)