Contents
1. STYLY の全体像と主要機能
STYLY は日本発の Web‑AR／XR プラットフォームで、ブラウザだけで 3D コンテンツを作成・配信できます。本セクションでは 「Gallery」「Studio」「Magazine」 の三本柱と、それぞれが提供する価値を概観します。
1‑1. Gallery – バーチャル展示空間
Gallery は作成したシーンや作品を閲覧できるオンラインギャラリーです。訪問者は PC・スマホのどちらでもアクセスでき、AR 表示は URL だけで起動します。
- 特徴
- カスタムドメイン対応（ブランドサイトに埋め込み可）
- アクセス解析が標準装備（閲覧数・デバイス別統計）
1‑2. Studio – コードレス 3D エディタ
Studio はドラッグ＆ドロップ式のエディタで、プログラミング知識なしにオブジェクト配置やマテリアル設定が可能です。公式スタートガイド（STYLY スターターガイド）ではゲーム感覚のチュートリアルで基本操作を学べます。
- 主なツール
- レイヤーパネル：階層管理とグループ化
- プロパティパネル：位置・回転・スケール・マテリアルの詳細設定
- Interaction パネル：クリックやタップ時のアクション定義
1‑3. Magazine – 学習コンテンツと事例集
Magazine は STYLY の公式メディアで、制作ノウハウや活用事例が記事・動画で提供されます。初心者はステップバイステップのガイドに沿ってスキルを身につけられ、上級者は最新テクニックや業界トレンドをキャッチアップできます。
まとめ
STYLY は「展示」「制作」「学習」の三位一体で、コードレスかつマルチデバイス対応の AR/VR コンテンツ作成基盤として最大の強みを持ちます。
2. アカウント作成と基本設定
STYLY の利用は公式サイトから無料アカウントを取得するだけで開始できます。この章では登録フロー、プロファイル設定、権限管理のポイントを順に解説します。
2‑1. 無料アカウントの取得手順
- 公式トップ（https://styly.cc）へアクセスし、右上の 「Sign Up」 をクリック。
- 必要情報は メールアドレス・パスワード・表示名 のみです。
- 送信された認証メール内のリンクを開くと、ダッシュボードにログインできます。
ポイント：企業利用の場合は後述の「Team」権限へ切り替えるだけで共同作業が可能です。
2‑2. プロファイルと権限設定
ログイン直後に表示される「プロフィール」画面で以下を入力します。
- ユーザー名・アイコン：公開時に他者から見える情報なので、ブランドや個人の認識しやすいものを選びましょう。
- 権限レベル：
- Creator（個人向け） – デフォルト設定で無料プランの機能が利用可能です。
- Team（チーム向け） – 複数メンバーでプロジェクトを共有でき、後述の有料プランと併用すると更に便利になります。
これらを完了すると、ダッシュボード上部に現在適用されているプランの機能・容量が表示されます。公式マニュアル（STYLY Studio の使い方マニュアル）でも同様の手順が画像付きで解説されています。
3. STYLY Studio でシーンを作る – 基本操作ガイド
Studio はブラウザ上で完結する 3D エディタです。ここでは UI の構成、オブジェクト配置・マテリアル設定、インタラクション追加の流れを詳しく見ていきます。
3‑1. 画面レイアウトとツールパネル
STYLY Studio を開くと次のようなレイアウトが表示されます。各領域の役割は以下の通りです。
-
左側：レイヤーパネル
シーン内オブジェクトの階層を管理し、ドラッグで順序変更やグループ化が可能です。 -
右側：プロパティパネル
選択したオブジェクトの位置・回転・スケール、マテリアル情報、インタラクション設定を細かく調整できます。 -
中央：ビューポート
実際にシーンが表示され、リアルタイムで編集結果をプレビューできます。
ツールバーには基本変形ツール（移動・回転・スケール）やマテリアルライブラリへのショートカットが配置されています。
3‑2. オブジェクトの追加とマテリアル設定
手順概要
- オブジェクト追加 – 左パネル「Assets」から GLTF/OBJ ファイルをドラッグ＆ドロップ。
- 位置調整 – ビューポート上で変形ツールを使い、数値入力欄で正確な座標や回転角度を指定。
- マテリアル適用 – 右パネル「Material」タブから PBR マテリアル（色・金属度・粗さ）を選択し、対象オブジェクトにドラッグ。
注意点（初心者がつまずきやすいポイント）
- ファイルサイズ上限はプランにより異なりますが、一般的には 50 MB 未満 が安全です。大容量モデルは事前に圧縮・LOD 化しておくとアップロードエラーを回避できます。
- テクスチャの UV 展開が正しく設定されていないと、貼り付けた画像が歪むことがあります。3D モデリングソフトで事前に確認しましょう。
3‑3. インタラクション（クリック・リンク）の追加
Studio の「Interaction」パネルから Click Action を選び、対象オブジェクトに割り当てます。設定できる主なアクションは次のとおりです。
| アクション種別 | 内容 | 実装例 |
|---|---|---|
| URL 遷移 | クリック時に外部ページへジャンプ | 商品ページやキャンペーンサイトへのリンク |
| シーン切替 | 同一プロジェクト内の別シーンへ遷移 | カタログ閲覧から詳細ビューへの遷移 |
| カスタムスクリプト（Unity SDK 経由） | 高度なロジックを Unity 側で実装し呼び出す | AR オブジェクトのアニメーション再生 |
設定後は 「Preview」 ボタンで動作確認が可能です。問題が無ければ 「保存」 して次の工程へ進みます。
4. Unity と連携した高度コンテンツ制作
Studio の基本機能だけでは実装しきれないアニメーションや独自ロジックは、Unity で作成したプレハブを STYLY に持ち込むことで対応できます。以下では Unity 環境構築からエクスポート手順までを解説します。
4‑1. 推奨 Unity バージョンと必須モジュール
- 推奨バージョン：Unity 2022.3 LTS（2026年5月時点）
- 必須ビルドサポート：
Android Build SupportとWebGL Build Supportをインストールしてください。これが無いと WebAR 用エクスポートができません。
4‑2. STYLY Unity SDK の導入手順
- SDK ダウンロード – STYLY 公式マニュアルの「Unity SDK」ページ（STYLY スターターガイド）から
.unitypackageを取得。 - インポート – Unity エディタで
Assets > Import Package > Custom Packageを選択し、ダウンロードしたパッケージを指定。全ファイルにチェックを入れてインポートします。 - プロジェクト設定 – インポート後に表示される「STYLY Settings」ウィンドウで、ダッシュボードの「Project Settings」から取得できる Project ID を入力。
4‑3. プレハブ化とエクスポート手順
| 手順 | 操作内容 |
|---|---|
| シーン構築 | Unity 上でモデル・アニメーション・スクリプトを配置し、AR 用ロジックを実装。 |
| STYLY コンポーネント付与 | 対象オブジェクトに STYLY Object コンポーネントを追加し、「Exportable」フラグをオンにする。 |
| エクスポート | メニューの STYLY > Export to STYLY を選択すると、.json 形式でエクスポートファイルが生成されます。 |
| アップロード | ダッシュボードの「Upload」画面からエクスポートファイルをドラッグ＆ドロップしてアップロード。 |
公式マニュアルによれば、エクスポート時にマテリアル情報は自動変換されるため、Studio 側で再設定する手間が省けます。
5. シーンの公開・共有とトラブルシューティング
完成したシーンは WebAR リンクとして配布でき、SNS でも簡単に拡散できます。この章では公開手順、SNS への投稿例、よくあるエラーと対策をまとめます。
5‑1. WebAR URL の取得と埋め込み
- ダッシュボードの 「Scenes」 タブで対象シーンの 「Publish」 ボタンをクリック。
- 公開設定（閲覧制限・有効期限）を確認し、「Generate WebAR URL」 を選択すると短縮リンクが生成されます。
- ウェブサイトへ埋め込む場合は同画面の 「Embed Code」（iframe）をコピーし、HTML の任意箇所に貼り付けるだけです。
ヒント：SEO を考慮して
titleとdescriptionメタタグを設定すると検索エンジンからの流入が期待できます。
5‑2. SNS へのシェア方法
| プラットフォーム | 推奨シェア手順 |
|---|---|
短縮 URL とハッシュタグ #STYLY、スクリーンショットまたは GIF を添付。 |
|
| Instagram（ストーリーズ） | 直接リンク貼れないため、QR コード画像を生成して投稿。QR は無料オンラインツールで簡単に作成可能です。 |
| Facebook / LinkedIn | 埋め込み用 iframe が使える場合は「シェア」ボタンからコードを貼り付けるか、URL とプレビュー画像だけでも効果的です。 |
5‑3. よくあるエラーと対処法
| エラー | 発生原因 | 推奨対策 |
|---|---|---|
| アップロード失敗（サイズ超過） | アセットがプラン上限を超えている | ファイルを圧縮し、テクスチャは 2 K 以下にリサイズ。 |
| WebAR が表示されない（iOS Safari） | Safari の WebGL が無効化されている | 「設定 → Safari → 詳細 → WebGL を有効」にユーザーへ案内するバナーを設置。 |
| クリックアクションが機能しない | URL が https で保護されていない | 安全な https ドメインにリンク先を変更し、CORS 設定も確認。 |
| Unity エクスポート時のマテリアル欠損 | SDK バージョンと Unity のバージョン不整合 | 推奨 Unity バージョン（2022.3 LTS）に統一し、SDK を最新版に更新する。 |
公式マニュアルの「シーン作成から公開・SNS での共有」ページ（STYLY Studio の使い方マニュアル）でも同様の対処法が掲載されています。
6. 料金プランと無料利用可能範囲（2026年最新情報）
STYLY は Free / Pro / Enterprise の 3 段階に分かれ、各プランで提供される機能・リソースが異なります。以下は 2026 年 5 月時点の公式サイト掲載情報を基にした概要です（※数値は変更される可能性がありますので、必ず最新の料金表をご確認ください）。
6‑1. Free プラン
- 閲覧数・シーン公開数：月間上限あり（詳細は公式ページ参照）
- ストレージ容量：最大 500 MB
- Unity SDK：利用可。ただしエクスポート件数に制限が付く。
- サポート：コミュニティフォーラムのみ
6‑2. Pro プラン（有料）
- 閲覧数・シーン数：無制限
- ストレージ容量：5 GB 以上（プランに応じて拡張可）
- 優先サポート：メール・チャットでの迅速対応
- 追加機能：カスタムドメイン、分析レポートのエクスポート、チーム権限管理
料金について：月額は公式サイトに掲載されている最新価格をご確認ください。年払いプランでは割引が適用される場合があります。
6‑3. Enterprise プラン
- カスタムリソース：ストレージ・閲覧数ともに無制限、SLA に基づく保証付き
- 専任アカウントマネージャー：導入支援から運用サポートまでフルフォロー
- エンタープライズ向け機能：シングルサインオン（SSO）、プライベートクラウドオプション、詳細な利用レポート
6‑4. 料金情報の確認方法
- STYLY ダッシュボードにログインし、左メニューの 「Pricing」 をクリック。
- 表示された表で各プランの ストレージ容量・閲覧数上限・価格 を比較できます。
- 不明点は公式サポートチャットまたは営業窓口へ問い合わせると、最新情報が取得できます。
7. 実践的な活用ヒントとベストプラクティス
STYLY を最大限に活かすためのポイントをまとめました。プロジェクト立ち上げ前から公開後まで、段階ごとのチェックリストとしてご利用ください。
7‑1. プロジェクト設計時
- 目的と KPI の明確化：例）「AR フィッティングでクリック率 3% 向上」など具体的な目標を設定。
- デバイス想定：スマホ・タブレットの画面サイズや性能差を考慮し、モデルのポリゴン数は 50 k 以下に抑えると快適です。
7‑2. コンテンツ制作時
- テクスチャ最適化：最大 2048×2048 ピクセル、圧縮形式は WebP 推奨。
- LOD（レベル・オブ・ディテール）設定：遠距離表示用に低ポリゴン版を用意するとロード時間が短縮されます。
- インタラクション設計：クリック領域は視覚的に分かりやすくし、タップ判定は 48 dp（約 9 mm）以上確保。
7‑3. テストとデバッグ
- マルチブラウザテスト：Chrome・Safari・Edge の最新バージョンで動作確認。
- パフォーマンス測定：Chrome DevTools の「Performance」タブでフレームレート（目標 30 fps）とメモリ使用量をチェック。
7‑4. 公開・マーケティング
- メタ情報の設定：OGP タグや Twitter Card を利用し、SNS シェア時に魅力的なサムネイルが表示されるようにする。
- リンク短縮サービス：Bitly などでクリック数をトラッキングし、効果測定に活用。
7‑5. 運用と改善
- アクセス解析の活用：STYLY の標準レポートと Google Analytics を組み合わせて、デバイス別・地域別の利用傾向を把握。
- ユーザーフィードバック収集：シーン内に簡易アンケート（Google Forms へのリンク）を設置し、改善点を抽出。
8. まとめ
STYLY は Gallery・Studio・Magazine の三本柱で構成された、日本発のコードレス Web‑AR/XR プラットフォームです。無料アカウントから始められ、Unity SDK を併用すれば高度なインタラクティブ体験も実装可能です。公開は数クリックで完了し、SNS へのシェアや埋め込みコードで多様なチャネルに拡散できます。
- 初心者：Free プランで基本機能を試し、公式チュートリアルに沿ってシーン作成へ挑戦。
- 中級者・チーム：Pro プランにアップグレードしてストレージとサポートを拡充。Team 権限で共同制作がスムーズに。
- エンタープライズ：Enterprise でカスタム SLA と専任マネージャーを活用し、ブランド規模の AR キャンペーンを安定運用。
最新の料金や機能は必ず公式サイトで確認し、プロジェクト要件に合ったプラン選択と最適化手法で、STYLY を最大限に活かしてください。
本ガイドの数値情報（ストレージ容量・閲覧数上限等）は執筆時点のものです。公式サイトの最新情報をご確認のうえご利用ください。