新型コロナウイルス拡大防止策による在宅勤務のご案内

誠に勝手ながら、新型コロナウイルスの拡大防止策の一環として3月27日より在宅勤務とさせていただいております。
そのため、代表番号(03-6416-5195)にお掛けいただいた場合、誠に申し訳ございませんが、お電話が繋がりません。お問い合わせをご希望のお客様に関しては 当サイトの問い合わせフォームよりご連絡を下さいますようお願い申し上げます。

問い合わせフォームはこちら

【必読!】楽天で売上を上げるために必要な商品ページのデザインとは

Pocket

「楽天市場の商品ページを作成することになったけど、どんなデザインをすればいいか分からない。」、「商品ページをデザインすると言っても何から始めればいいか分からない。」

このような、楽天でデザインを制作する際に生じる悩みに当記事でお答えいたします。

楽天市場におけるデザイン

一般的なデザインとの違いは

楽天市場で作成するデザインと一般的なデザインとの一番の大きな違いは、“売れるデザイン”を作成する必要があるということです。売れるデザインとは何かというと「人の悩みを解決することができるデザイン」です。楽天市場で商品を検索しているユーザーは少なからず何かしらの悩みを抱えているものです。

「育毛剤」というキーワードで検索をしたユーザーがいたとしましょう。このユーザーは、自分あるいは誰かの髪の毛が薄くなってきたことに悩んでいるはずだと考えられますね。

この例からも分かるように、楽天市場でデザインを制作する際は「人の悩みを解決する」必要があります。一般的なデザインは「おしゃれ」「きれい」「カッコいい」ものを作成しますが、楽天ではおしゃれなデザイン≠売れるデザインであることをまず理解する必要があります。

商品ページ>>>トップページ

7割以上のユーザーが検索結果を経由して商品を購入していると言われています。つまり、ほとんどのユーザーはトップページにアクセスしないということです。デザインというとトップページなどを想像されることが多いかもしれませんが、楽天においてはトップページより商品ページが圧倒的に重要であることを理解しましょう。

スマホ>>>PC

トップページより商品ページが大切であるように、楽天市場ではPCよりスマホのデザインが大事です。楽天ではスマホからのアクセスが9割以上と大部分を占めています、このことからも、スマホファーストの重要性が伺えます。

デザインはPCで行うため、「スマホで見た時にどうなっているのか」ということを忘れてしまいがちですが、9割以上のアクセスがスマホからであることを踏まえ、スマホで見た時も見やすいかどうかを意識するようにしましょう。

商品ページ作成時の3つのポイント

【1】既存ページがある場合は、課題点をまとめる。

課題として、以下のことが挙げられます。

・ファーストビュー(FV)を見て商品特徴がわかるかどうか

・スマホで見た時に見やすいか

・ターゲットに見合ったデザインであるか

・CVボタンの押しやすさ・ボタンと認識できるか

最低限、これらを押さえておくことでユーザーが見にくいと感じるページ構成を避けることができます。

【2】競合他社の商品ページを分析し比較。

デザインだけでなくページの要素を整理して「どんな商品ページか?」を分析します。
① FV
作り込まれたFVは、商品名や特徴、サイズなどが1枚でユーザーに伝わるよう作成されています。競合のものと比較して、伝えきれていないポイントがないかを探しましょう。

② ランキング入賞
販売し始めたばかりの商品の場合、ランキングなんて受賞できないとお思いになるかもしれません。しかし、楽天市場には「リアルタイムランキング」というものがあります。これは、15分に1回ランキングが更新されるものです。リアルタイムランキングであれば、販売実績がなくてもランキング受賞も夢ではありません!

③商品の特徴(特徴1、特徴2…)
以下のような内容を記載します。
・どのような特徴があるのか
・どのような成分が含まれているのか
・他者と比較して自社の商品の強みがどこにあるのか
・どのようなこだわりがあるのか
など

④ 使い方/楽しみ方
使い方なんて実物の商品にも書いているから要らないと思う人もいるのではないでしょうか?ただ、ここでいう使い方は“普通”の使い方が全てではありません。例えば、「意外な使い方」や「商品開発者がおすすめする使い方」などです。
もちろん、初めて購入を考えているユーザーにとっては“普通”の使い方も大事ですが、それだけに捉われないいろいろな使い方や楽しみ方を記載しましょう!

⑤レビュー
実際に商品を購入したお客様の“声”を掲載することで、商品の購入を考えているユーザーの安心感を高めることができます。ユーザーは商品を購入して失敗したくないと考えています。「ミネソタ大学とイリノイ大学あーバナ・シャンペーン校の研究者らが行った調査では、職場で従業員がネガティブなやりとりをした時に腹を立てた気分は、ポジティブなやり取りをした時の幸せな気分と比べ、5倍の強さで感じられたことがわかりました。」(引用:参考LISTEN)。これと同様のことが商品を購入したときに起きると考えると、実際に商品を購入したお客様の声がどれだけ大切かお分かりいただけると思います。ユーザーに安心してもらい、転換率アップを図りましょう。
⑥あす楽等の配送情報
早く届くことや、いつ届くのかを明記することで転換率にいい影響があります。また、ユーザーからの問い合わせやクレームの数を減らすことも可能ですので、必ずお買い物カゴ付近に掲載しましょう。

ポイントは、デザインとページ構成です。
売れている商品ページは、全体的なデザインや文字の読みやすさが優れているだけなく、伝える順序も工夫されています。

【3】2で調査した参考ページの構成に基づき、自社商品の情報を落とし込む。

2でまとめた内容をもとに、自社商品の商品情報を整理してデザインに落とし込みましょう。

商品情報については、訴求ポイントの優先順位を考えつつ構成していくことでよりわかりやすい商品ページを作ることができます。

【初心者向け】最低限すべきこと

サムネイルの作成

まずはサムネイルから作成をしましょう。なぜサムネイルなのかというと、ユーザーが最初に目にするからです。先述した通り、楽天市場を利用する7割以上のユーザーが検索結果を経由して商品を購入します。その検索結果画面で表示されるのがサムネイルです。

これをしっかり作成していないと、どれだけいいLPを作っていても、商品ページへ流入してくれないためユーザーに見られることはありません。

サムネイル作成のポイント

【制作着手前】

前提として、楽天のサムネイルにはガイドラインがあります。

テキスト占有率20%以下 ・ロゴ(商品・ブランド・企業)、商品名、商品のスペック情報や特徴、販売促進文言やキャッチコピーなど

②画像内への枠線表現NGルール。

枠線とは画像の4辺を囲う線のほか、L字・帯状などの要素も含まれます。

辺の太さは関係なく、こういった枠線の使用もNGとされています。

③白背景もしくは写真背景以外の背景NGルール。

写真背景の定義:商品と一緒に撮影された背景

単色白背景の定義:カラーコード #FFFFFF(R255, G255, B255)

//禁止表現//

・商品画像と写真背景の合成 (カラーバリエーションを表現するため色違いの商品画像を合成することは可。その場合は商品のみ切り取られた画像を使用してください)

・白以外の背景色のベタ塗り

・グラデーションなどのグラフィック表現

これらのルールに基づいて、画像を制作する必要があります!

【制作時のポイント】

・最初にロゴや、アイコンなどを配置したフォーマットを作ることをお勧めします。

一度フォーマットを作ってしまえば、商品展開する際に作業の工数も減らせて、尚且つサムネイルに統一感を出すことができます。

・どんな商品か一目でわかるように商品画像を配置 ・スマホで画像を見て視認性をしっかり確認

・情報を詰め込みたくなりますが、20%規定もあるので端的に分かりやすく!

単品やセット商品、ポイント倍率等をアイコンで掲載することをお勧めします。

制作を効率よく進められるおすすめツール

必須ツール3選

・Photoshop:

写真や画像の加工・色の調整、複数画像の合成、テキストの追加や装飾などが自在に行えるツールです。

弊社では、商品ページ作成したり、広告用のバナー制作をする際に使用しています。

・Illustrator

ポスターやチラシ、ロゴのデザイン、地図やグラフ、インフォグラフィックの作成ができるデザイン・レイアウトソフトです。

弊社では、同梱物や規定書など紙媒体の制作物を作るときに主に使用していますが、要望に応じてIllustratorで商品ページやバナー制作を行う場合もあります。

・XD

webサイトやモバイルアプリ、音声デバイスのUI/UXのためのデザインツールです。 ワイヤーフレーム、デザインカンプ、プロトタイプを作成できるので、主に弊社ではWEBサイトやモールに出店する際の店舗のトップページを作る時にXDを使用しています。

それぞれのツールを個々に使うというよりは、用途に応じて3つのツールを使い分けながら1つの制作物を作成するイメージです。

その他、制作に便利なツール

弊社のデザイナーが実際に業務で使っている機能/ツールなどを紹介している記事です。

EC担当必見!バナー制作やデザイナーとのやりとりに便利なサイト

デザイン制作後にすべきこと

効果測定

クリエイティブを作成しても、売上が上がらなければ意味がありません。そのため、制作が終わったあとは、クリエイティブ変更の前後でどのような効果があったのかを測定します。

それぞれのクリエイティブで意識するべき指標は以下の通りです。

サムネイル変更によって変化が見られる指標

1.クリック率(CTR):クリック率はサムネイル変更で大きく変化が見られる指標の1つです。なぜなら、サムネイルでユーザーの心を動かすことができれば、クリックをする確率を高めることができるからです。

現在のクリック率が2%として、それを3%に上げることができれば、売上※は1.5倍になります。(クリック率以外の指標が変わらない場合)。下表参照。

※売上=アクセス数(=表示回数×クリック率)×転換率×客単価

売上

表示回数 クリック率 転換率 客単価

600

1,000

2.0%

3.0%

1,000

900 1,000 3.0% 3.0%

1,000

2.アクセス数:上記でアクセス数は、表示回数とクリック率をかけ合わせることで求められると述べました。つまり、表示回数が変わらなくても、クリック率が上がるとアクセス数は増加するということです。

LP変更によって変化が見られる指標:

転換率(CVR):上述してきた通り、LPでユーザーの悩みを理解し、解決することが大切です。また、ランキング受賞や商品レビューなどを掲載することで、転換率の向上に繋げられます。

弊社クライアントの美容商材を扱っている店舗様では、LP変更後1ヶ月でCVRが6.6%から10.7%と3.9ポイントも上昇したという事例があります。

注意点として、クリエイティブ変更によって効果測定をするのは大事ですが、クリック率やアクセス数、転換率などの指標は“価格”、“クーポン”、“送料”などクリエイティブ以外の条件によっても大きく変わるため、これらも加味して効果測定をする必要があります。

改善

効果測定によって課題が洗い出せたら、次は改善です。「商品ページ作成時のポイント-【1】既存ページがある場合は、課題点をまとめる」に記載のある通り、まず課題点をまとめます。次に、目標にしていた数値に対して「何が」「どれだけ」足りていなかったかを把握します。この差分を理解することで、次にどこを改善すべきかを明確にすることができます。

スタイリストのデザイン作成

ここまで「デザインとは」から始まり、「デザイン完成後の行動」まで説明をしてきました。それでもどうすればいいかわからないという方は弊社に任せてみてはいかがでしょうか?

弊社ではこれまで多くのクライアント様のEC運営代行を行ってきました。EC運営代行の1つとして、もちろんクリエイティブの作成も行ってきました。特に美容商材を扱うジャンルには強みを持っており、誰もが知る店舗様の代行もさせていただいております。

楽天市場を知り尽くしている私たちにデザイン作成を一任したい!という方はぜひ以下のリンクからお問合せください。

お問い合わせ

まとめ

ここまで、楽天の商品ページのデザインについて説明をしてきました。

まず競合店舗のデザインを分析することで、自社との差を把握します。分析をする項目としては、FV、商品の特徴、配送情報などが挙げられます

分析が完了し、実際にデザインを作成する際は以下の2つを意識しましょう。

  1. 売上アップに直結するデザイン
  2. 人の悩みを解決するデザイン

そして、デザインを作成したら終了ではなく、クリエイティブ変更の前後でどう指標が変わったかを分析し、それらを踏まえて改善していくことで売上が上がるデザインを目指しましょう。

弊社でもデザイン作成依頼をお待ちしておりますので、お困りの際はお問い合わせください!

お取引先様一覧(一部) -多くのお客様に弊社サービスを導入頂いております-

楽天 Amazon Yahoo

ユーグレナ・オンライン様

運営代行、コンサル、各種製作をさせて頂いております。

楽天 Amazon Yahoo Qoo10 Wowma!

チャップアップ様

運営代行、コンサル、各種製作をさせて頂いております。

楽天 Amazon Yahoo Qoo10 Wowma!

クリアネオ様

運営代行、コンサル、各種製作をさせて頂いております。

楽天 Amazon Yahoo

ベルタ様

運営代行、コンサル、各種製作をさせて頂いております。

楽天 Amazon Yahoo Qoo10 Wowma!

ブレスマイル様

運営代行、コンサル、各種製作をさせて頂いております。

楽天 Amazon Yahoo Qoo10

アクセサリー ジュエルVOX 様

運営代行、コンサルをさせて頂いております。

楽天 Yahoo Qoo10

セレクトショップMOMO様

運営代行、コンサル、各種製作をさせて頂いております。

楽天 Amazon Yahoo Qoo10

美マルシェ様

運営代行、コンサル、各種製作をさせて頂いております。

楽天 Yahoo Qoo10

プロ愛用ジェルネイル通販ジェルネ様

運営代行、コンサル、各種製作をさせて頂いております。

楽天

出島オンライン様

運営代行、コンサルをさせて頂いております。

楽天

スタイリンカー様

運営代行、コンサルをさせて頂いております。

Qoo10

ル・フタール様

運営代行、コンサル、各種製作をさせて頂いております。

楽天 Amazon Yahoo Qoo10

Smart Beam Laser正規代理店 MONCHUA様

運営代行、コンサル、各種製作をさせて頂いております。

楽天 Yahoo 製作

ヘアケアラボ様

コンサル、各種制作をさせて頂いております。

自社サイト

VENOSAN SHOP様

運営代行、コンサル、各種製作をさせて頂いております。

オウンドメディア

MUKUMI 様

オウンドメディアの構築、コンサルをさせて頂いております。

Qoo10

弾性ストッキングファクトリー様

運営代行、コンサル、各種製作をさせて頂いております。

制作 広告運用

東京血管外科クリニック様・ハンドベイン(手の血管)手術

広告運用代行、コンサル、各種製作をさせて頂いております。

制作

メンズスタイル様

同梱冊子の製作をさせて頂きました。

製作 広告運用

東京血管外科クリニック様・下肢静脈瘤手術

広告運用代行、コンサル、各種製作をさせて頂いております。

楽天 Yahoo 製作

ヘアケアプラス様

コンサル、各種制作をさせて頂いております。

楽天 Qoo10

Hera-Witch様

運営代行、コンサルをさせて頂いております。

楽天 Yahoo

フラコスメ様

運営代行、コンサル、各種製作をさせて頂いております。

オウンドメディア

beauty air様

オウンドメディアの構築、コンサルをさせて頂きました。

制作

株式会社ペンギントレード様

コーポレートサイトの制作をさせて頂きました。

オウンドメディア

ブランド図鑑.com 様

オウンドメディアの構築、コンサルをさせて頂きました。

製作

こころ卓球様

商品ページの製作をさせて頂きました。

制作

株式会社メディソリーゾ様

商品ページの製作をさせて頂きました。

オウンドメディア

住宅ローンSOS様

オウンドメディアの構築、コンサルをさせて頂いております。

制作

マハロネイルサロン 様

HPや販促チラシなどの製作をさせて頂きました。

制作

マハロヌイロア 様

HPや販促チラシなどの製作をさせて頂きました。

製作

アトリエKT-2様

HPや販促チラシなどの製作をさせて頂きました。

制作 Qoo10

海外ブランドならサウスコースト 様

運営代行、コンサル、各種制作をさせて頂いております。

Amazon Yahoo 制作 Qoo10

レディースシューズ ALETTA(アレッタ)様

運営代行、コンサル、各種制作をさせて頂いております。

楽天 制作

美甘麗茶 楽天市場支店様

運営代行、コンサル、各種制作をさせて頂いております。

楽天 制作

palclair楽天市場支店様

運営代行、コンサル、各種制作をさせて頂いております。

楽天

靴ネット通販コア様

コンサルティングをさせていただいております。

SNS

SHOEZOO様

インスタグラムの運用をさせて頂いております。

楽天 Yahoo 製作

ヘアケアフェスタ様

コンサル、各種制作をさせて頂いております。

製作

カジヤ様

各種制作をさせて頂いております。

楽天 制作

ブルービーセレクト 様

運営代行、コンサル、各種制作をさせて頂いております。

楽天 制作

Rifle楽天市場店 様

運営代行、コンサル、各種制作をさせて頂いております。

Yahoo コンサル

PARFUM 様

コンサルティングをさせて頂いております

楽天 制作

カルトラーレ 様

運営代行、コンサル、各種制作をさせて頂いております。

楽天 制作

きらりセレクション 様

運営代行、コンサル、各種制作をさせて頂いております。

楽天 Yahoo 製作 コンサル

ブリッサリットル 様

コンサル、制作をさせていただいております。

楽天 Yahoo 製作 コンサル

インテローグ様

コンサル、制作をさせていただいております。

楽天

PENGUIN VINTAGE様

運営代行、コンサルをさせて頂いております。

その他サービス