スマホの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」の最初の導入企業は、メルカリさんだったそうですね。どのような目的で導入されたのでしょうか。

1. 既存ストレージから元画像を取得
2. 画像変換処理とキャッシュ管理を行う
3. 画像をキャッシュ配信

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

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

新しいデバイス対応も、デザインアイディアも画像に制限させない

たとえば、オリジナルの画像（目安：4M程度）のURLが以下だとします。

https://demo.imageflux.jp/photo.jpg

幅200ピクセルの画像が必要であれば、以下のようにURLを書き換えることで、幅はもちろん、ウェブに適したサイズ（目安：8KB程度）に変更してくれます。

https://demo.imageflux.jp/w=200/photo.jpg

高さを指定することで、横長の画像を正方形にトリミングすることも可能です。

メルカリ様のアプリのトップページが、ある時、2列から3列の表示に変更になったのを記憶されている方も多いと思います。
変更の目的は、一度に閲覧できる商品数を従来より多くするためだったそうです。

このようなUI・UXの改善につながるアイディアを、デザイナーの方は日々思いつかれているはずです。
しかし、デザインの変更には画像サイズの変更も伴う場合が多い。それを人力で行おうとした場合、メルカリ様ほどの規模ではなくとも作業負荷は非常に大きいですよね。
その負荷を考慮してあきらめてしまっていた改善が、ImageFluxを用いればパラメータを変更するだけで可能になります。メルカリ様においても、この点を非常に評価していただいています。

画像の扱いについては、静的処理と動的処理のふたつがあります。静的処理は、「PC用はこれ、スマホ用はこれ」といったように、決め打ちで事前に画像を用意しておくパターンです。
これは、新しいデバイスが登場するたびに新たな画像を用意するか、ある種のデバイスは最適なUXをあきらめるといった選択になります。
ImageFluxを用いれば、URLを書き換えることで後から異なるサイズの画像を使用することが可能になります。
動的処理を行っている場合、エンドユーザーからのアクセスがあるたびに画像変換処理が実行され、サーバーに大きな負担をかけることになります。
ImageFluxも動的処理を行っていますが、キャッシュ管理・配信を行うため、動的処理の課題も解決できます。

実は、画像変換に関する開発業務には、インフラからアプリケーションの一部まで、幅広い知識が求められます。
その知識を持ったエンジニアの方は、それほどたくさんいるわけではありませんし、万一社内にいたとしても、その苦労は伝わりにくいもの。
たとえば、ポータルサイトのニュースに掲載されるなど一時的にアクセスが激増するような企業では、エンジニアの方が残業して人力でしのぎ、それが社内の埋没コストになっていたりします。
それを防ぎ、エンジニアの方のリソースをさらに有用な仕事に向けるという意味でも、ImageFluxはお役に立つのではと考えています。

月末の通信速度制限などエンドユーザーの負荷を軽減するために

モバイルサイトの表示速度に関しては、Googleも積極的に取り組んでいますよね。

スマホ向けのサービスを提供されている企業様からは、通信速度制限の影響により、月初のご利用が多く、月末のご利用が減るとうかがいます。
画像のファイルサイズを減らすことで、少しでもエンドユーザーの金銭的負荷を軽減したいという思いから、メルカリ様をはじめ先進的な企業様はさまざまな努力をなされており、そのひとつがWebPへの対応です。

ImageFluxでは、Appleが提唱するHEIFという画像フォーマットにも対応する予定です。
今後もこういった新しい技術は次々に登場してくるでしょう。ImageFluxがまず対応し、個々の企業様が独自に取り組む必要がない環境を整えていきたいと考えています。

画像のクオリティは高く、表示速度は感動レベルに速く

快適なUI・UXを提供すべく努力するサイト運営者の方に向け、メッセージをお願いします。

またサーバー負荷に関しては、ポータルサイトなどに取り上げられ、一時的に爆発的にアクセスが上がる可能性のあるサイトは、大規模なプラットフォームだけではありません。
一度、自社のエンジニアの方がどのように対応されているか、お尋ねになってみるのもいいのではと思います。 もしかしたら、神棚に手を合わせて「何も起きませんように」と祈っているかもしれません（笑）。

プラットフォーマーでも、ECでもない導入企業様のひとつに、資生堂様がいらっしゃいます。 表示速度についてお悩みだった企画部署の方からお問い合わせをいただきました。
ハイクオリティな画像を読み込ませていることが原因でしたが、ImageFluxの導入により、美しい画像を快適な速度で表示することが可能になりました。
「画像のファイルサイズは小さくなったのに、画像のクオリティは上がった」というお声もいただいています。

また資生堂様では、複数の部署からさまざまなコンテンツをアップロードする仕組みでサイトが構成されています。
画像アップロードに関して社内にガイドラインはあるものの、すべての部署が遵守しているとは限らないというお悩みをお持ちでした。
大きな企業様では、よくあるお悩みではないかと推察します。資生堂様には、ImageFluxの導入が社内のガイドラインを引き直すきっかけになったと評価していただきました。
そういった社内ルールづくりにも貢献できるサービスだと、私たちも気づかせていただきました。

今後の展望をお聞かせください。