WebARのアクセシビリティ対応｜スマホ非対応環境でのフォールバック設計

WebARを公開したとき、すべてのユーザーがARを体験できるわけではありません。古いブラウザ、非対応デバイス、カメラへのアクセスを拒否するユーザー——こうした「ARが動かないケース」への対応なしにWebARをリリースすると、多くのユーザーを置き去りにしてしまいます。本記事では、WebARのフォールバック設計と実装方法を解説します。

WebARの非対応環境パターン

パターン	具体的な状況	発生頻度目安
非対応ブラウザ	Internet Explorer、古いSafari（iOS 11以前）	全アクセスの5〜15%
非対応OS・デバイス	Android 7以前、iOS 11以前の端末	全アクセスの3〜8%
カメラ権限の拒否・未許可	プライバシー設定でカメラへのアクセスをブロック	全アクセスの10〜25%
PCからのアクセス	スマートフォン以外のデスクトップ・ノートPC	全アクセスの20〜40%

feature detectionの実装

// WebARサポートチェック関数
async function checkARSupport() {
  const ua = navigator.userAgent;
  const isIOS = /iPad|iPhone|iPod/.test(ua);
  const isAndroid = /Android/.test(ua);

  // デスクトップ判定
  if (!isIOS && !isAndroid) {
    return { supported: false, reason: 'desktop' };
  }

  // カメラAPIの存在確認
  if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
    return { supported: false, reason: 'no-camera-api' };
  }

  // WebXR対応確認（Android Chrome向け）
  if ('xr' in navigator) {
    try {
      const supported = await navigator.xr.isSessionSupported('immersive-ar');
      if (supported) return { supported: true, mode: 'webxr' };
    } catch(e) {}
  }

  // iOS AR Quick Look確認
  if (isIOS) {
    const a = document.createElement('a');
    if (a.relList && a.relList.supports && a.relList.supports('ar')) {
      return { supported: true, mode: 'quicklook' };
    }
  }

  // WebAR（カメラ使用）の基本サポート確認
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
    stream.getTracks().forEach(t => t.stop());
    return { supported: true, mode: 'webar' };
  } catch(e) {
    return { supported: false, reason: 'camera-denied' };
  }
}

// 使用例
checkARSupport().then(result => {
  if (result.supported) {
    showARExperience(result.mode);
  } else {
    showFallback(result.reason);
  }
});

フォールバックの3つの選択肢

① 3Dモデルインタラクティブビューア

ARは使えないが、3Dモデルをブラウザ上で360度回転・拡大できるビューアを代替表示します。model-viewerはARに非対応な環境でも自動的に3Dビューアとして動作するため、フォールバックとして最も手軽です。

<!-- ar属性を外すと通常の3Dビューアとして動作 -->
<model-viewer
  id="product-viewer"
  src="product.glb"
  alt="商品3Dモデル"
  camera-controls
  auto-rotate
  style="width: 100%; height: 400px;">
</model-viewer>

<script>
const viewer = document.getElementById('product-viewer');
checkARSupport().then(result => {
  if (result.supported) {
    viewer.setAttribute('ar', '');
    viewer.setAttribute('ar-modes', 'webxr scene-viewer quick-look');
  }
});
</script>

② 360度動画・プリレンダリング動画

ARで体験できるコンテンツをあらかじめ録画した動画を代替表示します。「ARで体験した場合のイメージ動画」として表示することで、ARが使えないユーザーにも内容を伝えられます。

③ 高品質な静止画 + 情報テキスト

最もシンプルな代替表示です。「お使いの環境ではARが利用できません。下記画像でご確認ください」などの案内文とともに高品質な画像を表示します。実装コストが低く、確実に機能するため、フォールバックの基本として必ず用意すべき選択肢です。

ユーザビリティを損なわない設計方法

• 問題：エラーページが不親切——改善：代替コンテンツを同一ページに表示し、ユーザーが「何もできない」状態を避ける
• 問題：権限拒否後の案内がない——改善：「カメラへのアクセスが必要です」の案内と再試行ボタンを表示
• 問題：PC表示がデザイン崩れ——改善：PC向けのレイアウトを別途用意するか、レスポンシブ対応の3Dビューアを表示する

テスト方法

• デバイステスト——実機のiPhone/Android各バージョンでの動作確認（BrowserStack等が有効）
• 権限拒否テスト——カメラ許可ダイアログで「許可しない」を選択し、フォールバックが正常に表示されるか確認
• PCテスト——Chrome DevToolsのUA切り替えでデスクトップ表示をシミュレート
• 低速通信テスト——Chrome DevToolsのネットワーク速度制限（3G相当）でフォールバックの読み込みを確認

よくある質問