SHOEISHA iD

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

新着記事一覧を見る

おすすめのイベント

おすすめの講座

おすすめのウェビナー

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

『MarkeZine』(雑誌)

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

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

ECzineピックアップ(AD)

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

 パラメータで指定するだけで画像リサイズなどの変換ができる「ImageFlux(イメージフラックス)」。大量の画像を扱うメルカリやBASEなどEC関連のプラットフォーム他、資生堂等のブランドサイトにも採用され、表示速度向上にも貢献している。先進企業がこぞって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」のプロジェクトを率いたプロデューサー
さくらインターネット株式会社 技術本部 ビジネス推進グループ グループマネージャー 斎藤淳児さん

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

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

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

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

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

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

  • 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

おすすめ

イベント

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

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

メールバックナンバー

アクセスランキング

アクセスランキング