Contents
クイックスタート：STYLYで最短公開手順（初心者向け）
この短縮手順は最短で動くサンプルを公開するための手順です。
対象は初心者（STYLY未経験）で、所要時間は30分〜2時間を想定します。
- STYLYアカウントを作成し、Studioにログインする。
- 単純なglTF/GLB（例：箱1個、テクスチャ1枚）を用意する。
- Studioで新規シーンを作成し、アセットをアップロードする。
- シーン上に配置してスケール（メートル基準）を調整する。
- AutoRotateなどのModifierを追加して動作を確認する。
- プレビューで動作確認後、ギャラリーに公開して共有URLを取得する。
所要時間の目安は素材の準備状況に依存します。中級者・上級者はUnity連携で高度な挙動を追加できます。
STYLYとはと作れるAR体験の種類
STYLYはクラウド型のXR制作・配信プラットフォームです。
ブラウザ版のSTYLY Studio、STYLY Mobile、Unity連携で配信できます。
用途はマーケティング、展示、eコマース、プロトタイピングなど多岐にわたります。
- WebブラウザでのWebAR配信が主な配信経路です。
- STYLY Mobileアプリで実機表示やAR検証が可能です。
- Unity経由でPrefabや高度なスクリプトを持ち込めます。
事前準備（STYLY制作の下準備）
事前に環境と権限を揃えることで制作と公開がスムーズになります。
ここでは必須のアカウント、対応端末、最低限のソフトを整理します。
アカウント作成と権限・料金確認
チーム運用時はアセット管理と権限設計が重要です。
- STYLYアカウントを作成し、StudioとMobileにログインできることを確認する。
- チームの場合はフォルダ構成と共有ルールを定める。
- 料金プランや商用利用の条件はSTYLYの利用規約で確認する。
対応デバイスの確認
モダンなiOS/Androidスマホが主対象です。
- 主にiOS（Safari）とAndroid（Chrome）での確認を想定する。
- 実機は最低でもiOSとAndroidを各1台ずつ用意する。
- OSやブラウザのバージョン差で挙動が変わる点を想定する。
必要ソフト（最小限）
利用するワークフローに合わせてソフトを用意します。
- Unity（Unity連携を行う場合）。推奨バージョンは公式ドキュメントで確認する。
- STYLY Unity Plugin（Unityからアップロードする際に使用）。
- 3D編集ツール（例：Blender、Maya）。
- 画像/音声編集ツール（例：Photoshop、GIMP、Audacity）。
- テスト用のモバイル端末（iOS/Android）。
素材準備と最適化（STYLY向け）
素材は軽量で見栄えがよく再利用可能であることが重要です。
ここでは3Dモデル、テクスチャ、音声それぞれに対する実務的な目安を示します。
最適化は必ず実機でのロード時間と表示を確認して進めます。
3Dモデル最適化
Web向けとUnity向けで出力方針が変わります。
- 推奨フォーマット：WebアップロードはglTF/GLBを基本とする。UnityワークフローではFBXが扱いやすい。
- マテリアル：PBR（metallic-roughness）を基本にする。カスタムシェーダーは動作しないことがあるため注意する。
- ポリゴン目安：小物1k〜5k、中規模5k〜20k、キャラクター10k〜30k（LOD必須）。
- テクスチャ目安：512px〜1024pxが現実的。ヒーロー用で2048pxまで検討する。
- 最適化手順（実務手順例）：
- 単位をメートルに統一し、Transformを適用する。
- 不要なボーンや未使用の頂点を削除する。
- ノーマルマップをベイクしてディテールを維持する。
- LODを生成して遠距離で軽いメッシュに切り替える。
- テクスチャをアトラス化してマテリアル数を削減する。
- glTF/GLBでエクスポートし、必要に応じて圧縮を検討する。
テクスチャと音声最適化
画質と容量のバランスが肝心です。
- 画像：写真はJPEG、透過はPNGを基本とする。sRGBでの管理を推奨する。
- テクスチャ圧縮：KTX2（Basis）などを検討する。ただし配信側の対応状況は公式で確認する。
- 音声：MP3/AACを使用。ナレーションは44.1kHz、効果音はモノラルで容量を節約する。
- 自動再生制限：多くのブラウザで自動再生が制限されるため、ユーザー操作で再生する設計を推奨する。
用語集：PBR・LOD・glTFなどの簡易定義
制作時に頻出する用語を簡潔にまとめます。
- PBR：物理ベースレンダリング。金属性・粗さなどで現実的な見た目を表現する手法。
- LOD：Level of Detail。距離に応じてメッシュの詳細度を切り替える手法。
- glTF/GLB：Web向けの3Dフォーマット。GLBはバイナリでテクスチャ埋め込みが可能。
- FBX：主にDCC/ゲームエンジンで使われるフォーマット。アニメーション保持に便利。
- Draco：ジオメトリ圧縮ライブラリ。対応可否は配信プラットフォームで確認する。
- KTX2/Basis：テクスチャ圧縮フォーマット。転送量とデコード性能を改善する目的で使う。
制作ワークフロー：STYLY StudioとUnity連携の要点
Studioはノーコードで素早くプロトタイプを作れます。Unity連携は高度なインタラクション実装に適しています。
まずは小さなPrefabで流れを確認し、問題がなければ本番アセットを投入することを勧めます。
Studioの基本ワークフロー
Studioは直感的にシーン構築できる点が利点です。
- STYLY Studioにログインして新規シーンを作成する。
- アセットをアップロードし、シーンに配置する。
- スケールと位置をメートル基準で調整する。
- アンカー（平面や位置固定）を設定する。
- プレビューで挙動を確認し、問題なければ公開設定を行う。
操作時の留意点は、実世界スケールの維持と複数端末での見え方確認です。
Modifiersの活用例
Modifiersはノーコードで動作やイベントを追加できます。
- 典型例：AutoRotate（自動回転）、TapでUI表示、Timeline系で順次再生。
- 追加手順（概略）：対象オブジェクトを選択 → Modifiersメニューから効果を追加 → パラメータを調整 → プレビューで確認。
- UXの観点：推奨表示距離は0.5m〜3m。ユーザー操作を明示する簡易なヒントを用意する。
Unity連携・Prefab作成とアップロード注意点
Unity経由ではスクリプトや複雑なAnimatorが利用できます。
- プラグイン導入手順（概略）：
- Unityで新規プロジェクトを作成する（3Dテンプレート）。
- STYLY Unity Pluginを入手し、プロジェクトにインポートする。
- プラグインのウィンドウでSTYLYアカウントに接続する。
- Prefabを作成し、マテリアル・テクスチャ・アニメーションを含める。
- Upload機能でPrefabをSTYLYに送信し、アセットとして利用する。
- 注意点：カスタムシェーダーやエディタ専用スクリプトは動作しない場合があるため、Standard/PBRに変換することが実務的な目安。
- スケールやルートTransform、外部参照の有無はアップロード前に確認する。
テスト・公開・QAチェックリストと運用上の注意（STYLY向け）
公開前のテストとQAはユーザー体験を保証するために不可欠です。
ここでは実機での再現手順、数値目標、ライセンス確認のポイントを提示します。
モバイル実機テスト手順
実機での手順を明確にすると再現性が高まります。
- テスト環境を統一する（デバイスモデル、OS、ブラウザを記録）。
- Coldロードテスト：キャッシュをクリアしてURLを開き、初回表示時間を計測する。
- 操作テスト：タップ、スワイプ、アニメーション、音声の動作を順に確認する。
- 権限・プロンプトの挙動を確認する（カメラ、位置情報など）。
- クロスプラットフォーム比較を行い、表示差を記録する。
QAチェックリスト（数値目標と合格基準）
測定可能な基準を設けることで合否判定が容易になります。以下は実務上の目安です。
- ネットワーク転送量（シーン合計）：推奨 10〜20MB、許容 30MB以内。
- 個別アセット：推奨 1〜5MB。
- 初期表示時間（First Render）：目標 5秒以下（4G環境の目安）、許容 10秒以内。
- 操作可能までの時間（Time to Interactive）：目標 2秒以内。
- メモリフットプリント（実行時RAM）：推奨 <150MB、許容 <300MB（端末に依る）。
- フレームレート：目標 30fps以上、可能なら60fps。
- ドロ―コール数：目標 <100 を目指す。
テストケース例（再現手順と合格基準）：
- ケースA（Cold load 4G）
- バックグラウンドアプリを閉じる。
-
4G接続でURLを起動し、時計で初回表示を計測する。
合格基準：初回表示 ≤10秒、対話開始 ≤2秒。 -
ケースB（メモリストレス）
-
複数アプリを起動した状態でURLを開く。
合格基準：クラッシュなし、レンダリングは維持される。 -
ケースC（ブラウザ自動再生）
- ページ読み込み後に自動で音声が再生されないことを確認する。
- タップで音声が再生されることを確認する。
合格基準：タップで再生が可能。
測定ツールの例：Chrome DevTools（Android）、Safari Web Inspector（iOS）、Lighthouseによるパフォーマンス計測。
まとめ（要点の箇条書き）
STYLYでの公開は素材最適化と実機テストが鍵です。Studioは短時間で試作でき、Unity連携で高度な挙動を実装できます。公開前はロード時間、メモリ、操作応答の数値目標に合わせて最適化し、素材ライセンスとSTYLY利用規約の整合性を確認します。
- 最短公開手順は「アカウント作成→glTF準備→Studioで配置→Modifier適用→プレビュー→公開」。
- 素材はglTF/GLBを基本、UnityワークフローではFBXが扱いやすい。PBRを推奨。
- 目安：シーン合計 10〜20MB、初期表示 ≤5秒（目標）、メモリ <150MB（推奨）。
- Modifiersで簡易インタラクションを作り、複雑な挙動はUnityでPrefab化する。
- 素材の商用利用可否はライセンス種別・帰属表示・再配布の可否を確認する。公式リソースで最新情報を参照する。
この記事の手順を元に、まずは小さなサンプルを公開して挙動を確認し、段階的に工程を拡大してください。