タグ: 制作・クリエイティブ

＼美味しさアップでLP転換アップ！？／
静止画像をグツグツ動かす加工方法

Posted on by ワンプルーフ

＼美味しさアップでLP転換アップ！？／静止画像をグツグツ動かす加工方法

本日は、ワンプルーフのデザイナーによる、Photoshopの使い方講座、PART 2.をご紹介させて頂きます。

今回のテーマは、「静止画像をグツグツ動かす加工方法」です。

—————————————————
Photoshopの作業手順
—————————————————
1.　画像をゆがみフィルターでゆがませる
2.　未編集の画像と、1で作成した画像をタイムラインで並べる
3.　秒数や、画像の枚数など調整する
—————————————————

☆1の画像のバリエーションが多いほど、リアリティが増すと思います！

—————————————————
今回使用する静止画
—————————————————

すき焼き！静止していても、とってもに美味しそうですね。

今回は、この静止画を

—————————————————
Photoshopで手順通りに加工すると▼
—————————————————

—————————————————
加工後▼
—————————————————

ほら！

この通り、まさに目の前に鍋がグツグツ煮立っていると錯覚してしまうほど、シズル感が増しています！

—————————————————

どうでしょうか？

楽天市場やYahoo！ショッピングなど、ECの大手モールの食品ジャンルの店舗様の商品ページで見る方も多いかもしれませんが。

実はこの加工方法、思ったよりもとっても簡単です。

Photoshopの操作にさえ慣れてくれば、実作業自体は、約15分程度で出来てしまいます。

食品関係の店舗さんはもちろん、プルプル感など出したい、美容系の店舗さんにも使えるテクニックではないでしょうか？

ワンプルーフでは、LP制作をはじめ、トップページの制作、サイト全体の構築からリニューアルなど、制作のみの案件もお受けしております。

MakeShop、FutureShop2、EC-CUBEなどの自社サイトから、楽天・Yahoo!ショッピング、Wowma!などのモールまで対応が可能です。

制作代行について、詳しく話を聞いてみたい！

というお客様がいらっしゃいましたら、お気軽に、下記問い合わせフォームよりお問合せくださいませ。
※本記事の設定方法、作業サポートはお受けしておりませんので、予めご了承くださいませ。

※使用ソフト：PhotoshopCC　／　使用画像：fotoliaにて購入のため、二次転載、ダウンロード不可

＼ただでは離脱させません！／
楽天スマートフォン商品ページ別に設置出来る、
店舗オリジナル、追従お気に入りボタンの
設置方法を公開！

Posted on by ワンプルーフ

＼ただでは離脱させません！／楽天スマートフォン商品ページ別に設置出来る、
店舗オリジナル、追従お気に入りボタンの設置方法を公開！

今回、楽天市場店の運営に活かせるノウハウを一つ公開いたします。

楽天市場のスマートフォン版商品ページに、店舗様オリジナルのデザインで、さらに、スマホでスクロールしてもちゃんと追いかけてきてくれる、商品お気に入り登録ボタンの設置方法を公開いたします。

楽天市場は、ストアのお気に入りボタンというのは比較的楽に色々と設置できていました。

ただ、商品ごとのお気に入りボタンは、スマホページですとページの下段の方にしかなく、押しづらい、押されないという課題がございました。

今回は、弊社のクリエイティブチームメンバーにより、スマホ商品ページ別に、オリジナルのボタンを作成して、さらに、スクロールしても追いかけてくれる設置方法をご紹介いたします。

その前に、まずは手を加える前のページを見てみましょう

—————————————————

□対策前　「初期設定（デフォルト）時」

—————————————————

—————————————————

このような形でデザインされています。

※正直、分かりにくい、押しにくい、ですね。。

そこで、ワンプルーフが対策すると、以下のようなデザインになります。

—————————————————
■対策後
—————————————————

—————————————————

こうなります。

必ず商品横にお気に入りボタンがついてくるので、常に、お客様が気になっちゃ瞬間に、ボタンが押せるよう工夫しました。

—————————————————
コーディング方法
—————————————————
以下のソースを、


#shareButtons ul {
　　border-bottom: 1px solid #ccc;
}

#shareButtons li:first-child {
　　border-left: none;
　　position: fixed;
　　 right: 6px;
　　 z-index: 9999999;
　　 bottom: 290px;
　　 background: #f6f6f6;
　　width: 46px;
　　 border-radius: 3px;
　　 border: 1px solid #ccc;
　　 height: 67px;
}

#shareButtons a{
　　-webkit-box-orient: vertical;
　　 -webkit-flex-direction: column;
　　 flex-direction: column;
　　 position: relative;
　　 width: 100%;
　　 height: 100%;
　　 color: #333333;
}

#shareButtons .iconWrap {
　　 width: 100%;
　　 height: 50%;
}

#shareButtons .iconWrap.favoriteIcon > div {
　　 background: transparent url(お気に入りボタンの画像URL) 0px 0px no-repeat;
　　 background-position: -1px 0;
　　 width: 46px;
　　 height: 65px;
　　 background-size: contain;
}

#shareButtons li:first-child .text {
　　 font-size: 10px;
　　 display: none;
}


RMSの以下に記述▼

RMSトップ＞デザイン設定＞スマートフォンデザイン設定＞商品ページ設定＞説明文

に入れて頂ければ追いかけてくる、商品ごとのお気に入りを設置可能です。

ボタンはデザインする必要が出てきますが、他店舗との差別化が図れますし、セール時に、その場では買わなくとも比較検討頂くきっかけづくりとしてお気に入り登録を促すことができます

さらに、お気に入り登録数を増やすことで、セールでの山を作る準備にもなりますので、ぜひ、楽天店の店長さん、スタッフさんは実践してみてください。

—————————————————
注意点
—————————————————

上記対策を行う場合、デフォルトのお気に入りボタンを上書きして指定しているため、こちらは消えてしまうので、ご注意くださいませ。

※弊社では責任を負いかねます。

ワンプルーフでは、こうした小さなRMSの設定や小技テクニックも含めて、楽天・Yahoo!ショッピングを中心に、EC運営代行支援、コンサルティングを手掛けております。

サービスについて、詳しく話を聞いてみたい！

というお客様がいらっしゃいましたら、お気軽に、下記問い合わせフォームよりお問合せくださいませ。

※本記事の設定方法、作業サポートはお受けしておりませんので、予めご了承くださいませ。

たった10秒で出来ちゃう！
食品画像をおいしそうに見せる方法

Posted on by ワンプルーフ

たった10秒で出来ちゃう！食品画像をおいしそうに見せる方法

本日は、ワンプルーフのデザイナーによる、Photoshopの使い方講座、PART 1.をご紹介させて頂きます。

今回のテーマは、「たった10秒で出来ちゃう！食品画像をおいしそうに見せる方法」です。

—————————————————
Photoshopの作業手順
—————————————————

①　編集したい画像をPhotoshopで開く
②　レイヤー下部の調整レイヤーから露光量を選択
③　数値を下記画像の方向に動かしながら、ちょうどいい具合になるように調整
　　※露光量のカーソルを右側に引っ張りすぎると、明るい部分が白飛びしてしまいます。

以上、たった10秒の、簡単3ステップ！

これで、大半の食品画像は、おいしそうな雰囲気が出てくるようになります。

Photoshopを触ったことのない方でも、簡単にできます。
ぜひ、この機会にお試しください。

—————————————————
参考イメージ
—————————————————

※使用ソフト：PhotoshopCC2018　／　使用画像：fotoliaにて購入のため、二次転載、ダウンロード不可

—————————————————
Photoshop上部メニューからも調整可能！
—————————————————

イメージパネル ⇒ 色調補正 ⇒ 露光量

上記の手順でも、露光量を調整することができます。
※画像を直接調整することになるため、本記事では再編集しやすい調整レイヤーを推奨

—————————————————
更に細かく“おいしそう”を追求したい方は
—————————————————

・イメージパネル⇒レンズフィルター（オレンジ系統の色を乗算）
・イメージパネル⇒色調補正⇒色相・彩度（色相を少しだけ下げ、彩度を少し上げる）

上記の効果を、露光量とあわせて調整するだけで、おいしそうな色になります。

ただ、商品によっては、本来の色味とかけ離れて違和感が生まれてしまう場合があります。
元画像と見比べながら、少しずつ調整してみましょう。

—————————————————

ワンプルーフでは、LP制作をはじめ、トップページの制作、サイト全体の構築からリニューアルなど、制作のみの案件もお受けしております。

MakeShop、FutureShop2、EC-CUBEなどの自社サイトから、楽天・Yahoo!ショッピング、Wowma!などのモールまで対応が可能です。

制作代行について、詳しく話を聞いてみたい！

というお客様がいらっしゃいましたら、お気軽に、下記問い合わせフォームよりお問合せくださいませ。
※本記事の設定方法、作業サポートはお受けしておりませんので、予めご了承くださいませ。

セール前の囲い込みに！「お気に入り登録ボタン」をサムネイル直下に目立たせるCSS×Javascript TIPS！

Posted on by ワンプルーフ

【楽天市場】スマホ用商品ページのサムネイル直下に「お気に入り登録ボタン」を設置する方法をご紹介します。

楽天市場内のスマホ用商品ページには、お気に入りボタンがとても分かりづらいところにあります。

しかし、以下のJavascriptとCSSを実装することで、商品ページの“ファーストビュー”と呼ばれる、メイン画像（＝通称：サムネイル）直下に、「お気に入り登録ボタン」を設置することが出来ます。

このJavascriptとCSSにより、お気に入り登録数の増加、セール前の囲い込みを狙います。

設置方法▼
jQuery(function ($) {
“use strict”;
var itemID = $(“meta[property=’apprakuten:item_id’]”).attr(“content”),
favolink = ‘

お気に入り商品に追加


‘;
$(‘#itemName’).before(favolink);
});


.favorit-btn {
width: 100%;
box-sizing: border-box;
margin: 12px 0;
text-align: center; }

.favorit-btn a {
display: block;
text-align: center;
text-decoration: none;
background: #000;
color: #FFF;
letter-spacing: 1.2px;
font-size: 14px;
padding: 16px 0;
border-radius: 3px; }

設置イメージ▼

施策事例▼
1.　楽天セール前に、お気に入り登録していただく　※メルマガで告知など、なお◎
2.　セール直前に、割引 or ポイント変倍を実施
3.　お気に入り登録頂いたユーザー様へ通知
4.　セール時の転換率アップ、売上アップを狙う

といった、セール事前の対策から、セール後の売上作りに向けて、戦略的な施策を打つことが出来るようになります。

ぜひ、一度実施してみてください。

なお、ワンプルーフでは、こうした施策を含め、楽天・Yahoo!ショッピングを中心に、EC運営代行支援、コンサルティングを手掛けております。

サービスについて、詳しく話を聞いてみたい！

というお客様がいらっしゃいましたら、お気軽に、下記問い合わせフォームよりお問合せくださいませ。

※本記事の設定方法、作業サポートはお受けしておりませんので、予めご了承くださいませ。

勝てる！広告画像制作のポイント

Posted on by ワンプルーフ

楽天、Yahoo!等の大手モールで
広告画像やサムネイルを制作する際の簡単なポイントをご紹介します♪

img01

　　

＼今回ご紹介するポイントは3つ！／
1.目に留まるデザインを考える
2.内容を端的に伝える
3.クリック先との温度差に気をつける

　　

1.目に留まるデザインを考える

クリックしてもらうためには、とにかく目に留めてもらうことが重要です！
目に留めてもらうためには、どんなデザインにしたらいいのでしょうか。
⇒設置場所によって工夫が必要です。

▼ごちゃっとお祭り感を出した画像が多い場所では、余白を活かしたデザインに。
img02

▼すっきりしたレイアウトが多い場所では、くっきりとした色でインパクトのあるデザインに。
img03

おっなんだろう？と思わせたら勝ち♪
商品のイメージにもよりますが、横書きの画像がほとんどだと思うので縦書きにして目を引いたりしても◎

　　

2.内容を端的に伝える

大事な商品ですし、伝えたいことがたくさんあるとは思いますが、
その思いは商品ページにこめていただいて…＾＾

ぱっと見てクリックしたいと思わせるためには
いかに簡潔に《クリックするメリット》を伝えられるかどうかにかかっています。
読んでもらうよりも見てもらうという印象です！

まず、人の視線の動きを意識して、要素は重要なものを左上から順に配置していきます。
ボタンをおく場合は、最後に視線がいく右下におくのが効果的です。

img04

3.クリック先との温度差に気をつける

たとえばお祭りっぽい雰囲気の広告画像をクリックしたあと
シンプルなページが出てきたらどう思いますか？

画像とクリックした先のページのイメージに温度差がありすぎると
ユーザーが違和感を感じてしまったり、萎えてしまったりと
離脱の原因になることもありますのでご注意ください！

　　

※こちらで例にした商品画像はすべて架空のものです。

カッコイイWEBで物が売れるのか？

Posted on by hideto.osada

ワンプルーフデザイナーのKです。

デザインだけを重視しても売れない！ECのクリエイティブとWEBデザインの違いのお話。

カッコよくて奇抜で見栄えがいいものを！という考えも分かりますし、「自分の作品」としてカッコよさを意識して制作してしまうデザイナーさんも少なくないようです。

一般のWEBサイトやコーポレートサイトとECサイトでは、求められるものが違います。

売れないサイトで良くあるのは、デザインとアートの区別を出来ていないサイト。

アートとは、制作者の主観で作成したもの。その人の好みの作成方法・デザイン・イメージ・感性などを盛り込んである為、同じ主観の人間しかその作成物の良さを分かることが出来ません。

デザインとは、相手に認識させる為のもの。人間の感性・価値観とはさまざまで、考え方も違う。それを共通した認識を持たせる為に作製したものがデザインになります。

ECサイトでは、クリエイティブ品質が高く、見た目がキレイ過ぎることで、お高く見えて離脱してしまう人も多いのだとか。

つまり、購入ユーザーがどのような方なのか、ターゲットを踏まえてデザインしなければ、高品質なクリエイティブが意味を成さない所が離脱の要因になったり、CVRを低下させることもある、ということ。

EC業界の方々がよく口にする、いわゆる「楽天っぽさ」、ごちゃごちゃした安心感が、購買意欲を高めたり、すっきりしたページと比べて回遊しやすく感じることもあるのです。

「デザインができる」と「ECのデザインができる」は大きく違う、と痛感している今日この頃。

クリエイティブ職の種類には、WEBデザイン、グラフィック、イラスト、パッケージデザイン、等が一般的ですが、その1つに「ECデザイン」という領域があってしかるべきだと感じています。それほど特異な領域だな、と。

クリエイティブで売れる売れないが決まることもある。数字で見える。シビアだけど分かりやすい。それがECデザインの世界。「売れるデザイン」を極めていきたいと思います。

※弊社では最新のEC運営ノウハウ、各モールの市場動向、秀逸なECサイト紹介等、の情報共有～各クライアント様での対応、対策方法に関するご提案～実務運用までを一貫してご提供しています。→サービス一覧はこちら