Contents
STYLYとは？プラットフォームの特徴と対応デバイス
STYLY は Web ブラウザ上で VR・AR コンテンツを直感的に制作できるクラウド型 3D エディタです。インストール不要で PC、スマートフォン、VR ヘッドセットなど多様なデバイスから同一プロジェクトへアクセスできる点が大きな特徴です。本節ではマルチデバイス対応の背景と、公式が示す主要スペックを概観します。
なぜマルチデバイスが重要なのか
マルチデバイス対応は「閲覧障壁」の低減につながります。Web ベースであるため OS やハードウェアに依存せず、同一 URL だけで PC のブラウザ・スマホの AR カメラ・VR ヘッドセットすべてから作品を体験できます。このシームレスさが SNS シェアや教育現場での活用を促進します。
対応デバイスと閲覧方式（公式情報）
以下は STYLY が公式にサポートしている代表的なデバイスです。表の左側がデバイス、右側が推奨される閲覧手段となります。
| デバイス | 推奨閲覧方式 |
|---|---|
| PC（Chrome／Edge） | ブラウザ上でリアルタイムプレビュー |
| スマートフォン（iOS / Android） | WebAR リンク経由で AR 表示 |
| Oculus Quest / Meta Quest 2 | アプリ不要のブラウザモード、または STYLY アプリからアクセス |
公式サイトでも「スマートフォン・PC・様々な VR デバイスで体験できる」と明記されています【2】。
まとめ
STYLY は Web 技術を活用したクロスプラットフォーム環境を提供し、初心者でも手軽に制作から公開まで完結できます。マルチデバイス対応は作品の拡散と利用者体験の向上に直結します。
STYLY アカウント作成と無料トライアルの始め方（2026 年版）
本節では 2026 年時点で提供されている UI に合わせたアカウント登録手順を詳しく解説します。無料プランでもほぼすべての機能が利用可能なので、まずはハンズオンで操作感を確かめましょう。
手順全体の流れ
以下に示す 5 ステップでアカウント作成からダッシュボードへの遷移まで完了します。各ステップのポイントと注意点も併記しています。
- 公式トップページへアクセス – URL は https://styly.cc/ja/manual/starter-manual/（スタートガイド）です【3】。
- 「無料で始める」ボタンをクリック – ヘッダー右上に配置された緑系のボタンです。
- メールアドレスとパスワードを入力し、認証メールを受信 – 受信したリンクをクリックすると認証が完了します。
- 無料トライアルが自動で有効化されていることを確認 – 「Free Trial」スイッチがオンになっていれば OKです。
- ダッシュボードへ遷移し「新規プロジェクト作成」をクリック – 以降は STYLY Studio が起動します。
注意すべきポイント
- 個人メールでも制限なく登録可能です（2026 年時点）。企業ドメインでの特別な認証は不要です。
- 認証メールが届かない場合は迷惑メールフォルダを確認し、再送ボタンで再試行してください。
STYLY Studio（Web エディタ）の基本操作ガイド
STYLY Studio はブラウザ上で動作する 3D シーンエディタです。本節ではシーンの新規作成から保存・バージョン管理までの基本フローを解説します。
シーン作成と保存の流れ
まずは空白キャンバスを生成し、レイヤーやオブジェクトを配置した後に手動保存と自動バックアップの仕組みについて説明します。
- 「New Scene」ボタンで空白キャンバスを生成 – デフォルトでフロアとスカイが設定されます。
- 左側ツールバーから基本レイヤー（Floor、Skybox など）を選択し配置 – 必要に応じてサイズや位置を調整します。
- 右上の「Save」アイコン（フロッピーディスク形状）をクリック – 手動保存は必須ですが、30 秒ごとに自動バックアップが走ります【4】。
- プロジェクト名・説明文を入力し「保存」を確定 – バージョン名を付けることで履歴管理が容易になります。
オブジェクト配置とレイヤー概念の概要
オブジェクトはドラッグ＆ドロップでキャンバスに追加できます。右側パネルに表示されるレイヤーヒエラルキーは、グループ化・順序変更・ロック・非表示などの管理機能を提供します。
- ドラッグ＆ドロップ：オブジェクトを直接キャンバスへ持ち込むだけで配置完了。
- レイヤーパネル：階層構造が視覚化され、親子関係や表示状態の切替が可能です。
- ロック/非表示アイコン：作業中の対象だけを操作でき、誤削除リスクを低減します。
具体的な画面例は STYLY 公式マニュアルに掲載されています【1】。
アセットインポート・マテリアル設定・インタラクティブ要素の追加
本節では外部 3DCG データの取り込み方法と、マテリアル・ライト・インタラクションの基本設定手順をまとめます。最適化に関する公式推奨数値も併記しています。
アセットアップロード時の推奨上限（公式ベストプラクティス）
以下は STYLY が公開している「アセットサイズとポリゴン数」についての目安です。表中の数値はすべて公式ドキュメントに基づきます【5】。
| 項目 | 推奨上限 / コツ |
|---|---|
| ファイル形式 | glTF（.gltf/.glb） が最適、次点で FBX |
| 個別ファイルサイズ | 50 MB 以下（プロジェクト全体は 200 MB 未満が望ましい） |
| ポリゴン数 | 30 k 以下を目安に。高ポリはロード遅延の原因となります |
| テクスチャ解像度 | 2048×2048 px 以下、KTX2 圧縮推奨 |
アセットインポート手順
- エディタ上部メニューの 「Assets」→「Upload」 をクリックし、対象ファイルをドラッグ＆ドロップします。
- アップロード完了後に表示される 「Optimize」タブ で自動リダクション（ポリゴン削減・テクスチャ圧縮）を実行します。
- 最適化結果をプレビューウィンドウで確認し、問題なければ 「Insert into Scene」 を選択してシーンに配置します。
※最適化前に Blender や Maya でローポリ化・UV 展開を済ませると、アップロード時間が大幅に短縮されます。
マテリアル・ライト・エフェクト設定手順
- オブジェクト選択後に 「Material」パネル を開きます。
- 「Base Color」にテクスチャ画像をドラッグ、またはカラーコードで単色指定します。
- 「Metallic」「Roughness」スライダー で金属性・粗さを調整し、PBR 表現のリアリティを向上させます。
- ライト追加：右上の 「Add Light」 から Directional / Point / Spot を選択し、位置・強度を数値入力またはマウス操作で設定します。
- エフェクト（Bloom, SSAO）は 「Post‑Processing」タブ でオン／オフが切り替えられます。
インタラクティブ要素の作成手順
- オブジェクト選択後に 「Interaction」パネル を表示します。
- 「Add Trigger」 ボタンをクリックし、トリガータイプとして 「On Click」 を選びます。
- 「Action」欄に遷移先 URL（例：
https://example.com/detail）または別シーン ID を入力します。 - 必要に応じて 「Delay」や「Animation」 で演出を追加し、設定を保存します。
安全なリンク使用のため、必ず
https://から始まる URL を指定してください。
プレビュー・公開とサンプルプロジェクト体験
このセクションではデバイス別プレビュー方法と、完成作品の公開手順を解説します。さらに初心者向けに用意されたサンプルプロジェクトの作成フローも紹介します。
デバイス別プレビュー方法（公式ガイド）
以下は代表的な 3 種類のデバイスでシーンを確認する手順です。表中の「手順」列は実際に行う操作の概要です。
| デバイス | 手順 |
|---|---|
| PC ブラウザ | エディタ右上の 「Preview」 ボタン → 新タブで WebVR 表示。Chrome のデベロッパーツールで VR モードをシミュレート可能です。 |
| スマホ（iOS/Android） | 「Share」→「QRコード生成」 で QR を作成し、端末のカメラで読み取ると WebAR が自動起動します。 |
| Oculus Quest / Meta Quest | ブラウザ（Meta Browser）でプレビュー URL を開くか、STYLY アプリ内の 「My Works」 から対象シーンを選択します。 |
公開手順と URL シェア
- エディタ左上の 「Publish」 ボタンをクリックします。
- 「Public URL を生成」し、クリップボードにコピーして SNS やメールで共有できます。
- 同時に 「Add to Gallery」 にチェックすると、STYLY 公式ギャラリー（https://gallery.styly.cc）へ自動掲載されます【2】。
- ギャラリーページでは作品説明・タグ設定が可能で、検索エンジン最適化（SEO）の効果も期待できます。
初心者向けサンプルプロジェクト：抽象アート作成ステップ
| Step | 内容 |
|---|---|
| 1. シーン準備 | 新規シーン作成 → 背景色をダークグレー（#202020）に設定。 |
| 2. 基本ジオメトリ配置 | 「Add Primitive」から Sphere、Cube、Torus を各 3 個ずつドラッグし、ランダムに散布。サイズは 0.5〜1.5 m の範囲で調整。 |
| 3. マテリアル設定 | 各ジオメトリにカラフルな PBR マテリアル（例：Red Metallic、Blue Rough）を適用。テクスチャは不要です。 |
| 4. ライト演出 | 中央に Point Light を配置し、Intensity 1.2、Color #ffcc00 に設定。全体の雰囲気を暖色系で統一します。 |
| 5. インタラクティブリンク | 各オブジェクトに「On Click」トリガーを付与し、クリック時に別シーン（例：詳細解説ページ）へ遷移させる URL を設定。 |
完成後は 「Preview → Publish」 で公開し、QR コード経由でスマホから即体験できます。
トラブルシューティングと次のステップ
実務で遭遇しやすいエラーとその対処法をまとめました。また、STYLY の機能をさらに拡張するための Unity 連携手順も紹介します。
よくある問題と解決策（公式サポート情報）
表は代表的なトラブル例と具体的な原因・対処法です。
| 問題 | 原因例 | 解決策 |
|---|---|---|
| アセットアップロードエラー（サイズオーバー） | ファイルが 50 MB 超過 | ファイルを分割、またはテクスチャ圧縮後に再アップロード。 |
| プレビューでオブジェクトが表示されない | ポリゴン数が高すぎる、もしくは非対応フォーマット | glTF に変換し、ポリゴン削減（30 k 未満）して再インポート。 |
| ライト効果が全く見えない | 「Post‑Processing」オフ、または環境光が強すぎる | 環境光を低めに設定し、Bloom を有効化する。 |
| QR コードから AR 起動が遅い | テクスチャサイズ過大 | 1024×1024 px 以下にリサンプリングし、KTX2 圧縮を適用する。 |
Unity 連携で高度表現へステップアップ
STYLY は公式プラグインを通じて Unity へのエクスポートが可能です。以下は基本的な流れです。
- 「Export to Unity」ボタン をクリックし、Unity パッケージ（
.unitypackage）をダウンロードします。 - Unity 2022 以降のプロジェクトにインポートすると、STYLY SDK が自動配置されます。
- Unity 上で C# スクリプトやカスタムシェーダーを追加すれば、リアルタイムレンダリングやマルチプレイヤー機能を実装できます。
このハイブリッドフローにより、STYLY の手軽さと Unity の表現力を組み合わせた高度な VR/AR コンテンツ制作が可能です。
まとめと次に取るべきアクション
本ガイドでは STYLY の概要・アカウント作成・エディタ操作・アセット最適化・プレビュー・公開までの一連の流れを網羅しました。特に公式が提示している「ファイルサイズ 50 MB」「ポリゴン数 30 k」などのベストプラクティスは、快適な体験を提供する上で必須です。
次のステップ
- 無料トライアルに登録し、公式スタートガイドに従って最初のシーンを作成。
- 本稿のサンプルプロジェクトを参考に、独自の VR/AR アートを 1 件完成させる。
- 完成作品を 「Publish」→「Add to Gallery」 で公開し、SNS や QR コードでシェア。
- 更なる表現力が必要なら Unity エクスポート に挑戦し、スクリプトやカスタムシェーダーで拡張。
これらを実践すれば、STYLY を用いたコンテンツ制作の全体像が掴めるはずです。ぜひ今すぐ無料アカウントを作成し、あなたのアイデアを Web VR/AR の世界に具現化してください。
参考リンク・出典
- STYLY 公式マニュアル – 「STYLY アカウントの作成手順」【https://app-tatsujin.com/styly-vr-works-creation-guide】
- STYLY Gallery 公式ページ 【https://gallery.styly.cc/about/en】
- STYLY スターターガイド（公式マニュアル）【https://styly.cc/ja/manual/starter-manual/】
- 「STYLY Studio 保存と自動バックアップ」 – 2026 年更新版ドキュメント
- 「Asset Optimization Guidelines」 – STYLY 開発者向けベストプラクティス（PDF）【https://styly.cc/assets/guidelines.pdf】