Contents
STYLY アプリのダウンロードとアカウント作成
STYLY を利用開始するには、まず公式サイトからアプリ本体を取得し、無料アカウントを作成します。iOS・Android のモバイル端末向けと、ブラウザ上で動作する Web 版の両方が用意されているため、使用環境に合わせた手順を選択してください。
iOS・Android でのインストール手順
ポイント:公式ストアから直接インストールすると、常に最新バージョンと安全な署名が保証されます。
- ダウンロードページへアクセス
- URL: https://styly.cc/ja/download(2024 年 10 月時点で確認済み)
- iOS の場合
- 「iOS ダウンロード」ボタンをタップ → App Store が開き「入手」→「インストール」を選択。Apple ID の認証が必要です。
- Android の場合
- 「Android ダウンロード」ボタンをタップ → Google Play ストアへ遷移し「インストール」を実行。権限の許可画面が表示されたら承諾します。
- インストール完了
- ホーム画面(iOS)またはアプリ一覧(Android)に STYLY のアイコンが追加されます。
動作要件:iOS 13 以降、Android 9(Pie)以降を推奨します。(公式マニュアル参照)
Web 版へのアクセス方法と初回登録
ポイント:プラグイン不要でフル機能が利用できるため、PC 環境でも同等に作業できます。
- ブラウザで https://styly.cc/ja にアクセスし、右上の「ログイン」ボタンをクリック。
- 「メールで新規登録」または「Google / Apple アカウントで続行」のいずれかを選択。
- メールの場合は 名前・メールアドレス・パスワード を入力し、送信された認証リンクをクリックしてアカウント作成を完了します。
初回ログイン時に表示されるウェルカム画面の「デモプロジェクト作成」ボタンを押すと、チュートリアル用の空プロジェクトが自動生成されます。
初回起動と基本 UI の把握
STYLY Studio を立ち上げた直後は、複数のパネルが画面にレイアウトされています。ここでは 主要 UI コンポーネント と、最初に設定しておくべき項目を整理します。
スタートアップ時の設定項目
結論:言語選択とプロジェクト作成だけで、基本的な操作環境は整います。
- アプリ起動後に表示される「言語設定」画面で 「日本語」 を選択します(未選択のままだとメニューが英語表記になります)。
- 「新規プロジェクト作成」ボタンをクリックし、テンプレートから 「空のシーン」 または 「Starter Room」 のいずれかを選びます。
備考:デフォルトの保存先はクラウドです。ローカルへのバックアップ手順は後述します。
ツールパネル・プロパティ・タイムラインの位置と役割
各パネルがどこに配置され、何を担当しているかを把握すれば、作業中に「どこを見れば良いか」が直感的に分かります。
| パネル名 | 画面上の位置 | 主な機能 |
|---|---|---|
| ツールパネル | 左側 | オブジェクトの追加・削除、レイヤー階層表示 |
| プロパティパネル | 右側 | 選択オブジェクトの位置・回転・スケール、マテリアル設定 |
| タイムライン | 下部 | アニメーションキー配置、再生/停止コントロール |
- パネルは「ウィンドウ」メニューから表示/非表示を切り替え可能です。初心者は全て表示した状態で作業すると見落としが減ります。
メイン操作:オブジェクト配置とレイヤー管理
シーン構築の中心になる オブジェクトのトランスフォーム と 階層整理 の具体的な手順を解説します。ここで紹介する操作は、すべてキーボードショートカットでも実行できるため、作業効率が自然に向上します。
オブジェクトの追加・選択
ツールパネルからモデルやプリミティブをシーンへドラッグ&ドロップする感覚で配置できます。
- ツールパネル左上の「+」 → 「3D Object」 → 「Cube」を選択。
- シーン内の任意位置をクリックすると Cube が生成されます。
- オブジェクトがハイライトされたら、
Escキーで選択解除、再度クリックで再選択できます。
複数選択:
Shift+ クリックで追加選択、全選択はCtrl + A(Mac は Cmd + A)。
スケーリング・回転・移動のショートカット
ショートカットを利用するとマウス操作だけに比べて 作業がスムーズになる と多くのユーザーから報告されています。
| 操作 | Windows キー | macOS キー |
|---|---|---|
| 移動 (Translate) | W | W |
| 回転 (Rotate) | E | E |
| スケール (Scale) | R | R |
| コピー | Ctrl + D | Cmd + D |
| 削除 | Delete | Delete |
- 例)
Rキーでスケールモードに切り替え、数値入力欄に「1.5」と入力すると 1.5 倍に拡大できます。
レイヤー(階層)パネルでの整理方法
階層化しないシーンはオブジェクトが増えるほど管理が煩雑になるため、レイヤーパネルを活用した整理 が不可欠です。
- 命名規則:
[カテゴリ]_[名称]_[番号](例:Furniture_Chair_01)で統一すると検索性が向上します。 - ロック機能:完成したオブジェクトはパネル左側の鍵アイコンでロックし、誤操作を防止します。
- 非表示:作業中に不要なレイヤーは目のアイコンで非表示にし、視認性を確保します。
ドラッグ&ドロップ で階層変更が可能です。子オブジェクトを親にまとめると、一括変形や一括削除が容易になります。
素材インポートと公式チュートリアルで実践練習
STYLY は外部の 3D データやテクスチャ画像もシームレスに取り込めます。ここでは GLB / FBX ファイル と 画像テクスチャ のインポート手順、そして公式ライブラリ活用方法を具体例とともに紹介します。
GLB/FBX ファイルのアップロード手順
推奨フォーマットは Web 向けに最適化された GLB ですが、FBX も内部変換で扱えます(サイズ上限 50 MB)。
- ツールパネル右上の 「Asset Library」 → 「Upload」ボタンをクリック。
- アップロード画面に GLB または FBX ファイルをドラッグ&ドロップ、または「ファイル選択」で指定します。
- アップロード完了後、左側パネルにサムネイルが表示されるのでシーンへドラッグします。
注意:インポート時に自動生成されたマテリアルは「Standard」になっています。必要に応じてプロパティパネルで「Unlit」や「Transparent」に切り替えて見た目を調整してください。
画像テクスチャの取り込み方法
- Asset Library の 「Images」 タブから JPEG/PNG を同様にアップロード。
- オブジェクトを選択し、プロパティパネルの 「Material」 → 「Base Color」 に画像をドロップします。
推奨サイズは 2048 × 2048 ピクセル以下です。それ以上は自動リサンプルされ、品質が低下する可能性があります。
Asset Library の検索と活用
公式ライブラリには無料素材が多数登録されており、キーワード検索で瞬時に目的のモデルを取得できます。
- 検索バーに 「chair」 と入力 → 表示された椅子モデルをシーンへ配置し、位置・スケールだけで部屋のレイアウトが完成します。
- 「skybox」や「ground」など環境素材も同様に検索可能で、一括適用できるため作業時間が短縮されます。
- 結果は 「人気順」「新着順」 で並び替えられ、最新のトレンド素材をすぐに試せます。
シーンの保存・公開とエラー対処(将来期待できる機能も併記)
本章では プロジェクトの安全な保存方法、WebAR への公開手順 と、よくあるエラーへの対処法をまとめます。加えて、2026 年時点で公式に発表されている情報はまだ存在しないため、「将来的に期待できる機能」として予測的に記載しています。
プロジェクトの自動保存とバージョン管理
STYLY はクラウド上でリアルタイム自動保存が行われ、過去の履歴から任意のバージョンへロールバックできます。
- 画面右上の 「Save」 アイコンが常に緑色なら保存中です。
- メニューの 「History」 タブを開くと、コミット日時の一覧が表示されます。任意の履歴を選択し 「Restore」 で復元できます。
バックアップ方法(ローカル / クラウド)
| 方法 | 手順 | メリット |
|---|---|---|
| ローカルエクスポート | 「File」→「Export Project」→ZIP ダウンロード | オフライン保存、外部ストレージへ保管可能 |
| クラウド同期 | アカウントにログインした状態で自動保存 | 常に最新状態を共有、復旧が容易 |
大規模プロジェクトは定期的にローカルエクスポートし、Git などのバージョン管理システムと併用すると安全です。
公開設定・リンク取得・SNS 共有手順
- 完成したシーンを選択し 「Publish」 ボタンをクリック。
- ポップアップで 「WebAR ビューア」 と公開範囲(公開 / 限定)を選択。
- 「Generate Link」 を押すと短縮 URL が生成され、Copy でクリップボードにコピーできます。
- コピーしたリンクを Twitter・Instagram 等の SNS に貼り付けてシェアします。
WebAR ビューアはデバイスごとの最適化が自動で行われますが、古いブラウザ(例:iOS Safari のプライベートモード)では表示できない場合があります。
よくあるエラー例と対処法
| エラー | 主な原因 | 推奨対策 |
|---|---|---|
| ファイルサイズ上限超過(50 MB) | 大容量 GLB/FBX をインポートした | 3D ソフトでポリゴン数削減、テクスチャは WebP に圧縮 |
| WebAR が起動しない | iOS Safari のプライベートモード使用 | 通常モードに切替えるか Chrome for Android を利用 |
| マーカー未設定で AR が表示されない | AR マーカー画像のアップロード忘れ | 「AR Settings」→「Marker Image」に PNG 形式のマーカーを指定 |
| レイヤーがロックされたまま編集できない | ロック状態解除漏れ | レイヤーパネル左側の鍵アイコンをクリックして解除 |
将来的に期待される機能(2026 年版予測)
以下は執筆時点で公式に発表されていない情報です。STYLY のロードマップやコミュニティ噂をもとに 将来実装が検討されている可能性 がある機能として記載しています。実際のリリース日は未定です。
- AR マーカー連携の拡張:独自画像だけでなく QR コードや NFC タグからも XR コンテンツを起動できるインタフェースが追加される見込み。
- XR テンプレートの増加:2026 年版では「AR Showcase」や「VR Gallery」に加え、「Mixed Reality Stage」など、シーン構築に必要なカメラ・照明設定が事前に組み込まれたテンプレートが提供される可能性があります。
- マルチデバイスプレビューの高度化:右上の「Device Preview」から CPU / GPU 使用率やフレームレートをリアルタイムで確認でき、実機テスト前にパフォーマンス最適化が行えるようになると期待されています。
※これらは 予測情報 であり、正式な発表があるまで確定情報ではありません。
公式学習リソースとコミュニティへの参加方法
STYLY のスキルを体系的に伸ばすための公式マニュアル・チュートリアル・コミュニティ情報をまとめました。リンクはすべて 2024 年 10 月時点で確認済み のものです。
- マニュアル(日本語)
- 基本操作ガイド:https://styly.cc/ja/manual/
-
シーン作成チュートリアル:https://styly.cc/ja/manual/scene-create-tutorial/
-
スターターガイド(初心者向け)
-
公式 Discord サーバー(招待リンクはマニュアル内に掲載)
-
リアルタイムで質問や素材共有が可能です。
-
YouTube チャンネル
-
ハンズオン動画が毎週更新されており、実践的なテクニックを映像で学べます。
-
ブログ・最新情報
- STYLY の公式ブログやニュースリリースは https://styly.cc/ja/news/ からチェックできます。
まとめ
- 公式ページから安全にダウンロードし、メールまたは SNS アカウントで無料アカウントを作成。
- 初回起動時の言語設定とテンプレート選択だけで基本環境が整う。
- ツール・プロパティ・タイムラインの位置と役割を把握し、ショートカットで操作効率を上げる。
- 素材は Asset Library から GLB/FBX や画像テクスチャをインポートし、検索機能で迅速に取得できる。
- プロジェクトはクラウド自動保存とローカルエクスポートで安全にバックアップし、WebAR として簡単に公開可能。
- エラーが出たら原因別対処法を参照し、将来的に追加されるかもしれない機能も視野に入れておくと、長期的に活用しやすいです。
本記事を手順のチェックリストとして活用すれば、STYLY のインストールから XR コンテンツ公開までスムーズに進められるはずです。ぜひ実際に操作してみて、自分だけのバーチャル空間を作り上げてください。