Contents
STYLYアカウント作成と無料プランの活用
STYLYのXR空間レイヤー機能を始めるには、まずアカウント登録が必須です。30日間無料で利用できるプランは、初心者向けに最適な導入手段として注目されています。以下では、具体的な登録手順と初期設定時のポイントを解説します。
30日間無料プランの登録手順
STYLY公式サイト（https://styly.cc/）へアクセスし、「新規登録」を選択します。メールアドレスとパスワードを入力した後、個人情報の入力画面に移動します。無料プランは制限付きですが、基本機能の体験が可能です。
登録時の注意点
- 利用可能な機能: 3Dモデルインポートや空間レイヤー設定、公開までのワークフローが一部制限される可能性があります。
- 解約方法: 無料期間終了後は自動で有料プランに移行されますが、アカウントの管理画面からキャンセル可能です。
初期設定で活用できる機能概要
無料プランでは、シーン制作の基本的なフローを体験できます。以下が代表的な利用可能な機能です。
- 3Dモデルインポート: 複数ファイル形式に対応（※後述のサポート形式参照）
- 空間レイヤー設定: シーン構造の可視化ツールでレイヤー管理可能
- インタラクティブ要素: 基本的なクリックイベント設定が利用可能
無料プランでは、プロジェクト規模に応じた制限がありますが、学習や小規模な実践には十分です。
空間レイヤー機能の基本設定方法
空間レイヤーは、複雑なVR/ARシーンを構築する際の重要なツールです。直感的なUI操作でレイヤーを管理できるため、以下にステップバイステップの手順を解説します。
レイヤー作成時のパラメータ選択ガイド
空間レイヤーを作成する際には、「シーン構造の可視化」を意識して設定することが重要です。以下の3つのパラメータが主な調整ポイントです。
| 項目 | 設定方法 | 補足説明 |
|---|---|---|
| レイヤー名 | 右クリック→「新規レイヤー」 | シーン構造を視覚的に整理するための名称 |
| 表示順序 | レイヤーパネルでドラッグ＆ドロップ | 前景・背景の階層管理に役立つ |
| 透明度設定 | レイヤーを選択後、パラメータ調整 | 他の要素との重なりを確認しやすくする |
blockquote: レイヤー名は「背景」「オブジェクト群」といった意味のある名称にすると、プロジェクトの維持が容易です。
シーン構造の可視化ツール活用法
STYLYでは、「階層表示パネル」というツールで空間レイヤーの構造を視覚的に確認できます。このツールは、以下の3つのシーン制作フェーズで特に役立ちます。
- 設計段階: レイヤー間の関係性を把握する
- 作業中: 編集対象を迅速に特定できる
- テスト時: 障害物やオーバーラップ（複数のオブジェクトが同じ位置にある状態）を確認しやすい
このツールを活用することで、複雑なシーンもスムーズに構築できます。
3Dモデルのインポートと配置テクニック
空間レイヤー内での3Dモデル配置は、プロジェクトの完成度を左右します。以下では、サポートファイル形式や配置時の注意点を解説します。
サポート形式確認とファイル準備
STYLYでは、以下のファイル形式がインポート可能です。
- FBX: 3Dモデルデータの標準的なファイル形式で、ゲーム開発やアニメーションに広く利用されます。
- OBJ: 軽量でシンプルなフォーマットで、ポリゴンメッシュを記述します。
- GLTF/GLB: WebVR対応の軽量3D形式で、JSONとバイナリデータの2種類があります（GLTFはテキスト形式、GLBは圧縮済み）。
blockquote: インポートするモデルは「メッシュデータの整合性」（ポリゴンや頂点が正しく結合されているか）を確認し、不要なテクスチャーやアニメーションを事前に削除しておくと良いです。
トラブルシューティング例
| エラー内容 | 原因 | 解決策 |
|---|---|---|
| モデルが表示されない | 不正なファイル形式 | サポート形式を再確認し、変換する |
| テクスチャーロード失敗 | 高解像度テクスチャーの使用 | 画像サイズを2048×2048以内に縮小 |
空間内でのポジショニングベストプラクティス
モデル配置では、以下の3つのポイントを意識するといいです。
- カメラ視点からのバランス: 視覚的な安定感を重視し、中央付近に配置することを推奨
- スケール調整: モデルの大きさが「現実空間」に比例しているか確認
- 回転角度チェック: 各軸（X/Y/Z）での回転角度が直感的な位置になるように設定
これらの工夫を加えることで、自然な空間構成が可能になります。
インタラクティブ要素の追加とテスト
ユーザー体験を高めるには、クリックやホバーなどのインタラクティブ要素が必要です。以下では、基本的な設定方法とテスト時の確認点を解説します。
クリックイベントの設定方法
STYLYでは、「イベントエディタ」というツールでクリック動作を設定できます。手順は以下の通りです。
- 対象オブジェクトを選択
- 「イベントエディタ」を開く（右上アイコン）
- 「クリック」→「遷移先シーン」または「メッセージ表示」を選択
実践例: ボタンの作成
- モデル選択: シーン内に四角形オブジェクトを配置
- イベント設定: クリック時にメッセージ「おめでとう！」を表示させる設定
- 動作確認: プレビュー画面でクリックして反応をテスト
このように、単純な要素でもインタラクティブ性を高めることが可能です。
動作確認時のトラブルシューティング
以下はよくある問題とその対処法です。
| 症状 | 原因 | 解決策 |
|---|---|---|
| クリック反応なし | イベントが設定されていない | 「イベントエディタ」で確認し、追加する |
| メッセージ表示エラー | 文字数が上限を超える | 20文字以内に短縮させる |
これらのポイントを意識することで、テスト段階でのエラーコストを大幅に削減できます。
シーン公開までのワークフローとケーススタディ
完成したシーンを公開するには、いくつかのチェック項目があります。以下では、公開前の準備プロセスと実際の活用事例を紹介します。
パブリッシュ前のチェックリスト
以下の5つのステップで最終確認を行います。
- 動作テスト: VR/AR環境で全要素が正しく動くか確認（特にインタラクティブ部分）
- ファイル圧縮: 3Dモデルやテクスチャーを最適化し、サイズを抑える
- リンク設定: 外部URLや動画埋め込みの動作検証
- セキュリティ確認: プライベート領域とパブリック領域の区別が明確か確認
- メタデータ入力: タイトル・説明文を準備し、検索性を高める
blockquote: 公開前は「プレビュー」モードで最終チェックを行い、不具合がないか再確認してください。
ポータルサイト活用事例
2024年の実施プロジェクトでは、STYLYの空間レイヤー機能が市民参加型XRコンテンツ開発に採用されました。具体的には、都市モデルを「都市テンプレート」として登録し、誰でも編集可能な空間を作り出しました（参考: https://example.com/case-study-2024）。
- 利用目的: 地域活性化イベントのVR展示
- 成果: 公開後3週間で1500人以上のユーザーが訪問
このケースでは、STYLYの階層管理機能とインタラクティブ設定がプロジェクトの成功に大きく貢献しました。