楽天スマホ商品ページの回遊性を上げる方法｜関連導線・スクロール設計

結論から言うと、楽天のスマホ商品ページの回遊は「用意された4つの編集枠」を使い分けることで上がります。 具体的には、ダイバナーで今推したい企画へ、商品説明文で関連商品へ、目玉商品・目玉カテゴリーでおすすめへ、ショーバナーで店内一覧へ、と導線を役割ごとに配置します。スマホは縦スクロールと横フリックで見られるため、購買心理の流れに沿ってパーツを並べることが離脱防止の鍵になります。

この記事はスマホでの回遊性（関連導線・スクロール順・離脱防止・ファーストビュー）に絞って解説します。商品ページ全体の作り方は[楽天の商品ページの作り方](https://rakurip.com/ec/rakuten-shohin-page/)、HTMLの編集方法は[楽天商品ページのHTML編集](https://rakurip.com/ec/rakuten-html/)をあわせてご覧ください。

楽天 スマホ商品ページで回遊が落ちる原因

スマホで回遊が伸びない店舗には、共通した悩みがあります。

• 1つの商品ページを見ただけですぐ離脱されてしまう
• ついで買いがされず、客単価が上がらない
• ほかの商品やカテゴリーへ動いてもらえない

原因の多くは、導線そのものが無いことです。スマホは画面が狭く、次に見るべき商品への案内が無ければ、お客様はそのまま戻るボタンを押します。逆に言えば、編集できる枠をきちんと埋めるだけで回遊は改善します。

もう1つの原因が、スクロール順の設計不足です。スマホ利用者は縦にスクロールしながら情報を追い、途中で横にフリックして画像を見ます。訪問者のうち約半数はフリック部分まで確認するといわれ、フリックの回数が増えるほど購買意欲が高まる傾向があります。並べる順番が悪いと、この動きの途中で気持ちが切れてしまいます。

楽天スマホ商品ページの構造を理解する

回遊導線を設計する前に、スマホ商品ページがどのパーツで構成されているかを押さえます。上から順に、おもに次のように並びます。

このうち回遊導線として自分で編集できる主役は、ダイバナー・スマホ用商品説明文・目玉商品／目玉カテゴリー・ショーバナーの4つです。

スマホ商品ページの回遊は4つの導線で設計する

回遊は目的別に4種類に分けて考えると設計しやすくなります。実店舗にたとえると理解が早いです。

① 今推したい企画・商品への回遊（ダイバナー）

ダイバナーには、店舗企画のセールや季節・トレンド特集など「今」感のある情報を入れます。

• 期間限定セール、アフターセール、値下げ・訳あり商品
• イベント中のピックアップ商品やセール会場への案内
• 春夏の新商品、母の日ギフト、新生活・卒業入学特集

遷移先はカテゴリーページ・商品ページ・企画ページを設定します。なお、楽天イベント自体の案内やクーポン、店舗トップへの案内は別のパーツで自動的に表示されるため、ダイバナーに重ねて入れる必要はありません。

② 関連商品への回遊（スマホ用商品説明文）

スマホ用商品説明文には、商品の魅力だけでなく「次に見てほしい商品」への案内を入れます。案内する候補は次の通りです。

1. サイズ・数量・カラー・対応機種が異なる同一商品
2. 同じデザインシリーズやセット商品
3. 類似性のある商品
4. 関連アクセサリー・付属品

たとえば、まとめ買いセットへ誘導する、初心者向けセットや育てやすい類似品を案内する、スマホケースなら同ケースの新色や別機種・関連アクセサリーへ案内する、といった使い方です。

③ おすすめ商品・カテゴリーへの回遊（目玉商品／目玉カテゴリー）

目玉商品には、すぐ購入されそうなニーズの高い商品を登録します。登録すると商品第一画像が自動で表示されます。

• 最新の売れ筋商品、ランキング受賞・売上実績のある商品
• お買い得商品、品質に自信のある店長おすすめ、新着商品

目玉カテゴリーには、定番商品・受賞商品・人気デザインなどのカテゴリーを入れ、カテゴリーページへ遷移させます。

④ 店内ラインナップ一覧への回遊（ショーバナー）

ショーバナーには、店内全体を見てもらうためのカテゴリーを入れます。見せ方の切り口を複数持つと探しやすくなります。

• 種類別（アウター、ワンピース、シャツ など）
• 素材・形状別（レザー、コットン など）
• 使用場所別（キッチン、寝室、ダイニング など）
• 価格別（ギフト商品を扱う店舗に有効）

商品数が多く迷わせてしまう店舗は、商品共通説明文で企画として提案し、カテゴリー説明文で絞り込みやすくすると回遊が整理されます。

スクロール順は「購買心理の8ステップ」で設計する

スマホは上から下へ読み進められるため、画像と説明文の順番がそのまま説得の順番になります。目安になるのが購買心理の8ステップです。

画像は最大20枚まで登録できます。フリックするほど購買意欲が高まるため、枚数をそろえたうえで、この心理の流れに沿って順番を決めることが大切です。ファーストビューにあたる1枚目とモバイル用キャッチコピーは、最初に目に触れる勝負どころです。キャッチコピーは全角30文字以内で、検索対象にもなるため必ず入力します。

楽天スマホページで使えるHTMLの制限（現行仕様）

回遊導線を凝ろうとして装飾を入れる際、現在は使えないタグがある点に注意してください。

以前は、スマホページでも比較的自由にタグを使い、独自の装飾や外部コンテンツの埋め込みができました。現在は、2020年7月のスマホ商品ページリニューアル以降、次のタグがエラー扱いとなり利用できません。

• iframe
• script
• link
• style
• meta

対象はスマホ用商品説明文・カテゴリ説明文・共通説明文などです。同時にスマホ用商品説明文の画像枚数がPCと同じ最大20枚に拡張されました。つまり、独自のスクリプトやスタイルで作り込むのではなく、用意された編集枠・テキストリンク・画像リンクで回遊を作るのが現行の正しい設計です。HTMLの具体的な書き方は[楽天商品ページのHTML編集](https://rakurip.com/ec/rakuten-html/)を参照してください。

今日からできる回遊改善チェックリスト

1. ダイバナーに「今」の企画を入れ、遷移先を設定したか
2. 商品説明文の下部に関連商品への案内を1つ以上置いたか
3. 目玉商品・目玉カテゴリーを空欄のままにしていないか
4. ショーバナーに複数の切り口のカテゴリーを用意したか
5. 商品画像を購買心理の8ステップ順に並べ替えたか
6. 1枚目とモバイル用キャッチコピーで最初の一撃を作れているか
7. iframe・scriptなどの禁止タグを使っていないか

よくある質問（FAQ）

Q. スマホの回遊で最初に手を付けるべき枠はどこですか。 A. 空欄になりやすい目玉商品・目玉カテゴリーとショーバナーです。ここが未設定だと下部の回遊がゼロになるため、効果が出やすい箇所です。

Q. 関連商品はどこに案内すればよいですか。 A. スマホ用商品説明文の中に、サイズ・カラー違いやセット商品、関連アクセサリーへのリンクを置きます。陳列棚のように「見比べられる」形が有効です。

Q. スマホページでJavaScriptやiframeは使えますか。 A. 使えません。2020年7月のリニューアル以降、iframe・script・link・style・metaはエラー扱いです。回遊は編集枠とテキスト・画像リンクで作ります。

Q. 商品画像は何枚まで登録できますか。 A. PCと共通で最大20枚です。フリックするほど購買意欲が高まるため、枚数をそろえて購買心理順に並べると効果的です。

Q. モバイル用キャッチコピーは必須ですか。 A. 検索対象になるため必ず入力してください。全角30文字以内で、画像で伝えきれない実績やサービス情報を補うと効果的です。