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

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

斎藤　ImageFluxでは、元となる画像をひとつサーバーにアップしていただき、その画像URLのパラメータを変更することで、拡大・縮小、切り抜き、回転、画像フォーマットの変更といった画像処理を行うことができます。

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

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

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

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

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

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

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

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

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

秋元　Googleが推奨する「WebP（ウェッピー）」という画像フォーマットについて、ImageFluxはパラメータを書き換えるだけで生成できます。メルカリ様や、ECプラットフォームを運営するBASE様にもお使いいただきご好評いただいています。WebPは対応ブラウザの制限はありますが、画像のクオリティを保ったままファイルサイズを2～3割削減することができます。

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

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