Webデザイナー向けの初の3D UIメーカーをご紹介
3DやAR向けのUIを作成する最も簡単な方法を体験してください。Vectaryの高度なSVGインポート機能をご紹介します。
かつてない方法でのUIデザイン
クリエイティブ業界が常に進化し、限界を押し広げ、飛躍し続ける中、最新のトレンドを常に把握しておく必要があります。2Dをメインとするデザイナーは、通常、新しいUIのプロトタイプを作成する際にベクターベースのフォーマットやツールを使用します。Vectaryの新機能は、デザインプロセスをシンプルにすることを目指し、3Dと2Dのクリエイティブツールの接点を提供します。Vectaryは、3DやARのデザインを2Dデザイナーにとってより身近なものにする、唯一の3Dデザインプラットフォームです。
この機能の背景にある主な考え方は、現在の2Dデザイナーが、将来は間違いなく3DのUIデザイナーになるということです。現在、ほとんどのインターフェースがARや3D空間へと徐々に移行しつつあります。
Vectaryの新しいSVGインポートのメリット
SVGインポートは、この分野に多くのメリットをもたらします：
- VectaryはSVGファイルをベクターオブジェクトとして保存するため、パスの品質、メッシュ化、ラスタライズを完全にコントロールできます。
- すべてのSVGファイルの設定は1つのパネルで簡単に調整でき、クリエイティブプロセスの途中、いつでも元に戻すことができます。
- SVGファイルを2D画像として扱うか、3Dジオメトリとして作業するかは自由に選択できます。
3DおよびARのUIモックアップのプロトタイプ作成を始める方法：
- SVGファイルをダウンロードします。
- ファイルをVectaryにドラッグ＆ドロップします。最初はラスタライズされた2D画像として表示されます。右側のパネルにSVGオブジェクトメニューが表示されます。
- 「Geometry」タブには、編集可能な3つのプロパティ（「Segments」、「Offset」、「Extrude」）があります。「Extrude」の値を大きくすると、オブジェクトが3Dになり、値が高くなるほどオブジェクトに厚みが出ます。「Segments」は、2D形状から3Dジオメトリに変換される際の品質を決定するもので、値が高くなるほどオブジェクトの精度が向上します。ただし、これによりエクスポートされるファイルのサイズが大きくなる点にご注意ください。「Offset」機能は、基本的にSVG構造に基づいてオブジェクトを異なるレイヤーに分解します。レイヤーは3次元空間に配置されるため、分解図として表示できます。
- オブジェクトを右クリックして「Convert To Geometry」を選択すると、SVGファイルが3Dに変換されます。これで、色やマテリアルの変更、「Bend」などのさまざまな3D機能の適用、または選択した状態でEnterキーを押してEditモードに入り、メッシュ全体を編集できるようになります。
- これで基本的な3Dモデルの準備が整いました。ここから、さまざまな背景やライティングのオプションを追加できます。
- 完成したら、プロジェクトをPNGファイルや3Dファイルとしてエクスポートしたり、ウェブサイトに埋め込んで、ARプレビューに対応したインタラクティブな3D要素として誰でも閲覧できるようにしたりできます。
ヒント：Vectaryでレイヤー分けされた3D UI効果を再現するための、FigmaでのSVGファイルのエクスポート方法
- SVGファイルの構造によって、3D空間上でのオブジェクトの間隔が決まります。ファイルのルート構造でレイヤーやグループが深い階層にあるほど、Vectaryの「Geometry」SVG設定において「Offset by structure」を使用した際に、より高い位置に配置されます。
3DやARのロゴを作成しましょう
Vectaryを使えば、ウェブサイト上でインタラクティブに表示できる3D要素として、またはAR内のオブジェクトとして表示できる3Dロゴを作成できます。2DロゴのSVGファイルをシーンにドラッグ＆ドロップし、右側パネルの「Geometry」設定で押し出すだけです。
3D UIデザインをウェブサイトやARで表示しましょう
UIや3Dロゴの巻き付けと変形
別の活用例としては、オブジェクトにUIやロゴを巻き付ける方法があります。ARで表示するUIや、ボトルに巻き付けるラベルなどがこれに該当します。これを実現するために、「Bend」などの「Deform（変形）」ツールを試すことができます。新しくなったVectaryのSVGファイルインポートは、特にモックアップの作成やさまざまなシナリオの検証において、2Dデザイナーに新たな可能性を切り拓きます。
