Fri. 09 Jan 2026 楽天

携帯で見ても崩れない！スマホに合わせた楽天ページの作り方と売れる商品ページのコツ

楽天市場での売上の大半は、今や「スマホ」経由です。「スーパーSALEやお買い物マラソンの時に、スマホでお客様はどう見ているんだろう？」「PCでは綺麗なのに、スマホだと崩れて購入されない」と悩んでいませんか？

楽天のスマホユーザーは、アプリやブラウザでスピーディーに情報を判断します。そのため、小さな画面でも商品の魅力が伝わるページを作ることが、店舗の売上アップに直結します。この記事では、RMS（店舗運営システム）を使った初心者でもできる「売れるスマホ商品ページ」の作り方を、やさしく解説します。

準備検討すべき基本事項

用意する素材画像とテキストの最適な形

まずは素材とルールの整理から着手します。スマホの最初の1画面（ファーストビュー）で「何を・誰に・どう良いか」を伝えることが成果の分かれ目です。購入に直結するA要素（魅力・価格・カート）を最優先で整えるとブレにくく、情報の優先度も定まります。

商品画像（1枚目・サムネイル）
楽天サーチの検索結果で目立つよう、文字は最小限にして商品を大きく配置します。余白を確保し、スマホ実機での見やすさを優先します。alt（代替テキスト）も忘れずに。

商品名・キャッチコピー
重要語（ブランド/型番/用途/サイズ/色）を前寄せします。スマホ検索一覧では冒頭しか表示されないため、最初の30文字に注力しましょう。

説明用画像（LP部分）
スマホで見やすい「縦長」のデザインか、正方形画像を連続させる構成がおすすめ。ピンチアウト（指で拡大）しなくても読める文字サイズで作ります。

画像形式
写真はJPEG、イラストや透過はPNG。楽天アプリでの読み込み速度を重視し、必ず圧縮をかけます。

B要素（比較表、FAQ、ブランドストーリー）は下部に配置してスクロールさせ、A要素への到達を阻害しない構成にします。

作成方法の選択：HTML手打ち vs 商品紹介コンテンツ

現在、RMSでのスマホページ作成には大きく2つの方法があります。

推奨：商品紹介コンテンツ
RMSの専用フォームに画像とテキストを入れるだけで、自動的にスマホ最適化されたレイアウトが組めます。HTMLの知識が不要で崩れにくく、楽天アプリでの表示もきれいです。

従来型：スマートフォン用商品説明文
HTMLタグを使って自由に記述する方法。自由度は高いですが、タグ制限が厳しく、レイアウト崩れのリスクがあります。デザインに強いこだわりがある場合以外はおすすめしません。

本記事では、初心者でも失敗しない「商品紹介コンテンツ」を使った作成手順を推奨します。

禁止タグと事前チェックルール

楽天市場には厳格な表記ルールがあります。特に、「絶対」「世界一」などの最大級表現には客観的根拠の併記が必須であること、「ランキング1位」表記には受賞日時・ジャンル名の明記が必要であること、そして医薬品的な効能効果の断定はNG（薬機法・健康増進法）であることの3点は必ず確認してください。もちろん、価格・在庫・配送情報が実態と一致していることも大前提です。

違反点数は店舗運営に大きな影響を与えます。表現に迷ったら、ガイドラインを確認するか、「おすすめ」「人気」などの無難な表現に留めるのが安全です。

実行スマホ商品ページ作成の手順

作成の流れテンプレート選択から公開までの順序

RMSの商品登録画面から「商品紹介コンテンツ」を使用します。まず素材（画像・テキスト）を整理して準備したら、RMSの「商品登録・更新」画面へ移動し、商品名や価格などの基本情報を入力します。次に「商品紹介コンテンツ」セクションを開き、「画像大（横幅いっぱい）」や「画像＋テキスト」などのテンプレートパーツを選択して配置していきましょう。

配置ができたら、プレビュー機能で「スマホ表示」を確認します。下書き保存または反映して実機チェックを行うまでがワンセットです。特に重要なのがプレビュー確認で、必ず「SP（スマホ）」モードに切り替えて確認し、文字の改行位置や画像の大きさがおかしくないかを見てください。

実用構成例読まれる配置の鉄板パターン

商品紹介コンテンツを使う場合、効果的なパーツ順序があります。トップには商品の魅力が一目で伝わるキャッチ画像（大画像）を置き、続けてランキング1位やレビュー高評価などの権威性・実績（大画像）で信頼を作ります。

その下に「こんなお悩みありませんか？」という共感と解決策を提示し、色や素材などのディテール紹介、最後にサイズやスペック表を配置するのが鉄板の構成です。この機能を使えば、HTMLタグを一切書かずにレスポンシブ（PC/スマホ両対応）なページが作れます。コツは、スマホ画面の横幅でも読める文字サイズ（PCのプレビューで少し大きいと感じるくらい）にしておくことです。

スマホ向け最適化と検証方法

安全で確実な実装ルール画像とレイアウトの基本方針

崩れない基本を徹底すると、後工程の手戻りが減ります。「商品紹介コンテンツ」を使っていれば自動調整されますが、画像作成時は文字サイズ16px相当以上、コントラスト高めを意識してください。リンクバナーは指で押しやすいよう、上下に余白を持たせましょう。

よくある崩れと対処横スクロールや文字崩れの修正法

HTML入力時に起きがちな「横スクロール・小さすぎる文字・余白不足」は、ユーザーにストレスを与えます。もし横スクロールが発生したら、幅指定（width）が固定値（px）になっていないか確認し、すべて「%」指定に直します。文字が小さい場合は、画像内の文字を大きくするか、テキスト部分をHTMLテキストとして書き出します。

テスト手順と実機確認ブラウザ、代表画面幅、実機での確認ポイント

実機確認は必須です。PCのプレビュー機能だけでなく、iPhone/Androidの実機で楽天アプリを開き、商品ページを確認しましょう。特に確認すべきは、ファーストビューで魅力が伝わるか、文字が小さすぎないか、購入ボタンまでの距離が遠すぎないか（スクロールが長すぎないか）です。

画像最適化と公開前チェックでの表示速度改善

画像サイズと圧縮の実践アドバイスアップロード前の最適化手順

画像の軽量化は体感速度に直結します。横幅はスマホ推奨の700〜1200px程度に抑え、JPEGは圧縮ツールで容量を減らします。縦に長いLP画像は、1枚の巨大な画像にするのではなく、適度な長さ（高さ1000〜1500px程度）で分割して登録すると、読み込みがスムーズになります。

公開前最終確認規約違反表現と禁止タグの最終チェック方法

入稿前チェックは習慣化しましょう。NGワード（最大級表現、他店誹謗中傷など）がないか、リンク切れがないかを確認します。特に「送料無料ライン」や「配送条件（最強配送やあす楽）」など、自動表示されるパーツと自作ページの内容に矛盾がないかも重要です。最終判断は楽天公式のガイドラインとRMSヘルプに従ってください。