導入事例
「ワタシプラス」の画像表示を大幅に高速化。作業負荷を増やすことなく簡単に実現
「世界で勝てる日本発のグローバルビューティーカンパニー」を目指し活動する、化粧品メーカーの資生堂。現在、世界120の国・地域で事業を展開しています。同社の6つの地域本社の中で、日本国内における化粧品を中心とした事業を展開する資生堂ジャパンでは、2012年4月から総合美容サイト「ワタシプラス」を運営。ワタシプラスのサイト内の画像表示の高速化に、ImageFluxが採用されています。
- 画像の読み込みに時間がかかる
- 制作担当者の作業負荷はこれ以上増やせない
- 低コストでスモールスタートの導入が必要
- 画像表示の高速化とトータルコストの削減
- 作業負荷を増やすことなく主力業務に集中できた
- エンジニアがいなくても簡単に導入できた
ワタシプラスの画像表示の高速化が急務
吉本 健二 氏
ワタシプラスは、化粧品や美容に関する質問や悩みに対し、さまざまな方法で答えるWebサービスです。「商品カタログ」「オンラインショップ」「お店ナビ」「美容の情報」「マイページ」などのコンテンツで構成され、資生堂ブランドの化粧品を利用するお客様に“キレイ”に役立つ情報を提供しています。
ワタシプラスの運営とサポートにおいてEC事業部では、画像の表示速度が遅いという課題を抱えていました。EC事業部の吉本健二氏は、「表示速度が遅い理由は明確です。ワタシプラスは、イメージが重要なため、利用されている画像は非常に高解像度です。この画像を、HTML化の段階で縮小して表示しているためです」と話します。
表示サイズは縮小されていても、ファイルサイズは高解像度のままなので、画像の読み込みに時間がかかっていました。「サムネイル画像を作成すれば問題は解決できるのですが、制作担当者に新たな作業負荷がかかり、また運用フローの変更も必要となりますので、それは避けたいと思っていました」（吉本氏）。
ワタシプラスは、ブランド別、機能別など、細分化された部門で作成されたコンテンツの組み合わせで構成されています。制作のガイドラインを作成・共有していますが、周知徹底するまでには至っていません。そこで同部の山本雅文氏は、「制作担当者の作業負荷を増やすことなく、画像を最適化できる方法を模索しました」と話しています。
特に画像が多い2つのサイトにImageFluxを導入
山本 雅文 氏
EC事業部では、2018年初めより検討を開始。まずは、コンテンツデリバリネットワーク（CDN）の画像変換機能を検討し、次に、クラウドサービスの自動リサイズ機能も検討しましたが、開発から運用までのコストがかかりすぎるので採用には至りませんでした。
「CDNやクラウドサービスは、さまざまな機能の1つとして画像の自動リサイズ機能があるので、どうしてもコスト高になります。必要なのは画像の自動リサイズ機能だけなので、それ以外の機能は不要です」と吉本氏は話します。そうした中、別の仕組みはないかと再び模索する中、吉本氏が見つけたのがさくらインターネットの画像変換・配信機能に特化したImageFluxでした。
「個人的に『さくらのVPS』を利用していたので、さくらインターネットは以前から知っていました。問い合わせたところ、すぐに説明を聞くことができました。2018年8月に、ImageFluxの採用を決定して、9月には運用を開始しました。決め手はスモールスタートでき、徐々に利用範囲を広げられる点でした」（吉本氏）。
まずは、ワタシプラスの4ページ分の画像をImageFluxで最適化。山本氏は、「特に画像が多いオンラインショップとキャンペーンサイトにフォーカスして、ImageFluxを導入してみました。効果も実感できているので、今後はほかのページにも利用範囲を拡大していきたいと思っています」と話します。
ImageFlux導入後の効果
ImageFluxの導入後はさまざまな効果が表れています。まずオンラインショップでは、導入前に8.0MBだったトップページのファイルサイズが、導入後は3.1MBに削減されています。表示速度は、すべての画像が読み込まれるまでに15.0秒かかっていましたが、ImageFlux導入後は4.6秒に改善されました。
またキャンペーンサイトでは、ImageFluxの導入によりファイルサイズが15.0MBから2.2MBに削減され、表示速度は14.7秒から3.0秒に改善されました。吉本氏は、「表示速度に関しては、タグの改善効果なども含まれていますが、ファイルサイズの削減に関しては、ImageFluxのみの効果です」と話します。
「作業工数を増やすことなく、これまでと同じ運用フローのままで高速化を実現できたことも導入効果の1つです」（吉本氏）。
山本氏は「これまでは、ファイルサイズの大きい画像を無理やり縮小していたので、細かい文字が潰れて読めないことがありましたが、表示サイズで画像が最適化されているので、表示もきれいになりました」と話します。
さらに山本氏は次のように話します。「以前は、Webサイトの表示速度がものすごく遅く感じました。ECサイトでレスポンスが悪いのは、店のレジに行列ができているのと同じことであり、ものすごいストレスだといわれています。そのため高速化に関しては、最優先で解決すべき課題でした。ImageFluxの導入後は、体感的にも速くなったと思います。ImageFluxを導入したら、いいことだらけでした。これまでの改善作業の中で一番驚いています」。
今後の取り組みについて吉本氏は、「直近では、メール配信で利用している画像を、ImageFlux経由で配信する仕組みを実現しようと考えています。この部分もImageFluxによる最適化で効果を得られる分野だと思っています」と話しています。
