画像の品質を保ちつつ、いかにページの表示速度を上げるかはどのECサイトにとっても課題だ。特に、Googleがページの読み込み時間、画像の安定性など、ユーザーエクスペリエンス(UX)を重視する検索アルゴリズムの変更を発表したことからも、今後EC事業者が画像の軽量化に取り組む必要性はますます上がるだろう。
人気アパレルブランドの「アーバンリサーチ」が2020年5月末から取り組んでいるデータ転送量削減、ECサイトの軽量化によるUX向上施策について紹介する。
Googleはサイト表示スピードを検索結果の評価として重視する
Googleは、ページの読み込み時間、インタラクティブスピード、画像の安定性など新しい「Webに関する主な指標」を取り入れる検索アルゴリズムの変更を発表した。今回のアップデートにより、ページの読み込み速度や、クリックに対する反応の速さなど、UXの要素が検索結果に影響を及ぼすことになる。
業務フローを変更せずに大量の画像を軽量化
こうした状況も含め、多くのEC事業者がサイトの軽量化に取り組んでいる。EC化率30%を誇る人気アパレルブランドの「アーバンリサーチ」もその1社だ。アーバンリサーチでは現在、約9割のユーザーがスマートフォンからECサイトを閲覧しているといい、画像点数を増やしながらどのように見やすく、買いやすいECサイトにするかが課題になっていた(アーバンリサーチの2020スピードランキングでは105位 ※計測期間は2019年12月27日~2020年1月10日までの14日間 https://netshop.impress.co.jp/node/7469)。
課題解決のために、2020年5月末に導入したのがウェブテクノロジの画像軽量化ソフトウェア「SmartJPEG 」(コマンドライン版)だ。「SmartJPEG」は、画質を落とさずにファイルサイズを軽量化する画像圧縮ソリューション。各画像の内容を自動で判断し、適切なファイルサイズに圧縮する。SmartJPEG(コマンドライン版)は、LinuxサーバーやWindowsサーバー、AWSなどにインストールし、サーバー側で画像を全自動で軽量化するというものだ。
「SmartJPEG」の導入指揮を執ったアーバンリサーチのデジタル事業部デザイン課マネージャー 尻江高昭氏は、「画像が軽量化したことで、導入前と比べてデータ転送量が約半分以下に削減。また、画像のファイル量も6~7割ほど削減した」と話す。
繁忙期は、月に5万枚以上の画像をアップロード
アーバンリサーチでは1シーズンに1万点以上の商品を扱っており、繁忙期は月に5万枚以上の画像をアップロードする。
導入時期は繁忙期に重なったが、ささげ担当者の業務フローを変更しないまま大量の画像を最適化できたことで、業務効率の改善にもつながっているという。
サイト上の画像の色味が実物と異なる問題の解消も
アパレルでは、「ECサイトの写真と実物の色味が違う」という問題が生じやすい。ファイルサイズの削減を優先し画像の圧縮率を高くすると、色味が変わってしまうからだ。「SmartJPEG」では、色味が変わりやすいビビッドカラーや生地の柄などもほとんど劣化が見られないという。
その理由について、SmartJPEGの営業を担当するウェブテクノロジの三上夏代氏は次のように説明する。
描写が細かくクッキリした部分が多い画像は、劣化しやすいので圧縮強度を弱くする。反対に、色や線の変化にメリハリが少ない画像は劣化が目立たないところまで圧縮をかける仕組みになっている。(三上氏)
以下4点はSmartJPEG使用前(左)と使用後(右)を並べている。画像を軽量化しても見た目に差がないことが分かる。

画像①(SmartJPEG使用前後)(画像はアーバンリサーチ提供)

画像②(SmartJPEG使用前後)(画像はアーバンリサーチ提供)

画像③(SmartJPEG使用前後)(画像はアーバンリサーチ提供)

画像④(SmartJPEG使用前後)(画像はアーバンリサーチ提供)
実際には以下の表のとおり、画像サイズの容量が削減されている。

画像①~④までの変換前後のファイル容量、削減率(画像:ウェブテクノロジ提供)
コロナ禍で影響を受けるEC事業者向けにキャンペーンを展開中
「SmartJPEG」は、ウェブテクノロジが20年以上行ってきたゲーム映像の処理技術を元に作られている。長年蓄積してきたノウハウを活かし、自動で判別しながらも、まるでデザイナーの手作業で調整したような圧縮を行う技術が強みだ。ウェブテクノロジは新型コロナウイルスの影響を受けているEC事業者向けに、「SmartJPEGの利用料金12か月無料」キャンペーンを実施している。
SmartJPEG を通じて、ECサイトの強化や売上向上、コスト削減、リピーター増加、商品の訴求力アップなどを目指す企業を応援していきたい。コロナ禍によるインターネット回線の利用急増により回線の速度低下が起こったが、EC事業者のみならず、社会全体の回線負荷の軽減にも寄与できると考えている。(ウェブテクノロジ 三上氏)
キャンペーン期間は2020年8月31日まで。先着5社限定で、対象は、年商10億円までのEC事業者。キャンペーン後のアンケート、または導入事例インタビューへの協力を条件としている。
※このコンテンツはWebサイト「ネットショップ担当者フォーラム」で公開されている記事のフィードに含まれているものです。
オリジナル記事:アーバンリサーチのコロナ禍におけるUX対策。データ転送量軽減&サイト軽量化でSTAY HOMEのEC需要対応事例
Copyright (C) IMPRESS CORPORATION, an Impress Group company. All rights reserved.