SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

新着記事一覧を見る

おすすめのイベント

おすすめの講座

おすすめのウェビナー

マーケティングは“経営ごと” に。業界キーパーソンへの独自取材、注目テーマやトレンドを解説する特集など、オリジナルの最新マーケティング情報を毎月お届け。

『MarkeZine』(雑誌)

第107号(2024年11月号)
特集「進むAI活用、その影響とは?」

MarkeZineプレミアム for チーム/チーム プラス 加入の方は、誌面がウェブでも読めます

ECzineピックアップ(AD)

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

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

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

たとえば、オリジナルの画像(目安: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による解決
静的処理

新しいデバイスが登場するたびに新たな画像を用意するか、ある種のデバイスは最適なUXをあきらめる。

URLを書き換えることで後から異なるサイズの画像を使用が可能。
動的処理

エンドユーザーからのアクセスがあるたびに画像変換処理が実行され、サーバーに大きな負担をかける。

キャッシュ管理・配信をImageFlux自体が行うことで、サーバー負担を軽減する。

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

ImageFlux導入前からメルカリをサポートしている
さくらインターネット株式会社 セールスマーケティング本部 営業部 マネージャー 秋元任泰さん

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

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

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

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

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

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

この記事は参考になりましたか?

  • Facebook
  • X
  • Pocket
  • note
ECzineピックアップ連載記事一覧

もっと読む

この記事の著者

倭田 須美恵(ワダ スミエ)

2013年11月11日、ECzine立ち上げ。ならではの視点でECに関する情報をお届けしたいと思います。

●外部メディアに登場!
[動画]ネットショップ運営実践会「ECzine倭田さん×井藤対談」
[動画]ECみらい会議vol.2「プラットフォーム乱立時代!EC事業者の選択と集中を考えよう」
[登壇]BASE主催「ネットショップフェスタ2014」
[登壇]MarkeZine主催「MarkeZine Day 2015 Spring」
[執筆]NP通信

●ソーシャルメディア
Facebook
Google+

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

MarkeZine(マーケジン)
2019/02/12 10:44 https://markezine.jp/article/detail/30064

Special Contents

PR

Job Board

PR

おすすめ

イベント

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング