AbemaTV Hackで投げ銭UXを改善！Lottieでのアニメーション演出と開発の振り返り【Part 2】
サイバーエージェント主催『AbemaTV Hack - ネイティブアプリ編』に参加し、投げ銭UXを改善！Lottieを活用したアニメーション演出やUI設計、Rxを活用した開発の課題と今後の学びについて振り返ります。
前回の続きになります！
2日目のワーク
2日目は「どのようにしたら、より投げ銭しやすいアプリになるか」「快適に投げ銭を行うことができるか」ということに着眼して、開発を進めていました。
2日目の実装面の工夫
特定の投げ銭アイテムを使用したと分かる演出や効果は、というライブラリを使い、JSON形式のアニメーションを表示することで表現しました。また、アイテム毎に特徴を出したアニメーションをつけることで、何の効果かわかりやすくしました。
この際に、ボタンを押してからアイテム毎のアニメーションを２画面目のまま表示し、
その後、１画面目に遷移してから、投げ銭を行ったことを表現するコインのアニメーションを出す仕様にしました。
このような仕様にした理由は、アイテム一覧のままコインのアニメーションを表示するよりも、１画面目に遷移して表示した方がギフトを送ったというコインのアニメーションの演出を、ユーザーが心地よく感じることができると考えたからです。
コインのアニメーションを表示した後には、コメントのように画面の右から左に
なぜ・いくら投げ銭を行ったのかのTextを流す機能を実装しました。
コインのアニメーションを表示する処理は、以下のように実装しています。
- ２画面目のViewControllerで、クロージャを定義
- 1画面目のViewControllerに、２画面目から遷移してきた場合、コインのアニメーションを表示する処理を2画面目のViewControllerで定義しているクロージャに記述
完成した成果物
発表
ワークを終えた後は、参加者全員でどのようなものを開発していたのか発表しました。
投げ銭ではなくギフトと表現している理由は、
機能は、どちらも一緒なんですが「ギフト」と表現した方が、配信者に今思いを伝える・プレゼントするという
意味合いが強くなるかなと思ったからです。(言いたかったこと 伝わっているかな...)
反省点・課題
発表を終え、振り返ってみると、今回の反省点・課題は以下のものがありました。
- 値段に応じて、動作を変更し差別化する機能の実装ができなかったこと
- コメントログを残す機能の実装ができなかったこと
- 現状の仕様では、コメントの同時反映が行えないこと
- 他のアイテムもアイテム一覧に表示することでユーザーが表現できる幅を増やすことができればよかった
- ボタンに薄い背景色をつけると、2画面目へ遷移する感じを出すことができたと感じた
- 今回は、画面間の値の受け渡しをクロージャで行ったが、書き方に慣れていなかったため実装に時間がかかってしまった
- Rxを使って、簡潔に記述できれば可読性も向上したと感じています。
ちなみに
ランチの時間のお弁当には色々な種類がありました。オススメされたハンバーグ美味しかったです👍
懇親会の料理はオシャレで、どれもとても美味しかったです。ここまで、ご飯の話しかしてないですね笑
参加学生やメンター社員の方と様々なことをお話しすることができました。懇親会は、ざっくばらんに会話できるためイイですね！
機能面でのまとめ
機能面においては、今回は、2日間ということで改善に時間を回すのが難しそうだと感じたため、1日目の初期の段階である程度、仕様やレイアウトを固めてから開発しました。
結果的に、課題は多く見つかりましたが、その課題をより早く認識するためにも初期設計は重要だと再認識しました。
意図があって、機能をつけることを何より重視し、それらにこだわることができた２日間でした。
このインターンと通して、あらためて使いやすいなって思う既存のサービスのUIは考え込まれている と感じました。
今後も、なぜその機能をつけるのか・なぜそのようなレイアウトにしたのか根拠を持ち、利用者に使いやすいと感じてもらえるように、これからもどうしたらより良くなるか考え続けて試行錯誤していきたいです！
実装面でのまとめ
技術面においては、今回2日間ということで素早い実装を心がけていたために、
- コードの結合度が高い処理を多く書いていた
- Storyboardを使っている部分とそうでない部分が入り混じってしまった
- コードの再利用可能な部分を活用しきれていなかった
など、チーム開発を意識した開発が疎かになっていました。短時間での実装でも、上記のことを考慮しながら開発を進めることができる技術力を身に付けたいです。
また、綺麗なコードを読むなどして、実装の引き出しを増やしていくことは重要だと感じました。
最後に
サポートしてくださった人事/メンター社員・最後まで楽しく切磋琢磨した参加者の方々には、本当に感謝しております！🙏
自分の現状の技術力で、最大限のアウトプットを行うサポートをしてくださり、短い間でしたが、知見・使えるスキルを広げることができました。
どのようにしたら、ユーザーが快適に投げ銭ができるか考え実装まで行うことで、スピード感のある開発ができて、楽しい２日間でした!!
今回のインターンシップでは、アニメーションの実装など初期設計の通りにやり切ることができました。コードの書き方などまだまだ課題が見つかりましたが、UIの考え方をより深める良い機会になりました。
これから、UI/UXを自分のコンセプトに近づけるよう、こだわりをもって実装を行ったり、RxやFluxアーキテクチャを取り入れたアプリを作成したりすることで、思考力・技術力を高めていきたいです！
最後までご覧いただきありがとうございました😄
小幡 十矛（Obata Tomu）｜価値を共創するエンジニア
東京を拠点に、アプリ開発・新規事業立ち上げ・ブランドづくりに取り組んでいます。
2021年にサイバーエージェントへ新卒入社後、ABEMA Live や AmebaブログのiOSアプリ開発を担当。
現在はフリーランスとして、複数の新規プロダクトやリアル店舗の立ち上げに挑戦中です。
🎯 Mission｜人の挑戦を加速する仕組みをつくる
── アイデアを形にし、前に進める“土台”や“場”を共創する
📌 「リアルな場 × デジタル」の可能性を探求し、新しい挑戦が生まれる土壌を育てる
🔹 エンジニアリング × ビジネスの視点から、アイデアを形にし、成長を支えていく
🔹 実店舗オーナーを目指し、オーダースーツ・ドライヘッドスパ・セレクトショップの複合店舗の立ち上げにも挑戦中
👥 特に、社会人1〜5年目くらいで
「やりたい気持ちはあるけど、最初の一歩に迷っている」方へ。
「自分の可能性をもっと広げたい」
「モヤっとしたアイデアがあるけど、どう進めていいかわからない」
そんなフェーズにいる方と、一緒に考えたり、手を動かしたりできたら嬉しいです。
🌱 「挑戦したい20代」との出会いも、大切にしています。
「ちょっと話してみたいな」くらいの気持ちで、気軽に声をかけてもらえたら嬉しいです！🙌
🌐 詳しいプロフィールはこちら
https://obata-tomu.jp/