楽天の商品ページで画像を使って訴求強化を行うのは、
CVR改善において非常に重要な施策です。
しかし現場では、
「画像が左右に寄ってしまう」
「中央に表示されない」
という問題が頻発します。
この問題は単なる見た目の崩れではなく、
売上に直結するUIの欠陥です。
ここでは原因と解決方法、さらに売れる配置設計まで解説します。
■よくある症状
楽天の以下の箇所で発生します。
・PC用商品説明文
・PC用販売説明文
主な症状は以下です。
・画像が左寄りになる
・画像が右に寄る
・中央に配置されない
・スマホで崩れる
■結論：原因は「幅指定」と「構造崩れ」
画像が寄る原因はほぼこの2つです。
① width指定が不適切
② HTML構造（特にtableタグ）が崩れている
■最も簡単な解決方法（まずこれ）
画像タグに以下を入れるだけで改善します。 <img src=”画像URL” width=”100%” alt=”商品説明”>
これにより、
・表示領域いっぱいに画像が広がる
・左右の余白が消える
・デバイス依存が減る
👉 最低限、これだけでほぼ解決します
■なぜ「width=100%」が重要なのか
楽天の商品説明エリアは、
固定幅ではなく可変領域（レスポンシブ的挙動）
になっています。
そのため、
・width=”700″ → PCではOK、スマホで崩れる
・width指定なし → 元画像サイズ依存でズレる
という問題が起きます。
👉 結論
％指定＝環境依存を排除できる
■中央寄せが効かない本当の原因
よくある誤解として、
「centerタグを入れているのに中央にならない」
これは以下が原因です。
・tableタグで囲まれている
・タグが閉じられていない
・入れ子構造が崩れている
楽天のページは過去のHTML資産が混在しやすく、
不要なtableが残っているケースが非常に多いです。
■実務でのチェックポイント
以下を確認してください。
・不要なtableタグを削除
・<table>の閉じ忘れがないか
・<tr><td>構造が崩れていないか
・centerタグが正しく効く位置にあるか
👉 特に「コピペ運用」は崩れやすいので要注意
■楽天公式推奨コードの落とし穴
楽天のマニュアルでは以下が案内されています。 <CENTER><br> <img src=”画像URL” width=”700″><br> </CENTER>
一見問題なさそうですが、
・固定px指定
・レスポンシブ非対応
という弱点があります。
👉 現場では推奨しません
■推奨コード（実務ベース）
最も安定するのはこれです。 <CENTER> <img src=”画像URL” width=”100%” alt=”商品説明”> </CENTER>
または、 <img src=”画像URL” width=”100%” alt=”商品説明”>
👉 centerは必須ではない（width100%で十分）
■CVRを上げる画像配置の考え方（重要）
ここが最も重要です。
画像は「中央に置けばいい」わけではありません。
重要なのは、
「視線導線」と「情報設計」
です。
■売れる画像配置の鉄則
① ファーストビュー直下に配置
→ 離脱防止
② テキスト→画像→テキストの順
→ 理解を促進
③ 1画像1訴求
→ 情報過多を防ぐ
④ スマホ前提で設計
→ 楽天はスマホ比率が高い
■よくあるNGパターン
・画像が小さい（訴求弱い）
・横幅がバラバラ
・余白が不自然
・テキストが読めない
👉 これだけでCVRは大きく落ちます
■まとめ
・画像ズレの原因はwidthとHTML構造
・まずはwidth=”100%”を入れる
・table崩れを疑う
・px指定は避ける
そして最も重要なのは、
「表示崩れ＝売上機会損失」
という認識です。
■EC担当者への実務アドバイス
画像の位置調整は単なるデザインではなく、
売上改善施策そのものです。
・中央に表示されているか
・スマホで崩れていないか
・視線導線が作れているか
ここを徹底するだけで、
CVRは1.2〜1.5倍程度改善するケースも珍しくありません。
