STYLYで作るVR作品：Unity/Blenderから公開まで

STYLYで始める：対象読者とこの記事で得られる成果

STYLYを使った制作で何を優先すべきかを明確にします。短時間で動くプロトタイプを作りたい人と、初回リリースの品質確保を目指す人に向けた実務寄りの内容です。この記事を読めばモデルの準備、STYLYへの取り込み、公開前の最小チェックを実行できるようになります。

この記事で得られる成果

短い説明です。以下がこの記事で得られる具体的成果です。

• Blender/UnityからSTYLYへアセットを移行する最短ワークフローを理解する。
• STYLY Studioで基本的なシーン構築とインタラクションを組む手順が分かる。
• 公開前の最小チェックリストで初回リリースの品質担保ができる。

クイックスタート（5分で動かす）

まずは最小限の準備でSTYLY上にモデルを表示する一連の流れを示します。ここでは「手元にあるGLBファイルをSTYLYに置いてプレビューする」ことを目標にします。試作段階での確認に適した短時間手順です。

準備（アカウントとツール）

最短で試すための必要最小限を示します。ここだけ用意すれば最速で結果を得られます。

• STYLYアカウント（公式サイトで作成）。
• ブラウザ（Chrome/Edge推奨）。HTTPS接続が必須です。
• 表示確認用のGLBファイル（単一メッシュ・テクスチャ埋め込みが望ましい）。

最短手順（最速で動かす流れ）

短い説明です。この手順で最速で表示まで到達できます。

1. ブラウザでSTYLYにログインし、Studioを開く。
2. AssetsパネルにGLBをドラッグ＆ドロップで登録する。
3. シーンに配置してスケールを合わせ、Previewで表示を確認する。
4. 問題がなければ公開設定（非公開でもURL確認）で動作を確認する。

動作確認のポイント

短い説明です。初回は次の項目を優先的にチェックします。

• モデルのスケールと向きが期待どおりか。
• テクスチャが欠落していないか（GLB埋め込みで確認）。
• ブラウザ上でのFPSが著しく低くないか（目安はデバイス依存）。

制作前の設計と必要環境（STYLYの特徴と設計項目）

制作の前段階で決めるべき方針と、開発環境の整え方をまとめます。ここで設計を固めると後工程の手戻りが減ります。重要語の定義も併せて示して理解のハードルを下げます。

STYLYの概要（プラットフォーム特性）

短い説明です。STYLYはブラウザベースのStudioとUnity用プラグインでアセット取り込みが可能です。Web配信を前提にしているため、HTTPSとブラウザごとの制約を考慮する必要があります。

制作前に決める設計項目

短い説明です。プロジェクト開始前に次の項目を検討します。

• ターゲットデバイスと優先度（例：PCブラウザ優先、Quest優先、スマホ優先）。
• 入力方式とUX（テレポート/スムーズ移動、視線・コントローラ対応）。
• パフォーマンス目標とアセット予算（トライアングル数、テクスチャ合計、ドローコール）。
• ライセンスと素材管理（商用利用や再配布の可否を確認）。

推奨実機とバージョンの目安（確認方法付き）

短い説明です。バージョンは時間とデバイスで変化するため、常に公式の対応表を確認します。ここでは一般的な確認手順と目安を示します。

• 推奨ツール：Blender（2.8以降、可能なら3.x系）、UnityはLTS系列を推奨。プラグインの対応バージョンは公式のリリースノートで確認する。
• 実機検証候補：PC（Chrome/Edge）、スマホ（iOS/Androidブラウザ）、スタンドアロンVR（Meta Questシリーズ等）。
• 目安（デバイス依存）: 小物は数百〜数千トライアングル、主要オブジェクトは数千〜1万台。ドローコールはできるだけ削減する。これらは測定条件により変動するため、必ず実機プロファイルで確認する。
• プラグイン互換チェック手順：ダウンロードページのリリースノートを確認し、READMEや互換表から対象Unityバージョンを確認する。インポート後は新規プロジェクトでアップロード検証を行う。

用語解説（短く・実務的に）

短い説明です。制作で頻出する専門用語を簡潔に示します。

• PBR：物理ベースレンダリング。アルベド（色）・メタリック・ラフネス等で材質感を表現する方式。実例は金属の反射や布の拡散。
• LOD：遠景用の低解像度モデル。距離で切り替えて描画負荷を下げる。例：遠景は1/10のトライアングル数にする。
• ドローコール：描画命令数。マテリアル数やバッチングで増える。実務例は同一マテリアル化で削減する。
• ライトベイク：静的照明をテクスチャ化してランタイム負荷を下げる手法。屋内展示で多用される。
• glTF/GLB：Web向けの3Dフォーマット。GLBはテクスチャを一体化でき、配布に便利。
• WebXR：ブラウザ経由でVR/ARを扱うAPI群。ブラウザ・OS・デバイスで対応状況が異なるため、ベンダー情報で確認する。

制作ワークフロー：Blender→Unity→STYLY（モデル準備からアップロードまで）

実務で繰り返す主要工程をまとめます。モデリング段階での手戻りを減らすべく、エクスポートと検証の流れを明確にします。Unityを介する場合の注意点も示します。

Blenderでの最適化と基本設定

短い説明です。ここでの前処理が読み込み後の手戻りを削減します。

• 単位をメートルに統一し、Apply Transforms（スケール・回転の確定）を行う。
• 原点（Origin）は配置に応じて設定する（地面設置なら底面中央）。
• 不要ジオメトリの削除（内部面、重複頂点）と法線の確認。
• UVは用途に応じて整理し、ユニークテクスチャはオーバーラップを避ける。
• アニメーションはアクションを整理し、必要ならBakeしておく。

エクスポート設定（glTF/GLB推奨）と検証方法

短い説明です。glTF/GLBを基本にする理由と検証手順を示します。

• glTF/GLBを推奨。理由はPBR互換性とWebでの扱いやすさ、GLBはテクスチャ埋め込みが可能なため配布・アップロードが簡便であるため。
• 書き出し前のチェック項目：Apply Transforms、UV/法線の有無、テクスチャの色空間（アルベドはsRGB、法線はLinear）。
• FBXを使う場合はForward/Up設定とBakeを意識する。軸差に注意し、Unityでの読み込み検証を行う。
• 検証はglTFビューアやUnityで行い、スケール・マテリアル・アニメーションを必ず確認する。

Unityプラグインの導入と運用上の注意

短い説明です。プラグイン経由の利点と確認手順を示します。

• 公式のSTYLYプラグインをダウンロードし、Unityにインポートする。
• インポート後はSTYLYウィンドウでログインし、プレハブ化したオブジェクトをアップロードして動作を確認する。
• プラグイン互換性は必ずリリースノートやREADMEで確認する。互換表にない組合せは新規の小さなプロジェクトで検証を行う。
• マテリアルはPBRベースに統一し、カスタムシェーダは互換性問題の元となるため可能な限り避ける。

STYLY Studioでの組み立て、最適化、公開

Studio上での組立、インタラクション実装、公開フローと公開前チェックをまとめます。初回リリースを想定した最小チェックリストとテンプレート活用の実務的な助言を含めます。

Studioでの基本操作と操作パス（代表的なUI手順）

短い説明です。Studioの典型的な操作パスを実務的に示します。

• Assetsパネルからアセットを選び、シーンにドラッグ＆ドロップで配置する。
• オブジェクトは親子構造で整理し、必要に応じてコリジョンやスケールを調整する。
• タイムラインやトリガーは該当オブジェクトを選択し、Timeline/Triggerメニューで割り当てる。
• プレビュー機能でブラウザ上の表示を確認し、問題があればアセット側へ戻って修正する。

代表的なインタラクションとメディア埋め込みの実例

短い説明です。よく使うインタラクションの実務例を示します。

• タイムラインでのアニメ再生はオブジェクトを選んでアニメを割り当て、再生開始時間を設定する。
• トリガーはクリック・近接・視線等で「再生」「表示切替」「音声再生」「シーン遷移」を割り当てる。
• サウンドはMP3/AAC等を利用し、長尺BGMはストリーミング設定にしてメモリを節約する。ブラウザの自動再生制限を考慮し、ユーザー操作トリガー発火を設計に組み込む。
• 動画はMP4（H.264）が広く互換する。外部ホスティング時はCORSとHTTPSを確認する。

最適化の実務ポイントと公開前チェックリスト

短い説明です。実務的に優先度の高い最適化と、初回リリース向け最小チェックリストを示します。

• 最適化の要点：LOD設計、テクスチャのサイズ調整とアトラス化、ドローコール削減（メッシュ結合・Static Batching・GPU Instancing）、ライトベイク活用。
• プロファイリング：Unity ProfilerやブラウザのPerformanceタブ、実機のパフォーマンスHUDでボトルネックを特定する。
• 初回リリース向け最小チェックリスト（短時間で確認する項目）：
• 主要デバイスで主要操作が成立するか。
• スケール・向き・テクスチャが正しく表示されるか。
• 音声/動画の再生がユーザー操作で行える構成か（自動再生制約に配慮）。
• タイトル・説明・タグ・サムネイル・クレジットが整備されているか。
• 使用素材のライセンス確認が完了しているか。
• プロジェクトのバックアップがあるか。

テンプレートと素材の入手先（実務的な案内）

短い説明です。公式ソースを優先し、サードパーティ情報は参照リスクに注意します。

• 公式ドキュメントとスターターガイドを優先する（https://styly.cc/ja/manual/starter-manual/）。
• Galleryや公式テンプレートをベースに改変すると工数を削減できる。非公式の解説は更新やリンク切れのリスクがあるため、最新は公式を参照する。

トラブルシューティング（個別事象）

具体的な個別事象ごとの原因と対処を短くまとめます。よくある問題を優先的に取り上げ、診断手順と実務的な修正方法を示します。

表示されない・スケールが崩れる場合

短い説明です。原因の特定と対処を順に示します。

• 原因例：Apply Transforms未実行、原点がずれている、法線反転、スケール値が極端。
• 対処例：BlenderでApply Transformsを実行し、原点を再設定する。法線は反転している面を修正する。GLBで再エクスポートして検証する。

テクスチャ・動画・音声が再生されない場合

短い説明です。外部要因（ブラウザ/ホスティング）を含めて原因を示します。

• 原因例：テクスチャパスの大文字小文字、GLB未埋め込み、外部ホスティングのCORS設定不備、ブラウザの自動再生制限。
• 対処例：可能ならGLBにテクスチャを埋め込み、外部配信時はサーバーのCORSを許可する。音声はユーザー操作トリガーで再生する設計にする。動画はMP4(H.264)が互換性高め。

パフォーマンス低下・描画負荷が高い場合

短い説明です。原因の切り分けと優先対策を示します。

• 診断方法：ブラウザのPerformanceタブでFPSやレンダリング時間を計測する。重い箇所はテクスチャやドローコール、シェーダであることが多い。
• 優先対策：テクスチャ解像度を下げる、マテリアルを統合してドローコールを減らす、LODを導入する、ライトをベイクする。
• 目安：ドローコールを極力低く保つことが有効だが、具体的な閾値はデバイスとシーンによって変化するため、実機での確認を優先する。

STYLYでの制作は、設計→アセット準備→Studioでの組立→最適化→公開という流れを繰り返すことで慣れることが重要です。主要な注意点を短くまとめます。

• フォーマットはglTF/GLBを基本にし、PBRマテリアルとライトベイクを活用する。
• ターゲットデバイスに応じたポリゴン・テクスチャ・ドローコールの目安を決め、実機でプロファイルする。
• プラグインやブラウザの互換性は公式のリリースノートで確認し、小さな検証プロジェクトで動作確認を行う。
• 公開前はライセンス・CORS・自動再生制約を必ず確認する。

参考リンク（信頼性重視）:

• STYLY公式: https://styly.cc/
• STYLYスターターガイド: https://styly.cc/ja/manual/starter-manual/

外部の解説記事は情報更新の頻度が高く、内容が変わる可能性があるため、最終判断は公式ドキュメントで行うことを推奨します。