スマホ最適化で重要なのは「画質」よりも表示速度

楽天市場
記事内に広告が含まれています。

【この記事を書いた人】
ECnews編集部 / 岡田 翔
衣料品商社のEC事業部を経て、2007年からECショップの運用代行を立ち上げ、
多数の楽天市場・Yahooショッピング・Amazonを運営されている事業者様の売上を拡大。
ファッションから雑貨小物、日用品や食品まで、多岐にわたるジャンルを支援しています。
売上UPから各モールでのトラブル処理など、現在の最新の情報からお店と伴走した過去の実績や解決例を赤裸々に語っています。

楽天市場の商品ページを改善したり、新商品のランディングページ(LP)を構築したりする際、「できるだけ綺麗な画像を見せて商品の魅力を伝えたい」と考えるのは、店舗運営者として当然の心理と言えるでしょう。そのため、デジタルカメラや高解像度のスマートフォンで撮影した高画質画像を、そのまま、あるいは minimal な圧縮だけで大量に使用している店舗様は非常に多く見受けられます。

しかし、現在の楽天市場におけるユーザー行動を分析すると、アクセスの大半がスマートフォン経由となっており、このモバイル中心の環境がページの評価基準を大きく変えています。どれほど素晴らしいデザインの画像であっても、「画像ファイルが重い」「ページが表示されるまでに数秒待たされる」「スクロールしたときにガタついて引っかかる」といった状態が発生してしまえば、ユーザーは容赦なくページを離脱してしまいます。このような読み込み上のストレスは、店舗の離脱率を悪化させ、最終的な購買率(CVR)の低下へと直結しがちです。

特に楽天市場というプラットフォームには、以下のような特有のユーザー行動が見られます。

  • 複数の競合店舗を頻繁に行き来する「回遊比較」が非常に多い
  • 型番商品や類似アイテムにおいて、同一条件での徹底的な比較が発生しやすい
  • わずかなページ表示速度の差が、そのまま「別の店で買おう」という購入判断へ影響しやすい

このように、ユーザーが常に「待たされない快適さ」を求めている環境下では、単に「高画質であること」だけを最優先したページ設計は、現在では必ずしも最適とは言えなくなっています。今回は、実務に基づいた具体的な数値の目安を交えながら、スマートフォンの表示速度を最優先にした画像最適化の基準について詳しく解説していきます。

楽天市場のマニュアルが推奨する容量は「1枚200KB程度」

楽天市場が公式に提供している運営マニュアル(店舗運営Navi)を確認すると、スマートフォン用商品説明文で使用する画像については、「1枚あたり200KB程度を推奨する」と明確に案内されています。

この基準を念頭に置いて自社の商品ページを見直してみると、意外な盲点に気づくケースも少なくありません。例えば、カメラマンから納品された数MB(メガバイト)単位の超高画質画像を、そのまま何枚も縦に繋げて構成しているようなLPは、スマートフォンの通信環境において過酷な読み込み負荷を強いることになります。

特に、実務において以下のようなページ構成を採用している店舗様は、今すぐ改善の検討が必要です。

  • 縦に長いランディングページの分割画像を、20枚〜30枚も連続して並べている
  • 透明背景やグラデーションの綺麗さを重視し、データ容量の重いPNG形式を多用している
  • 制作時の元データに近い、横幅2000px(ピクセル)を超える巨大な画像のまま登録している
  • 細かい解説テキストを画像に埋め込むため、画質劣化を恐れて最高画質で保存している
  • 画像編集ソフトで書き出した後、Web用の容量圧縮処理を一切実施していない

これらの構成は、オフィスや自宅の安定したWi-Fi環境であれば問題なくスムーズに表示されているように見えます。しかし、ユーザーが外出先で4G・5G回線を利用している場合や、お買い物マラソン・スーパーSALEの開催直後といったアクセスが集中して回線が混雑する時間帯には、ページの読み込みに致命的な遅延を発生させる原因となります。買い物を楽しもうとしているユーザーに対して、画像が表示されない白飛びした画面を数秒間も見せ続けることは、店舗にとって大きな機会損失につながるリスクをはらんでいます。

実運用でおすすめされる画像サイズの目安

それでは、EC運営の実務において、画像の「綺麗さ」と「表示速度(軽さ)」を最も効率よく両立させるためには、どのような数値を目標にすれば良いのでしょうか。多くの成功店舗や制作会社が共通して採用している、実務上非常に使いやすく推奨される画像サイズおよび横幅の目安をまとめました。

推奨される画像の横幅(デザインサイズ)

商品ページの画像を作成する際の横幅は、その画像を「どの端末に向けて表示させるか」という運用の仕組みによって2つのアプローチに分かれます。

① スマートフォン専用画像として完全に切り分ける場合:横幅「750px前後」

スマホの画面表示だけに最適化して制作する場合、横幅は750px程度あれば十分です。現在の一般的なスマートフォンの画面解像度を考慮しても、このサイズがあれば文字の潰れや画像のボケを感じさせることなく、すっきりと美しい表示を維持することができます。無駄に大きな解像度を持たせないため、データ容量を最小限に抑えることができる最も軽量な設計です。

② PCとスマートフォンで同じ画像を共通利用(使い回し)する場合:横幅「1080px〜1200px程度」

現在、多くの楽天市場の店舗様では、運用の効率化や制作コストの削減を目的として、PC用の商品説明文、スマホ用の商品説明文、さらには各種特集ページのバナーや広告画像をすべて同じ画像アセットで共通運用しているケースが多く見受けられます。この場合、スマホに合わせて750pxで作成してしまうと、PCの大画面で閲覧された際に画像が引き伸ばされて粗くなってしまう問題が生じます。そのため、PCでの閲覧にも耐えうる美しさを担保しつつ、スマホでも重くなりすぎない絶妙な落としどころとして、横幅1080px〜1200px程度というサイズ感が実務上で広く定着しています。

まずは自店舗の商品ページが「スマホ専用」として個別に構築されているのか、あるいは「PC共通」で効率化されているのかを確認し、それに応じた適切な横幅を選択することから始めましょう。

1枚あたりの容量は「200KB前後」がかなりバランスが良い

縦幅がそれほど長くない分割画像やバナーであれば、実際の運用感として「100KB〜200KB」の範囲内、少し縦に長い情報量の多い画像であっても「重くて300KB程度」というラインを絶対的な上限として抑えるように調整すると、ページの表示速度は劇的に安定しやすくなります。

楽天市場のスマートフォンページ改善において、非常に重要な考え方となるのが「部分最適よりも全体最適」という視点です。

ユーザーの購買体験を向上させるためには、例えば「1枚だけ切り抜かれたモデルのメイン写真が息をのむほど超高画質であること」よりも、「ファーストビューから最後のレビュー誘導バナーにいたるまで、ページ全体がノンストレスで軽快に読み込めること」の方が、はるかにユーザーの体感品質を高めやすい傾向にあります。

スマートフォンの画面を指でスーッとスクロールした際、引っかかることなく自分の読みたいスピードに合わせて画像が次々と滑らかに現れる体験こそが、ユーザーをページに引き留め、じっくりと商品の特徴を読み込んでもらうための土台となります。

高解像度ディスプレイ(Retina等)への対策はどこまで必要か

現在のスマートフォンは、AppleのiPhoneをはじめとして、物理的な画素数の2倍から3倍の密度で美しく表示する高解像度ディスプレイ(Retinaディスプレイなど)を搭載した端末が主流となっています。これに伴い、Webデザイナーや店舗の担当者様の間では、「スマホでのボケを防ぐために、表示サイズの2倍や3倍の巨大なサイズで画像を作るべきではないか」という悩みが常に尽きません。

この疑問に対する結論を実務目線でお伝えするならば、「楽天市場のページにおいては、横幅1500pxを超えるような超巨大サイズでの一律登録は、やや過剰気味でありデメリットの方が多い」と考えます。

確かに、表示領域の2倍以上の解像度で作成された画像は、スマートフォンの画面で極限まで拡大しても毛穴や商品の質感が視認できるほどの圧倒的な超高画質を実現できます。しかしその一方で、以下のような致命的なデメリットが店舗側に重くのしかかることになります。

  • 1枚あたりのデータ容量が数MBに跳ね上がり、ユーザーの通信量を過剰に消費してしまう
  • ページ全体の総容量が数十MBに達し、ファーストビューが表示されるまでの待ち時間が延びる
  • 端末のメモリを圧迫し、スクロール時の動作がカクついたりブラウザが強制終了したりする原因を作る

どれほど美しく引き締まったグラフィックを用意しても、表示される前にユーザーが待ちきれずに離脱してしまっては、その美しさは誰の目にも触れることなく終わってしまいます。

そのため、現実的かつ最も運用のしやすい構成としては、「通常のランディングページ部分は750px〜1200pxの標準的なサイズで軽量に作成し、商品の細かなディテールや複雑な成分表、あるいはブランドの顔となるファーストビューのメイン画像など、拡大表示されても絶対にボケさせたくない特定の主要画像のみをピンポイントで高解像度にする」というような、メリハリをつけた使い分けが非常に推奨されます。

PNG、JPEG、WebPの特徴と容量削減のための使い分け

画像の容量を削減し、ページの表示速度を改善するためのアプローチとして、解像度の調整と同じくらい重要な役割を果たすのが「画像保存形式(ファイルフォーマット)」の適切な選定です。それぞれの形式が持つメリットとデメリットを正しく理解し、適材適所で使い分けることが、プロのEC運営における必須スキルとなります。

① PNG(ピーエヌジー)形式

  • メリット: 背景を透明に透過させることが可能であり、何度保存を繰り返しても画質が一切劣化しないため、エッジの立ったシャープな表現が得意です。画像内に配置した小さなテキストや細い境界線がボケにくく、非常にクリアに表示されます。
  • デメリット: 写真のように多くの色数が含まれる画像をPNGで保存すると、グラデーション情報などをすべて保持しようとするため、データ容量が爆発的に重くなってしまいます。
  • 適した用途: 背景を透過させたいロゴマーク、アイコン、イラスト、切り抜いた商品バナーなど、色数が少なく直線の多いデザインに適しています。

② JPEG(ジェイペグ)形式

  • メリット: フルカラーの表現に長けており、人間の目が認識しにくい部分のデータを間引いて圧縮するため、写真画像を非常に小さなデータ容量に抑えて保存することができます。圧縮率を店舗側で自由に変更できる点も実務上大変便利です。
  • デメリット: 輪郭のくっきりした文字の周りに「ノイズ(モスキートノイズ)」と呼ばれる独特のモヤモヤとした画質劣化が発生しやすく、白背景に黒い小さな文字などを配置すると、文字の周りが汚れて読みにくくなる場合があります。
  • 適した用途: モデルの着用写真、料理や商品のイメージ写真、風景など、写真を中心としたランディングページのパーツに最適です。

③ WebP(ウェッピー)形式

  • メリット: GoogleがWebの表示速度高速化のために開発した次世代の画像フォーマットです。PNGのように背景透過をサポートしつつ、JPEGと同等かそれ以上に美しい高画質を維持したまま、データ容量をさらに2〜3割近く軽量化できるという驚異的な性能を持っています。
  • デメリット: 数年前までは古いブラウザや古い端末において表示できないという環境依存の問題があり、ECサイトでの導入には慎重さが求められていました。
  • 適した用途: 現在では楽天市場のシステム側でも対応が進み、主要なスマートフォンブラウザのほぼすべてがWebPに対応しているため、ページのさらなる高速化を図るための有力な選択肢となっています。

長年EC運営を続けている店舗様ほど、過去の習慣から「すべての画像をなんとなくPNG形式で保存している」というケースが見受けられますが、これを適切な形式に切り替えてJPEGやWebP中心の運用に変えるだけでも、画質をほとんど落とすことなくページ全体の総容量を半分以下にまでスリム化させることが可能です。

「画像の綺麗さ」よりもスマートフォンでの「読みやすさ」が売上を決める

楽天市場におけるLP改善やデザインのリニューアルを成功させる上で、忘れてはならない本質的な事実があります。それは、画像そのもののデジタルな解像度の高さ以上に、「情報の整理整頓」「適切な余白の設定」「ストレスのない文字サイズ」「説得力のある訴求順序」「自然な視線導線」といった、スマートフォンの小さな画面に最適化されたデザイン構成(可読性)の方が、購入率(CVR)の向上に対してはるかに大きな影響を及ぼすという点です。

どれほど最先端の機材を使って撮影された超高解像度の美しい写真を並べたとしても、

  • スマートフォンの画面に対して文字が小さすぎて、ピンチアウト(拡大)しなければ読めない
  • 情報が隙間なくギチギチに詰め込まれていて、どこが重要なポイントなのか分からない
  • 自分の知りたい情報(サイズ、素材、納期など)がどこに書かれているのか見つけ出せない

このような構成になっていれば、ユーザーは読む気をなくしてすぐに離脱してしまいます。スマートフォンの画面はPCに比べて非常に狭いため、PC向けに作られた横長の構成をそのまま縮小して表示させるようなデザインは、それだけで大きなハンデを背負うことになります。

「超高画質で重い画像をひたすら並べる」という自己満足的なページ作りから脱却し、「適切な解像度に軽量化し、一画面ごとの情報量をスマートフォンの幅に合わせて最適化し、スクロールするだけで内容がスッと頭に入ってくる可読性を担保する」というアプローチを最優先に位置づけることこそが、結果として顧客満足度を高め、競合に打ち勝つ高い購買率へと繋がることになるのです。

画像最適化のための実務おすすめ基準まとめ

ここまでの解説をもとに、楽天市場のスマートフォン商品説明文やLP作成において、今すぐ実務に取り入れることができる具体的な推奨設定値を表にまとめました。制作チームや外注のデザイナーに指示を出す際の「共通ガイドライン」としてぜひご活用ください。

設定項目実務における推奨値・最適基準
画像の横幅スマホ専用:750px前後 / PC共通利用:1080px〜1200px程度
1枚あたりの容量100KB〜200KB程度(どんなに重くても300KB以下に抑制)
Web書き出し解像度72dpi(印刷用ではないため、Web標準の72dpiで固定)
保存ファイル形式基本はJPEG形式を推奨。グラフィックやロゴはPNG、高速化を極めるならWebPの活用

この基準に沿って新規作成、あるいは既存ページのブラッシュアップを行うことで、画質を不自然に損なうことなく、スマートフォンの表示速度を限界まで高めることが可能になります。

競合ひしめく楽天市場だからこそ「ページの軽さ」が強力な武器になる

総括として、多くのショップが出店し、同じような商品が数多く並び合う楽天市場という巨大モールにおいて、なぜここまで「ページの表示速度」や「画像の軽さ」にこだわる必要があるのか、その最大の理由をお伝えします。

楽天市場のユーザーは、1つの商品を購入するまでに、平均して5店舗以上のページを回遊し、価格やポイント、レビュー、そして送料などを厳しく見比べながら比較検討を行っているというデータがあります。そのような激しい競争環境において、「リンクをクリックした瞬間にパッとページが開く」「指の動きに合わせてスルスルと快適に商品説明が読める」という体験を提供できること自体が、他店に対する非常に強力なアドバンテージ、すなわち「競争力」そのものになるためです。

ユーザーに「この店の商品説明は読んでいて疲れないな」「買い物がスムーズに完了して気持ちがいいな」と感じてもらえるようなページ体験全体を設計すること。それこそが、画像の枚数や容量、読み込み速度、スクロールの快適性までを含めた、真の「スマホ最適化」の正体です。

自店舗の主力商品ページが、ユーザーにとって「重いストレス」になっていないか、まずはスマートフォンを片手に、実際の4G回線環境で自分のショップをスクロールして体験してみてはいかがでしょうか。そこでの気づきこそが、売上をもう一段階上に引き上げるための最大のヒントになるはずです。

免責事項
当サイトに掲載している情報は、EC運営・楽天市場・Amazon・Yahoo!ショッピング等に関する一般的な情報提供を目的としたものです。
記事内容については、できる限り正確な情報を掲載するよう努めておりますが、各モールの仕様変更、規約変更、検索アルゴリズムの変更等により、掲載内容が最新の情報と異なる場合があります。

当サイトの情報をもとに行った施策・設定・運用によって発生した損害、トラブル、売上低下、検索順位の変動、アカウント・商品ページへの影響等について、当サイトでは一切の責任を負いかねます。
実際の運用にあたっては、必ず各モールの公式ガイドライン・規約・管理画面の最新情報をご確認のうえ、ご自身の判断と責任にて対応をお願いいたします。詳しくはこちらをご覧ください。

記事内容に事実と異なる記載や修正が必要な箇所がございましたら、お問い合わせフォームよりご連絡ください。速やかに対応いたします。よりご連絡ください。速やかに対応いたします。
楽天市場
スポンサーリンク
シェアする
タイトルとURLをコピーしました