ヤフオク!にARメジャーを実装した話

  • このエントリーをはてなブックマークに追加
Yahoo! JAPAN Tech Advent Calendar 2018の5日目の記事です。一覧はこちら

こんにちは。ヤフオク!でiOSとAndroidの開発をしている松田です。

今回は、ヤフオク!アプリの配送方法選択を簡単にする"ARメジャー"機能を紹介していきたいと思います。

よろしくお願いします。

ARメジャーとは

出品者が配送方法を選択する時に、最適なサイズをカメラでかざして簡単に選択できるようになる機能です。

出品フォームから配送方法選択画面の右上の"カメラで選択"から利用可能です(*iOS12以上かつiPhone6s以降のAR対応端末のみ)。

この機能には、"ボックス表示モード"と"サイズ測定モード"の2つのモードがあります。

ボックス表示モード

仮想ボックスと見比べるだけ!

動画 操作方法
  1. 仮想ボックスを表示
  2. 出品する商品に仮想ボックスを被せる
  3. はみ出しがないか上下左右から確認
  4. 大きいサイズは、"+"や"ー"で縦横高さを調整
  5. 配送方法の決定

サイズ測定モード

商品をカメラで写すだけ!

動画 操作方法
  1. 商品をカメラの中央に配置
  2. 測定スタート
  3. 中心の○で商品をなぞるように測定
  4. 測定ストップ
  5. 配送方法の決定

ARメジャーで解決したい課題

こんなことありませんか?

  • 配送方法がいろいろあってどれを選べばいいかわからない
  • サイズを測るメジャーが手元にない

出品したいだけなのに、面倒ですよね...
自分もヤフオク!ユーザーとしてなんとかしたいと、毎日考えていました。

そんなある日、サンノゼで開催されたApple社のWWDC 2018に現地参加することになりました。

WWDC 2018の"What's New in ARKit 2"で、こういうデモがありました。

これや!!

その後、ARKit2.0のObject Detectionのサンプルをもとに一日で作ったプロトがこちら

無事、iOS12のDay1対応の案件になりました!!

Object Detection

ARKit2.0では、3Dの物体検出やトラッキングができるようになりました。
ARメジャーでは、Object Detectionの一部である、スキャニング機能を参考にしました。

  1. カメラに写った特徴点を検出
  2. 特徴点の集合から物体を判定
  3. 縦横高さの長さを計測

ARFrameのrawFeaturePointsプロパティーを取得することで特徴点は取得できます。

let features = session.currentFrame?.rawFeaturePoints

物体の判定は以下のフローです。

  1. 焦点から5cm以内の特徴点を抽出
  2. その特徴点から3cm以内に他の特徴点が3点以上あるものを抽出
  3. 物体の中心位置と3辺の長さを計算

詳しくはApple社の"Scanning and Detecting 3D Objects"がサンプルとしてかなり参考になります。

約3週間の爆速開発

開発体制と開発の流れ

今回の案件はプロダクトマネージャー、エンジニア、デザイナーの3人で進めていきました。

開発フロー

  1. 機能やデザインを考案
  2. 実装・デザイン作成(2週間)
  3. ユーザーインタビュー(1週間)
  4. 意匠、特許出願
  5. リリース

ユーザーインタビューについて

今回、かなり重要だったユーザーインタビューについて少し書きたいと思います。

初回のユーザーインタビュー

意図 結果
目的:使えることの確認
人数:約10人
想定:6人くらいは使える
使えたのはたった3人
  • 仮想ボックスが近すぎて真っ白で意味不明
  • 画面下のスクロールでボックスの種類を変えるだけ
  • サイズ測定モードに全員到達せず

えええ...

ユーザー目線で作っていたつもりが、無意識にプロレベルの使い方をしてたみたいです。

開発期間はあと1週間程度、ユーザーインタビューに力を入れ、誰でもそれなりに使える機能を目指す!

改善フロー

  1. ユーザーインタビュー
  2. 課題の抽象化
  3. 優先度付け
  4. 解決案検討
  5. 実装、デザイン作成

3人で毎日2回転1週間、ぶん回しました。

結果

  • 合計40人以上にインタビュー実施
  • 誰でもそれなりに使える(約7割の人が配送方法を正しく選択できた)
  • ユーザーの目線を意識したUIの実現
  • インタラクティブやチュートリアル

UI改善例

改善前

  1. 20秒程度のチュートリアル動画をARメジャー起動時に表示
  2. 商品の底面をタップしてアニメーション表示

"ボックス表示モード"の動画が実は改善前に起動時に表示していたチュートリアルでした。
最初から最後までちゃんと見ましたか? 操作方法は覚えていますか?

  • 仮想ボックスの切り替え
  • 移動・回転
  • サイズ変更

改善後

本当にあったユーザーの操作 改善内容
彼らは動画を少し見た後、
「なるほどね」とつぶやく
ほとんど分かっていないのに...
チュートリアル動画を20秒から5秒にすることで
最低限の使い方を伝える
仮想ボックスを商品にかぶせたくて
スマホと商品をそれぞれ両手で動かしていた
動画直後にDragアニメーションで
仮想ボックスを動かせる事を教えた
誰にも気づかれない回転 Drag移動直後にRotateアニメーションで
仮想ボックスを回転できる事を教えた

仮想ボックスが近すぎて画面が真っ白に
何もできないまま1分間の沈黙...
商品にカメラが近すぎると離れてアニメーションで
箱全体を見えるように
商品の底面をタップしてのアニメーションを見て
画面じゃなくてまさかの商品自体を叩いた
画面Tapがわかりやすいアニメーションに変更

まとめ

  • 1度に表示する情報量が多いと、ユーザーは何も見ない
  • ユーザーは想定した使い方をしてくれない
  • インタビューでは、なぜタップしたか、何を見ていたかを質問して、ユーザーが何をしたいか、何に困っているか理解する
  • AR機能のインタビューはデザインモックだけではなく、実際の動くものを触ってリアルな体験をしてもらう
  • エンジニアこそインタビューすべき
  • つらい意見も受け入れて、向き合う
  • 期間が短くてもギリギリまでやりきる!

最後に

ヤフオク!iOSアプリARメジャー機能を使ってみてください

新しい機能を作るときは特許や意匠も忘れずに!

Yahoo! JAPANでは情報技術を駆使して人々や社会の課題を一緒に解決していける方を募集しています。詳しくは採用情報をご覧ください。

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