Contents
STYLY XRでVR/ARコンテンツ制作を始める前に
STYLY XRは、クリエイターがVR/ARコンテンツを手軽に作成できるプラットフォームとして注目されています。3Dモデルの操作からインタラクティブ要素の設定まで、直感的なUIで制作効率を高められます。本記事では、初心者向けのステップバイステップガイドを通じて、STYLY XRでのコンテンツ作成方法を具体的に解説します。
STYLY XRの基本操作と環境構築方法
STYLY XRでプロジェクトを開始するには、アカウント作成からワークスペースの準備が不可欠です。以下の手順で初期設定を行います。
アカウント作成からワークスペースの準備
- 公式サイトにアクセスし「新規登録」を選択します。メールアドレスとパスワードを入力してアカウントを作成してください。
- ログイン後、右上にある「+ 新規プロジェクト」ボタンからプロジェクト名・概要を入力し、ワークスペースを作成します。
- 作業環境として「デスクトップ」「VRヘッドセット」など、対応するデバイスを選択して初期設定を完了させます。
ワークスペースの選択は、後々のコンテンツ公開範囲にも影響するため、用途に合わせて慎重に決めましょう。
インターフェースの主要機能概観
STYLY XRのUIには以下のような主なツールバーがあります。
| 項目 | 説明 | ヒント |
|---|---|---|
| シーンビュー | 3Dコンテンツを配置・編集する作業エリア | 拡大縮小や回転操作はマウスホイールで可能 |
| アセットライブラリ | インポートしたモデルやテクスチャを管理できる場所 | フォルダ分けで整理しやすく |
| プロパティパネル | 選択中のオブジェクトの設定変更が可能 | 「表示」「アニメーション」などタブ切り替え可 |
3Dモデルのインポートとアセット管理のコツ
STYLY XRでは、BlenderやMayaで作成した3Dモデルを簡単に取り込み可能です。
サポートされているファイル形式一覧
注意: STYLY XR公式ドキュメントに基づく最新情報です（2024年9月時点）。変更がある場合は、公式サイトで確認してください。
| ファイル種類 | 対応フォーマット | 補足 |
|---|---|---|
| 3Dモデル | FBX, GLTF(GLB), OBJ, DAE（Collada） | 一部のツールではメッシュのトポロジー最適化が必要 |
| テクスチャ | PNG, JPG, DDS、WebP（実験的サポート） | アルファチャンネルが必要な場合はPNG推奨 |
モデルをインポートする際は、頂点数やポリゴン数の最適化を忘れずに。過剰なデータ量はパフォーマンスに悪影響を及ぼします。
アセットライブラリの使い方
- プロジェクト内にある「アセット」メニューから「インポート」を選択します。
- PCまたはクラウドストレージからファイルをドラッグ＆ドロップでアップロードしてください。
-
インポート後、モデルは「アセットライブラリ」に自動的に保存されます。
-
管理のポイント：
- モデルごとに「タグ」や「フォルダ」分けをして整理
- 同じ名前のファイルを複数作成しないように注意
- メッシュのスケールが一貫しているか確認（メートル単位推奨）
インタラクティブ要素の設定手順
ユーザーがコンテンツと対話できるよう、ボタンやトリガーイベントの追加が重要です。
ボタンやトリガーイベントの追加方法
- 「シーンビュー」で「UIエディター」を選択し、画面に表示したいボタンを作成します。
- 右クリック→「スクリプト設定」から、押されたときに実行する動作（例：モデルの回転）を指定。
- 具体的な実装方法: 「イベントタイプ」で「クリック」を選択し、「関数」欄に
rotateObject()を入力。 - イベントタイプは「クリック」「タッチ」「マウスホイール」など選択可能です。
UIデザインの基本原則として、「目的が明確なボタン配置」と「見やすいフォントサイズ・色」を意識しましょう。
ユーザー操作に応じた挙動設計
- アニメーション連携例：
- ボタンをクリックすると、3Dモデルがスライドして表示される
-
タッチでオブジェクトを回転・拡大可能に設定
-
実装ステップ（詳しく）：
- アニメーションを作成（「アニメーション」タブから）
- 「キーフレーム」で初期位置と終了位置を指定
- ボタンのイベントと連動させる
- 「トリガー」セクションに「クリック時」を追加し、対応するアニメーションを選択
- インスペクターで「トリガー」を指定する
- 「実行オブジェクト」欄にアニメーションターゲット（例:
Model_01）を入力
- 「実行オブジェクト」欄にアニメーションターゲット（例:
VR/ARコンテンツの公開準備プロセス
制作が終わったら、プレビュー確認・エラー修正を行い、目的に応じた配布方法を選択します。
プレビュー確認とエラー修正
- 「プロジェクト」画面で「プレビュー」ボタンをクリックし、デスクトップやVRヘッドセットでの動作テストを行います。
-
エラーが発生した場合は、「コンソール」タブでログを見ながら原因特定・修正を行いましょう。
-
よくあるエラーの対処法：
- モデルがシーン外に配置されている → 位置を再調整
- イベントが反応しない → タグ名やスクリプトの設定確認
- テクスチャが表示されない → ファイル形式が対応していない可能性あり（例: DDSは一部プラットフォームで非対応）
パブリッシングオプションの選択
STYLY XRでは、以下のような配布方法が可能です。
| 配布先 | 特徴 | おすすめ用途 | 注意事項 |
|---|---|---|---|
| WebXR対応 | ウェブブラウザで直接視聴可能 | デモや展示用 | 動作環境の互換性を確認推奨（例: Chrome 105以上） |
| アプリ内配布 | スマホアプリにインストール可能 | 商業利用・販売向け | Apple App Storeなどに提出する際、ARKit/ARCore対応が必要 |
| URL共有 | 指定したURLを公開 | SNS・ブログでの共有 | 認証なしの閲覧可（商業利用には注意） |
公開前の最終確認として、対応するプラットフォームでの動作テストを行ってください。
STYLY XRで最初のプロジェクトを作成する準備は整いました
本記事では、STYLY XRにおけるアカウント作成からコンテンツ公開までの一連の手順をステップバイステップで解説しました。読者の方にも、3Dモデルの取り込み・インタラクティブ要素の実装など、初心者でも理解しやすい内容となっております。
記事内で紹介したツールを活用して、STYLY XRで最初のプロジェクトを作成してみましょう！