STYLY アカウント作成・プラン選択とAR制作ガイド（2026年最新版）

2026年7月22日

課金負担に悩む人へ

スポンサードリンク

貯め方で選べる

ギフト券を貯めてゲーム課金に使う方法3選

ガチャや追加課金の前に、ポイントやギフト券を活用する方法を知っておくと、課金の負担を抑えやすくなります。総合ポイント型、ゲーム型、アンケート型で向いている人が違うため、自分の使い方に近いものから確認してみてください。まずは1つ試して、使いやすいものを組み合わせていく方法もあります。

▷ 課金資金をまとめてGETできる主力アプリ1本が欲しいなら

ギフトゲッターを無料で試す

交換先や最低交換額を確認してから始められます。

▷ ゲームが好きでゲーム案件をこなしてギフト券を貯めたいなら

GEMYでゲーム案件を見る

対象ゲームや達成条件を確認してから進められます。

短時間のアンケートですぐ貯めたいなら

Ipsosのアンケートに回答してAmazonギフトをもらう

わからない設問は無理に回答しなくてもOKです。

Contents

1 1. アカウント作成とプラン選択
- 1.1 1‑1. プラン概要（2026 年公式情報）
  - 1.1.1 推奨プラン選びのポイント
- 1.2 1‑2. アカウント作成手順
2 2. STYLY Studio のログインと基本画面構成
- 2.1 2‑1. ログインフロー
- 2.2 2‑2. 主要パネルの役割
3 3. アセットのインポートとシーン構築
4 4. AR トリガーとインタラクティブ要素の付与
- 4.1 4‑1. 画像・平面トリガーの作り方
  - 4.1.1 画像トリガー
  - 4.1.2 平面トリガー
- 4.2 4‑2. リンク・動画・アニメーションの実装手順
5 5. プレビュー・デバイス別チェック、公開手順
- 5.1 5‑1. デバイス別プレビューポイント
- 5.2 5‑2. 公開時に取得できる情報
6 6. 更新フロー・バージョン管理とトラブル対策
- 6.1 6‑1. バージョン管理ベストプラクティス
- 6.2 6‑2. パフォーマンス最適化・マーカー認識改善策
7 参考リンク

スポンサードリンク

1. アカウント作成とプラン選択

STYLY の利用開始はアカウント登録からです。無料プランでも基本的な AR キャンペーンが作れますが、プロジェクト規模や商用サポートの有無に応じて有料プランへ移行できます。

1‑1. プラン概要（2026 年公式情報）

プラン	月額 (税抜)	アセット上限	公開上限	商用サポート
Free	¥0	500 MB	5 件/月	なし
Pro	¥4,900	2 GB	無制限	メール対応
Enterprise	要問い合わせ	無制限	無制限	専任担当者

出典：STYLY 公式サイト「Pricing」https://styly.cc/ja/pricing/（2026 年 4 月閲覧）

推奨プラン選びのポイント

初心者・小規模プロジェクト → Free
月間 5 件以上の公開や大容量アセットが必要 → Pro
企業レベルでカスタマイズや専任サポートを求める場合 → Enterprise（営業担当にお問い合わせ）

1‑2. アカウント作成手順

STYLY 公式サイトの「Sign Up」からメールアドレスを入力し、送信された認証リンクでメール認証。
ダッシュボード左上の 二段階認証 を有効化（OTP アプリ推奨）。
初回は無料トライアル期間があるため、Pro プランへのアップグレードもこの画面から実行可能。

2. STYLY Studio のログインと基本画面構成

STYLY Studio はブラウザ上で完結する Web エディタです。主要パネルは左側の レイヤーパネル、右側の 属性パネル、中央の シーンビューア で構成されます。

2‑1. ログインフロー

手順	内容
①	https://studio.styly.cc にアクセスし、先ほど作成したメール・パスワードでログイン。
②	初回表示はプロジェクト一覧（カード形式）。新規作成ボタン → プロジェクト名入力 → テンプレート選択でエディタへ遷移。

2‑2. 主要パネルの役割

レイヤーパネル (左)：オブジェクト階層（Hierarchy）を確認・ドラッグで並び替え。
シーンビューア (中央)：3D/AR の実画面。ツールバーで選択、移動、回転、スケールが可能。
属性パネル (右)：選択オブジェクトの位置・サイズ・マテリアルなど詳細設定を行う領域。

3. アセットのインポートとシーン構築

AR コンテンツは 3D モデルや 2D グラフィックを組み合わせて作ります。STYLY は主要フォーマットに対応しており、ドラッグ＆ドロップで簡単に取り込めます。

3‑1. 対応フォーマットとサイズ上限

種類	主な拡張子	ファイル上限
3D	FBX、GLTF/GLB、OBJ	100 MB / ファイル
2D	PNG、JPG、SVG	20 MB / 画像

3‑2. インポート手順

左下の Assets タブを開く。
「Upload」ボタンまたはファイルを直接ドラッグ＆ドロップ。
アップロード完了後、サムネイルが表示されるのでシーンへドラッグ。

3‑3. 配置・スケール・回転の基本操作

操作	キーボードショートカット	補足
移動 (Translate)	V	X/Y/Z 軸ハンドルで自由に配置
スケール (Scale)	S	数値入力で正確な倍率指定可
回転 (Rotate)	R	90° スナップは Shift+R

3‑4. マテリアル設定のポイント

Standard：光源に反応するリアルな質感。金属度・粗さを調整。
Unlit：光源非依存で UI 要素やフラットデザイン向き。

4. AR トリガーとインタラクティブ要素の付与

AR シーンは「トリガー」が無ければ起動できません。また、ユーザーが操作できるリンクや動画再生を組み込むことで体験価値が向上します。

4‑1. 画像・平面トリガーの作り方

ポイント：トリガーは「Add Trigger」から選択し、必要情報を入力するだけで完了します。

画像トリガー

「Add Trigger」→「Image Target」をクリック。
トリガー用画像（PNG/JPG）をアップロード。推奨サイズ 600 × 800 px、高コントラストが必須。
認識精度は Standard または High を選択。

平面トリガー

「Add Trigger」→「Plane Detector」を選択。
検出対象の平面サイズ（例：A4）と向きを設定。

4‑2. リンク・動画・アニメーションの実装手順

インタラクション	手順概要
リンク	オブジェクト選択 → 「Add Interaction」→「Open URL」 → URL を入力し、`_blank` で新タブ開く設定。
動画再生	1. MP4（最大 50 MB）を Assets にアップロード。 2. オブジェクトに「Video Player」コンポーネントを追加。 3. 「Auto Play」オンで AR 起動と同時に再生。
アニメーション	タイムラインエディタでキー帧を設定。例：2 秒で回転し、5 秒後にフェードアウトするシーケンスを作成。

5. プレビュー・デバイス別チェック、公開手順

完成したシーンは必ずプレビューで確認し、実機でも動作検証します。その上で Publish ボタン一つで URL と QR コードが自動生成されます。

5‑1. デバイス別プレビューポイント

目的：Web（ブラウザ）とモバイルアプリの挙動差を事前に把握し、リリース後の不具合を防止します。

確認項目	Web (Chrome / Safari)	iOS (STYLY Mobile)	Android
起動速度	2–3 秒以内が望ましい	同上	同上
AR 認識率	画像マーカー成功率 >90%	カメラ許可設定確認	同上
UI タップ領域	最小 44 px（指で操作しやすい）	ボタンサイズは同等に確保	同上
動画再生	自動再生がブロックされる場合はユーザー操作を促す	アプリ内で自動再生可	同上

プレビュー実行方法：Studio 右上の Preview ボタン → ブラウザ表示。
モバイル確認：STYLY Mobile（ダウンロードページ）をインストールし、QR コードまたは URL を入力。

5‑2. 公開時に取得できる情報

URL：クリップボードへ自動コピーされます。
QRコード：画像としてダウンロード可能。
埋め込みスニペット（iframe）：

&lt;iframe src=&quot;https://styly.cc/scene/your-scene-id?ar=1&quot;
        width=&quot;100%&quot; height=&quot;600&quot; frameborder=&quot;0&quot;
        allowfullscreen&gt;&lt;/iframe&gt;

width="100%" height="600" frameborder="0"

allowfullscreen></iframe>

活用例：社内ポータルやキャンペーン LP に貼り付けるだけで、訪問者はブラウザ上で AR 体験が可能です。

6. 更新フロー・バージョン管理とトラブル対策

公開後もコンテンツの修正や機能追加は頻繁に発生します。STYLY は差分アップロード方式と CDN キャッシュ刷新機構を備えているため、既存 URL を保ちつつ安全に更新できます。

6‑1. バージョン管理ベストプラクティス

推奨：MAJOR.MINOR.PATCH の形式でバージョン番号を付与し、変更履歴は社内共有シートに記録します。

手順	操作内容
1	ダッシュボードで対象シーンを開く。
2	Update ボタン → 変更したアセットのみ再アップロード。
3	バージョン番号（例：v1.2）と簡潔な更新内容（30 文字以内）を入力。
4	再度 Publish を実行。URL は変わらず、最新コンテンツが即時反映される。

6‑2. パフォーマンス最適化・マーカー認識改善策

モデルサイズとロード速度

GLTF のテクスチャは JPEG に圧縮し、解像度は 1024 × 1024 px 以下 に抑える。
不要な頂点数は Blender 等で 30 % 以上削減すると、ロードが約 1.5 倍速 に向上。

CDN とキャッシュ設定

Cache-Control: max-age=31536000, immutable

1 2	Cache-Control: max-age=31536000, immutable

上記ヘッダーを付与すればブラウザ側で長期間キャッシュでき、再ダウンロード回数が削減されます。
アセットは Lazy Load（属性パネルの「Load on Trigger」）を活用し、トリガー発火時に初めて読み込むよう設定。

AR マーカー認識率向上

項目	改善ポイント
画像品質	高コントラスト・余白確保。推奨サイズ ≥600 × 800 px
環境光	均一な照明下でテストし、影や反射を除去
Sensitivity 設定	認識失敗時は「Detection Sensitivity」を High に変更