13
4

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.

【Unity】顔だけVTuberになるARアプリを作った【UI編】

Last updated at Posted at 2022-09-01

こんにちはっ🌟八ツ橋まろんです

iPhoneの顔認識の機能を使って様々なARアプリの基盤となる機能を提供してくれるUnity Technology提供のAR Foundation Sampleを元に改良し、

「「「顔だけVTuberになるiPhoneアプリを作りました!!!」」」

動作デモ↓↓

App Storeのリンク↓↓

この記事では、アプリのUIデザインと、アプリに実装したオフセット機能について書き、『ユーザー目線で開発することで気づけたことがあった』というのをお伝えしたいと思います。

アプリのUIデザイン

アプリの指針として、
『とりあえず、DLしてすぐに使える』
『画面上に機能が不明なアイコンが2個以上ないこと』
を(心の中で)掲げていました。

前者はいろんなアプリで実践したい項目だと思います。「DLしたけどなんのアプリかよくわからないから消す」は機会損失が大きいです。
そのため、このアプリは起動と同時に有無を言わさずユーザーの顔をアバターで乗っ取ります。
オンオフ機能はありません。

後者は、「わからないアイコンが1個だけなら、押せばいい。2個以上あると、なんかそれぞれ押して確かめるの面倒くさい。」という自分の性格からきています。要するに、『自分が使いやすいように作る』です。自身がそのアプリのユーザーであることは開発・改良をすごくスムーズにしてくれます。

その結果、アプリ起動時の画面はボタン3つと非常にシンプルなものになりました↓↓
image.png

①誰でもわかる写真撮影アイコン📷(カメラアイコン)
②誰でもわかる設定メニューアイコン⚙(歯車アイコン)
③UIと書かれた謎のアイコン(UIを非表示にするだけです)

パッと見て意味がわからないボタンは1つだけで、その内容は非常にシンプルかつ押した瞬間に理解できるものにしています(③)

カメラアイコン(①)を押すと3秒タイマー固定で撮影され、自動で保存されます、それ以外の操作はありません(とてもシンプル)

各種設定は全て歯車アイコン(②)の中に入れました。これにより、「何かパラメータやいろいろを変えたい」と思った時に、全て『設定ボタンを押すところからスタート』するようにしています。これは、『ひと手間かかる』側面を持ちますが、『どこを押せばいいかわかりやすい』というメリットがあります。私自身、iPhoneの標準のカメラアプリは画面上のアイコンが多すぎて苦手です。私が使いやすいように、設定ボタン + スクロール画面で設定変更できるようにしています。(歯車アイコンを押して出てくるスクロール画面↓↓)
IMG_0203.PNG

アプリに実装したオフセット機能

バーチャルな顔を被せるアプリですが、リアルの体格や、被せたいアバターは様々なので、適切にずらす(オフセットを持たせる)必要があります。
すぐに思いつく縦軸と顔のサイズ調整に加え、奥行き(割と大事)と角度(顎を上げる、下げる方向の角度。これも大事)を調整できるようにしています。

奥行き調整は、横を向いたときにずれるのを調整できます。
image.png

角度の調整については、「自身がユーザーだから気づいたこと」だと思っています。写真に写るとき、カメラのレンズではなくアバターの目を見ながら撮るんですよね。

アバターの制御が自分の表情に依存しているから、「うまく表情操作できているか確認しながら撮る」ので、カメラのレンズを見る撮るのと若干ずれます。
その差を上手く吸収するために角度調整が必要でした。自撮りに興味がなかったら追加してなかったでしょう。VRChatで自撮りし慣れていてよかった(笑)

アプリ自体が簡潔なので、短い記事でしたが、「自分が一番このアプリを使いたい」という気持ちで作ったため、ユーザー目線で気づけたことがいくつかありました。
そのいくらかでもお伝えできていれば幸いです。

それではっ🌟

八ツ橋まろん

13
4
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
13
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?