2DのUIプロトタイプのデザインから3DモデルのAR体験まで、シームレスに実現できるデザインフロー

新しい製品のインタフェースを考えるプロセスにおいて、2Dのデザインは始まりに過ぎません。現実世界に3Dの製品を置いたときに、その画面の中のUIデザインがどう見えるのかを考慮することも重要です。

そこで活躍するのがAdobe Dimensionです。3Dの経験がないデザイナーでも、Dimensionを使えば、Adobe Illustratorなどのツールで作成したUIデザインを簡単に3Dモデルに適用して、まるで本物のようなシーンをすばやく構築することが可能です。

以下のチュートリアルでは、XDとIllustratorで作成したUIデザインを、Dimensionで3Dモデルと組み合わせることで、新しいスマートウォッチのUIデザインを3Dの世界に視覚化するフローを説明します。このチュートリアルの最後に得られる結果は、デザインの検証、クライアントレビュー、マーケティング、さらにはWebサイトに組み込んで使用できる本物の写真のようなレンダリングイメージです。

https://player.vimeo.com/video/394508716?dnt=1&app_id=122963

スマートウォッチのUI/UXプロトタイプをAdobe XDで作成

Adobe XDは、アドビのベクターベースのUXデザインツールです。XDを使うと、スマートウォッチのUIデザインのアイデアを形にして検証し、繰り返し改善するプロセスを効率的に実行できます。ベクター描画ツール、カラースウォッチ、グリッド、ガイドなどの使い慣れた機能を利用してUIをデザインしたら、コンテンツに対応するレイアウト機能の支援によりデザインを素早く展開できます。さらに、プロトタイプ機能を使えば、画面フローの確認も行えます。XDは、全く新しいインターフェイスのデザインを始めるのに最適なツールです。

Adobe XDで作成されたインターフェイス画面のプロトタイプ提供：エリン・キム

XDでは、インターフェイス要素をコンポーネントとして保存し、複数のデザインで再利用することが可能です。下の画像では、メッセージやカレンダーなどのアイコンが、再利用可能なコンポーネントとして作成されています。

XDのスマートウォッチUIデザインにコンポーネントが使われている

Adobe IllustratorでUIデザインを調整する

必要な画面の数だけ、スマートウォッチのUIレイアウトをXDで作成したら、それをIllustratorで更につくり込むことができます。アドビの業界標準ベクターグラフィックソフトウェアには、美しいデザインを実現するために必要なデザイン、タイポグラフィ、シェーディング機能などが含まれています。

Illustratorを使ってインタフェースの外観を微調整する

たとえば、電話の応答と終了ボタンの背景のグラデーションの作成はとても簡単です。下の画像は、毎日のスケジュール画面のアイコンから色をサンプリングし、グラデーションの向きを調整して作成した例です。完成したUIデザインは、Illustratorファイルとして保存されます。

Illustratorでインタフェース要素を修正

IllustratorのアートボードをDimensionでテクスチャとして使用する

IllustratorのアートボードをDimensionにインポートして、3Dモデルのサーフェスにマッピングすることができます。これにより、Illustratorでデザインしたインターフェイスが、実際のスマートウォッチの画面上でどう見えるのかを精密に視覚化できます。下のGIFアニメーションでは、Illustratorファイル内のアートボードがDimension内のスマートウォッチの3Dモデルに割り当てられています。（左から2番目のウォッチ）

Illustratorファイル内のアートボードを切り替えて、Adobe Dimensionで異なるUI画面を表示する

それぞれのウォッチの画面に異なるインターフェイスを表示させるには、Dimensionのプロパティパネルで目的のウォッチ画面を表す3Dオブジェクトを選択し、そのオブジェクトに適用されているテクスチャへと展開し、Illustratorファイルから新しいアートボードを選択します。適用されたインターフェイスは、文字盤のガラスの裏側にリアルに表示されます。

Dimensionでレンダリングしたスマートウォッチの画面

Illustratorでの編集結果をDimensionに自動的に適用

Dimensionにインポートしてテクスチャとして使用されているベクターアートワークは、オリジナルのIllustratorファイルが変更されると自動的に更新されます。Illustratorでデザインを編集して保存すると、Dimensionの3Dモデルのテクスチャがほぼ瞬時に更新されるため、2Dのデザインをしているかのように3Dのデザインが行えます。

Dimensionの「編集」アイコンをクリックすると、Illustratorの画面が表示されて、該当するファイルを編集できる状態になります。デザインを更新してIllustratorで保存すると、変更されたデザインは自動的にDimensionに反映されます。下のGIFアニメーションは、時計の針の色を変更している様子です。

Illustratorで行ったUIの編集は、自動的にDimensionに転送される

Substance Painterでカスタム3Dマテリアルを作成

Substance Painterは、マテリアルの表面を詳細にペイントするために使用するアドビのマテリアル作成ソフトウェアです。この作業プロセスは、ブラシとマスクとレイヤーを使用する、Photoshopと同様のアプローチです。オンラインのSubstance Sourceライブラリには何千もの既製のマテリアルが用意されていて、金属、プラスチック、織物、皮革など、さまざまなマテリアルが利用可能です。

スマートウォッチのストラップにSubstance Painterの既製の3Dマテリアルを適用する。

Substanceマテリアルは属性の組み合わせとして構成されており、たとえば腕時計のストラップのサーフェスのカラーや粗さといった属性を変更すると、ストラップの見た目をカスタマイズできます。Dimensionと同様に、マテリアルが3Dモデルに適用された状態で表示されるため、モデルを回転したり照明の方向を変更したりして、サーフェスがの見え方が光の加減でどのように変わるのかをすぐに確認できます。また、レイヤの表示/非表示を切り替えて、さまざまな組み合わせをすばやくテストすることが可能です。

マテリアルが完成したら、テクスチャを書き出すダイアログからAdobe Dimension用のプリセットを選択すれば、Dimensionで使用できる形式にテクスチャマップがフォーマットされます。

Substance Painterでスマートウォッチのストラップのテクスチャレイヤーを切り替える。

Dimensionで製品の写真をレンダリング

Dimensionは、3Dシーン内のライティングやレンダリングに関連する多くのテクニカルな作業を自動化します。そのため、3Dの経験がほとんどないアーティストでも本物のようなな合成イメージを生成できます。

Dimensionでレンダリングされた本物のような画像

照明の方向や強さの変更は、シンプルにスライダーコントロールをドラッグするだけです。Dimensionには、自然光を模倣するように設計された特殊な光源の種類である「日光」も含まれています。スライダーを使用して太陽の高さや空の曇り具合などを制御できます。

Dimension内のスマートウォッチ画面の照明を変更

背景画像を追加するには、ライブラリパネルからシーンに画像をドラッグ&ドロップします。アドビのAI&ML技術であるAdobe Senseiの力を借りて背景画像の撮影時の視点や照明の情報を解析し、3Dモデルにそれを適用することができます。この機能は「画像から環境を設定」と呼ばれます。

Dimensionでレンダリングした精細な画像は、デザインレビューやマーケティングマテリアルとして使用できます。また、XDに取り込んで、プロトタイプによるフローの再確認にも使用できます。

Adobe XD、Illustrator、Dimension、Substance Painterを使って作成された3種類の本物のようなスマートウォッチ

Adobe Aeroを使用して拡張現実に3Dシーンをパブリッシュ

Dimensionで編集した3Dアセットは、アドビの拡張現実オーサリングソフトウェアであるAdobe Aeroでも使用できます。

Dimensionから書き出したい3Dオブジェクトを選択し、書き出しメニューから「Aero 用に選択」を指定すると、Aeroで使用できる形式でアセットが書き出されます。Aero アプリケーションを開いて3Dアセットを読み込んだら、そのアセットに拡張現実空間内の動作やインタラクション、さらにアニメーションを追加します。これにより、よりインタラクティブで没入型の体験が可能になり、自分の周囲の環境に置かれたデザインを、あらゆる角度から見ることができるようになります。

Adobe Aeroを使用してAR表示されたスマートウォッチのデザイン

また、DimensionからWebページとして表示可能な3Dシーンを公開することもできます（記事の公開時点ではベータ機能）。すべての3Dオブジェクト、マテリアル、およびカメラの位置がパッケージ化され、3Dビューアで好きな方向からシーンを眺められます。追加のプラグインは必要なく、Dimensionを使用していないユーザでも、ブラウザー内でシーンを確認できます。コメント機能が利用できるため、レビュー目的での共有に適しています。

今回のスマートウォッチの例では、まずXDでアイデアをプロトタイプ化し、Illustratorでデザインを洗練させ、2DデザインアセットとSubstance Painterでカスタマイズした3DマテリアルをDimensionで3Dモデルとしてまとめ、Adobe Senseiの力を借りて背景画像と合成しました。3DモデルをAdobe AeroのアセットとしてAR空間の没入体験で使用すれば、さらに活用できる領域が広がります。

この記事はSmartwatch Design Workflow: Bringing XD & Dimension Together for Product Designs（著者:Vladimir Petkovic）の抄訳です