3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

驚異のFANZA女優検索(ひとり)Advent Calendar 2021

Day 3

似た顔のFANZA女優を顔写真から検索出来るUI/UXを考えるのに苦労した

Posted at

この記事は 驚異のFANZA女優検索 Advent Calendar 2021 の 3 日目の記事です。

#似た顔のFANZA女優を顔写真から検索出来るUI/UXを作る
似た顔のFANZA女優を顔写真から検索出来るようにしたが、顔認識はAzure Cognitive ServicesのFace APIを使うことでそれ程苦労せずに出来た。ただこれを実際に機能としてサービスに乗せる時にどういうUI/UXにするか、これは非常に悩んだ。

#顔写真を指定するUI/UXは2種類が多い
最初のポイントは顔写真を指定してもらう方法だ。顔認識が出来るWEBサービスを色々見てみると、URLを指定する方法とローカルファイルをアップロードする方法の2つを採用している所が多かった。ただ方法が2つあると、ユーザーはどちらの方法を使うかを選ぶ必要がある。2つの方法から1つを選ぶというUI/UXは決してシンプルとはいえないと思う。また1つのUIを操作している時もう1つのUIは使わないにも関わらずレイアウトは占拠される。個人的に使っていないUIが表示されるのは嫌だった。それらを考慮するとGoogleの画像検索のように選択方法がタブになっているのが一番しっくりきた。タブなら選んでいるレイアウトだけが表示されるところも良いと思った。

#タブの場合デフォルトはどっちにするか
タブ式のUIにするのであればデフォルト表示を何にするかは極めて重要だと思う。今回はURL指定をデフォルトにすべきだと思った。まずローカルファイルに顔写真があるかは人に依る所が大きいと思う。また殆どの人(特に男性)は自分の顔で検索したいわけではないと思う。つまりローカルファイルをアップロードする方法を使うケースは基本少ないと思う。(ただ少ないが確実に0ではないと思うので無くすという選択肢は考えなかった)。またURL指定ならサンプルを用意できるメリットがあると思った。サンプルをクリックしたらURL指定する所に入るようにすればユーザーへの操作説明にもなる。

#採用しなかった3つ目の方法
余談だが、WEBサービスを見ている時、顔写真を選ぶ方法がもう一つあった。それはカメラを起動してその場で写真を撮ってアップするという方法だ。面白そうと思ったので、実験でカメラを起動させて写真を撮る所までは作った。ただ作ってみて実際にサービスとして採用するならカメラが複数あった場合の対応なども考えなければいけないし、そもそも自分の写真と似た顔のFANZA女優を検索したい状況はあまりないだろうと思って結局この機能の実装は止めた。(3つあってもレイアウトにさほど悩まなくて済むのもタブの良さだと思った)

#さらにUXを詰める
タブで顔写真を選べるようにした。最初は選んだらその画像が有効な画像か判定して、その後検索ボタンを押すことで検索出来るようなUIを作った。しかし、実際に作ってみて選択と検索で2回操作をするのは面倒だと思った。顔写真を選択したら、そのまま似た顔のFANZA女優が表示されるようにした。ただこの流れで画面切り替えが入ってしまうとやっぱりUX的にはイマイチと感じたので、AJAXを使って顔写真を選択して検索されるところまで画面切り替えなしにしたくなった。(AJAXに関しては明日詳細書く)。これで自分的には大分良い感じになってきた。そんな時にたまたま自分の参考に出来そうな面白いサービスが話題になっていた。

#イライザダイジェクトのセーフティーネット参考に
そのサービスはイライザダイジェクトという文章を入力させて、要約を作るサービスだ。当たり前の話だが、文章を入力しなければ何も起きない。そうすると多くの人は既に書かれている文章をどこかからコピーして持ってくることが多いと思う。要約スタートを押す前に利用規約に同意する必要があり、そこには以下の文章が書いてあった。

本サービスの利用により、第三者の著作権その他の権利を侵害しないよう十分ご留意ください。詳細は利用規約をご確認ください

正直このアプリに入れられる文章が小説の一説だったとしても、それは使用者の自己責任でありアプリ自体の問題ではないよう気がする。それでもここまでの文章を用意しているは多分セーフティーネットだろうなと思った。同じように自分のアプリで、URLを指定させる方法は、言い換えれば他のページから画像情報を取得することになる。人によっては女優やアイドルの顔写真を使う人もいるだろうと思うと自分のアプリでもこれと同等のことをした方が安全だろうと思った。

#イライザダイジェクトのSNS投稿機能で気づいたこと
またイライザダイジェクトは結果をSNSに投げる機能もあった。最初はこれも実装しようと思った。しかしその時に気づいた。あーこれをSNSに投げた時点でさらに著作権が関わってきそうだ。つまり結果だけを貼るより元がどうであって、それがどうなったかを表示しようとすると、どうしても元文章が必要になる。そこで有料で出版されている本の文章が丸々のっていたらやっぱりそれは問題になるだろう。だからここまでやっているんだなと気づいた。

#SNS投稿機能は止めた
で、SNSへの投稿機能は悩んだが、結局作らなかった。一番大きい理由は顔検索を機能として使っている分には面白いとしても、それをSNSに投稿出来るようにすると、本来面白く使ってほしくて作った機能を別の用途で使う人もいる可能性があるからだ。つまりFANZA女優の誰々に似ていると言われて気分を害する人もいるだろうし、似ていることで揶揄されたり、酷いケースだといじめにつながる可能性すらもある。サービスを作る側がどこまでそれを踏まえるべきかは正直分からない。機能としてはむしろ入れたい。ただ、これはやっぱり凶器になりうる可能性もあると思ってしまったので、あくまで自分のサービスの中だけで完結する機能とした。だからそれであればイライザダイジェクトのようにボタンを押すときのチェックボックスによる同意まで取るのは冗長かと思って一言書くだけに留めた。アップロードしたデータも最初は何か使えるので取っておいても良いかと思ったが、元々Azureが24時間でデータが消える仕組みだったので、自分のサービスでもアップされたデータは保存しない仕組みにした。

#顔写真から似た顔のFANZA女優を検索出来るUI/UX
というわけで画像を選んで、顔検索が出来る仕組みは、色々悩んだ末にシンプルに作ったつもりだ。UI/UXには絶対的な正解はないので、気になる所があれば是非教えて欲しい。

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?