シーン作成・公開方法を学べるチュートリアル

本記事では、シーンの作成・管理方法、STYLY Studioの基本操作方法、作成したシーンを公開するまでの手順を紹介します。
この記事を読めば、誰でも簡単にVR / AR空間を作成する方法が学べ、かつ全世界に自分の作ったVR / AR空間を公開できます。
さっそく自分だけのVR / AR空間を作って全世界に公開して、SNSを使って共有してみましょう。

Sceneの新規作成と管理方法

Sceneの新規作成と管理方法を紹介します。SceneとはVR/AR空間のことを意味します。
MY SCENES画面では、Sceneの新規作成、名前の変更、コピー、削除ができます。
STYLY トップページやSTYLY GALLERYからSTYLY Studioを起動すると、初めにMY SCENES画面が開きます。
初めてSTYLY Studioを起動する方は、Sceneを新規作成する必要があります。

では、Sceneを作成してみましょう。MY SCENES画面右上の[Create]ボタンをクリックしてください。
次に、VR Scene TemplateまたはAR Scene Templateを選択し、TitleフォームにScene名（Scene名は変更可能）を入力して、[Create]ボタンをクリックします。
すると、STYLY Studioが起動します。

STYLY Studio内のシーンマネージャーについて

STYLY Studio内でもシーンの管理や新規作成ができます。
後述するメニュータブからScenesタブを選ぶことでシーンマネージャを起動できます。

シーンマネージャ画面 メニュー説明

メニュータブ	Scenesタブ/Create Sceneタブがあります。Sceneタブを選択すると、公開/非公開の確認、Scene名の確認・編集、Sceneの削除・コピーができます。Create Sceneタブを選択すると、Sceneの新規作成ができます。
サムネイル	Sceneのサムネイル画像が確認できます。
公開/非公開	Sceneの公開状態が確認できます。Draftだと非公開、Publicだと公開されていることを意味します。
Scene名	Scene名を確認できます。
エディットボタン	Scene名変更ボタン・コピーボタン・削除ボタンの表示/非表示の切り替えができます。
Scene名変更ボタン	Scene名を変更ができます。
コピーボタン	Sceneのコピーができます。
削除ボタン	Sceneの削除ができます。一度削除すると、復元できないため注意してください。
閉じるボタン	STYLY Studioに戻ります。Sceneが1つも作成されていない場合は、使用できません。
戻るボタン	STYLY Studioホーム画面に移動します。

STYLY Studio使用方法

STYLY Studioの使い方を紹介します。
作業視点の変更方法、STYLY Studio画面の説明、アセットの挿入方法、アセットの操作方法を説明します。

作業視点のズーム・移動・回転

STYLY Studio画面上の作業視点の変更方法を紹介します。

作業視点のズームイン・ズームアウト

作業視点をマウス操作（トラックパッド）でズームイン・ズームアウトができます。

操作方法 Windows/Mac共通

使用デバイス	操作方法
マウス	マウスホイール
トラックパッド	ピンチ 2本指縦スワイプ （トラックパッド設定による）

作業視点の平行移動

作業視点を上下左右に平行移動ができます。

操作方法 Windows/Mac共通

使用デバイス	操作方法
マウス/トラックパッド共通	右クリック＋WASDQE W:前、A:左、S:後、D:右、Q:下、E:上 ※Shiftキーを同時に押すと視点移動の速度が上がります 矢印キー ↑:上、↓:下、←:左、→:右 ※Shiftキー同時に押すと視点移動の速度が上がります
マウスのみ	ホイールボタン 中央クリック＋マウス移動

作業視点の公転

作業視点をマウス操作（トラックパッド）で公転ができます。Your Positionを中心に公転します。

操作方法 Windows/Mac共通

使用デバイス	操作方法
マウス	左クリック + マウス移動
トラックパッド	左クリック + ドラッグ

作業視点の自転

作業視点をマウス操作（トラックパッド）で自転ができます。

操作方法 Windows/Mac共通

使用デバイス	操作方法
マウス	右クリック + マウス移動
トラックパッド	右クリック + ドラッグ

Your Positionとは

Your PositionとはVR/AR空間を体験時に、最初の視点となる位置です。
STYLY VR APPでHMDを装着して見える視点となります。
また、Your Positionは移動可能です。

STYLY Studio画面の説明

STYLY Studioの画面一覧について紹介します。
大きく分けて4つのメニューがあります。
4つのメニューについて詳しく紹介します。

トップボタン

メニュー説明

Scenesボタン	シーンマネージャー画面を開きます。
Assetsボタン	Sceneに挿入するアセットを選択するための画面を開きます。 アセットは3Dモデル、画像、音楽、動画などがあります。
Helpボタン	Scene編集時に役立つショートカットキーなどの情報を表示できます。
Play Modeボタン	Play Modeを起動します。
Publishボタン	Sceneを公開するためのPublish画面を開きます。

ヒエラルキーメニュー

ヒエラルキーメニューとは、アセットと呼ばれるライト、Skybox（天球）、3Dモデルなどを管理するメニューです。
新規作成したSceneでは、下記の5つのアセットがデフォルト挿入されています。
デフォルトで挿入されているアセットについて説明します。

Directional Lightとは太陽のように空間全体を照らす光源です。

[Ground] Defaultとは床・地面です。

[Skybox] Defaultとは全画面を覆う天球です。

Your PositionとはVR/AR空間を体験時に、最初の視点となる位置です。
STYLY VR APPでHMDを装着して見える視点となります。
また、Your Positionは移動可能です。

Transparent FloorとはVRでのワープ移動のためなどに必要なものです。

メニュー説明

トップバー	ヒエラルキーメニューの表示/非表示の切り替えができます。
画像アイコン	Scene上のアセット表示/非表示の切り替えができます。
コピーボタン	アセットのコピーができます。
削除ボタン	アセットの削除ができます。

 機能説明

作業視点をアセットにフォーカス	ヒエラルキーメニューにあるアセットをダブルクリックすると、Scene上のアセットに作業視点をフォーカスします。
ドラッグ＆ドロップでSceneにコピー	ヒエラルキーメニューからアセットをSceneにドラッグ＆ドロップするとコピーができます。

シーンギズモ

シーンギズモはカメラが現在向かっている方角を示しています。
また赤・緑・青のコーンをクリックすることで、それらの方角を前方とする角度にカメラの視点を素早く切り替えられます。

シーンギズモの下に「Persp」と表示されていますが、これはシーンを透視図法で表示していることを表しています。
「Persp」をクリックすると「Iso」に切り替えられ、シーンを並行投影で表示します。
元に戻したい場合は「Iso」をクリックすることで「Persp」に切り替えられます。

透視投影では同じ大きさの物体でも視点から遠い物体は小さく、視点から近い物体は大きく描かれます。
それに対して、並行投影では同じ大きさの物体は視点からの距離によらず同じ大きさに描かれます。

サイドボタン

メニュー説明

globalボタン ※ヒエラルキーメニューでアセットを選択している場合のみ表示	globalボタンは選択しているアセットの回転と拡大・縮小を行う際の基準となる軸を変更します。 Onの時は、シーン全体の方角を基準として回転及び拡大・縮小の操作が行われます。 Offの時は、選択しているアセットの向かっている方角を軸とした回転及び拡大・縮小の操作が行われます。
move/rotate/scaleボタン ※ヒエラルキーメニューでアセットを選択している場合のみ表示	アセット操作（移動、回転、拡大縮小）の切り替えができます。
reset positionボタン	カメラ視点をYour Positionに戻します。

アセットの挿入

Sceneにアセットを挿入して、自分だけのオリジナルSceneを作成してみましょう。
この章では、アセットの種類の紹介とアセットの操作方法を説明します。
では簡単な手順に沿ってSceneを作成していきたいと思います。

アセットの種類

トップボタンのAssetsボタンをクリックすると、アセットリストが表示されます。
アセットリストには、My upload、3D object、2D object、Environment、Particle、Filter、Function、External mediaがあります。

メニュー説明

My uploads	自身がSTYLYに直接、またはUnity経由でアップロードしたアイテムがあります。
3D object	STYLYに標準搭載されている3Dオブジェクトを選べます。
2D object	mobile,web向けの2Dボタンアセットである「2DUI Set」があります。
Environment	Skybox(天球)、Floor(地面)、光源、Sceneを選べます。
Particle	既存のParticleを使用できます。
Filter	シーン全体に視覚効果を及ぼすフィルターがあります。
Function	シーン全体に効果を及ぼす機能を追加することができます。
External media	YouTube、HoloStreamの動画を埋め込むことができます。

アセットの挿入

アセットの挿入方法を紹介します。
アセットリストからアセット選んでSceneに挿入してみましょう。
今回は、Skybox（天球）、Ground（地面）、3DオブジェクトのアセットをSceneに挿入して、簡単なSceneを作成しましょう。

Skybox（天球）を変更する

Skybox（天球）の変更方法を紹介します。
Assetsボタンをクリックする。

Environmentをクリックする

Skyboxをクリックする。
Skyboxでは天球（Skybox）アセットをSceneに挿入できます。

好きな[Skybox]を選択し、クリックする。

Skyboxが切り替わりました。
1つのSceneに1つのSkyboxが適用されますので、デフォルトで設定されていたSkyboxと入れ替わりました。
Skyboxの変更だけで世界観が大きく変化しますので、色んなSkyboxを試してみてください。

Ground（地面）を変更する

次は、SceneにGround（地面）を挿入してみましょう。
デフォルトで挿入されている地面を削除します。
ヒエラルキーメニューの[Ground]DefaultGroundを削除（ゴミ箱ボタンをクリック）します。

Assetsボタンをクリックする。

Environmentをクリックする。

Floorをクリックする。

下にスクロールすると、[Ground]～というアセットが表示されます。
好きな[Ground]を選択し、クリックする。

Groundが挿入されました。
空と地面を作り出せました。
ここに3Dオブジェクトを挿入していきましょう。

3DオブジェクトをSceneに挿入する

3DオブジェクトをSceneに挿入しましょう。
始めに、Assetsボタンをクリックする。

3D objectをクリック。

Modelをクリックする。

カテゴリボタンでカテゴリを絞ることもできます。
また検索フォームには、キーワードを入力して、検索ができて検索結果画面が更新されます。

好きな3Dオブジェクトを検索して、Sceneに挿入しましょう。
今回は検索フォームに「animal」と入力して、検索してみます。

そうすると、動物の3Dオブジェクトが検索結果ページに表示されます。
Lionをクリックします。

選択したアセットがSceneに挿入されました。
しかし、地面にLionのアセットがめり込んでいるので、アセットを操作して、自分の好きな位置に移動・回転させて、好きな大きさに変更してみましょう。
次はアセットの操作方法（移動・回転・拡大縮小）を紹介します。

アセットの操作方法（移動・回転・拡大縮小）

Lionのアセット使用して、アセットの操作方法（移動・回転・拡大縮小）を紹介します。
操作したいアセットを選択します。
選択されたアセットは黄色になります。
アセットの選択方法はヒエラルキーメニューにあるアセットをクリックするか、Scene上のアセットをクリックします。

アセットを選択すると、アセットにマニピュレーターが表示されます。
マニピュレーターとは、赤・緑・青の3方向の矢印のことです。

サイドメニューのmove/rotate/scaleボタンから、移動・回転・拡大縮小を切り替えられます。
または、下記ショートカットキーを使用して切り替えることもできます。

• ［Ｗ］キー：移動
• ［Ｅ］キー：回転
• ［Ｒ］キー：拡大縮小

移動

移動モードに切り替えて、マニピュレーターをドラッグすれば、アセットを移動できます。
また、Ctrl + Zキーでアセットをひとつ前の状態に戻すことができます。

回転

回転モードに切り替えて、マニピュレーターをドラッグすれば、アセットを回転できます。

拡大縮小

拡大縮小モードに切り替えて、マニピュレーターをドラッグすれば拡大縮小できます。

直接数値入力して操作する方法

マニピュレーターの数値部分をクリックすると、直接数値を編集できるようになります。
数値入力後、[Enter]キーをクリックすると完了します。
移動・回転・拡大縮小モードすべてに対応しています。
操作を戻したい場合は、[Ctrl]キー+[Z]キーをクリックすると操作を戻せます。

便利なショートカットキー一覧

上記の操作方法を紹介します。

アセット操作 (Object operation)

• [W]キー：アセットの操作方法を移動モードに切り替え（アセット選択状態時）
• [E]キー：アセットの操作方法を回転モードに切り替え（アセット選択状態時）
• [R]キー：アセットの操作方法を拡大縮小モードに切り替え（アセット選択状態時）
• [Ctrl]キー + [Z]キー：ひとつ前の操作に戻る
• [Ctrl]キー + [Y]キー：Undoで取り消した動作をもう1度実行して、Undoをなかったことにする

視点操作 (View point operation)

• [F]キー：対象アセットに視点フォーカス（アセット選択状態時）
• マウスの右ボタンをドラッグ：自分の位置を中心に景色を回転させる
• マウスの左ボタンをドラッグ：視点を回転させる
• ホイールをドラッグ：視点を移動する
• ホイールをスクロール：視点を拡大・縮小する
• [Q]または[W]または[E]または[A]または[S]または[D]キーを押しながら、マウスの右ボタンをドラッグ：視点の移動

ヒエラルキーメニュー操作 (Hierarchy operation)

• [Shift] キー+ [D]キー：アセットのコピー（アセット選択状態時）
• [Del]キー：アセットの削除（アセット選択状態時）
• アセット選択 + ダブルクリック：対象アセットに視点フォーカス

作成したSceneの公開・共有方法

Sceneの公開方法

作成したSceneを公開する方法を紹介します。
Publishボタンをクリックすると、Publish画面に移動します。
Sceneを公開するときのサムネイル画像として、Publishボタン押したときの作業視点がサムネイル画像となります。

タイトル名（Title）と説明文（Description）を入力して、タグ(Tags)を設定して、Publishボタンをクリックする。
入力フォームは英語（半角英数字）のみ入力可能です。

Open in Galleryをクリックします。
STYLY GALLERYサイトに自分の作成したSceneが公開されます。

ギャラリーサイトに自分の作ったSceneが公開されました。
これで色んな人にSceneを見てもらえるようになりました。
次は、Sceneの共有方法を紹介します。

Sceneの共有方法

SNSでの共有方法

SceneをSNSで共有する方法を紹介します。
Twitterで共有したい方は、Twitterアイコンをクリックしてツイートします。
Facebookで共有したい方は、Facebookアイコンをクリックして投稿します。

STYLYマーカーを作成する

公開したSceneをSTYLY GALLERYで開きます。
（パブリッシュ時にURLが表示されるのでそれをクリックするか、STYLY GALLERYのマイページから自分がパブリッシュしたSceneを探すこともできます）

MobileアイコンをクリックすることでSTYLYマーカーを表示することができます。
表示されたSTYLYマーカーをSTYLY Mobileで読み込むと、Sceneを体験できます。

ポップアップの右上のダウンロードボタンを押すことで、STYLYマーカー(PNG画像データ)をダウンロードできます。
また、右上のシェアボタンを押すと、STYLY Mobileを直接起動できるURLを発行できます。

Sceneの体験方法

Sceneでは次の3通りの体験方法があります。

• VR（HMDを持っている方のみ）
• Web Player
• STYLY Mobile

詳しい説明は以下の記事をご参照ください。

また、STYLY MobileのVRシーンでの操作方法については、以下の記事を参照ください。