目次
  1. どんなアプリか
  2. 「画像の合成」ではなく「3D空間への配置」
  3. スマホが部屋を理解する3つの技術
  4. 家具の「画像」はどう用意するのか
  5. 「本当に置いてある」ように見せる技術
  6. iOSとAndroidでどう作るか
  7. 実際の開発で気をつけたこと
  8. よくある質問(FAQ)
  9. まとめ

どんなアプリか

「このソファ、うちのリビングに置けるかな? 部屋に合うかな?」——家具選びの一番の不安は、買う前に部屋に置いた姿を確かめられないことです。

AR(拡張現実)家具配置アプリは、この不安を解消します。スマホのカメラで部屋を映し、画面をタップすると、実寸大の家具が画面の中の床に現れます。スマホを持って近づけば家具は大きく見え、回り込めば側面や背面が見える。まるで本当にそこへ置いたかのように確認できます。IKEAが先駆けた「IKEA Place」(2017年公開。現在はAR機能が本体アプリに統合されています)や、ニトリの「NITORI AR 家具試し置き」(アプリ不要のWeb AR)など、家具・インテリア業界で広く使われるようになった仕組みです。

弊社ではこのタイプのアプリをiOS(iPhone/iPad)とAndroidの両方で開発しています。本記事では、その中身を「仕組み」と「家具データの用意のしかた」の2つの面から、専門用語をかみくだいて解説します。

「画像の合成」ではなく「3D空間への配置」

よくある誤解から片づけましょう。このアプリは家具の写真をカメラ映像に貼り付けているわけではありません

もし写真を貼り付けているだけなら、スマホを動かした瞬間に破綻します。近づいても家具の大きさが変わらず、回り込んでも同じ面しか見えず、「その場に置いてある」ようにはまったく見えません。

実際に行われているのは、次のような処理です。

1. スマホが、カメラ映像とモーションセンサーから
   「自分が部屋のどこにいて、どちらを向いているか」を毎瞬計算する

2. 映像の中から「床」や「壁」を平面として認識する

3. ユーザーがタップした位置に対応する床の上の座標を計算し、
   そこに家具の「3Dモデル」を仮想的に固定する

4. 以降、スマホが動くたびに「その位置に置いた家具は
   今のカメラからどう見えるか」を毎フレーム描画し直す

つまりアプリの中には「現実の部屋と重なった、目に見えない3D空間」があり、家具はその空間の座標に置かれています。だからこそ、近づけば大きく見え、回り込めば背面が見えるのです。

スマホが部屋の床を平面として認識し、3D空間上にソファの3Dモデルを配置する仕組みの概念図
カメラ映像から空間を認識し、見えない3D空間に家具を配置している

この「空間を理解して仮想の物体を重ねる」基盤技術を、iOSではARKit、AndroidではARCoreというプラットフォーム標準のフレームワークが提供しています。開発者はこれらの上にアプリを組み立てます。

スマホが部屋を理解する3つの技術

① 自己位置推定(トラッキング)

スマホは、カメラ映像の中の特徴点(模様の角、木目、床の継ぎ目など、映像として追いかけやすい点)の動きと、加速度センサー・ジャイロセンサーの値を組み合わせて、「自分がどれだけ動き、どちらを向いたか」をリアルタイムに計算し続けます。Appleはこの技術を視覚慣性オドメトリ(visual-inertial odometry)、GoogleはSLAM(自己位置推定と環境地図作成の同時実行)と説明していますが、「カメラ映像とモーションセンサーの併用で自分の位置を把握する」という考え方は共通です。

② 平面検出

特徴点が同じ高さに集まっていれば「床」や「テーブル」、同じ縦の面に沿って並んでいれば「壁」の可能性が高い。ARKit/ARCoreはこうして水平面や垂直面を検出し、「ここに物を置ける」領域としてアプリに教えてくれます。家具配置アプリで最初に「床を映してください」と案内されるのは、この平面検出を走らせるためです。

③ レイキャストとアンカー

ユーザーが画面をタップしたら、カメラの位置からタップした画素を通る方向へ仮想の光線(レイ)を飛ばし、検出済みの床平面と交わる点を求めます。これで「画面上のタップ位置」が「部屋の床の上の3D座標」に変換されます。

その座標にはアンカー(錨)と呼ばれる目印を打ち込みます。家具の3DモデルはこのアンカーにひもづけられるためAR空間の中で位置が固定され、スマホがどう動いても「その場に置かれたまま」に見えるのです。

家具の「画像」はどう用意するのか

ここが本記事のもう一つの主題です。結論から言うと、用意するのは画像(写真)ではなく「実寸大の3Dモデル」です。前章のとおり家具は3D空間に置かれるので、あらゆる角度から見られるデータ=3Dモデルが必要になります。

3Dモデルを用意する4つの方法

方法概要向いているケース
① 3DCGモデリングBlender・Maya等のツールで、写真や図面を見ながら人手でモデルを作る品質を作り込みたい主力商品。布・革など素材感の表現も調整できる
② フォトグラメトリ実物をあらゆる角度から数十〜数百枚撮影し、ソフトが自動で3Dモデルを復元する実物が手元にあり、点数が多い場合。Appleは写真から3Dモデルを作るObject Capture APIを提供
③ 3DスキャンLiDARスキャナ等で実物の形状を直接計測する大型・複雑な形状。フォトグラメトリと併用されることも多い
④ CAD/設計データからの変換メーカーが製造用に持っている3D CADデータをAR用に軽量化・変換する家具メーカー自身が発注元の場合。寸法が正確という大きな利点
実物の椅子を多方向から撮影し、写真群から3Dモデルを復元するフォトグラメトリの概念図
実物の椅子を多方向から撮影して3Dモデル化するフォトグラメトリのイメージ

フォーマットは2系統: USDZとglTF

作った3DモデルはAR用フォーマットに書き出します。事実上の標準は2つあります。

  • USDZ — Appleが採用するフォーマット。iOSではUSDZファイルとWebページへのリンク設置だけで、専用アプリなしでもSafariから「AR Quick Look」による実物大AR表示ができます(iOS 12以降)
  • glTF / GLB — Khronos Groupが策定したオープン標準。Androidエコシステムにおける事実上の標準で、GoogleのScene ViewerもglTF 2.0/GLB形式に対応しています

AppleがglTF等をUSDZへ変換するツール(Reality Converter)を提供しているため、glTFを起点に両フォーマットを揃えやすくなっています。弊社のiOS/Android両対応案件でも、glTFでマスターデータを作り、USDZへ変換して両方を配信する構成を採っています。

「実寸大」の正体は、モデルの単位

「なぜ画面の家具が実物と同じ大きさに見えるのか」——種明かしをすると、3Dモデルを実寸(メートル単位)で作ってあるからです。glTFは仕様で「1単位=1メートル」と決まっています。幅1.8mのソファは、モデル上でも幅1.8。ARKit/ARCoreが現実空間をメートル単位で把握しているので、実寸で作られたモデルを置けば自動的に実寸大に見えます。逆に、ここで単位を間違えると「巨大なソファ」「ミニチュアのソファ」が出現します(後述のとおり、実際にやりがちなミスです)。

ARで快適に動くための軽量化

3Dモデルは細かく作るほどリアルになりますが、スマホでリアルタイム描画するには軽さも必要です。GoogleはScene Viewer向けモデルの推奨仕様としてモデルサイズ10MB・三角形数10万以下(理想は3〜5万)・テクスチャ最大2048×2048を公開しており、AppleもAR Quick Lookについて約10万ポリゴン・2K解像度のPBRテクスチャ1セットという目安を示しています(WWDC 2018)。製造用CADデータや高精細スキャンをそのまま使うのではなく、見た目を保ちながらポリゴン数を落とす軽量化(リトポロジー・デシメーション)を挟むのが定石です。

「本当に置いてある」ように見せる技術

3Dモデルをただ表示するだけでは、まだ「浮いて」見えます。実在感を出すために、いくつかの技術を重ねます。

  • 光源推定 — ARKit/ARCoreはカメラ映像から部屋の明るさや色味を推定します。夕方のオレンジ色の部屋ではソファもややオレンジに照らされて表示され、違和感が減ります
  • 接地影 — 家具の下に影を落とすと、「床に接している」感覚が一気に増します。影のない家具は浮いて見えます
  • PBRテクスチャ — 物理ベースレンダリング用の質感データ(色・粗さ・金属感・凹凸)を持たせることで、布は布らしく、金属脚は金属らしく光を反射します
  • オクルージョン — 「家具の手前に実物のテーブルがあるなら、家具はその後ろに隠れて見えるべき」という前後関係の表現です。LiDARセンサー搭載のiPhone/iPadでは部屋の形状を直接計測して実現でき、AndroidではARCoreのDepth APIが単眼カメラからの深度推定で近い表現を提供します(対応は端末によります)

iOSとAndroidでどう作るか

開発の選択肢は大きく3つあります。

方式概要向いているケース
ネイティブ開発iOSはARKit+RealityKit、AndroidはARCoreで個別に開発OSの新機能(LiDAR等)を最大限使いたい場合
Unity(AR Foundation)ARKit/ARCoreの差を共通APIで吸収し、1つのコードで両OS向けにビルド両OS対応を効率よく進めたい場合。弊社もこの構成を採用することが多い
アプリを作らない選択肢USDZ/glTFファイルを用意すればAR Quick Look(iOS)とScene Viewer(Android)でWebサイトからAR表示が可能まず小さく試したい場合。ECサイトへの導入はここから始めるのが低コスト

意外に知られていないのが3つ目で、「AR表示だけならアプリ開発なしでも始められる」のは検討初期の重要な選択肢です。一方、家具の色・サイズ違いの切り替え、複数配置、保存・共有といった体験を作り込むなら、アプリとしての開発が必要になります。

実際の開発で気をつけたこと

  1. 真っ白な壁・無地の床は苦手 — トラッキングは映像の特徴点に頼るため、模様のない面では平面検出に時間がかかります。「スマホを少し動かしながら床を映してください」という誘導UIが実用上とても重要です
  2. 暗い部屋で精度が落ちる — カメラ映像が頼りなので、照度が低いと特徴点が取れません。夜の部屋で使われることも多い家具アプリでは、明るさ不足を検知して案内する作りにしました
  3. 単位・原点のミスは事故になる — 3Dモデルの単位設定を間違えると家具が巨大化・極小化します。モデル入稿時に寸法チェックを自動化して防ぎました
  4. モデルの容量と読み込み時間 — 高精細なモデルは数十MBになることもあり、通信環境によっては「タップしたのに家具が出ない」体験になります。サムネイル用の軽量モデルと高精細モデルの2段階配信が有効でした
  5. 対応端末の確認 — ARCoreはGoogleが公開する対応端末リストに載っている端末でしか動きません。Android案件では「想定ユーザーの端末が対応しているか」を最初に確認すべきです

よくある質問(FAQ)

Q. 家具の写真が1枚あれば、ARで表示できますか?

できません。ARでは家具をあらゆる角度から見られるため、3Dモデルが必要です。実物があれば多方向から撮影してフォトグラメトリで作る方法があり、写真1枚しかない場合はモデラーによる3DCG制作になります。

Q. なぜ実物と同じ大きさで表示できるのですか?

3Dモデルを実寸(メートル単位)で作ってあるからです。ARKit/ARCoreが部屋をメートル単位で認識しているため、実寸のモデルを置くと自動的に実物大で表示されます。

Q. どんなスマホでも動きますか?

ARKit・ARCoreそれぞれに対応端末の条件があります。特にAndroidはGoogleが認定した端末のみが対象です。またオクルージョンなど一部の表現は、LiDAR搭載機種など更に条件が絞られます。

Q. 自社の商品をARで見せたいのですが、何から始めればよいですか?

まず商品1点の3Dモデル(USDZ/glTF)を作り、アプリなしのAR Quick Look / Scene ViewerでWebサイトに載せて反応を見る方法が低コストです。手応えがあれば、配置の保存や色違い切り替えなどを備えたアプリ開発に進むのがおすすめです。

まとめ

この記事のまとめ

  • AR家具配置は「写真の合成」ではなく、空間認識した部屋への「3Dモデルの配置」
  • 仕組みの核は、自己位置推定(VIO/SLAM)・平面検出・レイキャストとアンカー
  • 用意するのは画像ではなく実寸の3Dモデル。作り方はモデリング/フォトグラメトリ/3Dスキャン/CAD変換の4系統
  • フォーマットはiOS=USDZ、Android=glTF/GLBの2系統。実寸表示の正体はメートル単位のモデリング
  • 光源推定・接地影・PBR・オクルージョンの積み重ねが実在感を作る
  • AR表示だけならアプリなし(AR Quick Look / Scene Viewer)でも始められる

テクノスフィアは、スマホアプリ開発と画像認識・3D技術の両方を自社で手がけています。「自社の商品をARで見せたい」「まず1点だけ試したい」という段階からご相談いただけます。

▶ スマホアプリ開発サービスを見る | 相談する