Contents
1. インストールとセットアップ
ShapesXR は Meta Quest 向けアプリと Windows / macOS 用デスクトップ版の二つが公式に提供されています。
まずは自分が使用するプラットフォームに合わせて 最新版を取得し、公式が提示している最低スペックを満たすか確認 しましょう。
1.1 Meta Quest（スタンドアロン）
Meta Quest ストアからインストールできます。2024 年 3 月時点の 公式要件は以下の通り です。
| 項目 | 必要条件 |
|---|---|
| OS バージョン | Quest OS 33.0 以上（最新ビルド推奨） |
| 空きストレージ | 2 GB 以上（大容量アセットを使用する場合はさらに余裕が必要） |
| ネットワーク | 初回起動時にライセンス認証のため Wi‑Fi 接続必須 |
ポイント：OS が古いとインストーラが自動でアップデートを促します。ストレージ不足の場合は不要アプリやキャッシュを削除してから再試行してください。
1.2 Windows / macOS デスクトップ版
公式サイト（shapesxr.com/download）の「Download」ページから対応 OS のインストーラを取得します。公式が示す 推奨ハードウェア は次のとおりです。
| 項目 | 推奨スペック |
|---|---|
| OS | Windows 10 (64‑bit) 以降、または macOS 12 Monterey 以降 |
| CPU | Intel Core i5‑8250U 相当 以上（AMD Ryzen 5 2500U でも可） |
| GPU | DirectX 12 対応、VRAM 2 GB 以上（NVIDIA GTX 1060 / AMD Radeon RX 560 以上） |
| メモリ | 8 GB 以上 |
| ストレージ | アプリ本体＋アセット用に最低 5 GB の空き容量推奨 |
注意：Intel i5 系列でも第 7 世代以降であれば問題ありません。Apple Silicon（M1、M2）も公式にサポートされていますが、GPU ドライバーは macOS のアップデートと合わせて最新版を使用してください。
1.3 初回起動時のセットアップ
インストールが完了したらアプリを起動し、「初回チュートリアル」 を有効化します。手順は以下の通りです。
- 起動画面で 「Tutorial」 ボタンを選択
- ハンドトラッキングまたはコントローラー設定画面が表示されるので、使用デバイスに合わせて 「ハンド」 or 「コントローラー」 を選ぶ
- 案内通りに空間上で簡単なオブジェクトを作成し、チュートリアル完了
この段階で環境が正しく認識されていれば、すぐに本格的なプロトタイピングへ移行できます。
2. メイン UI とツールパネルの基本操作
ShapesXR の作業画面は 左側ツールバー・中央シーンビュー・右側プロパティパネル の三分割レイアウトです。各領域の役割と、初心者が最も頻繁に使う機能を解説します。
2.1 ツールバー（左）
ツールバーは ブラシ、プリミティブ、モデルライブラリ、インポート/エクスポート のアイコンが並んでいます。
ここからオブジェクトの作成や外部データの取り込みを行うので、まずは各アイコンの意味を把握しておきましょう。
2.2 シーンビュー（中央）
3D 空間全体を俯瞰できる領域です。VR デバイスではユーザー視点そのものがシーンビューに相当し、ハンドジェスチャやコントローラー操作で直接オブジェクトを配置・編集 できます。
2.3 プロパティパネル（右）
選択したオブジェクトの 位置、回転、スケール やマテリアル情報が一覧表示されます。数値入力やスライダーで微調整できるほか、インタラクション設定やアニメーションの追加 もここから行います。
3. オブジェクト作成・配置・変形の実践手順
ShapesXR の基本的なワークフローは 「作成 → 選択 → トランスフォーム」 の三段階です。以下に具体的な操作例を示します。
3.1 プリミティブの生成
- ツールバーから 立方体アイコン をクリック（または VR では左手で指差す）
- シーン内の好きな位置でトリガーを軽く引くと、デフォルトサイズ 1 m × 1 m × 1 m のキューブが生成されます
3.2 移動・回転・スケール（トランスフォーム）
| モード | 操作方法（Quest コントローラー例） |
|---|---|
| 移動 | 左スティックを左右上下に倒すとオブジェクトが水平・垂直方向に平行移動 |
| 回転 | 「Y」ボタンを長押し → スティックで回転軸を選択、回転量はスティックの傾きで調整 |
| スケール | 「A」ボタンでスケールモードに切替え、スティックを前後に倒すと拡大・縮小 |
数値入力が必要な場合はプロパティパネルの Scale スライダーやテキストフィールドに直接入力してください。
3.3 グループ化と階層管理
複数オブジェクトを同時に操作したいときは、選択状態で「G」ボタン（または UI の「Group」アイコン）を押すと 親子関係が自動付与 されます。グループ化されたオブジェクトはまとめて移動・回転できるので、大規模なレイアウト作業が楽になります。
4. アセットインポートと外部ツール連携
ShapesXR は標準的な 3D ファイル形式だけでなく、デザインツールとの 公式プラグイン を通じたシームレスな連携もサポートしています。ここではインポート手順とプラグインの入手方法を詳しく紹介します。
4.1 .glb / .obj の取り込み
- 右上の 「Import」ボタン（フォルダーアイコン）をクリック
- ファイル選択ダイアログで対象の .glb または .obj を指定し、「開く」 を押す
- インポート完了後、シーン中央に自動配置されます。デフォルトスケールはメートル単位なので、実寸とずれる場合はプロパティパネルの Scale 値を 0.01〜10 の範囲で調整してください
ポイント：.glb はテクスチャ・マテリアル情報が埋め込まれているため、表示崩れが少なく最も推奨されます。
4.2 Figma プラグイン（公式）
Meta の公式サイトに「Figma → ShapesXR Connector」というプラグインが公開されています。以下の手順で利用できます。
- ShapesXR アプリ内 のメニューから 「Plugins」 → 「Figma Import」 を選択
- Figma ファイルの共有リンク（
https://www.figma.com/file/...）を入力し、「Import」 ボタンをクリック - 各フレームが自動的に プリミティブ化 され、元のレイアウトと同じ位置・サイズでシーンに配置されます
注意：インポートできる要素はベクターレイヤー、テキスト、画像です。高度なエフェクト（ブラーやグラデーション）は変換時に平面化されます。
4.3 Unity エクスポータ（公式）
Unity 用の 「ShapesXR Exporter」 パッケージは GitHub（github.com/shapesxr/unity-exporter）からダウンロード可能です。手順は次の通り。
- Unity Package Manager でパッケージをインポート
- エクスポートしたい GameObject を選択し、右クリックメニューから 「Export to ShapesXR」 を実行
- 出力された .glb ファイル が自動的に ShapesXR に送信され、元の階層構造とマテリアルが保持されたままシーンに配置されます
このプラグインは プロトタイピング段階で Unity の物理やスクリプトロジックをそのまま持ち込むことはできません が、ビジュアル資産の高速転送には最適です。
5. 簡易アニメーションとインタラクションの追加
プロトタイプに「動き」や「反応」を加えるだけで、ユーザー体験が格段に向上します。ShapesXR が提供する ノードベースのインタラクションエディタ を使えば、数クリックで基本的なアクションを設定できます。
5.1 トリガーとアクションの組み合わせ
- シーン内で対象オブジェクトを選択し、右側プロパティパネルの 「Interaction」 タブを開く
- 「Trigger」 ドロップダウンから OnSelect（クリック） または OnProximity（近接） を選択
- 「Action」 セクションで「Rotate → Y軸 360°」や「Change Color → Red」などを追加し、Duration（実行時間）を 0.5 秒に設定
5.2 アニメーションノードの作成
インタラクションエディタは ノードグラフ 形式で表示されます。以下の流れでシンプルなアニメーションが完成します。
- Trigger Node → Delay (Optional) → Animation Node → Finish
- 各ノードをドラッグ＆ドロップで接続し、パラメータは右側プロパティで微調整
ポイント：複数トリガーを同一オブジェクトに設定すると、優先順位は「OnSelect > OnProximity」の順になります。意図しない重複動作を防ぐために 「Exclusive」 オプションを有効化してください。
6. シーンのエクスポート・共有、共同編集、学習リソース
完成したプロトタイプはさまざまな形で関係者と共有できます。また、リアルタイムで複数ユーザーが同時に編集できる Collaborate 機能も備えています。
6.1 エクスポート方法（VR・MR・Web）
| 出力先 | 手順概要 |
|---|---|
| Meta Quest | メインメニュー → Publish → 「Export to Quest」チェック、解像度/フレームレートを設定し Generate |
| PC (MR) | 同上で「Export to PC」選択。Windows 版は .exe、macOS 版は .app が生成されます |
| Web（URL） | 「Publish」 → Web タブ → Generate URL をクリック。自動的にクラウドへアップロードされ、共有リンクが取得できます |
注意：Web エクスポートは内部レンダラーを WebGL に変換するため、GPU が WebGL 2.0 対応 の環境で最適に動作します。
6.2 リアルタイム共同編集（Collaborate）
- メインメニューの 「Collaborate」 ボタンをクリック
- セッション名と任意のパスコードを入力し、「Create Session」 を実行
-
招待リンクまたはコードをチームメンバーに送信。相手が参加するとオブジェクトの追加・移動がリアルタイムで同期されます
-
Undo/Redo の共有：全員が同一履歴スタックを参照できるため、誤操作も瞬時に取り消し可能です
- 権限設定（Pro プラン限定）：オブジェクトロックや閲覧のみモードが利用できます
6.3 学習リソースの活用方法
| リソース | 内容・特徴 |
|---|---|
| Learn ShapesXR (公式チュートリアル) | ステップバイステップ動画とインタラクティブ課題。各章にクイズがあり、学習進捗を可視化できます |
| YouTube – 「ShapesXR 2.0 Tutorial」プレイリスト | 基本操作から高度なアニメーションまで全10本編。タイムスタンプで欲しい箇所へ直接ジャンプ可能 |
| 公式フォーラム & Discord | 開発者や他ユーザーと質問・情報交換ができ、最新アップデート情報もリアルタイムで取得できます |
活用例：最初のチュートリアル動画を見終わったら、同ページに掲載されている ミニ課題（例：クリックで色が変わるキューブ作成） を実践。課題完了後はフォーラムにスクリーンショットを投稿するとフィードバックが得られます。
7. 全体まとめ（要点）
| 項目 | キーポイント |
|---|---|
| インストール | Quest OS 33+、PC は Windows 10/macOS 12 推奨。ストレージは最低 2 GB (Quest) / 5 GB (PC)。 |
| UI 基礎 | ツールバー→プリミティブ/ブラシ、プロパティで数値調整、右手ジェスチャで直感的操作が可能。 |
| オブジェクト変形 | 移動・回転・スケールは 4 ボタン（Quest）または UI メニューで即完結。グループ化で階層管理も簡単。 |
| アセット活用 | .glb/.obj は数クリックでインポート、スケール調整が唯一の注意点。Figma と Unity の公式プラグインでデザイン資産をシームレスに転送。 |
| アニメーション & インタラクション | Trigger（OnSelect/OnProximity）＋ Action（Rotate/Color Change）だけで基本的な動作を即実装。ノードエディタで拡張可能。 |
| エクスポート & 共有 | 「Publish」→VR / MR / Web のいずれかにワンクリック出力。Collaborate 機能でリアルタイム共同編集ができ、プロジェクトのスピードが向上。 |
| 学習リソース | 公式 Learn 系列と YouTube プレイリストを順番に視聴し、課題実装で理解度チェック。フォーラム・Discord で疑問点は随時解決。 |
以上の手順とポイントを抑えておけば、ShapesXR を用いた VR プロトタイピングがスムーズに開始できるだけでなく、チーム全体で効率的に開発サイクルを回すことが可能です。ぜひ本ガイドを実践し、自分だけのインタラクティブ空間を作り上げてみてください。