次の方法で共有


ケース スタディ - HoloSketch のビルド、HoloLens 用の空間レイアウト兼 UX スケッチ アプリ

HoloSketch は、ホログラムを使ったエクスペリエンスの作成に役立つ、HoloLens 用のオンデバイス型空間レイアウト兼 UX スケッチ ツールです。 HoloSketch は、Bluetooth のキーボードやマウスとペアリングして使用できるほか、ジェスチャ コマンドや音声コマンドにも対応しています。 HoloSketch の目的は、シンプルな UX レイアウト ツールを提供することで、視覚化やイテレーションをすばやく行えるようにすることです。

HoloSketch: HoloLens 用の空間レイアウトと UX スケッチ アプリ。
HoloSketch: HoloLens 用の空間レイアウト兼 UX スケッチ アプリ

簡単な視覚化と反復のための簡単な UX レイアウト ツール。
視覚化とイテレーションを迅速化するためのシンプルな UX レイアウト ツール

機能

クイック スタディとスケール プロトタイピングのためのプリミティブ

プリミティブ図形の使用

プリミティブ シェイプを使用すると、マッシング スタディやスケール プロトタイピングをすばやく行うことができます。

OneDrive を使用してオブジェクトをインポートする

オブジェクトのインポート

PNG や JPG の画像や 3D FBX オブジェクト (Unity でのパッケージ化が必要) を、OneDrive から複合現実空間内にインポートできます。

オブジェクトを操作する

オブジェクトの操作

使い慣れた 3D オブジェクト インターフェイスを使用してオブジェクトを操作できます (移動、回転、拡大縮小)。

Bluetooth、マウスとキーボード、ジェスチャ、および音声によるコマンド

Bluetooth をサポート

HoloSketch では、Bluetooth、マウスとキーボード、ジェスチャ、および音声によるコマンドがサポートされています。

バックグラウンド

デザインをデバイスで確認することの重要性

HoloLens 用に何かを設計する際には、デザインを実際にデバイスで確認することが重要です。 複合現実アプリを設計する際の最大の課題の 1 つは、スケール、位置、奥行きの感覚がわかりにくいということです (特に従来の 2D スケッチを使用した場合)。

2D ベースのコミュニケーションのコスト

デザイナーは、UX のフローやシナリオを他の作業者に効果的に伝達するために、Illustrator、Photoshop、PowerPoint などの従来型 2D ツールを使用して、長い時間をかけてアセットを作成しなければならなくなることがあります。 多くの場合、これらの 2D デザインでは、それらを 3D に変換するための追加作業が必要になります。 2D から 3D へと変換するこの過程で、一部のアイデアが欠落することもあります。

複雑な展開プロセス

複合現実は新しい制作環境であるため、その性質上、デザインのイテレーションや試行錯誤が多く発生します。 Unity や Visual Studio などのツールに慣れていないデザイナーの場合、HoloLens 内に何かをまとめるのは簡単ではありません。 通常、2D や 3D のアートワークをデバイスで表示するには、下記のプロセスを経る必要があります。 これは、デザイナーがアイデアやシナリオのイテレーションを迅速に行ううえで、大きな障壁となっていました。

複雑な展開プロセス
デプロイ プロセス

HoloSketch を使用したシンプルなプロセス

HoloSketch は、開発ツールとデバイス ポータルをペアリングする手間を無くして、プロセスを簡略化するために開発されました。 ユーザーは、OneDrive を使用して、2D や 3D のアセットを簡単に HoloLens 内に配置できます。

HoloSketch を使用したシンプルなプロセス
HoloSketch を使用したシンプルなプロセス

3D 対応のデザイン思考とソリューションを促進する

このツールを使用すれば、デザイナーは 2D 型のプロセスに縛られることなく、真の 3D 空間でソリューションを模索できるようになります。 HoloLens の場合、背景は現実世界なので、UI の 3D 背景を作成することについて考える必要はありません。 HoloSketch を使用すれば、デザイナーは HoloLens 上で 3D デザインを簡単に模索できます。

作業を開始する

HoloSketch に 2D 画像 (JPG や PNG) をインポートする方法

  • JPG や PNG の画像を、OneDrive の 'Documents/HoloSketch' フォルダーにアップロードします。
  • HoloSketch の OneDrive メニューから、画像を選択して環境に配置できるようになります。

2D 画像のインポート
OneDrive を使用した画像と 3D オブジェクトのインポート

3D オブジェクトを HoloSketch にインポートする方法

OneDrive フォルダーにアップロードする前に、次の手順に従って、3D オブジェクトを Unity アセット バンドルにパッケージ化してください。 このプロセスによって、Maya、Cinema 4D、Microsoft Paint 3D などの 3D ソフトウェアから、FBX や OBJ のファイルをインポートすることができます。

重要

現在、アセット バンドルの作成は、Unity バージョン 5.4.5f1 でサポートされています。

  1. Unity プロジェクト 'AssetBunlder_Unity' をダウンロードして開きます。 この Unity プロジェクトには、バンドル アセット生成用のスクリプトが含まれています。

  2. 新しい GameObject を作成します。

  3. GameObject に、コンテンツに基づいた名前を付けます。

  4. [インスペクター] パネルで [コンポーネントの追加] をクリックし、'Box Collider' を追加します。

    [インスペクター] パネルで、[コンポーネントの追加] をクリックし、[Box Collider] を追加します

    [インスペクター] パネルで、[コンポーネントの追加] をクリックし、[Box Collider] #2 を追加します

  5. 3D FBX ファイルをプロジェクト パネルにドラッグしてインポートします。

  6. オブジェクトを、新しい GameObject の [階層] パネルにドラッグします。

    オブジェクトを新しい GameObject の [階層] パネルにドラッグします

  7. コライダー ディメンションを調整します (オブジェクトと一致しない場合)。 オブジェクトを回転させて、Z 軸の方向に向けます。

    コライダーの寸法がオブジェクトと一致しない場合は調整します。

  8. オブジェクトを [階層] パネルから [プロジェクト] パネルにドラッグして、プレハブにします

  9. [インスペクター] パネルの下部にあるドロップダウンをクリックし、新しい一意の名前を作成して割り当てます。 次の例は、AssetBundle 名として 'brownchair' を追加し、割り当てている様子を示したものです。

    インスペクター パネルの下部にあるドロップダウンをクリックし、新しい一意の名前を割り当てます。

  10. モデル オブジェクトのサムネイル画像を準備します。 イメージをプロジェクト パネルにドラッグし、オブジェクトに使用する名前を割り当てます。

  11. Unity プロジェクトの 'Asset' フォルダーの下に、'Assetbundles' という名前のフォルダーを作成します。

  12. [アセット] メニューで、[Build AssetBundles](AssetBundles の構築) を選択してファイルを生成します。 [アセット] メニューで、[Build AssetBundles](AssetBundles の構築) を選択してファイルを生成します。

  13. 生成されたファイルを、OneDrive の /Files/Documents/HoloSketch フォルダーにアップロードします。 アップロードするのは、asset_unique_name ファイルのみです。 マニフェスト ファイルや AssetBundles ファイルをアップロードする必要はありません。
    ファイル/ドキュメント/HoloSketch/ フォルダーにファイル追加する HoloSketch の OneDrive メニューに追加された 3D オブジェクトが表示されます

オブジェクトの操作方法

HoloSketch では、3D ソフトウェアで広く使用されている従来型のインターフェイスがサポートされています。 オブジェクトの移動、回転、拡大縮小は、ジェスチャとマウスを使って行えます。 各種のモードは、音声またはキーボードを使ってすばやく切り替えることができます。

オブジェクト操作のモード

オブジェクトの操作方法
オブジェクトの操作方法

コンテキスト メニューとツール ベルト メニュー

コンテキスト メニューの使用

コンテキスト メニューは、ダブル エア タップをすると開きます。

メニュー項目:

  • レイアウト サーフェス: これは、複数のオブジェクトをレイアウトし、それらをグループとして管理できる 3D グリッド システムです。 オブジェクトを追加するには、レイアウト サーフェスをダブル エアタップします。
  • プリミティブ: マッシング スタディには、キューブ、球、シリンダー、およびコーンを使用できます。
  • OneDrive: OneDrive メニューを開してオブジェクトをインポートできます。
  • ヘルプ: ヘルプ画面が表示されます。

コンテキスト メニュー
コンテキスト メニュー

ツール ベルト メニューの使用

シーンの移動、回転、拡大縮小、保存、読み込みは、ツール ベルト メニューから行うことができます。

キーボード、ジェスチャ、音声によるコマンドの使用

キーボード、ジェスチャ、音声コマンド
キーボード、ジェスチャ、音声によるコマンド

アプリのダウンロード

HoloSketch アプリ アイコン Microsoft Store から HoloSketch アプリを無料でダウンロードしてインストールする

既知の問題

  • 現在、アセット バンドルの作成は、Unity バージョン 5.4.5f1 でサポートされています。
  • OneDrive 内のデータの量によっては、OneDrive のコンテンツを読み込んでいる間、アプリが停止したように見えることがあります
  • 現在、保存と読み込みの機能では、プリミティブ オブジェクトのみがサポートされています
  • テキスト、音声、ビデオ、写真の各メニューは、コンテキスト メニューでは無効になっています
  • ツール ベルト メニューの [再生] ボタンをクリックすると、操作ギズモがクリアされます

スケッチの共有

HoloLens のビデオ録画機能を使用するには、「Cortana、録画を開始 (停止) して」と言います。 スケッチの画像を撮影するには、ボリュームの上下キーを同時に押します。

著者について

パトリック・セブリングの写真
ドンユン公園の写真 Yoon Park
UX デザイナー @Microsoft
Patrick Sebring
開発者 @Microsoft