楽天・ヤフーなどのECモールや自社サイトで商品を販売していると 

売りたい商品がなかなか売れない・・・

売りたい価格でなかなか売れない・・・  

などと、頭を悩ませている店長さんも多くいらっしゃるのではないでしょうか。  

今回はそんな方のお悩みを解決するコラムを書いていこうと思います！

購入者の購買心理を理解しよう！

突然ですが、皆様は”行動経済学”をご存じでしょうか。

”経済学”などなにやら難しそうな単語が入っていますが、簡単に説明すると、

日常生活でのお買い物などの経済行動の際の

購入者の意思決定・購買心理について研究した学問です。  

つまり、購入者はどういう時に、どの商品を選択して購入をするのかという研究です。

今回はそんな行動経済学の中の、次の2つの法則をネットショップに応用し、

購入者の購買心理を逆手にとって「売りたい商品を売る」「売りたい価格で売る」ための商品アップのコツをお伝えします！

～今回使う2つの法則～

・松竹梅の法則（極端の回避性）

・アンカリング効果

用語を見ると難しく感じてしまうかと思いますが、

日常生活を例に簡単に解説していきますのでご安心ください！

～用語解説～

松竹梅の法則（極端の回避性）

3つのランクの選択肢がある場合、

多くの人は真ん中のランクを選んでしまう心理。  

人はモノを購入する際、

「一番安いモノ」「一番高いモノ」「一番粗悪なモノ」「一番贅沢なモノ」などの極端を避けて、真ん中のモノを選んでしまう傾向があります。

アンカリング効果

印象的な情報や価格が基準となり、

その後の購買判断の基準に影響を与える効果。

人は本来であれば価格が高いと感じるモノでも、それ以上に高い価格のモノなどを一緒に見てしまうと、安いと感じてしまう傾向があります。

日常生活で考えてみよう！

日常生活にこれらを当てはめて考えてみましょう。

それでは実際にやってみましょう！

～うなぎ屋さん編～

あなたはうなぎ屋さんにお昼ご飯を食べにきました。

席についてメニューを見ると、次の3つのメニューがありました。  

さて、あなたは「松」「竹」「梅」どのうなぎを注文しますか？  

ほとんどの方は「竹」の「2,500円」のうなぎを注文したのではないでしょうか？

簡単に解説していきましょう！

このように3つのランクの価格を提示された場合、次のような心理が働きます。

せっかくならおいしいうなぎが食べたいな・・・！

2,000円で安いから「梅」はあんまりいいうなぎじゃないのかな・・・

これにするとなんか損した気がするな・・・  

でも「松」の3,000円はちょっと高価すぎるかな・・・  

よし！味も値段もちょうどよそさうな、2,500円の「竹」にしよう！！

これが、「松竹梅の法則（極端の回避性）」です！  

一番安いモノ・一番高いモノなどの極端な選択を避け、質・価格とバランスがとれていると感じ、心理的に一番得をしたと感じる真ん中のランクのものを選択する傾向があります。    

今度は「松竹梅の法則（極端の回避性）」に加えて、

「アンカリング効果」も使った例を、日常生活で考えてみましょう！

～家電量販店編～

あなたは、今テレビを購入しようと思い、家電量販店に来ました。

次の3つのランクがあった場合、あなたは「松」「竹」「梅」どのテレビを購入しますか？  

今回もほとんどの方は、「竹」の10万円のテレビを購入することにしたのではないでしょうか？  

こちらも簡単に解説していきましょう！  

今回は「松竹梅の法則（極端の回避性）」に加えて、

あえてかなり高価なものを「松」に設定したことがポイントになります。  

30万円のテレビの価格を見ることによって、

本来は高いと感じる、8万円、10万円の商品を相対的に”安い”と購入者は感じます。  

これが「アンカリング効果」です。  

30万円は高すぎるから、"安い"8万円か10万円のテレビのどちらかにしよう・・・  

一番ランクが低いテレビはなんか壊れたりしちゃいそうで不安だなあ・・・

どうせ買うならいいものが欲しいし・・・  

あと2万円プラスで払えばワンランクいいものが買える・・・  

よし、10万円のテレビにしよう！！  

といった「松竹梅の法則（極端の回避性）」の心理もしっかり働いています。    

「松竹梅の法則（極端の回避性）」「アンカリング効果」について、

なんとなくイメージができましたでしょうか？  

実は普段の日常生活の中で、誰しも体験していることなのです！  

楽天・ヤフー・自社サイトなどのネットショップでも同じ！

先ほどは解説のために、日常生活を例にしましたが、

これは楽天・ヤフー・自社サイトなどのネットショップでも同じです。  

ここまでの説明で、

「松竹梅の法則（極端の回避性）」「アンカリング効果」を使って価格の見せ方を工夫することで、購入者は真ん中の「竹」を選択してしまう、ということがわかったかと思います。  

これはつまり、

「一番売りたい商品」「一番売りたい価格」を真ん中の「竹」にすることで、

「一番売りたい商品を売ることができる」「一番売りたい価格で売ることができる」ということです。  

松竹梅の法則・アンカリング効果を使って商品アップをしよう！

ネットショップで売りたい商品・価格がある場合は、

次のポイントに気を付けて商品のアップを行いましょう！

「松」「竹」「梅」の3つの商品を用意して、
売りたい商品・価格を真ん中の「竹」にする

「松竹梅の法則（極端の回避性）」をうまく利用して、

一番売りたい商品や価格を真ん中の「竹」にしましょう。 

選択肢が4つ以上に増えれば増えるほど、購入者は選択することが困難になるので、

比較対象は必ず「松」「竹」「梅」の3つにしましょう。

一番高い「松」の商品は印象的な価格にする

「アンカリング効果」をうまく利用して、より「竹」を選択してしまうように、

購入者の購買心理をくすぐる絶妙な価格設定をしましょう。 

もし「松」の商品が売れてしまっても、店舗としてはむしろラッキーなので、

おもいきった価格の商品を「松」にしてみるのもいいかもしれませんね！

弊社のクライアント様のショップでも、売れないだろうなと思いながらも

平均単価の倍近くのおまとめセットを作ってみたところ、そちらも意外に売れたとのお話がありました！

さいごに

いかがでしたでしょうか？  

はじめは難しく感じてしまう用語だったかもしれませんが、

実は誰しも日常生活でモノを買う時に体験していることでしたね。 

楽天・ヤフー・自社サイトなど、ネットショップで商品を売る際も、

購入者の購買心理を考えることは非常に重要です。 

ご興味のある方は”行動経済学”についてくわしく調べてみると、

今後のショップ運営にきっと役立つかと思います。

今回ご紹介させていただきました商品アップのノウハウは、

購入者の購買心理について研究された”行動経済学”を応用した、裏付けのあるノウハウです。

  「松竹梅の法則（極端の回避性）」「アンカリング効果」などをうまく活用し、

購入者の購買心理を考えて、しっかりと戦略を立ててショップ運営をしていきましょう！  

楽天タグIDをご存知ですか？

タグIDって...

1. 聞いたことはあるが、設定したことはないよ。
2. コピーして使っているから意識したことがないよ。
3. だって必須項目じゃないから、、、

そんな方が多いのではないでしょうか。

しかし、楽天の検索結果でいつからかレフトナビに

カラー

なんて項目がありますよね。

そうです。

楽天のタグIDの登録をしっかりと行うことで、お客様を自社の商品ページに呼び込むことができ、また取りこぼしを減らせ、それは結果的に売上アップにつながることになります。

この機会にタグIDの設定を行ってみましょう。

キーワード検索

楽天で購入される場合は、皆さんどのように商品ページまでたどり着くでしょうか。
通常はキーワード検索ですよね。

例えばメンズのワイシャツを購入したい場合は

「メンズ　ワイシャツ」

とキーワード検索を行います。

トップページにもキーワード入力欄があり、使いやすいですよね。

ただ、これで検索すると件数が多くなるのは皆さんもご存じかと思います。
「メンズ　ワイシャツ」の場合、実際に60,000件以上がヒットしました。

件数が多くなればキーワードの追加！

これを行うのではないでしょうか。

例えば

「メンズ　ワイシャツ　長袖　ピンク」

ここまでキーワードを設定しますと
さきほどの60,000件から2,831件まで減りました。

気に入るワイシャツを探しやすくなったのではないでしょうか。

PCであればキーワード入力もスラスラ打てますが、これがスマホだったらどうでしょう。

キーワードさえ打つのが面倒ではないですか？

これを解決してくれるのがタグID、そして今までも入力されている全商品ディレクトリIDです。

タグ絞り込み

それでは、スマホで
「メンズ　ワイシャツ」
のキーワード検索は同じとします。

そこから絞り込みをタップし、現れたメニューを下の方にスクロールすると

カラー

や
他の項目があります！

そうです、これがさきほどのキーワード検索でカラーを追加したことと同様に絞り込みを行えるのです。

絞り込みを行ったものは「タグ」として表示されています。

カラーから「ピンク」を、そして袖の長さから「長袖」を選択した結果はこうなります。

Ｘで外したり、またつける場合は再度絞り込みから行うなど使い勝手が良いですね。

ただ見てください、件数です。

先ほどのキーワード検索の「メンズ　ワイシャツ　長袖　ピンク」では2,800件ほどありましたが、こちらのタグでは500件ほどしかありません。

そうです、タグの設定を行っていない方が多いのです。

せっかくの販売機会が失われたこと、これは痛いです。

全商品ディレクトリID、タグID

全商品ディレクトリIDとは

いわゆるジャンルです。
全商品ディレクトリIDは1商品につき1つだけ設定でき、楽天内のジャンルは最大で5階層ありますが、その最下層を登録する形となります。

メンズのワイシャツであれば

全商品ディレクトリID：206363
ディレクトリパス： メンズファッション > トップス > ワイシャツ

先ほどタグの絞り込みは最初にキーワード検索を行いましたが、楽天トップからジャンルをたどることでも行えます。

もちろん関係のないディレクトリIDへの登録は禁止事項となっています。
https://mainmenu.rms.rakuten.co.jp/auth/index.phtml?params=navi/rule/guide/10_015.html&s=&param2=0

タグIDとは

いわゆる該当ジャンル内の分類です。

タグIDは1商品につき32個まで設定できます。

32個もですよ！見逃していませんか？

メンズのワイシャツであれば、以下のようなものがあります。

ブランド*
サイズ*
カラー*
身長（cm）*
胸囲（cm）*
ウエスト（cm）*
ヒップ（cm）*
生地の素材*
ファッションテイスト*
生産国*
洗濯表示*
アパレルサイズタイプ*
袖の長さ*
柄*
サッカーチーム*
野球チーム*
スポーツリーグ*
首周り（cm）
桁丈（cm）
形状記憶シャツの種類
えりのスタイル

*はメンズファッション > トップス　共通

かなり細かく登録できますね。

タグIDの登録方法

全商品ディレクトリIDの登録方法はご存じだと思います。

ID検索をクリックしますと検索画面が開きます。

この画面で設定されていたかと思います。

実はその下の「STEP2」がタグIDです。

こちらはチェックする形で複数選べます。

上記では3つ選択しています。

袖の長さ　より　「長袖」
形状記憶シャツの種類　より　「形状記憶」
カラー　より　「ピンク」

まだ残り29個登録できますが、ディレクトリIDと同様に関係のないタグIDの設定は禁止されていますので、あれもこれもと付けすぎに注意してください。
https://mainmenu.rms.rakuten.co.jp/auth/index.phtml?params=navi/rule/guide/10_015.html&s=&param2=0

「設定する」をクリックでIDが設定されます。

あとは商品登録を行ってください。
これでタグID登録は完了です。

タグID登録のコツ

• ワイシャツは「生産国」の登録が可能です。例えばイタリア生地を使ったものや国産であれば指定する価値はありますが、マイナス要素として取られかねない中国産であった場合に、正直に登録する必要はありません。あくまで任意の設定となります。
• ファッション系商品には必ずカラー設定は行いましょう。どこかのカラーには設定できるはずです。
• 靴ジャンルであれば靴サイズ登録は絶対です。
• 項目選択肢を利用した商品は分類の中から複数選択しましょう。3種類のカラー設定があるワイシャツであれば3種類とも、靴サイズ展開が10種類あれば10種類ともです。
• もし登録に迷ったら、ユーザー目線に立ち、楽天のカテゴリからたどって見てみましょう。他店舗の付け方も参考になります。

登録するタグIDがない！

全商品カテゴリIDやタグIDは頻繁に変更されます。
楽天内で常時見直しが行われているのと、店舗からの要望を上げることができるのです！

RMSメインメニュー >店舗設定 >4　基本情報設定>「拡張サービス一覧 > 各種申請・設定変更のコーナーに「全商品ディレクトリ・タグ改善要望」

もしIDがない！ブランドがない！間違ってい
などがあれば上記から楽天に要望を出しましょう。

全商品ディレクトリIDとタグIDの削除

先ほども記載しましたがかなりの頻度で全商品カテゴリIDやタグIDが更新されます。

そこで結構な数のタグIDが使えなくなることがあります。

この使えないIDがかなり厄介です。

RMSでの更新でももちろん、CSVの更新でもこの使えなくなったIDが入っている商品はエラーとなり更新できなくなります。

それが例え商品名の変更であろうとも価格の変更でもあろうともエラーとなってしまうのです。

また商品の更新をしなくても、使えなくなったIDをそのまま放置することは結局設定していないことと同様ですので、また販売機会が失われたことになってしまいます。

楽天から出されるサポートニュースや「楽天からの重要なお知らせ」のチェックは欠かさず行ってください。

もし全商品カテゴリIDやタグIDの更新があれば、速やかに見直しを行いましょう。

おすすめ

例えば一括でタグIDを設定したい、またはタグIDが使えなくなったため一括で削除したい
そのような場合は、弊社「商品一括エディタ」の利用をおすすめします。

簡単に一括処理が行えますので、まずはお試しで使ってみてはいかがでしょうか。

最後に

キーワードの選定やSEOなどだけではありません。
全商品ディレクトリIDとタグIDを設定することで集客が増える＝売上アップにつながっていきます。
地味な作業になりますが、常に見直しを行うことを心がけましょう！

ネットショップを運営する上で、必要になるのがバナーです。しかし、実際作ってみると、「本当にこれでいいのかな？」と迷ってしまったり、どのような効果があるまで考えずに、貼り付けてしまうことがあると思います。

上のような一見よく見るバナーであっても、さまざまな要素から成り立っています。

一つ一つの要素を理解することで、よりスムーズに作れるようになり、より効果的なものになります。

今回は、バナーを作成する際のポイントをご紹介いたします。

バナーの要素

文字

伝えたい情報を、バナーサイズに合わせた文字数でテキスト化します。

目にとめてもらいやすくするため、文字間隔も大事です。

文章は、長すぎずキャッチーなものにしましょう。

また、特定の文字だけ目立たせたい場合は、文字の縁取りや、アンダーラインや影をつけることが効果的です。

素材

バナーの背景やワンポイントとして、素材の写真や画像を使う場合もあります。この場合は、そのバナーのターゲットや商品のイメージに合う画像を選びましょう。

色

配色をする時のコツは、使用する色を3種類におさえ、色の比率を6（ベースカラー）:3（メインカラー）:1（アクセントカラー）にすることです。

ベースカラー
主に下地に使われます。他の箇所を引き立てる役割があるので、周りより薄目な色を選びます。

メインカラー
バナーのテーマのカラーになります。伝えたいことのイメージカラーを使います。

アクセントカラー
一番目立たせたい箇所に使います。濃い目の色にすることで、よりポイントを伝えやすくなります。

レイアウト

レイアウトをする時は、他の文字や画像と大きさや色に差をつけ、伝えたいものを大きく配置します。文字や画像のはしを揃えると整った印象になります。

フォント

フォントには、大きく分けて「明朝体」「セリフ体」「ゴシック体」「サンセリフ体」の４つがあります。それぞれの特徴に合わせて、使い分けます。

明朝体・セリフ体

「やわらかい」「おだやか」「女性的」可読性が高い。

ゴシック体・サンセリフ体

「強い」「元気」「男性的」キャッチコピーに向き。

バナーを作る手順

準備

ターゲットと誘導先を明確にします。色のイメージなどもターゲットによって決まります。また、どこに表示するバナーかを明確にすることで、バナーの大きさが決まり、それによって、入る文字の量や画像の大きさも決まります。

素材の準備

バナーに使う画像やキャッチコピーなどを用意します。この際、先に決めたターゲットに、訴えかける内容になっているかを確認しましょう。また、表示する場所の周りのバナーや色に対して、浮いたり沈んだりしないか確認しましょう。

配置

用意した素材を配置してみましょう。文字の大きさや文字間を確認しましょう。用意した素材が、バナーに対してうまくはまらない場合は、素材を考え直すことも必要です。

調整

色みや全体のバランスをととのえます。実際、お客様は、じっくりバナーを見てくれるわけではないので、パッと見ていいかどうかを大切にしましょう。

完成

以上でバナーは完成です。 次は、実際の表示場所に当てはめてみて、周りとのバランスやページ全体のバランスを確かめましょう。

最後に・・・

いかがでしたでしょうか？

「バナー」と簡単に言っても、適当に作ってしまうと、全く効果のないバナーになってしまいます。一度、今まで作ったバナーを見直し、ターゲットに合っていなかったり、目に留まらなかったりするバナーがある場合は、一度見直してみてください。

効果的なバナーの配置箇所

バナーを作ることができる画像作成ソフトも、色々なものがあります。無料で使えるものも多くあります。こちらのページで、紹介していますので、是非、ご覧ください。

バナーを作るためのツール

それでも、忙しくて、なかなかバナーに時間をかけられない場合は、弊社でもバナー作成を承っておりますので、お気軽にお問い合わせください。

お問い合わせはこちらから

グリニッジ株式会社

https://www.greenwich.co.jp/

TEL: 03-5510-7260

FAX : 03-5510-7296

バナーの表示場所とその効果

バナーの設置場所と効果をご紹介します。バナーは、設置する場所によって、狙える効果が変わってきます。より効果的にバナーを見せる設置の仕方を見ていきましょう。

ヘッダー

ヘッダーは、ショップに入ったお客様が、必ず目にする場所です。ここには、セールやおすすめ商品などの特に誘導したいページへの誘導バナーを設置します。ただし、バナーを貼りすぎて、ヘッダー部分が大きくなってしまうと、商品紹介までが、長くなってしまい、離脱されやすくなるので気を付けましょう。

レフトナビ

レフトナビは、商品情報とともに目に入る場所です。通常、カテゴリ一覧がここにありますので、お客様は、店舗内の商品を探すときにここを見ます。つまり、回遊性を高めるためには、効果的な場所になりますので、おすすめカテゴリなどのバナーを貼りましょう。

フッター

フッターは、配送やお知らせなど、大切なインフォメーションが記載されています。ここには、店舗独自の注意事項などを別ページで作っている場合に、そのページへの誘導バナーを設置しましょう。

縦バナー

ブラウザの右または左端に表示するバナーです。他のバナーと違い縦型になるので、お客様の目を引きやすいです。「○○円以上送料無料」など、全商品に係るバナーが効果的です。

フローティングバナー

こちらは、ページをスクロールしても、付いてくるバナーです。ページのどこを見ていても、目に入れることができるので、最も注力している商品やカテゴリのバナーを出すと効果的でしょう。スマホの場合は、ページ下部に表示させることがほとんどです。

スライドバナー

スライドして切り替わるバナーです。最近では、ヘッダーに大きなスライドバナーを入れているショップさんも増えてきています。大きなバナーは、場所をとるので、何枚も設置はできませんが、スライドバナーを使うことで、一枚分のスペースに何枚ものバナーを表示できます。

ウルトラASPの「手間なしスライドバナー」を利用することで、簡単に作成できます。

手間なしスライドバナー

https://www.ultra-asp.com/tour/slide_bnr

イベントバナー

楽天市場やYahoo!ショッピングでは、モール主催の様々なイベントが行われており、そのバナーが配布されています。こちらは、多くがポイントが付くものですが、モールが負担するので、店舗負担なしで、お得感をアピールできます。バナーを貼るだけなので、是非、活用しましょう。

ウルトラASPの「手間なしイベントバナー」を利用することで、簡単に作成できます。

手間なしイベントバナー
https://www.ultra-asp.com/tour/banner

最後に・・・

今回の記事を読んでいただいた上で、是非一度、バナーの設置場所を確認してみてください。どんなにいいバナーでも設置場所を間違えてしまうと効果が低くなってしまいます。実店舗のように、お客様の店舗内でスムーズに動いている様子がイメージできるとよいと思います。

バナーの作り方については、こちらでご紹介していますので、是非ご覧ください。

初心者必見！バナーの作り方の基礎
https://www.greenwich.co.jp/?p=8929

バナーを作るためのツール

Illustrator(Adobe)

Photoshop(Adobe)

バナープラス（株式会社ウェブライダー）

pixlr editor(AUTODESK)

GIMP（The GIMP Documentation Team）

ペイント(Microsoft)

スマホサイトはPCサイトと違いレフトナビなどの誘導導線が少ないため、PCサイトより回遊性が低くなってしまいます。

回遊性を高めるには、スマホサイトならではの工夫が必要です。

今回は、回遊性を高めるために多くのショップが取り入れている3つのパーツ、

• 固定ヘッダーメニュー
• ショップ内のみを検索する検索窓
• フローティングバナー

を楽天GOLDで作る方法をご紹介します。

回遊性を高めるスマホトップページを作り込む

1.看板付き固定ヘッダーメニュー

デモはこちら

スマホをスクロールすると、看板やナビゲーションメニューがスルスルついてくるメニューを見たことはありませんか？

あのメニューのことを制作会社では固定ヘッダーメニューと呼んでいます。

常にヘッダーにメニューが表示されることで、スマホサイトの回遊性の低さを補うことができます。

また、楽天市場では、商品検索から店舗に入るお客様が多いため、楽天市場で商品を購入したとだけ認識されてしまい、ショップ自体を覚えてもらえないことが多い傾向にあります。この対策として多くのショップが固定ヘッダーを導入しています。

本記事を御覧頂いている方には、固定ヘッダーメニューを実現できるHTML・CSSを公開します。
トップページの上部に貼り付けると効果的です。

この固定ヘッダーメニューはHTML・CSSを用いて制作しています。
楽天GOLDにアップするHTMLやCSSに下記のソース（グレー部分）を貼り付けると店舗に導入できます。

HTML（下記をコピペして、適宜ショップに合わせて使用してください）

<header id="header">
<div class="header-inner">
<h1><a href="https://www.rakuten.ne.jp/gold/店舗URL/"><img src="看板画像のURL" alt="ショップ名" /></a></h1>
<ul>
<li><a href="https://search.rakuten.co.jp/search/mall/?sid=店舗ID">商品一覧</a></li>
<li><a href="https://item.rakuten.co.jp/店舗URL/c/">カテゴリ</a></li>
<li><a href="https://my.bookmark.rakuten.co.jp/item?l2-id=item_SP_BookmarkHeader">お気に入り</a></li>
<li><a href="https://review.rakuten.co.jp/rd/0_店舗ID_店舗ID_0/">レビュー</a></li>
<li><a href="https://sp.basket.step.rakuten.co.jp/rms/mall/bss/cart/?shop_bid=店舗ID">買い物かご</a></li>
</ul>
</div>
</header>

看板画像とメニューを持つヘッダーが出来上がります。
ショップに合わせて書き換えが必要な部分は赤字部分です。
書き換える内容は、

• 店舗URL（https://www.rakuten.co.jp/ここが店舗URL/）
• 看板画像のURL（R-Cabinetに登録している看板画像のURLをコピペ）
• 店舗名（店舗名や店舗を一言で表すキャッチコピーを入れましょう）
• 店舗ID（自分の店舗の検索結果画面URLの、sid=の6桁の数字。下記で確認できます。）
  

本記事ではメニューの内容を、
商品一覧・カテゴリトップページ・お気に入り・ショップレビューページ・買い物かご
としましたが、メニュー内容はショップに合わせて自由にカスタマイズするといいでしょう。

続いてCSSです。下記のCSSを使用するとスクロースされるとスルスルとついてくる固定メニューになります。

CSS（下記をコピーし、HTMLの～の間に貼り付けてください。）

<style><!--
#header {
margin-bottom: 100px;
}
#header > div {
position: fixed;
top: 0;
}
#header h1 {
margin: 0;
}
#header ul {
margin: 0;
padding: 0;
list-style: none;
display: table;
table-layout: fixed;
width: calc(100% - 2px);
border: 1px solid #ccc;
}
#header ul li {
display: table-cell;
border-left: 1px solid #ccc;
width: 25%;
background: #f8f8f8;
}
#header ul li:first-child {
border-left: none;
}
#header ul li a {
display: block;
font-size: 12px;
color: #444;
text-align: center;
line-height: 32px;
text-decoration: none;
}
--></style>

2.ショップ内のみを検索する検索窓

デモはこちら

楽天のスマホページについているデフォルトの検索窓で検索を行うと、楽天市場に掲載されている全ての商品から結果が返ります。
これでは、せっかくショップにユーザーを集めても、検索窓からユーザーが流出してしまう！ということになってしまいます。

その対策として、ショップ内の商品のみを検索できる検索窓を楽天GOLDで作成します。
下記にその作り方を公開しました。

HTML

<form accept-charset="EUC-JP" action="https://esearch.rakuten.co.jp/rms/sd/esearch/vc" method="get">
  <input type="hidden" name="sv" value="6" />
  <input type="hidden" name="sid" value="店舗ID">
  <input type="hidden" name="su" value="店舗URL">
  <input type="text" name="sitem" />
  <input type="hidden" name="f" value="A" />
  <input type="submit" value="検索" />
</form>

赤字部分をショップの情報に合わせて変更してください。

• 店舗ID（自分のショップ店舗の検索結果画面URLの、sid=の6桁の数字。）
• 店舗URL（https://www.rakuten.co.jp/ここが店舗URL/）

下記CSSを適用すると、シンプルな検索窓のデザインになります。

CSS（下記をコピーし、HTMLの～の間に貼り付けてください。）

<style><!--
#search {
background: <span class="red">#ccc</span>;
padding: 10px 0;
}
#search form {
width: 75%;
margin: auto;
}
#search input[name="sitem"] {
width: calc(76% - 4px);
height:19px;
border: solid 1px <span class="blue">#333</span>;
}
#search input[type="submit"] {
width: calc(24% - 16px);
}
--></style>

CSSの赤字部分は検索窓の背景色を、青字部分は検索窓の枠線の色をそれぞれ設定しています。
色を変更したい場合は、赤字部分または青字部分を自由にカスタマイズしてください。

3.ページ下部に常に表示されるフローティングバナー

デモはこちら

スマホページの下部に、固定の文言や画像を常に表示させている店舗を見たことはありませんか？

通称フローティングバナーと呼ばれていますが、これも楽天GOLDを利用すれば簡単に実現できます。

イチオシの商品や特集、イベントなどを常にトップページでアピールできたら、回遊率・転換率の向上につながりそうですね。

こちらもHTML・CSSだけで実現できます。
下記を参考にしてみてください。

HTML

<a href="リンク先のページURL"><img class="float-bnr" alt="" src="バナーの画像URL"></a>

CSS（下記をコピーし、HTMLの～の間に貼り付けてください。）

<style><!--
.float-bnr {
position: fixed;
left: 0;
bottom: 0;
}
--></style>

あまり大きい画像（特に縦に長い画像）を用いてしまうと、ページの可読範囲が狭まり、ページで見せたいコンテンツが見えなくなってしまいます。
フローティングバナーを導入する際は、バナーの大きさに注意してください。

楽天のイベントバナーのサイズは、横612px 縦120pxで作成されることが多いようです。
イベントバナーに限らず、特集バナーなどオリジナルのバナーを作成する際にはぜひ参考にしてください。

まとめ

楽天GOLDでできる回遊性を高めるスマホページの作り込みの一部を紹介いたしました。
楽天GOLDを使えば、他にもいろいろなパーツを作り込むことができます。

とはいえ、ページの作り込みには、HTML・CSS・JavaScriptの知識に加え、楽天スマホサイト制作のノウハウが必要になってきます。

専門スキルやノウハウがないためページの作り込みはちょっと難しいと感じる方には、スマホトップページを直感的に制作できるSmaLAB.というサービスをおすすめします！

今回ご紹介した3つのパーツも画像やリンク先を設定するだけで簡単に制作できます。
ぜひチェックしてみてください。