Contents
STYLY の始め方：アカウント作成と基本設定
STYLY を初めて利用する場合、まずは無料アカウントを取得し、画面に表示されるセットアップガイドに従うだけで制作環境が整います。公式サイトの登録フローはシンプルで、プログラミング経験がなくても数分で完了できる点が大きな魅力です。本節では、アカウント作成から初回セットアップまでの手順を具体的に解説します。
アカウント登録手順
公式サイト（https://styly.cc/ja/）へアクセスし、右上の「無料で始める」ボタンをクリックします。以下の流れでアカウントが作成されます。
-
メールアドレスとパスワードの入力
入力後に送信された認証メール内のリンクをクリックして、メール認証を完了させます。 -
プロフィール情報の登録
名前（必須）と会社名（任意）を入力し、ユーザーアイコンや表示名を設定します。 -
セットアップガイドの確認
初回ログイン時に表示されるガイドでは、ユーザー名・アイコン設定、プロジェクト作成ボタンの位置、利用規約への同意手順が順番に案内されます（公式マニュアル 2025‑03 版）【1】。 -
ダッシュボードへ遷移
認証とプロフィール設定が完了すると STYLY Dashboard が表示され、左メニューに「Studio」「Gallery」の2つが並んでいることを確認してください。
Studio と Gallery の役割と使い分け
STYLY は「Studio（編集環境）」と「Gallery（公開・シェア環境）」の 2 つの画面で構成されます。どちらで何を行うかを正しく理解すれば、開発中に不安定な状態でも安全に作業でき、完成した作品はスムーズに共有できます。
主な機能比較
| 項目 | Studio の特徴 | Gallery の特徴 |
|---|---|---|
| 目的 | コンテンツの作成・デバッグ | 完成作品の公開・配布 |
| 保存先 | ユーザーのプロジェクト一覧（ドラフト） | 各作品ごとの公開ページ |
| 権限管理 | 編集者のみが操作可能 | ビューアは閲覧のみ、オーナーは編集可 |
| 主なボタン | 「Add Asset」「Play」 | 「Publish」「Copy URL」 |
公式マニュアルでは、Studio の保存は自動的にドラフトとして扱われ、Gallery に公開しない限り外部からアクセスできないことが明記されています【2】。
AR コンテンツ制作フロー：素材からシーン構築まで
AR シーンを作る際の基本手順は「素材準備 → アップロード → 配置 → インタラクション設定」の 4 ステップです。各段階で注意すべきポイントとベストプラクティスをまとめました。
3D モデル・テクスチャの最適化基準
ブラウザ上でリアルタイムにレンダリングされるため、ファイル容量やポリゴン数はパフォーマンスに直結します。2026 年時点の STYLY 推奨スペックは以下の通りです（公式ドキュメント 2026‑01）【3】。
| 項目 | 推奨上限 |
|---|---|
| ファイル形式 | GLTF / GLB（USDZ も可） |
| 最大ファイルサイズ | 25 MB（単体モデル） |
| ポリゴン数 | 30,000 以下 |
| テクスチャ解像度 | 2048×2048 px 以下、JPEG 推奨 |
最適化手順の概要
- 不要面の削除 – Blender の Decimate 機能でポリゴン数を削減。
- テクスチャ圧縮 – TinyPNG 等で JPEG に変換し、150 KB 前後に抑える。
- GLB へのエクスポート – glTF‑Pack（CLI）または STYLY の Import Assistant を利用。
最適化済みモデルを使用した場合、ロード時間が平均 1.2 秒に短縮されたという実績があります（App‑Tatsujin ガイド）【4】。
シーン内での配置とインタラクション設定
空間配置
Studio の左パネルから「Assets」をドラッグ＆ドロップし、シーン上にオブジェクトを配置します。選択したオブジェクトは右側の Transform パネルで数値入力が可能です。
- 位置基準：
(0, 0, 0)がデバイスカメラから 1 m 前方の原点となります。 - 回転操作：Y 軸回転は「向き」スライダーで直感的に調整できます。
インタラクション設定
右パネルの Interaction タブからイベントを追加します。代表的なイベントと利用例は以下の通りです（公式インタラクションガイド）【5】。
| イベント | 発火条件 | 主な用途 |
|---|---|---|
| Tap | 画面タップ時 | 詳細情報表示、外部リンク遷移 |
| Hover | カメラが対象に接近 | アニメーション開始 |
| Timer | 指定秒数経過後 | 自動再生動画・サウンド |
例：AR ボタンでモデル表示切替
- シーンに「Button」コンポーネントを配置。
- Tap イベントで「Toggle Visibility」アクションを選択し、対象 3D モデルを指定。
- プレビュー画面でタップ動作を確認。
ノーコードで実装できるため、プログラミング経験がなくても多彩な体験設計が可能です。
AI 生成コンテンツの活用方法と実装手順
AI が生成した画像や 3D モデルを STYLY に取り込むことで、オリジナリティの高い AR 作品を短時間で完成させられます。本節では、プロンプト設計から STYLY へのインポート、デバッグまでの一連の流れを解説します。
プロンプト設計のベストプラクティス
AI 素材は「指示が具体的であるほど期待通りの出力が得られる」ことが研究でも確認されています（Stable Diffusion XL 論文）【6】。以下に実務で有効な例を示します。
-
画像生成（Midjourney v6 推奨プロンプト）
A futuristic sneaker, low poly style, bright neon colors, isolated on white background, 4k resolution -
3D モデル生成（Stable Diffusion XL + DreamFusion ワークフロー）
A stylized Japanese torii gate, wood texture, 1500 polygons, GLB format
ポイントは「スタイル」「解像度」「ファイル形式」を明示することです。
STYLY へのインポート手順
- AI サービスで素材作成
Midjourney、Stable Diffusion、DreamFusion 等で上記プロンプトを入力し、画像または.glbファイルを取得。 - Studio にアップロード
「Add Asset」→「Upload File」でドラッグ＆ドロップ。自動的にマテリアルが生成されます。 - マテリアルの微調整
右パネルの Material タブで反射率・透明度を必要に応じて調整します。
AI 素材はサイズ最適化が不十分なケースが多いため、STYLY の自動圧縮機能（最大 25 MB にリサンプル）を活用するとロード時間が約30％短縮されます【7】。
デバッグとプレビューのポイント
| 環境 | 推奨ブラウザ・ツール | 主な確認項目 |
|---|---|---|
| PC | Chrome（最新版） DevTools → Sensors タブ |
仮想カメラ位置で視点テスト、コンソールエラーの有無 |
| スマホ | QR コードで直接アクセス（iOS Safari 13+ 必須） | 実機でのスケール・位置合わせ、AR 起動速度 |
よくあるエラーと対処法は次の通りです。
| エラー | 原因 | 解決策 |
|---|---|---|
| Failed to load resource | ファイルサイズが 25 MB を超過 | 画像・モデルを圧縮して再アップロード |
| Texture size not power of two | テクスチャの解像度が 2 の累乗でない | 1024×1024、2048×2048 にリサンプル |
| AR view flickers | ピボット位置が原点とずれている | Transform パネルでピボットを中心に設定 |
公開・シェア方法、料金プランと競合比較、よくあるエラー
完成した AR シーンは Gallery に公開し、QR コードや埋め込みコードで手軽に共有できます。また、2026 年時点の STYLY の料金体系と主要競合サービスとの比較を示すことで、予算選定の参考になります。
公開手順と共有オプション
- Studio から「Publish to Gallery」
編集画面右上の Publish ボタンをクリックし、タイトル・説明文・サムネイルを入力。 - 公開設定
- Public：全員が閲覧可（デフォルト）
- Private：リンクを知っている人だけアクセス可能
- シェア情報の取得
- QR コード：Gallery の Share タブから自動生成。印刷物や SNS に貼り付け可能。
- 短縮 URL：
sty.ly/xxxx形式でコピーし、メールやチャットで配布。 - 埋め込みコード：HTML
<iframe>タグが提供されるので、Web ページに直接組み込めます。
STYLY の WebAR はサーバー側変換が不要なため、QR をスキャンした瞬間にブラウザ上で AR が起動します【8】。
2026 年版料金体系
| プラン | 月額料金 | 無料枠（AR ビュー数） | 主な機能 |
|---|---|---|---|
| Free | ¥0 | 5,000 回/月 | Studio 基本、Gallery 公開、QR コード生成 |
| Pro | ¥2,980 | 無制限 | カスタムドメイン、ブランドロゴ、詳細分析レポート |
| Enterprise | 要問い合わせ | 無制限 | SLA サポート、専用サーバーオプション、API 連携 |
個人クリエイターは Free プランで十分ですが、月間 5,000 ビューを超えるキャンペーンや企業利用では Pro/Enterprise が推奨されます【9】。
主な競合サービスとの比較
| 項目 | STYLY (2026) | Zappar | 8th Wall |
|---|---|---|---|
| コーディング不要 | ✅ | ❌（一部テンプレートあり） | ❌ |
| 無料プランのビュー数 | 5,000/月 | 1,000/月 | 2,500/月 |
| 対応フォーマット | GLTF/GLB、USDZ | GLTF、OBJ | GLTF、USDZ |
| AR マーカー機能 | ✅（標準） | ✅（高度） | ✅（カスタム） |
| ロケーションベース AR | ❌ | ✅ | ✅ |
| 月額料金（概算） | Free / ¥2,980 (Pro) | Free / $19 (Starter) | Free / $49 (Growth) |
STYLY はノーコードでの迅速なプロトタイピングに強みがあり、デザイン志向のクリエイターに最適です。一方、Zappar と 8th Wall は高度なマーカー・ロケーション機能を提供しますが、開発リソースが必要となります【10】。
エラー対処ガイド
| 質問 | 回答 |
|---|---|
| 画像サイズが大きすぎてアップロードできません | 5 MB 以下・解像度は 2048×2048 px 推奨。TinyPNG 等で圧縮後に再試行してください。 |
| iOS Safari で AR が表示されない | iOS 13 以降の Safari が必要です。また、HTTPS 接続が必須なので URL が https:// か確認します。 |
| Chrome で「WebXR not supported」と出る | Chrome のフラグ #enable-webxr を有効化し、最新版に更新してください。 |
| モデルが画面外に出てしまう | オブジェクトのピボット位置が原点とずれている可能性があります。Transform パネルで位置 (0,0,0) にリセットし、再配置します。 |
参考文献・リンク
- STYLY Official Manual (2025‑03). https://styly.cc/manual
- STYLY Documentation – Project Management (2026‑01). https://docs.styly.cc/project-management
- STYLY Performance Guidelines (2026‑01). https://docs.styly.cc/performance
- App‑Tatsujin AR Creation Guide, 2025/07. https://app-tatsujin.jp/ar-guide
- STYLY Interaction Reference (2025‑12). https://docs.styly.cc/interaction
- Stable Diffusion XL – Research Paper, 2023. https://arxiv.org/abs/2307.01952
- STYLY Asset Optimization FAQ (2026‑02). https://support.styly.cc/asset-optimization
- WebAR Quick Start – STYLY Blog (2025‑11). https://blog.styly.cc/webar-quick-start
- STYLY Pricing Page (2026‑04). https://styly.cc/pricing
- Zappar vs 8th Wall vs STYLY Comparison (2025‑09). https://www.arcomparison.com/2025