Adobe XDの3D変形を使ってもっとリアルなUIを表現しよう

デザインにちょっと奥行きを足したいと思ったことはありませんか？たとえば、デザインコンセプトを説明するために少し違う角度から見せたいとか、現実の物理的な空間内でデザインがどのように見えるのか確認したいといった場面です。Adobe XDの3D変形は、3次元空間で要素を変形したくなるどのような場面にも応えます。

この記事では、Adobe XDの3D変形機能の使い方と、デザインやプロトタイプに奥行きを追加する具体的な例をいくつか紹介します。

Adobe XDの3D変形とは？

これまでもXDにはオブジェクトの変形の機能が提供されていました。しかしそれらは、平面内のサイズ変更、あるいは反転や回転など2次元の変形に制限されていました。新しい3D変形の機能を使えばオブジェクトを3次元空間で操作することが可能です。たとえば斜めに回転させたり、またはカンバス上の奥行きを表現することもできます。

変形の対象には、個々の要素だけでなくグループも含まれます。対象を選択してからプロパティインスペクターの3D変形アイコンをクリックして、カンバス上に表示される「ギズモ」と呼ばれるツールを使うか、プロパティインスペクターの奥行きに関連するフィールドに値を入力すると変形できます。

要素を変形する手段

単純な図形（長方形）を例に3D変形の説明を始めます。カンバスに長方形を描いたら、プロパティインスペクターの立方体の形をしたアイコンをクリックしてオンにします。すると、角度や位置を指定する入力フィールドが追加表示されます。長方形が選択されていると、シェイプ中央に球状のコントロールが表示されます。これがカンバス上のオブジェクトを3D変形するために使用するツールです。

オブジェクトをX軸に沿って傾けるには、下の画像のようにギズモの縦長の円の上にカーソルを移動してハイライト表示にします。そのままマウスをクリックして上下どちらかにドラッグしてみましょう。

Y軸に沿って回転させたいときは、もうひとつの円をハイライトしてから、マウスをクリックしてドラッグします。下の画像では、左右にドラッグすると、オブジェクトがマウスを追うように回転して横向きになっています。

最後はZ軸方向にオブジェクトを移動するための手段です。ギズモの中央の点にカーソルを移動すると点が青くなります。そのまま点をクリックしてカーソルを上下に移動します。すると、オブジェクトが近づいたり遠ざかったりします。同時に横方向にオブジェクトをドラッグすることも可能ですが、Shiftキーを押しながらドラッグすると、Z軸方向のみに移動します。

複数の要素またはグループを変形する

3D変形は、グループに対しても機能します。その際、実現したい効果によって、変形する手段を選択する必要があります。

グループまたはリピートグリッド全体を変形する

もし、一列に並ぶカードをすべて同じ視点から眺めているかのごとく変形したければ、グループまたはリピートグリッド全体を変形するのが最適なアプローチです。グループ化されていない場合は、並んでいるオブジェクトをすべて選択してグループに変換してから、グループが選択されている状態で3D変形をオンにします。

表示されたギズモを操作してグループまたはリピートグリッドを変形してみましょう。すると、グループ内のオブジェクトは同じ平面上の一塊のオブジェクトであるかのように変形されます。

変形したグループ内の要素を後から個別に変形することが可能です。グループをダブルクリックしてからグループ内の要素を選択して、先ほどと同じ要領で変形します。横に並ぶカードの中のひとつだけ目立たせたい場合などにこれを行うと良いでしょう。

複数の要素に同じ変形を適用する

ここまで説明したように、グループを変形するのは、複数のオブジェクトをひとつのオブジェクトであるかのように扱いたいときに適しています。ですが、もし選択した複数のオブジェクト一つひとつにまったく同じ変形を行いたい場合は、すこし異なるアプローチを使います。

まず、変形したいオブジェクトすべてを選択します。グループ化されている場合は、クリックしてグループを編集状態にしてからグループ内のオブジェクトを選択します。3D変形をオンにすると、選択されている要素の中央にギズモが表示されます。

この状態で3D変形の操作を行うと、オブジェクトはそれぞれ独自の軸に沿って変形します。下の画像を見ると、グループ全体を変形した時とは異なる見た目になることが確認できます。

このアプローチは、ページ内の複数の要素に同じ変形の効果を適用したいときに有効です。

3D変形のアニメーション

3D変形は自動アニメーションと組み合わせて使うことが可能で、3次元の動きを含むリッチなインタラクションを表現できます。自動アニメーションの設定を行うには、まず要素の最初の位置をアートボード上に指定します。

アートボード全体を複製するか、同じサイズの別のアートボードに、3D変形を行う要素をコピーします。コピーした要素に3D変形機能を使用して、最終的な見た目になるように変形します。

最後に、プロトタイプモードに移動して、2つのアートボードをリンクします。トリガーは「タップ」、アクションは「自動アニメーション」を選択します。プレビューすると、下図のように、XDの自動アニメーション機能がアートボード間の遷移を滑らかに表現します。

他にも、ドラッグや音声入力をトリガーにした3D変形のアニメーションも利用可能です。どのような体験になるのか試してみてください。

3D変形の活用事例

3D変形を使うとAdobe XD内に様々な種類の興味深い体験をつくり出すことができます。モバイルアプリのデザインや、現実の環境における体験のデザインにおける具体的な利用方法をいくつか紹介しましょう。

デバイスのモックアップと組み合わせる

デザインをどう見せるか次第で、デザインの受け取られ方は大きく影響されます。デザインを実際のコンテキストに近い状態で見せることができれば、要素の大きさやアクセシビリティを視認しやすくなります。これまでは、デザインをデバイスの画面にはめ込むのはちょっとした作業で、専用のプラグインが存在するほどでした。XDに新しいオブジェクト変形機能が追加されたことで、今ではずっと容易です。

まずデバイスの画像を読み込みます。これは、デバイスを撮影した画像、あるいはデバイスのフレームを表すベクター画像と画面の背景画像を組み合わせたものかもしれません。アセットを読み込んだら、アートボードの適当な位置に配置します。

次に、デバイスの画面に表示したいデザインを選択してコピーし、デバイスの上にペーストして位置を揃えます。デバイスとデザインはグループ化しておきましょう。ここでコンポーネント化しておくと、後から再利用したい場合に便利です。

3D変形ツールを使い、デバイスとデザインを変形します。グループ化してから変形しているため、両者が一緒に変形されます。

以上の手順により、プレゼンテーションやデザインコンセプトを伝えるための3Dプロトタイプを簡単に作成できます。

ARのプロトタイプ

3D変形は、ARやVRアプリケーションをテストするためのプロトタイプ作成にも利用できます。

たとえば、自動車のダッシュボードに情報を表示するヘッドアップディスプレイを考えてみましょう。インターフェース内の要素は2次元空間でデザインすることが可能ですが、その体験の確認はどうでしょうか。3次元空間に合わせてインターフェース要素を変形し、それを実際の自動車のダッシュボードと組み合わせて見ることができれば、プロトタイプやインタラクションはより説得力のあるものになるでしょう。

これを実現するには、まず、アートボード上のオブジェクトを3D変形します。次に、そのアートボードをコピーして、見た目がインタラクションの次の状態になるよう調整します。プロトタイプのトリガーとアクションは、3Dでも2Dでも同じです。タップ、ドラッグ、音声などで自動アニメーションを操作して一連の体験をつくり出しましょう。

奥行きを持つインターフェース要素

マテリアルデザインではインタラクションのフィードバックや重要性を示すために奥行きを使用しています。こうした奥行きの使い方はUIの様々な箇所に適用されています。

たとえば、iOSでは、関連する通知がひとつのグループとして扱われます。グループは通常は重なっていますが、タップすると開いて見ることができます。3D変形のお陰で、この効果をAdobe XDで再現するのはとても簡単です。

下図のように通知一つひとつに奥行きを指定します。奥に通知を配置すると、手前の通知の背後に隠れます。奥行きの指定にはカンバス上のギズモも使用できますが、より正確に調整したい場合はプロパティインスペクターの入力フィールドを使いましょう。（訳注：Z位置の値はレイヤーパネルの並び順よりも優先されます。Z位置の値が同じオブジェクト同士であれば、レイヤーパネルの並びで重なり順が決まります）

下の図は、それぞれの要素を少しずつ奥に移動することにより実現した、最新のiOSインターフェースに見られるカスケード表示の効果です。

この記事で紹介したのはほんの一部の例だけです。Adobe XDの3D変形を使用すると、現実世界の様々なUIを驚くほど簡単に表現することができるでしょう。

この記事は3D Transforms and How to Use Them in Adobe XD（著者:Matt Rae）の抄訳です