Black background with a sleek gray graphic

Imgixの導入により、Zadig&Voltaireはページ速度を66%向上させ、エンジニアリング工数を削減しながら、ハイエンドなビジュアル体験を実現しました。

お客様について

フランスのプレタポルテブランド、Zadig&Voltaireは、本物らしさと温かみを両立させた新しいラグジュアリーのあり方を打ち出しています。そのラグジュアリーを高品質な画像で伝えるために選んだのがImgixです。Imgixはページ速度を66%向上させ、エンジニアリングの工数とコストを削減しながら、ハイエンドな顧客体験を提供し続けています。

ラグジュアリーは決して時代遅れにならない、と言われます。フランスのプレタポルテブランドZadig&Voltaireは、業界の伝統的なラグジュアリーの定義にとらわれず、本物らしさと温かみを両立させた新しいラグジュアリーを思い描いて誕生しました。世界で378店舗を展開し、売上高でフランス第2位のファッションブランドである同社のラグジュアリーへのアプローチは、肩の力の抜けたシックなスタイルで表現され、顧客体験のすみずみにまで行き渡っています。

「Zadig&Voltaireは強いイメージを持つブランドです」と、マーケティングおよびデジタル担当ディレクターのジョナサン・アタリ氏は語ります。ECでは、カスタマージャーニーは画像から始まります。「Zadig&Voltaireのすべては、憧れ、つまり憧れとイメージ、そして価値にかかわるものです」とアタリ氏は続けます。「だからこそ、今後数年間のグローバル戦略においても、そしてこれまでの25年間においても、画像の位置づけは非常に重要なのです」

66%
ページ速度の向上
70%
モバイルで閲覧される画像の割合
100%
画像配信成功率

課題

配信パフォーマンスを犠牲にすることなく高品質な画像を提供することが、同社の優先課題となりました。Zadig&Voltaireは、お客様がスマートフォンとデスクトップのどちらを使っていても、製品の特長である手の届きやすさとラグジュアリー感の両方を、あらゆる場面で体現した体験を届けたいと考えていました。

効果的な画像ソリューションがなかったため、煩雑な開発ワークフローや繰り返し作業に不要なリソースを費やしていました。さらに、サイズやトリミングが不適切で画質も低い画像が、ビジュアル体験を損なっていました。ページの読み込み速度の遅さも、SEOランキングとウェブサイトのコンバージョン率に悪影響を及ぼしていました。

zadigandvoltaire website
「結局のところ、写真を1枚アップロードして管理するだけです。パフォーマンスも自分たちで管理でき、開発者に頼る必要はありません。たとえば画像の画質を上げ下げしたいときも、バックオフィスから自分たちだけで2分で対応できます。とてもシンプルで、技術的すぎず、それでいて非常に柔軟です。」
ジョナサン・アタリ様
Zadig&Voltaire マーケティングおよびデジタル担当ディレクター
zadigandvoltaire mobile

解決策

Zadig&Voltaireは画像最適化ソリューションとしてImgixを採用し、PDP(商品詳細ページ)とPLP(商品一覧ページ)にsrcsetを適用しました。これにより、各デバイスや画面環境に最適なサイズで画像を表示できました。

Imgixのアカウントマネジメントチームおよびサポートチームと緊密に連携してこれらの変更を実装したことで、Imgixを最大限に活用できる体制が整いました。レスポンシブなウェブサイトとトップクラスの画像配信を目指すZadig&Voltaireにとって、Imgixのオンボーディングと運用管理のシンプルさは非常に魅力的でした。

強力なImgix Rendering APIに支えられたこの使いやすさは、Zadig&Voltaireにとって重要なポイントでした。

さまざまな画像ソリューションを比較した結果、Zadig&VoltaireはImgixを選びました。ImgixがCDNホスティング機能にとどまらない価値を提供していたことも、Zadig&Voltaireにとって大きな決め手となりました。

「もちろん、その裏側には多くの技術がありますが、結局のところ、私自身やビジネスチームのメンバーが特別なスキルなしに写真の画質を変えられるツールです。非常に技術的なソリューションでありながら、開発者やCTOだけでなく、どのチームでも使えます」とアタリ氏は語ります。

Zadig&Voltaireが使用しているImgixパラメータの一部をご紹介します。

  • q:高DPR画像を配信する際に、出力画質をデフォルトより低く設定できます。
  • cs:出力画像の色空間を指定します。
  • lossless:ロスレス圧縮に対応したフォーマット(JPEG XRおよびWebP)で、ロスレス画像を配信できます。
  • fit:リサイズ後の出力画像を目的のサイズにどう合わせるか、また背景領域をどう塗りつぶすかを制御します。
  • auto:画像カタログ全体に、ベースラインとなる最適化を自動で適用できます。

「Imgixは、単に画像をホストするだけのサーバーではありません」とアタリ氏は言います。「ウェブサイトの画像を最適化するための知識とデータを提供すること、それがImgixの仕事です。GCPやGoogle Platformなど、ほかのソリューションを選ぶこともできましたが、Imgixほどの専門性はありません」

Zadig&Voltaireにとって特に重要だったのが、プログレッシブウェブアプリケーション(PWA)の導入です。PWAとは、ブラウザ上のサイトよりもネイティブアプリに近いユーザー体験を実現するよう設計されたウェブサイトのことです。PWAはその設計上、スムーズで高速な体験を提供できるよう最適化されています。

「ページの読み込みは最初の1回だけで、その後はクリックしても、すべてのコンテンツやCSSなどを読み込み直すことはありません。ウェブサイト全体で同じCSSを使っていれば再読み込みは不要なので、ページごとに変わるのは画像だけです」とアタリ氏は説明します。「つまり、ホームページからPLP、PDPへと移る間に読み込む必要がある主な要素は画像なのです」

そのため、ユーザーにとってシームレスな体験を保つには、ページの読み込み時に画像が正しく最適化されていることが欠かせないと、アタリ氏は指摘します。

「ですから、フロントエンドにPWAを採用するにあたって、Imgixのパフォーマンスとレスポンスタイムは非常に重要でした」

zadigandvoltaire mens listings

結果

Imgixを導入したことで、Zadig&Voltaireはデジタル上のあらゆる接点でお客様にラグジュアリーな体験を届けるという使命を果たしただけでなく、バックエンドでウェブサイトのパフォーマンスを最適化しながら、エンジニアリングの工数とコストも削減しました。

「以前は、エンジニアリングにかかる工数が壊滅的な状況でした」とアタリ氏は振り返ります。「この変更以降、画像に関する新たな開発は発生していません。ウェブサイトに一度正しく実装してしまえば、あとはImgixで直接管理するだけだからです」

Imgixの導入後、Zadig&Voltaireはウェブパフォーマンスにも即座に大きな効果を実感しました。デスクトップのページスピードインデックスは約15〜16秒でしたが、Imgixの導入後は約6秒に短縮され、66%の改善を達成しました。

「ページの表示を速くできれば、それだけ早くコンテンツをお客様に届けられるということです」とアタリ氏は語ります。

そして、ユーザーにこうしたラグジュアリーな体験を提供することは、いつの時代も色褪せることはないでしょう。

ケーススタディホームに戻る