Adobe Scene7徹底解剖

商品の拡大画像、色バリエ、360度回転などを見せる「ダイナミックイメージング」機能 | Scene7徹底解剖#1

「商品をよりよく知って」納得して買ってもらうための表現機能
「この商品いいね」の気持ちを引き出す「表現エンジン」 Adobe Scene7徹底解剖
このコーナーでは、特にECサイトでのユーザー体験とサイトの成果をアップさせる「Adobe Scene7」について解説していく。Scene7の概要については 「『この商品いいね』の気持ちを引き出す『表現エンジン』」 をご覧いただきたい。
Scene7利用企業は“ダイナミックイメージング”機能によってこんな効果を得た実績が:
  • ECサイトの売上が150%以上増加
  • コンバージョン率を最大2倍に向上
  • 返品を最大15%削減
  • サイトの画像管理コストを最大90%削減
  • 制作に要する作業時間とコストを最大80%削減

Scene7の機能を知る [1]
ダイナミックイメージング

Adobe Scene7(以下「Scene7」)のもっとも魅力的な機能の1つが、この「ダイナミックイメージング」だ。

わかりやすく言うと、ECサイト上で商品画像を、これでもかとばかりに詳しく、さまざまな形で訪問者に提示するための機能だ。しかも、その準備の大部分を自動化することで、作業スタッフの手間を削減できる。

Scene7のダイナミックイメージングは、大きく分類すると次のようなことができる。

  • 画像のサイズ変更や編集
  • 高解像度画像への拡大(ズーム)と移動(パン)
  • 色変更見本(スウォッチ)
  • 360度回転画像
  • テンプレート画像からの動的生成
  • 画像へのテキストオーバーレイ表示

実際にScene7が作った画像の例をご覧いただこう。

まずは、これがオリジナル画像だ。

大きなオリジナル画像を1つ、Scene7サーバーにアップロードしておけば、あとはダイナミックイメージングの機能を使って、さまざまな画像を動的にScene7サーバー側で生成して、ページに表示できる(以下の画像は、すべてScene7サーバーで上掲のオリジナル画像から動的に生成して表示している)。

縮小サイズを生成したり
色味を変更したり
一部分を切り抜いたり
文字を載せたり
サイト名を埋め込んだり
ドロップシャドウを付けたり
色ドロップシャドウを付けたり
回転させたり
ぼやかしたり

さらに、こうした単体での素材加工だけでなく、Scene7サーバーにマスター画像をアップロードしておいて、商品画像を回転させたりズームさせたりといった仕組みもScene7の機能を使って実現できる。

ズームしたり、360度回転したり
(以下の例は実際に操作できる。スピンやズームを試してみてほしい。スピンで実現する360度ビューは8枚~26枚程度の画像を用意して作る)
クリックで
実例を表示
カーソル位置の拡大画像を横に表示したり
(以下の例は実際に操作できる。時計の上にマウスカーソルを置いてみてほしい)
クリックで
実例を表示
色バリエーションをスウォッチで切り替えたり代替画像(写真バリエーション)を用意したり
(以下の例は実際に操作できる。右や下の小さなサムネイルをクリックして拡大したり、色を変えたり、別バージョンの画像に切り替えたり、拡大した状態で大きなメイン画像をドラッグしてスクロールしたりしてみてほしい)
クリックで
実例を表示

こういった、さまざまなバリエーションの画像表示機能が、組み合わせも含めると100種類以上も用意されている。

必要な素材の画像をアップロードして、どの表示パターンでどんな素材を使うのかを設定したら、そのビューアを表示するためのURLをScene7が生成してくれるので、そのURLにリンクすれば、どこからでもダイナミックイメージングが作った高機能な画像を利用できるのが便利だ。

画像のカラースウォッチ、回転、ズームなどの機能を使っている実際の例としては、Nikeのカスタマイズできるショッピングサイトがわかりやすいだろう。シューズの画像を拡大したり回転させたりしたり、さらに色のバリエーションを変えて表示したりできる。

とにかく、サイトを訪問してくれたユーザーが知りたいと思うだろう商品の情報をストレスなく提供するために、高解像度の画像を含めてさまざまなリッチコンテンツを最適な形で提供するのが、Scene7のダイナミックイメージングの役割だ。

基本となるマスターの画像を1種類アップロードすれば、あとはScene7がさまざまなサイズやフォーマットを自動的に作ってくれる。アップロードした素材に対して、テンプレートを適用したり、サイズを指定したりして呼び出すことで、どんなフォーマットでもどんなサイズでも画像を生成して、サイト上でその素材を利用できるのだ。

また、訪問者に多くの写真を提示できるようになるだけでなく、マスター素材一式をScene7サーバーにアップロードするだけであとは動的に作ってくれるので、いろんなサイズの画像をページごとにたくさん用意してアップロードしてHTMLを作るという工数が不要になり、デザインや制作の作業コストを削減できる。

さらに、詳細まで拡大できる高解像度のものも含めて画像はすべてScene7のサーバーで動的に配信されているので、自社サイトのサーバーの負荷を意識する必要がない(画像を拡大したり回転させたりするテンプレート上のボタン画像などもScene7から配信している)。

さらに補足しておくと、画像を拡大する場合、拡大するために画面に表示している部分のデータだけをサーバーからダウンロードして表示しているため、動作も軽い。ちょうど、グーグルマップで地図を拡大するときのような動作だと思ってもらえるとわかりやすいだろう。こうした仕組みにより、サイト訪問者にストレスなくリッチな画像情報を伝えられるようにするのがScene7のダイナミックイメージングの機能なのだ。

用語集
HTML / アップロード / クロール / コンバージョン率 / ダウンロード / リンク / 訪問 / 訪問者
この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

人気記事トップ10(過去7日間)

今日の用語

Python
「Python」(パイソン)は、プログラミング言語の1つ。プログラマのグイド・ヴ ...→用語集へ

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]