アーバンリサーチのコロナ禍におけるUX対策。データ転送量軽減&サイト軽量化でSTAY HOMEのEC需要対応事例

アーバンリサーチでは新型コロナ対策による「STAY HOME」で、ECサイトへのアクセスが伸びている。こうした環境下で実施した、ECサイトの軽量化やページの表示速度の向上施策を解説する【キャンペーン情報あり】

公文 紫都, 藤田遥

2020年7月31日 9:00

画像の品質を保ちつつ、いかにページの表示速度を上げるかはどの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 ウェブテクノロジ アーバンリサーチ SmartJPEG使用前後  画像最適化 画像圧縮 画像軽量化
画像②(SmartJPEG使用前後)(画像はアーバンリサーチ提供)
SmartJPEG ウェブテクノロジ アーバンリサーチ SmartJPEG使用前後 画像最適化 画像圧縮 画像軽量化
画像③(SmartJPEG使用前後)(画像はアーバンリサーチ提供)
SmartJPEG ウェブテクノロジ アーバンリサーチ SmartJPEG使用前後 画像最適化 画像圧縮 画像軽量化
画像④(SmartJPEG使用前後)(画像はアーバンリサーチ提供)

実際には以下の表のとおり、画像サイズの容量が削減されている。

画像①~④までの変換前後のファイル容量、削減率(画像:ウェブテクノロジ提供)

コロナ禍で影響を受けるEC事業者向けにキャンペーンを展開中

「SmartJPEG」は、ウェブテクノロジが20年以上行ってきたゲーム映像の処理技術を元に作られている。長年蓄積してきたノウハウを活かし、自動で判別しながらも、まるでデザイナーの手作業で調整したような圧縮を行う技術が強みだ。ウェブテクノロジは新型コロナウイルスの影響を受けているEC事業者向けに、「SmartJPEGの利用料金12か月無料」キャンペーンを実施している。

SmartJPEG を通じて、ECサイトの強化や売上向上、コスト削減、リピーター増加、商品の訴求力アップなどを目指す企業を応援していきたい。コロナ禍によるインターネット回線の利用急増により回線の速度低下が起こったが、EC事業者のみならず、社会全体の回線負荷の軽減にも寄与できると考えている。(ウェブテクノロジ 三上氏)

キャンペーン期間は2020年8月31日まで。先着5社限定で、対象は、年商10億円までのEC事業者。キャンペーン後のアンケート、または導入事例インタビューへの協力を条件としている。

この記事をシェアしてほしいタヌ!

人気記事トップ10

人気記事ランキングをもっと見る

企画広告も役立つ情報バッチリ! Sponsored

「声のする方に、進化する。」会社全体最適を目標とするワークマンの「補完型EC」 が実践する「レビューマーケティング3.0」とは? 12月17日 7:00 「所有から利用へ」の潮流をAIで勝ち抜く。事例で学ぶレンタル・リユースビジネスの成功法則とEC構築術 12月16日 7:00 「サムソナイト」「グレゴリー」のEC改善事例。CVR改善+購入完了率が最大45%増の成果をあげたアプローチとは 11月12日 7:00 スマホゲーム「モンスト」ファンがお得にアイテムを購入できる「モンストWebショップ」はなぜ「Amazon Pay」を選んだのか。導入効果+UI/UX向上に向けた取り組みを聞いた 10月30日 7:00 アンドエスティが「3Dセキュア2.0」の超効率的運用に成功したワケ。オーソリ承認率大幅改善、売上アップにつながった不正対策アプローチとは? 10月28日 7:00 EC業界で市場価値を最大化する――「全体を見渡せる人材」になるためのキャリア設計 10月27日 7:00 転売ヤーが引き起こすEC市場の混乱に立ち向かう! Shopifyパートナー・フラッグシップが提案する最新対策 9月29日 8:00 14か月で累計売上30億円超え。 韓国のネイルブランド「ohora」の急成長を支えたEC戦略とは 9月22日 8:00 生成AI検索が変える消費者の購買行動。UGC活用でサイト流入を最大化する 9月10日 8:00 ほしい商品が見つからないイライラを解消し、CVRを向上! 検索機能強化と顧客満足度アップを実現するBtoB-ECサイト改善のポイントとは? 9月9日 7:00