本記事は2026年7月時点の情報をもとにしています。
楽天の商品ページで、せっかく作り込んだ訴求画像が中央に表示されず、左右どちらかに寄ってしまう…。この現象、実は今でも頻繁に相談を受けます。
私はECショップの運用代行を2007年から続けており、これまで衣料品から雑貨、日用品、食品まで、数多くの楽天店舗の商品ページを触ってきました。画像の中央寄せがうまくいかず、深夜に管理画面とにらめっこした経験は正直、数え切れません。
この記事では、そうした現場での試行錯誤をもとに、画像が寄る原因と実務的な直し方、そして単なる見た目の修正にとどまらない「売れる配置」の考え方までまとめてみます。
なお、私は楽天市場の公式スタッフやRMSの開発担当者ではなく、あくまで店舗運営の現場でコードを触ってきた実務者という立場です。そのため、この記事でお伝えするのは「公式仕様の解説」というより「現場での経験に基づく対処法」に近いものだとご理解いただければと思います。
楽天の管理画面の仕様は時期によって変わることもあるため、実際の設定を行う際は、必ず楽天市場の公式マニュアルやRMS上の最新表示を確認したうえで進めてください。
■よくある症状
楽天では、主に以下の箇所でこの症状が起こりやすい傾向があります。
・PC用商品説明文
・PC用販売説明文
主な症状は以下の通りです。
・画像が左寄りになる
・画像が右に寄る
・中央に配置されない
・スマホで崩れる
以前、あるクライアント様（雑貨系の店舗）から「新しい訴求画像を入れたのに、なぜか左端に張り付いてしまう」というご相談をいただいたことがあります。データ自体には何の問題もなく、コードを見て初めて原因がわかるパターンでした。
見た目だけでは判断がつきにくいのが、この症状の厄介なところです。
■結論：原因は「幅指定」と「構造崩れ」
画像が寄る原因は、突き詰めるとこの2つに集約されることが多いというのが、これまで見てきた印象です。
① width指定が不適切
② HTML構造（特にtableタグ）が崩れている
私の感覚では、現場で相談を受けるケースの大半はこのどちらか、あるいは両方が絡んでいます。逆に言えば、この2点さえ押さえておけば、大抵の崩れは説明がつくはずです。
■最も簡単な解決方法（まずこれ）
画像タグに以下を入れるだけで、改善するケースが多いです。
<img src="画像URL" width="100%" alt="商品説明">これにより、
・表示領域いっぱいに画像が広がる ・左右の余白が消える ・デバイス依存が減る
という状態に近づきます。
私が新人スタッフに最初に教えるのも、この一行です。ここまでシンプルな修正だけで解決するケースは実際に多く、まず試してみる価値はあると思います。
■なぜ「width=100%」が重要なのか
楽天の商品説明エリアは、固定幅ではなく可変領域として動く傾向があります。
そのため、
・width=”700″ → PCでは問題なく見えても、スマホでは崩れることがある
・width指定なし → 元画像サイズに依存してズレが出やすい
といった状況が起こりやすくなります。
％指定にしておくことで、こうした環境依存によるズレをある程度排除できると考えています。
実際、私が担当してきた店舗でも、px指定からパーセント指定へ切り替えただけで、スマホ表示のクレームが減ったという印象を持っています（あくまで担当店舗での体感であり、すべてのケースに当てはまるとは限りません）。
■中央寄せが効かない本当の原因
よくある誤解として、「centerタグを入れているのに中央にならない」という声をいただきます。
これは主に以下が原因になっていることが多いです。
・tableタグで囲まれている
・タグが閉じられていない
・入れ子構造が崩れている
楽天のページは過去のHTML資産が混在しやすく、不要なtableが残っているケースが少なくありません。長年運用している店舗ほど、この「残骸」が蓄積している印象があります。
正直に告白すると、私自身、以前この原因を見落としたまま何時間もcenterタグを疑い続けてしまった失敗があります。
何度確認してもコードは正しいはずなのに反映されない——結局、数年前に前任者が使っていた古いtableの閉じタグが1つだけ残っていたことが原因でした。
見つけたときは脱力しましたが、それ以来「まずtable構造を疑う」ことを自分の中のルールにしています。
■実務でのチェックポイント
以下を確認してみてください。
・不要なtableタグを削除
・<table>の閉じ忘れがないか
・<tr><td>構造が崩れていないか
・centerタグが正しく効く位置にあるか
特に「コピペ運用」は崩れやすいので注意が必要です。私の知人で、複数店舗を掛け持ちで運用しているKさん（EC運営歴8年）も、「他の商品ページからコードをコピペしたら、見えないところに古いtableタグが紛れ込んでいて半日潰した」と話していました。急いでいるときほど起きやすいトラブルだと感じます。
■楽天公式推奨コードの落とし穴
楽天のマニュアルでは、以下のようなコードが案内されていることがあります。
<CENTER><br> <img src=”画像URL” width=”700″><br> </CENTER>
一見問題なさそうに見えますが、
・固定px指定になっている ・レスポンシブ対応がされていない
という弱点を抱えている可能性があります。
マニュアル通りにやっているのに崩れる、という相談を受けたとき、原因がこの固定px指定だったことも一度や二度ではありません。
公式の案内だからといって、そのまま鵜呑みにせず、実際の表示を確認する習慣をおすすめします。
■推奨コード（実務ベース）
現場の感覚では、最も安定するのは以下のコードです。
<CENTER><img src="画像URL" width="100%" alt="商品説明"></CENTER>または、
<img src="画像URL" width="100%" alt="商品説明">centerタグは必須というわけではなく、width100%だけで十分なケースがほとんどだという印象を持っています。ただし、テンプレート側のCSSによって挙動が変わることもあるため、反映後は必ずプレビューで確認してください。
■CVRを上げる画像配置の考え方（重要）
ここからが、個人的にはこの記事の本題だと思っている部分です。
画像は「中央に置けばいい」というものではありません。
重要なのは、
「視線導線」と「情報設計」
だと考えています。
■売れる画像配置の鉄則
① ファーストビュー直下に配置 → 離脱防止につながりやすい
② テキスト→画像→テキストの順 → 理解を促進しやすい
③ 1画像1訴求 → 情報過多を防ぎやすい
④ スマホ前提で設計 → 楽天はスマホ比率が高い傾向にあります
以前、あるアパレル系のクライアント様のページを見直した際、1枚の画像に訴求ポイントを詰め込みすぎていて、逆に何を伝えたいのかわかりにくくなっていたことがありました。
画像を分割し、1枚1メッセージに整理しただけで、お客様から「見やすくなった」というお声をいただいたことがあります。
■よくあるNGパターン
・画像が小さい（訴求が弱く見える）
・横幅がバラバラ ・余白が不自然
・テキストが読めない
こうした点が積み重なると、CVRに影響が出てくる可能性があります。
■まとめ
・画像ズレの原因は、多くの場合widthとHTML構造にあります
・まずはwidth=”100%”を入れてみる ・改善しない場合はtable崩れを疑う
・px指定はできるだけ避ける
そして個人的に最も伝えたいのは、
「表示崩れは、売上機会の損失につながりかねない」
という視点です。地味な修正ですが、放置するほど積み重なるダメージも大きくなると感じています。
■EC担当者への実務アドバイス
画像の位置調整は単なるデザインの話ではなく、売上改善の施策の一つだと捉えています。
・中央に表示されているか
・スマホで崩れていないか
・視線導線が作れているか
この3点を定期的にチェックするだけでも、見え方の印象は変わってくるはずです。CVRの改善幅は店舗やジャンルによって差がありますが、私がこれまで担当してきた店舗の中には、表示崩れを直しただけで数字が動いたケースもありました。
ただし効果には個人差・店舗差があるため、「必ず改善する」とは言い切れない点はご了承ください。
■よくある質問
Q1. width=100%にすると画像が粗く見えることはありますか？
元画像の解像度が低いと、拡大表示されることで粗さが目立つ場合があります。表示サイズに対して十分な解像度の画像を用意しておくと安心です。
Q2. centerタグは今でも使う必要がありますか？
width=”100%”を指定していれば、centerタグがなくても中央寄せに近い見え方になることが多いです。ただし、テンプレートによって挙動が異なるため、実際の表示で確認することをおすすめします。
Q3. スマホとPCで表示崩れの原因は同じですか？
共通する部分もありますが、スマホ特有の要因（レスポンシブ対応の有無など）が絡むこともあります。両方の表示を個別に確認するのが安全です。
Q4. table構造が崩れているかどうかは、どうやって確認すればいいですか？
編集画面のHTMLソースを表示し、開始タグと終了タグの対応が取れているかを目視で追うのが基本です。数が多い場合は、一度コードをテキストエディタに貼り付けて整形すると見つけやすくなります。
Q5. 画像修正だけでCVRは改善しますか？
画像の表示崩れを直すことは前提条件を整える作業に近く、それだけで大きくCVRが伸びるとは限りません。導線設計や訴求内容とあわせて見直すことをおすすめします。
参考情報
- 楽天市場 RMS（店舗管理システム）公式マニュアル（楽天市場出店店舗向け管理画面内で確認可能）
