Contents
1. STYLYの概要と活用シーン
STYLY は Web ブラウザ上でコード不要に 3D シーンを構築できる SaaS 型プラットフォームです。VR/AR やメタバース向けの体験を低コスト・高速に実装したい企業や教育機関にとって、導入ハードルが最も低いツールのひとつと言えます。本セクションでは、代表的な活用例と期待できる効果を示し、最後に本ガイド全体の要点をまとめます。
1‑1. VR/AR・メタバースでの具体的な利用例
STYLY が得意とするシーンは「ブランド展示」や「教育用ツアー」など、インタラクティブ性が求められる領域です。WebGL と WebXR に対応しているため、PC ブラウザだけでなくヘッドセットでも同一 URL が機能します。
- ファッションブランド：新作コレクションを仮想ショールームに配置し、来訪者はオブジェクトをクリックするだけで商品ページへ遷移できます。
- 大学・研究機関：実験室や歴史的建造物の 3D ツアーを作成し、遠隔受講生が VR デバイスで操作できるようにします。
これらの事例は「低予算でメタバース体験を提供」するという共通目的を持ち、マーケティングや教育の入口として有効です。
1‑2. 本セクションのまとめ
- 手軽さ：インストール不要・コード不要で即座に制作開始。
- 汎用性：WebGL／WebXR に対応し、デバイス横断的に同一コンテンツを提供。
- 活用効果：ブランド露出の拡大や遠隔教育の実現といった具体的成果が期待できる。
2. アカウント作成からダッシュボード操作までの基本フロー
STYLY の利用はまずアカウント登録、次にログイン・認証設定、最後にダッシュボードの画面構成を把握する流れになります。ここでは公式サイト上での手順と、各画面が持つ役割を具体的に解説します。
2‑1. 公式サイトからのアカウント登録手順
アカウント作成はメールアドレスだけで完結し、数分でプロジェクト画面へ遷移できます。以下の手順で実施してください。
- STYLY 公式サイト（https://styly.com）にアクセスし、右上の Sign Up をクリック。
- 名前・メールアドレス・パスワードを入力し送信。
- 受信した認証メール内のリンクを開くと登録が完了し、ダッシュボードへ自動遷移します。
ポイント：SaaS 型サービスなのでローカル環境の構築は不要です。
2‑2. ログイン方法と認証設定
STYLY はメール＋パスワードに加えて Google アカウントでの OAuth 認証をサポートしています。2024 年 11 月時点では公式に二要素認証（2FA）は提供されていませんが、Google アカウント連携によるセキュリティ強化が可能です。最新情報は STYLY ヘルプセンターの「アカウント設定」ページをご確認ください。
- メールログイン：通常通りメールとパスワードでサインイン。
- Google 連携：
Continue with Googleボタンをクリックし、Google アカウントで認証します。
注意：2FA が必要な場合は、Google アカウント側で二段階認証を有効化しておくことを推奨します。
2‑3. ダッシュボード／ワークスペースの画面構成と各パネルの役割
ダッシュボードは左メニュー・中央作業領域・上部ツールバーの三つに分かれ、直感的なレイアウトが特徴です。
| パネル | 主な機能 |
|---|---|
| 左側メニュー | 「Projects」「Assets」「Settings」へのアクセス |
| 中央パネル | 現在編集中のシーンを表示。ドラッグ＆ドロップでオブジェクト配置 |
| 上部ツールバー | 保存・プレビュー・公開ボタンが並び、作業フローを一目で把握 |
ポイント：画面構成はシンプルで、初心者でも迷わず操作できます。
2‑4. 本セクションのまとめ
- アカウントはメールまたは Google で数分で取得可能。
- 現時点では STYLY が提供する公式な 2FA はなく、Google の認証を活用すると安全性が向上。
- ダッシュボードは左・中央・上部の三領域に整理されており、目的別に即座に操作できる設計です。
3. 3D アセットのインポートとオブジェクト操作の基礎
シーン作成の第一歩は 3D データを取り込み、位置・回転・スケールなどのトランスフォームを行うことです。ここでは対応ファイル形式と具体的な操作手順を解説します。
3‑1. GLTF／OBJ 形式のファイルをアップロードする方法
STYLY が公式にサポートしているフォーマットは GLTF（.glb/.gltf） と OBJ です。推奨サイズは「10 MB 以下」ですが、これは STYLY ヘルプページの「アセット容量上限」（2024 年 5 月版）に基づく目安であり、実際にはプロジェクトごとの制限が変動する可能性があります。
- ダッシュボード左メニューの Assets を選択。
- Import ボタンをクリックし、ローカルファイルまたは外部 URL を指定してアップロード。
- アップロード完了後にサムネイルが一覧に表示され、シーンへドラッグ＆ドロップできます。
ポイント：ブラウザ上で高速に読み込める GLTF が推奨フォーマットです。
3‑2. 配置・移動・回転・スケールの基本操作
オブジェクトを選択するとトランスフォームハンドルが表示され、以下の操作が可能です。
- 選択：シーン上でクリック → 青枠が出現。
- 移動：中心の矢印ハンドルをドラッグし X/Y/Z 軸方向へスライド。数値入力欄に直接「0.5」などと記入も可。
- 回転：円形ハンドルを回すか、角度欄に「45°」と入力。
- スケール：四隅のハンドルで拡大縮小。Shift キー＋ドラッグで均等スケールが実行できる。
結論的な表現は削除し、要点だけ示す：上記操作をマスターすれば、数分で名刺サイズのバーチャル展示ブースも作成可能です。
3‑3. 本セクションのまとめ
- 対応フォーマットは GLTF と OBJ。公式ガイドでは「10 MB 以下」推奨（※ヘルプ参照）。
- トランスフォームツールで位置・回転・拡大縮小を直感的に調整できる。
- 基本操作だけ覚えれば、初心者でも実用的なシーンが迅速に構築できる。
4. マテリアル・ライト設定と簡易アニメーションでインタラクティブ化
見た目と動きを加えることで訪問者の没入感を高められます。本章ではマテリアル適用、照明配置、そしてクリックや自動再生が可能なシンプルアニメーション手法を紹介します。
4‑1. マテリアルやテクスチャの適用方法
STYLY の Material パネルは PBR（Physically Based Rendering）に対応しており、色・金属度・粗さなどを直感的に調整できます。テクスチャサイズの上限は公式ヘルプで「2 MB 以下」（2024 年 5 月版）と記載されていますが、実際にはブラウザのメモリ制約も考慮してください。
- オブジェクトを選択し右側 Material タブを開く。
- Base Color にカラーコード（例：
#ff6600）または画像ファイルをドラッグ＆ドロップ。 - Metallic を 0.8、Roughness を 0.2 に設定すると金属光沢が強調されます。
ポイント：変更は即時プレビューに反映されるため、試行錯誤が容易です。
4‑2. 基本的なライト配置と調整ポイント
照明はシーンの見た目を左右する重要要素です。STYLY 推奨の最小構成は「環境光 + スポットライト 1 個」ですが、実際には ライト数は 3 個以内 に抑えると描画コストが低減します（公式ガイド参照）。
- 環境光 (Ambient Light)：全体に均一な明るさを付与。強度は 0.5 が目安。
- スポットライト：対象オブジェクト上部に配置し、角度・距離でハイライトを作成。インテンシティは約 1.2 がバランス良好。
ポイント：過剰な光源はポリゴン数を増やさずに描画負荷が上がるため、必要最小限に留めましょう。
4‑3. トリガーリンクやキーフレームを使ったシンプルアニメーション手法
インタラクティブ要素は訪問者のエンゲージメント向上に直結します。STYLY の Interaction パネルで「リンク」および「アニメーション」を組み合わせる方法をご紹介します。
- オブジェクト選択後、Interaction → Add Link をクリックし遷移先 URL を入力。
- 同パネル内の Add Animation → Rotation を選び、軸 Y、速度 30°/s と設定。
- 「Play on Start」にチェックを入れるとシーンロード時に自動回転し、クリック時にリンクが作動します。
ポイント：コード不要で基本的なインタラクションとアニメーションを実装可能です。
4‑4. 本セクションのまとめ
- マテリアルは PBR に対応し、2 MB 以下のテクスチャ推奨（公式ヘルプ参照）。
- 照明は環境光＋スポットライトで最低構成に抑え、最大 3 個までが目安。
- Interaction パネルを活用すれば、クリックリンクと回転アニメーションの組み合わせが簡単に実装できる。
5. 作品のプレビュー・Web 公開とパフォーマンス最適化ポイント
完成したシーンはプレビューで確認し、URL と QR コードを生成して共有します。最後に初心者が陥りやすいパフォーマンス課題とその対策をまとめます。
5‑1. プレビュー画面での確認手順
右上の Preview ボタンをクリックすると、新タブで WebXR ビューアが起動し、デスクトップ・モバイル・VR の各デバイス向け表示をシミュレートできます。
- デバイス切替アイコンから「Desktop」「Mobile」「VR」へ変更し、見え方の違いを比較。
- エラーや過大なリソースは赤い警告アイコンで通知されるため、早期に対処可能です。
ポイント：プレビューで問題点を把握すれば、修正サイクルが短縮されます。
5‑2. URL と QR コード取得による Web 公開方法
公開はダッシュボード右上の Publish ボタン一つで完了します。公開設定は「Public」か「Private」を選択でき、生成された固定 URL と QR コードをそのまま共有できます。
- Publish → 「Public」または「Private」設定を選択。
- 「Generate URL」ボタンをクリックし、表示されたリンクをコピー。
- 同時にダウンロード可能な QR コード画像を取得し、紙媒体や SNS で配布。
ポイント：リンクとコードだけで、誰でもブラウザから展示ブースへアクセスできます。
5‑3. 初心者が陥りやすいパフォーマンス問題と軽量化のコツ
Web 上でのロード時間は訪問者離脱率に直結します。STYLY の公式ガイド（2024 年 5 月版）では、以下の指標を推奨しています。
| 項目 | 推奨上限* | 軽量化策 |
|---|---|---|
| ポリゴン数 | 50,000 以内 | 不要なサブディビジョン削除、LOD（レベルオブ詳細）活用 |
| テクスチャサイズ | 2 MB 以下（PNG/JPG） | 圧縮ツールで 1024×1024 にリサイズ |
| ライト数 | 3 個以内 | 環境光で全体照明、スポットライトは最低限に |
*上記数値は公式ヘルプの「パフォーマンス最適化」ページ（2024‑05）を参照していますが、プロジェクト規模やターゲットデバイスによって調整が必要です。
追加テクニック
- インスタンス化：同一オブジェクトを複数配置する場合は「Instance」機能で描画コスト削減。
- 非表示設定：初期表示しないオブジェクトは Visibility をオフにし、必要時にオン。
- アセット圧縮：GLTF の
draco圧縮や JPEG 形式のテクスチャを活用すると帯域幅が削減されます。
5‑4. 本セクションのまとめ
- プレビュー機能でデバイス別表示とエラーチェックが可能。
- Publish ボタン一つで URL と QR コードが生成され、即座に共有できる。
- パフォーマンスは ポリゴン数・テクスチャサイズ・ライト数 を公式推奨上限内に抑えることが鍵。インスタンス化や非表示設定などの最適化手法を併用すれば、快適な Web 体験を提供できる。
全体まとめ
- STYLY の強みは「ブラウザだけでコード不要に VR/AR コンテンツを作成」できる点です。
- アカウント取得からダッシュボード操作までの流れはシンプルで、Google 連携によるセキュリティ強化が推奨されます（公式に 2FA は未提供）。
- 3D アセットの取り込みとトランスフォームは GLTF/OBJ が標準フォーマット。サイズ上限は公式ヘルプで提示された目安を参考にしてください。
- マテリアル・ライト・アニメーションは UI が直感的で、2 MB 以下のテクスチャやライト数 3 個以内といった推奨値を守れば品質と負荷のバランスが取れます。
- 公開とパフォーマンス最適化ではプレビューでデバイス別確認し、URL/QR コードで手軽に共有。公式ガイドラインに沿ったポリゴン・テクスチャ・ライト管理が快適な体験を実現します。
このガイドを参考に、まずは簡単な仮想ショールームや教育ツアーを作成し、STYLY の可能性を体感してみてください。
注記：本記事中の数値・推奨設定は 2024 年 5 月時点の STYLY 公式ヘルプ（https://help.styly.com) を元にしています。サービス内容は随時更新されるため、最新情報は必ず公式サイトで確認してください。