挨拶
初めまして ! プリントシール機の落書き画面のソフトウエア開発担当の前川です💜
この記事ではプリントシール機(以下、プリ)の 新機種 Luvholi(ラブホリ)で新しく搭載される「反転お直し選択」機能の実装にあたっての工夫を紹介させていただきます。
はじめに
突然ですが、❝推し活❞ というワード、最近よく聞きますよね？
❝推し❞のライブや舞台に行くだけではなく、推しに関するグッズを使って撮影したり、一緒におでかけしたりするだけで特別な時間になる事を表す言葉ですね。
私も休日は推し活を楽しんでいます🙌
Luvholi はそんな推し活をする上でユーザーが嬉しいと感じる機能を沢山搭載しており、今回紹介させていただく「反転お直し選択」機能もその一つです。
反転お直し選択の紹介
反転お直し機能は、ユーザーがプリ画を反転するかどうか1枚ずつ選択する事が可能な機能です。
これは、推しのグッズ(特に文字の入ったもの)をそのまま写したいユーザーニーズからうまれた機能です。
今回は、この機能の実現方法についてお話しさせていただきたいのですが、詳細の説明に入る前に。。。
プリ画の反転
まず前提として、現在のプリ画は元々すべて反転しています。
というのも、カメラで撮影した写真というのは、普段鏡で見て自認している自分と反転して写りますよね。
また、友人と並んで撮影した際には、お互いの顔の位置も逆になりますよね。
これをそのまま表示すると、お互いの立ち位置から遠い方に自分の顔が表示されてどうしても見づらかったり、自分の顔に見慣れない感覚があったりして、ユーザーの違和感(＝盛れない)に繋がっていました💦
そこで、鏡で見たままの自分と同じに見える「見たままモード」という機能が開発され、撮影画像が反転されるようになりました。
この機能が搭載された頃には、カメラで撮影した向きのプリ画の方が違和感がないとするユーザーもまだ多く、ユーザーの選択によって全ての画像を反転するか反転しないかを決定していました。
それから数年を経て、昨今のユーザー間ではスマートフォンの内カメラを使用した自撮りが普通に行われており、内カメラは鏡と同じ向きの画像を撮影する為、ほとんどのユーザーが反転した状態の画像の方が違和感がないと答えるようになりました。
その為、最近の機種では全ての画像を反転した状態で加工をして、プリ画としてお届けしています。
反転お直し機能
ですが、もちろん反転処理を行うプリ画では、衣服に印字された文字等も共に反転してしまいます。
これでは、せっかくのライブTシャツや 推しの名前が印字されたグッズも反転してしまい、ユーザーにとって特別なプリ画を提供する事ができません🥺
実際に、日頃プリを撮り、推し活を行うユーザーからも、グッズが反転してしまうのが気になる！との声が多く挙がっていました。
そこで誕生したのが、今回の「反転お直し機能」なのです。
反転お直し機能の工夫ポイント
さて、いよいよ反転お直し機能の実装にあたっての工夫を紹介していきたいと思います。
工夫ポイントは、いかに単純に従来の実装に影響を与えずに実現するかです。
その為に重要になってくるのが下記の２つです。
- 反転のタイミング
- 右目左目に関連するUIの反転
それぞれについて説明していきます。
反転のタイミング
まず、ユーザー操作の順番として、撮影が終わった後に全ての画像を並べた状態で反転お直し選択を行います。
先程の説明の通り、現在のプリではユーザーが写りを確認する画面では全て反転した状態の画像を表示していますので、選択画面の時点では既に反転済みの画像を見て、更に反転をするかどうかの選択を行います。
次に、落書き画面でメイク・レタッチの調整やペン・スタンプでのデコレーションを行います🎨
レタッチの目の大きさ調整では、ユーザーの右目と左目を分けてレタッチを行う事ができるようになっています。
この時に、プリではユーザーの認識のしやすさから、ユーザーから見て右側の目の事を「右目」と表現しています。
既に頭が混乱してきましたね。。。。🧠
まとめると、
反転お直し選択を行うまでに全ての画像は反転している
反転お直し選択では 1枚ずつ反転するかどうかを選択できる
落書きのレタッチでは、向かって右側の目を「右目」と呼ぶ
という事です。
ここで素直にユーザーが選択したタイミングで画像を反転するとしましょう。
すると、落書き画面へ進んで右目の拡大処理を行いたい、と言われても、この画像の右目はどちらか？の判定に時間を要します。
またそれは、
落書き画面のUIの表示非表示判定 (右目を加工する時に表示するUIの制御等)
レタッチ加工を行う画像処理
の両方で判定が必要になる為、不具合が混入する恐れも高くなってしまいます。
こういったリスクの回避や処理時間の短縮の為、反転を行うタイミングを熟慮して、全ての加工処理を行ってから反転する事にします。
残るはUI側の実装です。
右目左目に関連するUIの反転
人物画像の反転自体は単純で、人物表示レイヤのみを水平反転させます。
問題となるのは、前述の 右目左目問題ですね。
反転をした場合、従来の右目は左目になって、左目は右目になり、反転をしていない場合はその逆で、、、
と、どう実現すると良いのか悩みながら、開発メンバーと相談を行いました。
採用したアイデアはこちらです。
スライダーのUIを右目左目で揃えており、また、右目左目の文字表記部分とスライダーのリソースを分けて持っている為、反転の際にスライダー自体の位置を入れ替えるだけにしました !
こうする事で、加工処理をかける際には 右目の処理はどちらの目に反映すべきか？を画像毎に考える事無く、スライダーの値を反映するのみになりました。
これで、反転お直し機能を実現する事ができました👏
反転お直し機能のユーザー評価
こうして実現した反転お直し機能ですが、ユーザーインタビューの結果、
といった評価を得る事ができました ! (使わないというユーザーも、反転している自分の顔(写り)に違和感があり気になってしまうからという理由からでした。)
私も実際に使いたいと思う、ユーザーに喜ばれる機能になりましたので、ぜひ使ってみてください💗
まとめ
ユーザーの日々の過ごし方の変化によって、求められるプリの画像も変化していきます。
また、人物を映した画像の反転は単純なようで、写りの見え方や加工処理の複雑さ等々に影響があります。
この複雑さをユーザーが意識することなくプリを楽しむ事ができるように、プリ開発では日々様々な工夫を行っています。
今後もシンプルに、時代に合わせたユーザーニーズを叶えて行きます !
一緒にLuvholiで 推し活を楽しみましょう✨
