「楽天市場の商品ページを作成することになったけど、どんなデザインをすればいいか分からない。」、「商品ページをデザインすると言っても何から始めればいいか分からない。」
このような、楽天でデザインを制作する際に生じる悩みに当記事でお答えいたします。
Contents
楽天市場におけるデザイン
一般的なデザインとの違いは
楽天市場で作成するデザインと一般的なデザインとの一番の大きな違いは、“売れるデザイン”を作成する必要があるということです。売れるデザインとは何かというと「人の悩みを解決することができるデザイン」です。楽天市場で商品を検索しているユーザーは少なからず何かしらの悩みを抱えているものです。
「育毛剤」というキーワードで検索をしたユーザーがいたとしましょう。このユーザーは、自分あるいは誰かの髪の毛が薄くなってきたことに悩んでいるはずだと考えられますね。
この例からも分かるように、楽天市場でデザインを制作する際は「人の悩みを解決する」必要があります。一般的なデザインは「おしゃれ」「きれい」「カッコいい」ものを作成しますが、楽天ではおしゃれなデザイン≠売れるデザインであることをまず理解する必要があります。
商品ページ＞＞＞トップページ
7割以上のユーザーが検索結果を経由して商品を購入していると言われています。つまり、ほとんどのユーザーはトップページにアクセスしないということです。デザインというとトップページなどを想像されることが多いかもしれませんが、楽天においてはトップページより商品ページが圧倒的に重要であることを理解しましょう。
スマホ＞＞＞PC
トップページより商品ページが大切であるように、楽天市場ではPCよりスマホのデザインが大事です。楽天ではスマホからのアクセスが9割以上と大部分を占めています、このことからも、スマホファーストの重要性が伺えます。
デザインはPCで行うため、「スマホで見た時にどうなっているのか」ということを忘れてしまいがちですが、9割以上のアクセスがスマホからであることを踏まえ、スマホで見た時も見やすいかどうかを意識するようにしましょう。
商品ページ作成時の3つのポイント
【1】既存ページがある場合は、課題点をまとめる。
課題として、以下のことが挙げられます。
・ファーストビュー(FV)を見て商品特徴がわかるかどうか
・スマホで見た時に見やすいか
・ターゲットに見合ったデザインであるか
・CVボタンの押しやすさ・ボタンと認識できるか
最低限、これらを押さえておくことでユーザーが見にくいと感じるページ構成を避けることができます。
【2】競合他社の商品ページを分析し比較。
デザインだけでなくページの要素を整理して「どんな商品ページか？」を分析します。
① FV
作り込まれたFVは、商品名や特徴、サイズなどが1枚でユーザーに伝わるよう作成されています。競合のものと比較して、伝えきれていないポイントがないかを探しましょう。
② ランキング入賞
販売し始めたばかりの商品の場合、ランキングなんて受賞できないとお思いになるかもしれません。しかし、楽天市場には「リアルタイムランキング」というものがあります。これは、15分に1回ランキングが更新されるものです。リアルタイムランキングであれば、販売実績がなくてもランキング受賞も夢ではありません！
③商品の特徴（特徴1、特徴２…）
以下のような内容を記載します。
・どのような特徴があるのか
・どのような成分が含まれているのか
・他者と比較して自社の商品の強みがどこにあるのか
・どのようなこだわりがあるのか
など
④ 使い方/楽しみ方
使い方なんて実物の商品にも書いているから要らないと思う人もいるのではないでしょうか？ただ、ここでいう使い方は“普通”の使い方が全てではありません。例えば、「意外な使い方」や「商品開発者がおすすめする使い方」などです。
もちろん、初めて購入を考えているユーザーにとっては“普通”の使い方も大事ですが、それだけに捉われないいろいろな使い方や楽しみ方を記載しましょう！
⑤レビュー
実際に商品を購入したお客様の“声”を掲載することで、商品の購入を考えているユーザーの安心感を高めることができます。ユーザーは商品を購入して失敗したくないと考えています。「ミネソタ大学とイリノイ大学あーバナ・シャンペーン校の研究者らが行った調査では、職場で従業員がネガティブなやりとりをした時に腹を立てた気分は、ポジティブなやり取りをした時の幸せな気分と比べ、5倍の強さで感じられたことがわかりました。」(引用：参考LISTEN)。これと同様のことが商品を購入したときに起きると考えると、実際に商品を購入したお客様の声がどれだけ大切かお分かりいただけると思います。ユーザーに安心してもらい、転換率アップを図りましょう。
⑥あす楽等の配送情報
早く届くことや、いつ届くのかを明記することで転換率にいい影響があります。また、ユーザーからの問い合わせやクレームの数を減らすことも可能ですので、必ずお買い物カゴ付近に掲載しましょう。
ポイントは、デザインとページ構成です。
売れている商品ページは、全体的なデザインや文字の読みやすさが優れているだけなく、伝える順序も工夫されています。
【3】2で調査した参考ページの構成に基づき、自社商品の情報を落とし込む。
2でまとめた内容をもとに、自社商品の商品情報を整理してデザインに落とし込みましょう。
商品情報については、訴求ポイントの優先順位を考えつつ構成していくことでよりわかりやすい商品ページを作ることができます。
【初心者向け】最低限すべきこと
サムネイルの作成
まずはサムネイルから作成をしましょう。なぜサムネイルなのかというと、ユーザーが最初に目にするからです。先述した通り、楽天市場を利用する7割以上のユーザーが検索結果を経由して商品を購入します。その検索結果画面で表示されるのがサムネイルです。
これをしっかり作成していないと、どれだけいいLPを作っていても、商品ページへ流入してくれないためユーザーに見られることはありません。
サムネイル作成のポイント
【制作着手前】
前提として、楽天のサムネイルにはガイドラインがあります。
①テキスト占有率20%以下 ・ロゴ（商品・ブランド・企業）、商品名、商品のスペック情報や特徴、販売促進文言やキャッチコピーなど
②画像内への枠線表現NGルール。
枠線とは画像の４辺を囲う線のほか、L字・帯状などの要素も含まれます。
辺の太さは関係なく、こういった枠線の使用もNGとされています。
③白背景もしくは写真背景以外の背景NGルール。
写真背景の定義：商品と一緒に撮影された背景
単色白背景の定義：カラーコード #FFFFFF（R255, G255, B255）
//禁止表現//
・商品画像と写真背景の合成 （カラーバリエーションを表現するため色違いの商品画像を合成することは可。その場合は商品のみ切り取られた画像を使用してください）
・白以外の背景色のベタ塗り
・グラデーションなどのグラフィック表現
これらのルールに基づいて、画像を制作する必要があります！
【制作時のポイント】
・最初にロゴや、アイコンなどを配置したフォーマットを作ることをお勧めします。
一度フォーマットを作ってしまえば、商品展開する際に作業の工数も減らせて、尚且つサムネイルに統一感を出すことができます。
・どんな商品か一目でわかるように商品画像を配置 ・スマホで画像を見て視認性をしっかり確認
・情報を詰め込みたくなりますが、20%規定もあるので端的に分かりやすく！
単品やセット商品、ポイント倍率等をアイコンで掲載することをお勧めします。
制作を効率よく進められるおすすめツール
必須ツール3選
・Photoshop：
写真や画像の加工・色の調整、複数画像の合成、テキストの追加や装飾などが自在に行えるツールです。
弊社では、商品ページ作成したり、広告用のバナー制作をする際に使用しています。
・Illustrator
ポスターやチラシ、ロゴのデザイン、地図やグラフ、インフォグラフィックの作成ができるデザイン・レイアウトソフトです。
弊社では、同梱物や規定書など紙媒体の制作物を作るときに主に使用していますが、要望に応じてIllustratorで商品ページやバナー制作を行う場合もあります。
・XD
webサイトやモバイルアプリ、音声デバイスのUI/UXのためのデザインツールです。 ワイヤーフレーム、デザインカンプ、プロトタイプを作成できるので、主に弊社ではWEBサイトやモールに出店する際の店舗のトップページを作る時にXDを使用しています。
それぞれのツールを個々に使うというよりは、用途に応じて３つのツールを使い分けながら１つの制作物を作成するイメージです。
その他、制作に便利なツール
弊社のデザイナーが実際に業務で使っている機能/ツールなどを紹介している記事です。
デザイン制作後にすべきこと
効果測定
クリエイティブを作成しても、売上が上がらなければ意味がありません。そのため、制作が終わったあとは、クリエイティブ変更の前後でどのような効果があったのかを測定します。
それぞれのクリエイティブで意識するべき指標は以下の通りです。
サムネイル変更によって変化が見られる指標
1.クリック率(CTR)：クリック率はサムネイル変更で大きく変化が見られる指標の１つです。なぜなら、サムネイルでユーザーの心を動かすことができれば、クリックをする確率を高めることができるからです。
現在のクリック率が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運営代行の１つとして、もちろんクリエイティブの作成も行ってきました。特に美容商材を扱うジャンルには強みを持っており、誰もが知る店舗様の代行もさせていただいております。
楽天市場を知り尽くしている私たちにデザイン作成を一任したい！という方はぜひ以下のリンクからお問合せください。
まとめ
ここまで、楽天の商品ページのデザインについて説明をしてきました。
まず競合店舗のデザインを分析することで、自社との差を把握します。分析をする項目としては、FV、商品の特徴、配送情報などが挙げられます
分析が完了し、実際にデザインを作成する際は以下の2つを意識しましょう。
- 売上アップに直結するデザイン
- 人の悩みを解決するデザイン
そして、デザインを作成したら終了ではなく、クリエイティブ変更の前後でどう指標が変わったかを分析し、それらを踏まえて改善していくことで売上が上がるデザインを目指しましょう。
弊社でもデザイン作成依頼をお待ちしておりますので、お困りの際はお問い合わせください！
商品ページの作成が完了したら、次は検索結果で上位に表示されることが重要となります。
楽天市場のSEOを攻略するための記事はこちらで紹介していますので、併せてお読みください！
