名刺アプリで考えるシャッターチャンスのインタラクションと視線のUI

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


こんにちは ueharak です。
シャノンでは「シャノン名刺」というスマホアプリを 6/1 にリリースしました。
今日はこのシャノン名刺の名刺撮影機能について考えてきたことをお伝えしようと思います。

シャノン名刺とは

シャノン名刺は名刺を撮影することで情報をデジタル化し、シャノンマーケティングプラットフォームへ格納することができます。名刺のデジタル化自体はこれまでもスキャナで行う機能を提供してきましたが、シャノン名刺によってこれがモバイルからも行えるようになりました。

名刺のデジタル化

名刺をコンピュータで扱えるようにするには、デジタル化が必要です。デジタル化のためには名刺を撮影する必要がありますが、撮影するだけでなく撮影した像から名刺を「認識」する必要があります。

コンピュータビジョン

「認識」とはここでは画素の配列から名刺としての矩形を見つけることですが、そのためにはコンピュータビジョン(Open CV など)が必要です。撮影された像がコンピュータビジョンによって名刺とされた時、名刺のデジタル化の準備ができたと言えます。

撮影とコンピュータビジョン

撮影とは通常、ヒトが見ている視界の一部を記録することですが、コンピュータビジョンはそこからある結果(ここでは名刺)を得ることになります。つまり「名刺」を得るには、ヒトによる「撮影」とコンピュータビジョンによる「認識」の両方が必要であり、それらが「シャッター」によって一度に得られなければなりません。

シャッターを押すという行為

ヒトは「撮影したい」とき、シャッターを押します。シャッターとは機械に撮像するタイミングを通知するものです。コンピュータビジョンによる処理はその後に控えているわけですが、名刺の認識に必要な像が得られているかどうかはシャッターの結果にかかっています。

「シャッターチャンス」の通知

撮影だけでよい場合、ヒトから機械への一方的なシャッターの通知で足ります。しかしこのアプリで得たいのは名刺画像であって、ヒトが任意に撮像した結果が最適とは限りません。そこでコンピュータビジョンはシャッターの結果を待つのではなく、より積極的に、コンピュータビジョンが最適な仕事ができる像が期待できるシャッタータイミングをヒトに「通知」する必要が生じてきます。
(通知がないと悲しいことが起こる)

通知するぐらいならシャッターも押してくれ

コンピュータビジョンがシャッターチャンスを「知っている」なら、ヒトに教えるまでもなく自動でシャッターを切ってしまえばよさそうです。しかしここには問題がありました。
(機械のタイミングで撮影すれば良さそうだが…)

名刺が何枚見えているか、ヒトとコンピュータで一致しないことがある

例えば4枚の名刺を机に並べてカメラをかざしたとします。ヒトはこれを「名刺4枚のデジタル化」と当然考えますが、コンピュータビジョンはこれを安定して4枚の名刺として認識できないことがあるのです。例えば照明条件とか、名刺と机の境界が分かりづらいなどによって、3枚しか認識できないタイミングもあるわけです。
ここでコンピュータビジョン側が「勝手に」シャッターを切ってしまうと、4枚のはずが3枚しかデジタル化されないといった「認識の齟齬」が生じます。このとき、どれが認識されてどれがダメだったのか、ヒトが判断する必要がでてくるわけです。しかしこれ、いささか馬鹿げていると思いませんでしょうか?

認識の齟齬を生まないための「マーカー」

コンピュータビジョンのためにヒトがシャッターを押すのは馬鹿げていますが、4枚並べたのに勝手に3枚で認識したことにされてしまうのも馬鹿げています。その後始末をやらされるのも不愉快でしょう。そこで、ヒトとコンピュータビジョンが「合意」するための枠組みを提供する必要があります。それが「マーカー」です。
マーカーとはコンピュータビジョンが名刺として認識した結果を可視化するもので、「今ここが名刺として見えています」ということをヒトに伝えるものです。ヒトはこれを受け、コンピュータビジョンの認識が自分と一致しているタイミングでシャッターを押すことになります。

マーカーの検討

そこで、ヒトに対してコンピュータビジョンの認識をどのように可視化すればよいかを考えました。先行する「認識」系のアプリを調べると、いくつかのパターンがあるようでした。

  • 認識している領域を枠で強調する
  • 認識対象に円形のシェイプを載せる

まず枠で強調する方式ですが、これは「まさにこれが見えている」ということが明瞭で分かりやすい反面、精度良く滑らかに追従しないとモタモタしている印象が強くなってしまうことが懸念されました。
一方円形については「このあたり」といったざっくりした提示で済み、追従が遅れても違和感がないことが分かりました。なおこのことについて Wantedly 社が非常に分かりやすい解説をされていて、大変勉強になりました。ありがとうございます。

よりよい「視線」の表現を求めて

円形が有力であるとは思いつつも、これを超えるコンピュータビジョンの視線の表現を探りたいと考えました。例えば以下のような検討をしました。

  • 四角形:採用例は多いが、対象と同じ形状を提示する場合、ピッタリはまらないと「ズレ」に目がいってしまう点が気になりました
  • 三角形:三角は「満点でない」という意味をもつ場合があります。これを提示するとコンピュータビジョンの認識状態が「充分でない」ように誤解されかねないと考えました
  • 五角形:角が増えると装飾的になってしまい、「視線」のような抽象概念を表現するシェイプとしては適当でないように思われました
  • 多角形:五角形と同様

カメラのメタファーに立ち戻る

どれも決め手に欠けるなか、これがカメラのシャッターチャンスを伝えるものであることについて改めて考えました。ヒトがカメラで見ているもの、コンピュータビジョンも見ているもの、それは「フォーカス」でした。

フォーカスという視線

カメラのフォーカスは一定の領域の四隅を強調する形状が思い浮かびます。ここに中心の表現が追加されることもあるでしょう。しかしこれはフォーカスの中心を強調してしまいますが、コンピュータビジョンにはその意図はないため、単に「見ているエリア」としてのフォーカスを試してみようということになりました。
やってみるとコンピュータビジョンが「見ている」ことが分かりやすく、テストした社員も違和感なくこの意味を受け止めていることがわかりました。晴れてめでたくシャノン名刺のマーカーはフォーカスに決まりました。

今後に向けて

今回は複数枚の名刺をデジタル化する際の、ヒトとコンピュータビジョンのコンフリクトをどのように乗り越えるのかという観点からマーカーを検討しました。しかしそもそも一度に一枚しか撮影しないのであればシャッターチャンスについて意見の齟齬は生じないはずです。コンピュータビジョンが「見えた」と思ったならその時が最善であり、自動でその画像を取得すべきです。この時、ヒトはその過程を見守る必要すらありません。名刺にカメラをかざしてさえいれば、よそ見していたってコンピュータビジョンがしっかり見てくれているわけです。つまりヒトはノールックで、コンピュータビジョンだけが見ている、それでいて必要な情報が抽出できる、そうしたしぐさが可能になるような方法も検討できたらと個人的には思っています。
(一枚に限定すればこのやり方も便利そう)

いかかでしたでしょうか。シャノン名刺の名刺撮影機能がどのようにして生まれたのか、その一端をご紹介しました。これをご覧のみなさんにもぜひ使っていただけたらと思っております。
新しい記事
前の記事
Next Post »
Related Posts Plugin for WordPress, Blogger...