ケーススタディ-HoloSketch の構築、空間レイアウト、および HoloLens 用の UX スケッチアプリCase study - Building HoloSketch, a spatial layout and UX sketching app for HoloLens

HoloSketch は、holographic エクスペリエンスの構築に役立つ HoloLens 用のデバイス上の空間レイアウトおよび UX スケッチツールです。HoloSketch is an on-device spatial layout and UX sketching tool for HoloLens to help build holographic experiences. HoloSketch は、ペアになっている Bluetooth キーボードとマウス、およびジェスチャと音声コマンドで動作します。HoloSketch works with a paired Bluetooth keyboard and mouse as well as gesture and voice commands. HoloSketch の目的は、簡単な視覚エフェクトとイテレーションのための簡単な UX レイアウトツールを提供することです。The purpose of HoloSketch is to provide a simple UX layout tool for quick visualization and iteration.

HoloSketch: HoloLens 用の空間レイアウトと UX スケッチアプリ。HoloSketch: A spatial layout and UX sketching app for HoloLens.
HoloSketch: HoloLens 用の空間レイアウトと UX スケッチアプリHoloSketch: spatial layout and UX sketching app for HoloLens

シンプルな UX レイアウトツールで、視覚化とイテレーションを簡単に行うことができます。A simple UX layout tool for quick visualization and iteration.
シンプルな UX レイアウトツールで簡単に視覚化とイテレーションを行うA simple UX layout tool for quick visualization and iteration


クイックスタディとスケールのプロトタイプのプリミティブPrimitives for quick studies and scale-prototyping


プリミティブな図形を使用して、クイック massing スタディとスケールプロトタイプを構築します。Use primitive shapes for quick massing studies and scale-prototyping.

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


PNG/JPG イメージまたは 3D FBX オブジェクト (Unity でパッケージ化する必要があります) を、OneDrive を通じて mixed reality スペースにインポートします。Import PNG/JPG images or 3D FBX objects(requires packaging in Unity) into the mixed reality space through OneDrive.

オブジェクトの操作Manipulate objects


使い慣れた3D オブジェクトインターフェイスを使用して、オブジェクト (移動/回転/スケール) を操作します。Manipulate objects (move/rotate/scale) with a familiar 3D object interface.

Bluetooth、マウス/キーボード、ジェスチャ、音声コマンドBluetooth, mouse/keyboard, gestures and voice commands

Bluetooth をサポートする

HoloSketch では、Bluetooth マウス/キーボード、ジェスチャ、音声コマンドがサポートされています。HoloSketch supports Bluetooth mouse/keyboard, gestures and voice commands.


デバイスで設計が発生する重要性Importance of experiencing your design in the device

HoloLens 向けに設計する場合は、デバイスで設計を行うことが重要です。When you design something for HoloLens, it is important to experience your design in the device. Mixed reality アプリ設計の最大の課題の1つは、特に従来の2D スケッチを通じて、スケール、位置、深さの意味を得るのが難しいことです。One of the biggest challenges in mixed reality app design is that it is hard to get the sense of scale, position and depth, especially through traditional 2D sketches.

2D ベースの通信のコストCost of 2D based communication

UX フローとシナリオを効果的に他のユーザーに伝達するために、デザイナーでは、Illustrator、Photoshop、PowerPoint などの従来の2D ツールを使用して、アセットの作成に時間がかかることがあります。To effectively communicate UX flows and scenarios to others, a designer may end up spending a lot of time creating assets using traditional 2D tools such as Illustrator, Photoshop and PowerPoint. これらの2D デザインでは、多くの場合、3D に変換するための追加の作業が必要になります。These 2D designs often require additional effort to convert them it into 3D. 2D から3D への変換では、いくつかのアイデアが失われています。Some ideas are lost in this translation from 2D to 3D.

複雑な展開プロセスComplex deployment process

Mixed reality は新しいキャンバスであるため、さまざまな設計イテレーションと評価と、その性質によるエラーが含まれます。Since mixed reality is a new canvas for us, it involves a lot of design iteration and trial and error by its nature. Unity や Visual Studio などのツールに慣れていないデザイナーの場合、HoloLens で簡単にまとめることはできません。For designer who are not familiar with tools such as Unity and Visual Studio, it is not easy to put something together in HoloLens. 通常は、次の手順に従って、デバイス内の 2D/3D アートワークを表示する必要があります。Typically you have to go through the process below to see your 2D/3D artwork in the device. これは、設計者がアイデアやシナリオを迅速に反復処理するための大きな障壁でした。This was a big barrier for designers iterating on ideas and scenarios quickly.

複雑な展開プロセスComplex deployment process
デプロイ プロセスDeployment process

HoloSketch を使用した簡素化されたプロセスSimplified process with HoloSketch

HoloSketch では、開発ツールとデバイスポータルのペアリングを使用しなくても、このプロセスを簡略化する必要がありました。With HoloSketch, we wanted to simplify this process without involving development tools and device portal pairing. OneDrive を使用すると、ユーザーは簡単に 2D/3D アセットを HoloLens に入れることができます。Using OneDrive, users can easily put 2D/3D assets into HoloLens.

HoloSketch を使用した簡素化されたプロセスSimplified process with HoloSketch
HoloSketch を使用した簡素化されたプロセスSimplified process with HoloSketch

3次元設計の考え方と解決策を奨励するEncouraging three-dimensional design thinking and solutions

このツールを使用すると、デザイナーは、真の3次元空間でソリューションを調査できるようになり、2D では動かなくなります。We thought this tool would give designers an opportunity to explore solutions in a truly three-dimensional space and not be stuck in 2D. HoloLens の場合、バックグラウンドは実際の世界であるため、UI の背景を作成することを考える必要はありません。They don’t have to think about creating a 3D background for their UI since the background is the real world in the case of HoloLens. HoloSketch を使用すると、デザイナーは HoloLens での3D デザインを簡単に調べることができます。HoloSketch opens up a way for designers to easily explore 3D design on HoloLens.

はじめにGet Started

HoloSketch に2D イメージ (JPG/PNG) をインポートする方法How to import 2D images (JPG/PNG) into HoloSketch

  • JPG/PNG イメージを OneDrive フォルダー ' Documents/HoloSketch ' にアップロードします。Upload JPG/PNG images to your OneDrive folder ‘Documents/HoloSketch’.
  • HoloSketch の OneDrive メニューから、環境内にイメージを選択して配置することができます。From the OneDrive menu in HoloSketch, you will be able to select and place the image in the environment.

2D イメージのインポートImporting 2D images
OneDrive を使用してイメージと3D オブジェクトをインポートするImporting images and 3D objects through OneDrive

HoloSketch に3D オブジェクトをインポートする方法How to import 3D objects into HoloSketch

OneDrive フォルダーにアップロードする前に、次の手順に従って、3D オブジェクトを Unity 資産バンドルにパッケージ化してください。Before uploading to your OneDrive folder, please follow the steps below to package your 3D objects into a Unity asset bundle. このプロセスを使用して、Maya、映画4D、Microsoft Paint 3D などの3D ソフトウェアから FBX/OBJ ファイルをインポートできます。Using this process you can import your FBX/OBJ files from 3D software such as Maya, Cinema 4D and Microsoft Paint 3D.


現時点では、資産バンドルの作成は、Unity バージョン 5.4.5 f1 でサポートされています。Currently, asset bundle creation is supported with Unity version 5.4.5f1.

  1. Unity プロジェクト ' AssetBunlder_Unity 'をダウンロードして開きます。Download and open the Unity project 'AssetBunlder_Unity'. この Unity プロジェクトには、バンドル資産生成用のスクリプトが含まれています。This Unity project includes the script for the bundle asset generation.

  2. 新しいオブジェクトを作成します。Create a new GameObject.

  3. 内容に基づいて、このオブジェクトにという名前を指定します。Name the GameObject based on the contents.

  4. [インスペクター] パネルで、[コンポーネントの追加] をクリックし、[Box Collider] を追加します。In the Inspector panel, click ‘Add Component’ and add ‘Box Collider’.

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

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

  5. 3D FBX ファイルを [プロジェクト] パネルにドラッグして、インポートします。Import the 3D FBX file by dragging it into the project panel.

  6. 新しいユーザーオブジェクトの下 にある [階層] パネルにオブジェクトをドラッグします。Drag the object into the Hierarchy panel under your new GameObject .

    新しいユーザーオブジェクトの下にある [階層] パネルにオブジェクトをドラッグします。

  7. Collider ディメンションがオブジェクトと一致しない場合は、それを調整します。Adjust the collider dimension if it does not match the object. オブジェクトを Z 軸 に回転します。Rotate the object to face Z-axis .

    Collider ディメンションがオブジェクトと一致しない場合は調整します。

  8. オブジェクトを [階層] パネルから [プロジェクト] パネルにドラッグし て、prefab にします。Drag the object from the Hierarchy panel to the Project panel to make it prefab .

  9. [インスペクター] パネルの下部にあるドロップダウンリストをクリックし、新しい一意の名前を作成して割り当てます。On the bottom of the inspector panel, click the dropdown, create and assign a new unique name. 次の例では、AssetBundle 名に ' ' を追加して割り当てる方法を示します。Below example shows adding and assigning 'brownchair' for the AssetBundle Name.

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

  10. モデルオブジェクトのサムネイル画像を準備します。Prepare a thumbnail image for the model object. イメージを [プロジェクト] パネルにドラッグし、オブジェクトに使用する名前を割り当てます。Drag an image into the project panel and assign the name used for the object.

  11. Unity プロジェクトの ' Asset ' フォルダーの下に ' Assetbundles ' という名前のフォルダーを作成します。Create a folder named ‘Assetbundles’ under the Unity project’s ‘Asset’ folder.

  12. [アセット] メニューの [Build AssetBundles] を選択して、ファイルを生成します。From the Assets menu, select ‘Build AssetBundles’ to generate file. [アセット] メニューの [Build AssetBundles] を選択して、ファイルを生成します。From the Assets menu, select ‘Build AssetBundles’ to generate file.

  13. 生成されたファイルを OneDrive の/Files/Documents/HoloSketch フォルダーにアップロードします。Upload the generated file to the /Files/Documents/HoloSketch folder on OneDrive. Asset_unique_name ファイルのみをアップロードします。Upload the asset_unique_name file only. マニフェストファイルまたは AssetBundles ファイルをアップロードする必要はありません。You don’t need to upload manifest files or AssetBundles file.
    ファイル/ドキュメント/HoloSketch/フォルダーにファイルを追加  すると、HoloSketch の OneDrive メニューに追加された3d オブジェクトが表示されますAdd files to Files/Documents/HoloSketch/ folder You will see added 3D object in HoloSketch's OneDrive menu

オブジェクトを操作する方法How to manipulate the objects

HoloSketch は、3D ソフトウェアで広く使用されている従来のインターフェイスをサポートしています。HoloSketch supports the traditional interface that is widely used in 3D software. [移動]、[回転]、[ジェスチャとマウスを使用したオブジェクトの拡大/縮小] を使用できます。You can use move, rotate, scale the objects with gestures and a mouse. 音声またはキーボードを使用して、さまざまなモードをすばやく切り替えることができます。You can quickly switch between different modes with voice or keyboard.

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

オブジェクトを操作する方法How to manipulate the objects
オブジェクトを操作する方法How to manipulate the objects

コンテキストとツールのベルトメニューContextual and Tool Belt menus

コンテキストメニューの使用Using the Contextual Menu

ダブルエアタップを押して、コンテキストメニューを開きます。Double air tap to open the Contextual Menu.

メニュー項目:Menu items:

  • レイアウト画面: これは 3D grid システムで、複数のオブジェクトをレイアウトし、グループとして管理できます。Layout Surface: This is a 3D grid system where you can layout multiple objects and manage them as a group. レイアウト画面をダブルエアタップして、オブジェクトを追加します。Double air-tap on the Layout Surface to add objects to it.
  • プリミティブ: Massing の研究には、キューブ、球体、円柱、およびコーンを使用します。Primitives: Use cubes, spheres, cylinders and cones for massing studies.
  • OneDrive: OneDrive メニューを開き、オブジェクトをインポートします。OneDrive: Open the OneDrive menu to import objects.
  • ヘルプ: ヘルプ画面を表示します。Help: Displays help screen.

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

ツールベルトメニューの使用Using the Tool Belt Menu

シーンの移動、回転、拡大/縮小、保存、読み込みは、ツールベルトメニューから行うことができます。Move, Rotate, Scale, Save, and Load Scene are available from the Tool Belt Menu.

キーボード、ジェスチャ、音声コマンドの使用Using keyboard, gestures and voice commands

キーボード、ジェスチャ、音声コマンドKeyboard, Gestures and Voice Commands
キーボード、ジェスチャ、音声コマンドKeyboard, gestures, and voice commands

アプリのダウンロードDownload the app

HoloSketch app icon Microsoft Store から無料で HoloSketch アプリをダウンロードしてインストールする Download and install the HoloSketch app for free from the Microsoft Store

既知の問題Known issues

  • 現在、資産バンドルの作成は、 Unity バージョン 5.4.5 f1 でサポートされています。Currently asset bundle creation is supported with Unity version 5.4.5f1.
  • Onedrive のデータの量によっては、OneDrive コンテンツの読み込み中にアプリが停止したかのように表示されることがあります。Depending on the amount of data in your OneDrive, the app might appear as if it has stopped while loading OneDrive contents
  • 現在、保存および読み込み機能ではプリミティブオブジェクトのみがサポートされていますCurrently, Save and Load feature only supports primitive objects
  • テキスト、サウンド、ビデオ、および写真メニューは、コンテキストメニューで無効になっていますText, Sound, Video and Photo menus are disabled on the contextual menu
  • ツールベルトメニューの [再生] ボタンをクリックすると、操作ギズモがクリアされます。The Play button on the Tool Belt menu clears the manipulation gizmos

スケッチを共有するSharing your sketches

HoloLens でビデオ記録機能を使用するには、「Cortana、Start/Stop レコーディング」と言ってください。You can use the video recording feature in HoloLens by saying 'Hey Cortana, Start/Stop recording'. ボリュームの上下キーを押して、スケッチの画像を撮影します。Press the volume up/down key together to take a picture of your sketch.

著者についてAbout the authors

Picture of Dong Yoon Park 駐車中Dong Yoon Park
UX デザイナー @MicrosoftUX Designer @Microsoft
Picture of Patrick Sebring パトリック SebringPatrick Sebring
向け @MicrosoftDeveloper @Microsoft