スマホのUX、今のままですか？ メルカリ・資生堂の感動的な表示速度に貢献「ImageFlux」とは

増加し続ける画像・デバイスという状況下でUXを追求し続けるために

　Twitter、Facebook、Instagram、YouTube、TikTok……。いつしかウェブの主役となるコンテンツは、テキストから画像、そして今では動画に変わろうとしている。画像の数も、クオリティも上がり続ける中、エンドユーザーが閲覧に利用するメインのデバイスはスマートフォンになり、表示速度はUXにおける最重要課題となっている。表示速度が数秒遅くなるだけで数十％のエンドユーザーが離脱する。Googleは、モバイルサイトの表示速度をテストできるサイトを提供し、改善を促している。

　さらにサイト運営者を悩ませるのは、次々に登場する新しいデバイスだ。ひとくちに「スマートフォン」と言っても、最適なサイズの画像はメーカー・モデルごとに異なる。UI・UXの改善が終わりなき戦いであることに変わりはないが、このような背景から、従来のやりかたで理想を追い求めるのは不可能に近くなってきた。

　これらの課題を解決する手段のひとつになり得るのが、2016年12月から提供されている画像変換サービス「ImageFlux（イメージフラックス）」だ。オリジナル画像をひとつサーバーにアップしておけば、画像URLのパラメータを変更するだけで、サイズ変更やトリミングを自在に行い、多様なパターンの画像が表示できるというもの。イラスト投稿サイト「pixiv」を運営するピクシブとさくらインターネットが共同開発し、インフラの運用保守、営業、サポートをさくらインターネットが担う形で、現在のサービスになった。リリースから2年が経ち、数十万の店舗にECサービスを提供するBASE、STORES.jpといったプラットフォームにも採用されている。

　エンドユーザーがどのような環境下でサイトを閲覧していても、快適なUI・UXを提供したい。そう考えるサイト運営者を「ImageFlux」はどのようにアシストしてくれるのか。さくらインターネットのおふたりに話を聞いた。

CDN不要で画像のキャッシュ管理・配信　表示速度の改善へ

――画像変換サービス「ImageFlux」の最初の導入企業は、メルカリさんだったそうですね。どのような目的で導入されたのでしょうか。

斎藤　まず、ImageFluxについてご説明すると、以下3つの機能を持つ画像変換サービスです。

画像のキャッシュ配信については、CDN（コンテンツ・デリバリ・ネットワーク）というよく知られたサービスがあります。CDNを利用することにより、画像をアップしたオリジンサーバーからではなく、そのデータがコピーされているキャッシュサーバーから取得することで、オリジンサーバーへの負荷を減らし、サイトの表示スピードを速くすることができます。ImageFluxでは、機能2、3により、CDN同様にサイト表示速度に関する課題を解決することができます。

当社にご相談いただいた2016年当時、メルカリ様も当然ながらCDNをお使いでしたが、CDNでのキャッシュヒット率が顕著に低下しており、その結果としてオリジンサーバーのアウトバウンドトラフィックが著しく増大するという事態になりました。その解決策として、CDNとオリジンサーバーの間に中間的なキャッシュサーバーを導入したいとお考えだったのです。まずは中間的なキャッシュサーバーとしてImageFluxを採用いただき、喫緊の課題であったオリジンサーバーのアウトバウンドトラフィックの削減に成功されました（機能3）。次のステップとして、パラメータを書き換えることでさまざまな画像サイズを変更できる、前述の「機能2」の画像変換処理とキャッシュ管理を行う機能をお使いいただくことになりました。