【体験レポート】Arrival.Space|3Dで“伝わる”ランディングページを簡単に

  • このエントリーをはてなブックマークに追加
  • LINEで送る

メタバースやXRといった言葉が当たり前になりつつある今、ウェブサイトも次のステージへ進化しています。単なる情報提供の場ではなく、ユーザーが「体験」する空間へ変化させることで、自社サイトの体験価値向上へと導きます。

今回は、誰でも簡単に没入感のある3D空間を作成できるサービス「Arrival.Space」を使ってみた感想を、実際の操作画面とともに詳しく解説します。

Arrival.Spaceとは

Arrival.Spaceは、一言で言えば「3Dコンテンツが誰でも簡単に発信できる“ランディングスペース”」です。

公式サイトではこう紹介されています

Your landing space to the immersive web.

  • Claim your own Arrival.Space
  • Edit its colors & contents
  • Share your Arrival.Space, fully packed with 3D Voicey’s, videos, photos and links
  • Meet up with friends, clients & colleagues

テキストと画像だけでなく、3Dアバターやボイスメッセージを配置した、没入感のあるページが数分で作成できます。
また、チャットルームにもなりますので、空間で趣味の合う人と交流するといった使い方も可能です。

使ってみた感想・メリット

  1. とにかく手軽!なのに没入感がある
    テンプレートから作成し、コンテンツをドラッグ&ドロップで編集するだけ。ノーコードで、まるでメタバースのような空間が完成します。Web3的な操作感ですが、ブラウザだけで完結している点も好印象です。
  2.  3D Voicey(アバター)で、まるで自分が案内しているような感覚
    アバターが喋ってくれる「Voicey」機能は、単なる装飾ではなく“伝える”体験に大きな効果があります。ナレーション付きプレゼンのように、
    自社サービスをインタラクティブに紹介できます。
  3. URL1本で簡単に共有可能
    完成したページはワンクリックでURLが発行され、X(旧Twitter)やLINE、メールでもすぐに共有できます。展示会のQRコードや営業用資料と組み合わせれば、デジタルブースとしての運用も可能です。

おすすめの使い方

  • 製品紹介ページとして
    3D Voicey+動画+リンクで、1ページで完結する訴求が可能。
  • 採用広報ツールとして
    社員のVoiceyが喋る「社内見学空間」で、企業カルチャーを発信。
  • イベント告知スペースとして
    動画やSNSリンクを埋め込み、共有型のイベントポータルに。

今後のArrival.Spaceに期待したいこと

現状は海外向けのUIが中心ですが、今後日本語対応や企業向けのカスタマイズオプションが増えることで、より導入しやすくなると感じました。

また、外部サービスとの連携(例:Google CalendarやShopifyなど)も強化されると、より一層“使える”ツールになる予感がします。

Arrival.Spaceは「体験を届ける」新しいWebの入り口

Arrival.Spaceは、「静的なWeb」から「動的なWeb」へと一歩踏み出したい企業にとって、最適なサービスだと感じました。

今後も私たちのWebコミュニケーションにおける可能性を広げるために、Arrival.Spaceの活用を検討していきたいと思います。

Arrival.Spaceの作り方

では実際の作成手順をご説明いたします。

はじめる前の注意点

最高のパフォーマンスを得るには、Google Chrome ブラウザ、または Edge、Opera などの Chromium ベースのブラウザを使用してください。

無料で行える範囲で導入から3DGSや3Dデータのインポート方法をご紹介していきます。

アカウントの作成

Arrival.Space - claim. edit. share.最初にArrival Spaceにアクセスしましょう。
Arrival.Space – claim. edit. share.

英語表記ですがChromeブラウザから日本語表示にもできるので、お好みで切り替えてお使いください。

 

サインアップ画像

アカウントを作成していない場合は[ Sign UP Free ]ボタンをクリックしアカウントを作成してください。

 

スペースとHub

アカウント作成後、真っ白な部屋の空間が現れます。空間自体を「 スペース 」、白い部屋の人工物を「 Hub 」と呼称されています。

キャラクターの操作

キーボードの対応したキーとマウスを使用し移動が空間を移動する事ができます。試しに対応したキーを使用し動作の確認をしてみると挙動を理解できるでしょう。

 

インターフェイス

インターフェイス図にある機能を今回中心に使用します。
①編集アイコン:スペースの編集で使用します。
②バーガー:ログアウトといった環境設定の機能がこちらです。
③アクションボタン:3Dモデルの追加で使用します。

スペース編集UI

編集アイコンを押すと以下の画像のようなスペース編集UIが表示されます。今回使用する部分は赤の枠線を使用します。

スペース編集UI

①タイトル:スペースのタイトル名を編集できます。Hubの天井側に表示されます。

②説明:スペースについて説明文を記載できます。Hubの後ろ側の壁に表示されます。

③センターアセット:スペースに表示する対応した3Dデータのインポートなどを行う場所です。

④スプラット:明るさやコントラストを設定できます。

⑤エディットスプラット:のをSuperSplatというツールを起動しスプラットを編集できます。

⑥衝突:衝突判定を行うデータを自動生成できます。

⑦プライバシー:作成したスペースの公開範囲設定ができます。

⑧複製:現在のスペースを複製できます。

⑨削除:現在のスペースを削除できます。

⑩一般:①~⑨までのメニュー表示が一般になります。

⑪ハブ:クリックするとハブの設定ができます。

⑫プロ:クリックするとプロの設定ができます。

⑬共有:クリックすると共有の設定を行えます。

詳細は公式のドキュメントを参照してください。(スペースをカスタマイズ

Center Asset(センターアセット)

上記で紹介したスペース編集UIにあるCenter Asset(センターアセット)のアップロードボタン(画像の赤枠のボタン)をクリックしてください。
センターアセット

対応しているファイルフォーマットは以下の内容になります。

 

ガウススプラット PLY, SPZ, SPLAT
メッシュベース GLB、GLTF、FBX

※確認できているファイルフォーマットはPLYとGLBになります。

アップロードボタンをクリックするとダイアログが表示されます。用意しているPLYを選択し開くボタンを押してください。

アップロード画面

アップロード確認ダイアログが表示されます。そのままContinueボタンをクリックしアップロードしてください。

 

 

 

アップロード中を表すダイアログが表示されます。ダイアログが非表示になったとき、3DGSデータが表示されます。

 

 

問題なく表示されていればこのように3Dガウシアンスプラッティングのデータを配置できます。

スプラット表示

アップロードしたデータの向きが異なっている場合は、次の説明によるスプラットの調整を行ってください。または詳細に行う場合はスペース編集UIにあるエディットスプラットからSuperSplatというツールが起動します。
スプラットの向きを変更などを行ってください。不必要な点群の削除やクロップも可能です。

スプラットの調整

ギズモボタンスプラット調整はスペース編集UIを起動した状態でCenter Asset(センターアセット)の画像の赤枠ボタンの「ギズモボタン」をクリックしてください。

ギズモボタンを押すと以下のようなUIが表示されます。Move(移動)やRotate(回転)、Scale(拡縮)、Crop(クロップ)と機能があり、数値入力または画像右のマニュピレーターでの操作が可能になっています。

マニュピレーターでの操作

アクションボタン

アクションボタンから3Dモデルをインポート可能です。スペースにGLBや3DGSを配置し小物を3Dモデルとして配置することもできます。下の画像に赤枠で囲ったボタンがアクションボタンになります。

アクションボタン

GLBだと衝突判定を持っているため、インポートした3DGSにあたり判定として設定する事も可能です。

ダイアログボックス

アクションボタンをクリックすると左画像のダイアログが表示されます。

Contentをクリックします。以下のダイアログが表示され、3Dデータ(GLBやPLY)を選択し開いてください。

Contentをクリックします。
以下のダイアログが表示され、3Dデータ(GLBやPLY)を選択し開いてください。

アップロードのダイアログが表示されます。

 

 

 

アップロードが終わり任意の場所をクリックするとその場所に3Dモデルアイコンが表示されます。

3Dモデルの位置や回転、スケールを設定できるダイアログと
直感操作を可能にする3Dモデルに3軸などのマニュピレーターが表示されます。モデルを任意の場所に設定してください。

位置調整

さいごに

基本的な部分は3Dデータのインポートとデータの位置調整のみになります。企業用としての活用であれば、様々な設定を行えますのでマニュアルをにそって設定後、公開することができます。

まとめ

近年、3D Gaussian Splattingのデータは、スマートフォンで素材を撮影し比較的手軽に3D化するサービスも登場し始めています。

しかし、データを用意しArrival.Spaceでの構築も昔のサービスとくらべ大変簡単になり構築しやすくなりましたが、まだ敷居が高い部分が多くあります。

また、広大な空間を対象とする場合にはドローンの使用が必要になることが多く、人物などコンパクトな対象でも、被写体が動いてしまうことによる撮影の難しさがあります。

そんな中、当社では、ドローンの操縦技術者による撮影のほか、
小物、人物の撮影に適した専用スタジオも整っております。

ぜひお気軽にご相談ください!
PoC(実証実験)、関連した企画・開発・現地導入支援までトータルサポートしています。

>>お問い合わせはこちら<<