新技術を使った次世代の商品の見せ方 ～ヤフオク!のマルチビュー機能～ #yjtc
2.3K Views
February 02, 22
スライド概要
2021年1月にヤフオク!アプリに商品を多角的に撮影／閲覧できる機能「マルチビュー」が導入されました。ヤフオク!にマルチビュー機能が追加された理由やマルチビュー機能を実現する多視点技術についてお話しします。
Yahoo! JAPAN Tech Conference 2022は2022年2月3日、4日に開催しました。
https://techconference.yahoo.co.jp/2022/
アーカイブ動画はこちらからご覧ください。
https://youtu.be/4Fi9cb0x6LU
2023年10月からSpeaker Deckに移行しました。最新情報はこちらをご覧ください。 https://speakerdeck.com/lycorptech_jp
関連スライド
各ページのテキスト
新技術を使った次世代の商品の⾒せ⽅ 〜 ヤフオク!のマルチビュー機能 〜 ヤフオク!統括本部 プロダクション1本部 アプリ開発部 CTO室 アプリ統括部 多視点カメラ ©2022 Yahoo Japan Corporation All rights reserved. ⻄ 紗記⼦ 加藤 寿⼈
このセッションについて 新技術を利⽤した次世代の商品の⾒せ⽅を⽬指し ヤフオク!が「マルチビュー」という機能で実現したかったこと、 それを実現する技術についてご紹介します。 ©2022 Yahoo Japan Corporation All rights reserved.
加藤 寿人 ヤフオク!統括本部プロダクション1本部アプリ開発部 ヤフオク!アプリの企画チームリーダー 兼務でプロダクト品質推進室、ディレクション室 趣味は…テニスと腸活 好きな愛読書は…2040年の未来予測 ©2022 Yahoo Japan Corporation All rights reserved.
アジェンダ 1. ヤフオク!のマルチビュー機能のご紹介 2. ヤフオク!がマルチビュー機能を導⼊した理由 ©2022 Yahoo Japan Corporation All rights reserved.
アジェンダ 1. ヤフオク!のマルチビュー機能のご紹介 2. ヤフオク!がマルチビュー機能を導⼊した理由 ©2022 Yahoo Japan Corporation All rights reserved.
ヤフオク!のマルチビュー機能のご紹介 ヤフオク!のマルチビュー機能とは︖ 2021年にリリースしたヤフオク!アプリの新機能 出品者としてのメリット 商品を多視点的に撮影して投稿できる 落札者としてのメリット 商品を好きな⾓度から確認できる 「マルチビュー」商願2020-122260 ©2022 Yahoo Japan Corporation All rights reserved.
ヤフオク!がマルチビューを導⼊した理由 マルチビューのご紹介（動画） 動画を挿⼊ ©2022 Yahoo Japan Corporation All rights reserved.
アジェンダ 1. ヤフオク!のマルチビュー機能のご紹介 2. ヤフオク!がマルチビュー機能を導⼊した理由 ©2022 Yahoo Japan Corporation All rights reserved.
ヤフオク!がマルチビュー機能を導⼊した理由 ヤフオク!について ・1999年にサービスを開始した⽇本最⼤級のネットオークションサービス ・ヤフオク!アプリのリリースは2010年 ・サービス開始から20年、アプリの提供開始から10年 ・より良いサービスの提供を⽬指して、サービスの磨きこみを継続中 サービス開始 アプリ提供開始 1999 2010 ©2022 Yahoo Japan Corporation All rights reserved. 2022
ヤフオク!がマルチビュー機能を導⼊した理由 ヤフオク!を取り巻く環境変化 ECだけではなく、SNSや広告などの各⽅⾯で画像以外の表現が注⽬されはじめる AR ©2022 Yahoo Japan Corporation All rights reserved. 360 動画 3D
ヤフオク!がマルチビュー機能を導⼊した理由 ヤフオク!のユーザーからの声 出品者の声︓ 商品の魅⼒を もっと伝えたい デザインやカタチが特徴的で 希少性があるモノほど 10枚の画像だけでは表現が難しい 落札者の声︓ 商品の詳細を もっと知りたい 正⾯や真横からの画像はあっても ⾒たい⽅向からの画像がないと イメージ通りのモノかわからない ©2022 Yahoo Japan Corporation All rights reserved.
ヤフオク!がマルチビュー機能を導⼊した理由 環境変化やユーザーからの声を受けて ヤフオク!が⽬指したこと 画像だけでは表現しきれなかった 「商品の魅⼒」を伝える⽅法 ＋ ヤフオク!アプリがあれば 「誰でもかんたん」に利⽤できる ©2022 Yahoo Japan Corporation All rights reserved.
ヤフオク!がマルチビューを導⼊した理由 マルチビュー機能リリース 商品を自由自在に 見たい方向から表示できる ヤフオク!アプリで撮影して そのまま出品できる プロダクトの名称は、多視点を意味する「マルチビュー」に決定 「マルチビュー」商願2020-122260 ©2022 Yahoo Japan Corporation All rights reserved.
ヤフオク!がマルチビューを導⼊した理由 マルチビューの効果 約4倍 落札されやすい マルチビューがある商品は、通常の商品より （特に、デザインや造形に特徴があり、希少性がある商品ほど、落札されやすい傾向） 80% 60% 40% 20% マルチビューあり イ バ ラ ト メ ー 、 カ ⾃ 動 ⾞ 、 オ AV 、 電 家 い 住 ま ホ ビ ー 、 、 イ カ ン ル テ チ リ ャ ア ー ン ッ ァ フ レ 、 ツ ー ポ ス シ ャ ジ ュ ピ ン コ マルチビューなし ©2022 Yahoo Japan Corporation All rights reserved. ョ ー タ ー レ コ 、 ク ー ィ ア ン テ サ セ ク ア お も ち ゃ リ 、 ー ゲ 、 ー 時 ム 計 … 0%
西 紗記子 CTO室 アプリ統括部 多視点カメラ 多視点技術の導入推進やCVの応用に従事 兼務は同じ部内のiOS WGおよび技術獲得 得意な料理はボルシチ 好きな言語はC++, Python, Swiftなど ©2022 Yahoo Japan Corporation All rights reserved.
アジェンダ 1. マルチビュー機能に使われている技術 2. ヤフオク!アプリに導⼊するために 3. UI/UXについて ©2022 Yahoo Japan Corporation All rights reserved.
アジェンダ 1. マルチビュー機能に使われている技術 2. ヤフオク!アプリに導⼊するために 3. UI/UXについて ©2022 Yahoo Japan Corporation All rights reserved.
マルチビュー機能に使われている技術 多視点映像 写真：アフロ • 固定された視点からの映像だけではな く, ユーザーが⾃由な⾓度から映像を ⾒られるようにする技術 • カメラレーンを組んだり, 特殊なカメ ラを⽤いたりして撮影する必要がある ためコストが⼤きいという問題点があ る ©2022 Yahoo Japan Corporation All rights reserved. この写真 の作成者 不明な作成者 は CC BY-SA-NC のライセンスを許諾されています
マルチビュー機能に使われている技術 ヤフーの多視点技術 カメラキャリブレーションを応⽤し, 特別な機材がなくても撮影が可能に ①被写体の周りから撮影 ©2022 Yahoo Japan Corporation All rights reserved. ②カメラキャリブレーション ③ぐるっと回せるようになる
ヤフオク!アプリに導⼊するために カメラキャリブレーションとは 多視点で撮影された画像群からカメラの位置や姿勢を数値化する技術 ©2022 Yahoo Japan Corporation All rights reserved.
ヤフオク!アプリに導⼊するために カメラキャリブレーションとは 多視点で撮影された画像群からカメラの位置や姿勢を数値化する技術 𝒁𝑾 𝑿𝑾 𝑶𝑾 𝒀𝑵 𝒁𝒐 𝒀𝑾 𝑿𝒐 𝑿𝟏 𝒁𝟏 𝑶𝒐 𝒀𝒐 𝑶𝟑 𝒁𝟐 𝒀𝟐 𝑶𝟐 𝑶𝟏 ©2022 Yahoo Japan Corporation All rights reserved. 𝒀𝟏 𝑿𝑵 𝒁𝑵 𝑿𝟐
ヤフオク!アプリに導⼊するために カメラパラメータとは 回転の表現(回転⾏列) 𝑥" 𝑥# 𝑥$ 𝑹𝑵 = 𝑦" 𝑦# 𝑦$ 𝑧" 𝑧# 𝑧$ 𝑹𝑵 𝒀𝑵 𝒁𝒐 並進の表現(並進⾏列) 外部パラメータ 𝑡% 𝑻𝑵 = 𝑡& 𝑡' 𝒈= ©2022 Yahoo Japan Corporation All rights reserved. 𝑹 𝑻 0 1 𝑶𝒐 𝒀𝒐 𝑶𝟑 𝒁𝑵 𝑿𝑵
ヤフオク!アプリに導⼊するために カメラパラメータとは 回転の表現(回転⾏列) 𝑥" 𝑥# 𝑥$ 𝑹𝑵 = 𝑦" 𝑦# 𝑦$ 𝑧" 𝑧# 𝑧$ 𝒀𝑵 𝒁𝒐 𝑻𝑵 並進の表現(並進⾏列) 外部パラメータ 𝑡% 𝑻𝑵 = 𝑡& 𝑡' 𝒈= ©2022 Yahoo Japan Corporation All rights reserved. 𝑹 𝑻 0 1 𝑶𝒐 𝒀𝒐 𝑶𝟑 𝒁𝑵 𝑿𝑵
ヤフオク!アプリに導⼊するために 世界をカメラに写し撮る 内部パラメータ 𝑓 0 𝑜% 𝑨 = 0 𝑓 𝑜& 0 0 1 f : 焦点距離 0 0 0 𝒀𝑵 𝒁𝒐 𝑷 o : 画像中⼼ Projection Matrix 𝑷=𝑨 ©2022 Yahoo Japan Corporation All rights reserved. 𝑶𝒐 𝑹 𝑻 0 1 𝒀𝒐 𝑶𝟑 𝒁𝑵 𝑿𝑵
マルチビュー機能に使われている技術 ポストプロダクションでの回転軸の変更も可能 カメラの位置や姿勢を数値化して全て計算で処理をしているため 後から回転軸を変更した多視点画像を⽣成することも可能です えんじん中⼼に回転 ©2022 Yahoo Japan Corporation All rights reserved.
アジェンダ 1. マルチビュー機能に使われている技術 2. ヤフオク!アプリに導⼊するために 3. UI/UXについて ©2022 Yahoo Japan Corporation All rights reserved.
ヤフオク!アプリに導⼊するために ヤフーの多視点技術のアルゴリズム ©2022 Yahoo Japan Corporation All rights reserved.
ヤフオク!アプリに導⼊するために スマホでは実現できないという課題 カメラキャリブレーションはマシンリソースを⼤量に消費する技術のためPCやサーバーが必要 全ての画像に対して特徴の抽出 あらゆる組み合わせで 特徴マッチング 全ての画像に対して カメラパラメータを計算 𝑷=𝑨 ©2022 Yahoo Japan Corporation All rights reserved. 𝑹 𝑻 0 1
ヤフオク!アプリに導⼊するために ARのフレームワークを活⽤ ©2022 Yahoo Japan Corporation All rights reserved.
ヤフオク!アプリに導⼊するために ARのフレームワークからカメラパラメータの取得 カメラキャリブレーション不要でカメラパラメータの取得が可能 ©2022 Yahoo Japan Corporation All rights reserved.
ヤフオク!アプリに導⼊するために ヤフーの多視点技術のアルゴリズム ©2022 Yahoo Japan Corporation All rights reserved.
ヤフオク!アプリに導⼊するために 多視点から撮影した画像のイメージ ⽔平 ©2022 Yahoo Japan Corporation All rights reserved.
ヤフオク!アプリに導⼊するために 画像の変換処理はシェーダプログラムを活⽤ Metal(iOS)とOpenGLES(Android)を⽤いてマルチビューを⽣成 CPUでの変換 約300msec 10倍 GPUでの変換 ©2022 Yahoo Japan Corporation All rights reserved. 約30msec
アジェンダ 1. マルチビュー機能に使われている技術 2. ヤフオク!アプリに導⼊するために 3. UI/UXについて ©2022 Yahoo Japan Corporation All rights reserved.
UI/UXについて ヤフオク!に合わせたUI/UX ユーザーが迷わないで撮影できるUI/UX（特許第06959422号） ©2022 Yahoo Japan Corporation All rights reserved.
まとめ ©2022 Yahoo Japan Corporation All rights reserved.
まとめ ヤフオク!のマルチビュー機能 ヤフオク!にしかない新技術を使った次世代の 商品の⾒せ⽅を紹介 ヤフオク! ユーザーの声に⽿を傾け、よりよいユーザー 体験の実現とヤフオク!でしか経験できない体 験を提供します。 CTO室 ジャンルを問わず新技術を獲得し、応⽤する ことでヤフーの様々なサービス体験をよりよ いものにしていきます。 ©2022 Yahoo Japan Corporation All rights reserved.
©2022 Yahoo Japan Corporation All rights reserved.