3Dならもっと伝わる！Adobe DimensionとXDを一緒に使ってeコマースサイトのインタラクションを簡単に実現する手順

現実世界で製品がどのように見えるのかを確認したいならAdobe Dimensionが最適です。Dimensionを使えば、製品の3Dモックアップやブランディングされた本物のようなパッケージデザインをとても簡単に作成できます。一方Adobe XDは、インタラクティブなデジタル体験を素早くデザインして、手軽に動作を検証できるツールです。

本記事ではこの2つのデザインツールを使って、eコマースサイトの商品紹介に利用できる、製品を360度回転させるウィジェットのプロトタイプをつくる手順を紹介します。

Adobe Dimensionで製品の3Dモデルをつくる

まずは、Dimensionを使って、eコマースサイトに掲載することになる3Dのブランドロゴ付き製品モデルをつくります。使用するモデルを探すにはAdobe Stockが最適です。幅広いモデルから選択することができますし、無料で使用できる素材も数多くあります。とりあえず次のステップに進みたい人は、Dimensionのアセットパネルにスターターアセットとして提供されているモデルをひとつ選ぶとよいでしょう。

Adobe Stockからダウンロードしたアセットを読み込むには、Dimensionで新しいプロジェクトを作成した後、ファイルメニューから読み込み>3Dモデルと選択し、ダイアログボックスが表示されたらアセットファイルを指定します。スターターアセットからモデルを選ぶ場合は、選択したモデルをクリックするか、カンバスにドラッグ&ドロップします。

ここで、読み込んだモデル全体を画面に表示するため、カメラメニューからすべてをフレームに入れるを選択してください。

3Dモデルにマテリアルを適用する

上の画像ではサーモス水筒のモデルが使われています。ボトルの素材をアウトドア用品らしくメタリックな素材に変えてみましょう。アセットパネルのAdobe Standard Materialから「メタル」を選んで、ボトルにドラッグ&ドロップします。すると、ボトルの外観にメタル素材が適用されます。

素材を適用するパーツを明示的に選択したい場合は、シーンパネル内のボトルのフォルダアイコンをクリックして、パーツの一覧を表示します。そして目的のパーツ（例えばボトル本体）を選択してから目的のマテリアル（例えばメタル）をクリックすると、選択されているパーツにマテリアルが適用されます。

3Dモデルにブランドロゴを配置する

次に、ボトルにブランドロゴを配置します。シーンパネルでボトルの本体が選ばれていることを確認したら、アクションパネルの中にあるグラフィックをモデルに配置アイコンをクリックします。ダイアログボックスが表示されたらファイルを指定すると、Dimensionは読み込んだグラフィックを3Dモデルの表面に配置します。表示されたロゴの位置や大きさを変えたり回転させて、好みのデザインをつくりましょう。

後から再調整したいときは、ロゴをダブルクリックすれば、調整用のコントロールが表示されます。ロゴをクリックするのが難しい場合は、シーンパネルでグラフィックを配置したパーツを開いて、表示されるリストからグラフィックを選択する方法も使えます。

他のグラフィックパーツも同様の方法で追加して、より本物らしい製品に近づけましょう。

背景画像を追加してシーンを演出する

製品がもっと本物らしく見えるように、シーンに背景画像を追加しましょう。カンバスに画像をドラッグすると背景画像として配置できます。

画像を調整したい場合は、シーンパネルの環境レイヤーを選択した状態で、プロパティパネルの画像スウォッチをクリックします。ダイアログボックスで画像タブを選択すると、背景画像の大きさや不透明度を指定できます。

このままでは、ただの合成画像です。ボトルの表面には周囲の光が写り込んでいるはずです。そこで、製品の素材感と背景画像を程よく馴染ませる作業を行います。シーンパネルで環境レイヤーが選択されたままであることを確認してから、アクションパネルの画像から環境を設定ボタンをクリックします。

表示されたダイアログボックスの適当なオプションを選んでから（例えば屋外写真なら、ライトに屋外の日光を選択）、OKをクリックすると、Dimensionが背景画像を解析して光源の位置や強さを判断し、モデルの素材に合わせた写り込みを再現します。

下の例を見ると、処理後（右の画像）のボトルのメタルの表面に背景画像が写り込んでいる様子を確認できます。写り込み具合を調整するために、環境レイヤーの下の光源をどれか選択して、プロパティパネルのスライダーを使い、光源の強さや位置などを調整してみましょう。 また、モデルのマテリアルを選択して、粗さやメタリック（光沢の度合い）を調整することもできます。

作成したシーンを書き出す

シーンができたら、一度画像として書き出してみましょう。書き出すには、レンダリングを行う必要があります。つまり、これまで確認していたのは作業を軽快に行うための仮の合成画像だったわけです。レンダリングを行うにはタブをクリックしてレンダリングモードに切り替えます。

レンダリングは基本的に時間がかかる作業です。そのため、まずは低画質で書き出して、ライティング等の確認をしてから最終解像度で書き出すのがおすすめです。レンダリングのサイズや解像度を変更するには、デザインモードに戻り、カンバスの外側の領域をクリックします（またはファイルメニューからドキュメント設定を選択します）。これでプロパティパネルから、カンバスサイズや解像度を指定できます。

書き出し形式には、PSDの16bitと32bitおよびPNGが選択できます。書き出した画像をさらに編集する場合は、PSD形式を選択するのがよいでしょう。

Adobe XDでWebページを準備する

Webページに掲載する3Dの製品モデルができあがりました。後半は、Adobe XDを使って製品を360度回転させるインターフェースを構築する手順を紹介します。

製品画像を配置するUIコンポーネントをデザインする

まず、製品の紹介ページを用意します。今回の例で使用するデザインは、製品が写っているシーンを背景に、ページ上部にグローバルナビゲーションやロゴが配置されています。

ここに製品を紹介するためのカードを配置します。カードには製品画像を配置する領域と、製品を回転させるための左右の矢印アイコンが含まれています。カードのデザインができたらコンポーネントに変換しましょう。カードに含まれる要素をすべて選択した状態で、ショートカットキー（macOS: Cmd+K, Windows: Ctrl+K）を押下します。コンポーネントに変換されると、周囲の線が緑色になります。コンポーネントをコピーして、製品紹介ページに配置しましょう。

製品の360度画像を用意する

さて、製品を360度回転させるためには、さまざまな方向からの一連の画像が必要になります。そこで、Dimensionに戻って、3Dモデルの画像を書き出す作業を行います。作業を効率的に行うために、モデルだけ配置してカンバスサイズをできるだけ小さくしたシーンを用意してから、少しずつ回転させながらPNG画像を書き出します。下の例では、Y軸に沿って30度刻みで回転させながら、12枚の画像を書き出しています。使われているモデルはAdobe Stockから入手したものです。

次は、上で作成したコンポーネントに、この12枚の画像を配置します。コンポーネントにはステートという機能があって、ひとつのコンポーネントに、複数の（見た目が異なる）状態を定義することが可能です。今回はこの機能を利用して、向きの異なる製品画像ひとつひとつに専用のステートを作成します。

ステートを作成するには、（まず製品ページ上のカードコンポーネントが選択されていることを確認してから）画面右のプロパティインスペクタ内の初期ステートの右にある＋アイコンをクリックして、ダイアログから新規ステートを選択します。するとステート 2が追加されます。これを繰り返して、初期ステートを含めて12のステートを作成します。

続けて、それぞれのステートに、Dimensionから書き出した画像を順番に配置していきます。初期ステートに最初の画像を配置すると、残りのステートにも同じ画像が配置されます。2番目のステート以降は、画像の位置を変えないように注意しながら画像の入れ替え作業を行うようにしましょう。作業が完了したら、下の図のように、製品ページからコンポーネントをコピーして12のステートが一覧できるようにしておくと、後で開発者に説明するのが楽になります。

インタラクションを追加する

最後の仕上げです。コンポーネントにインタラクションを追加して、クリックすると前後の角度の画像が表示されるコンポーネントをつくりましょう。インタラクションを追加するには、XDをプロトタイプモードに切り替えます。

製品ページのカードコンポーネントのステートが初期ステートになっていることを確認したら、コンポーネントをダブルクリックして、右矢印を選択します。そのまま、画面右のインタラクションパネルの右上角にある＋アイコンをクリックして、遷移先にステート 2（2番目のステートの名前）を指定すれば、右矢印をタップすると2番目のステートに遷移するようになります。

同様に、左矢印にもインタラクションを追加して、遷移先にステート 12（最後のステートの名前）を指定します。これで、初期ステートから前後のステートへの遷移が可能になります。

2番目以降のステートにも、右矢印には次のステートへの遷移、左矢印には前のステートへの遷移を設定します。すべてのステートの設定が終わるまでこの作業を繰り返します。

作業が完了したら、ワークスペースの右上にある「デスクトッププレビュー」アイコンをクリックして、プレビューウインドウを開きましょう。製品ページが表示されたら、製品画像の左右の矢印をクリックしてみてください。ユーザーがクリックしたときに製品がどのように回転するのかを確認することができます。

この記事では、DimensionとXDを使用して、ユーザーが製品を好きな向きに回して見ることができるインタラクションをつくる方法を紹介しました。3Dデザイン（Dimension）とインタラクティブな体験デザイン（XD）が簡単につくれる2つのツールを一緒に使えば、3Dオブジェクトとのインタラクションのアイデアを楽しく追求することができるでしょう。

この記事はVisualize your Product in a Realistic EnvironmentとCreating a Rotating Product Interface for E-Commerce with Adobe XD（著者:Chris Converse）をベースに執筆されました