プロダクトオーナー

石橋 圭太

期間

2022年10月

担当

プロダクト企画・提案、サービス設計、UX/UI デザイン、開発、資料作成

使用ツール

Adobe XD / Glide

使用技術

TypeScript / React Native (Expo) / Firebase (Authentication, Firestore, Cloud Functions) / Algolia

背景① : 歌の練習に向かないYoutubeのUIと動画構成

私は、プライベートで歌解説Youtuber「しらスタ【歌唱力向上委員会】」さんの歌解説動画に表示されるオリジナル記号付きの歌詞を見ながら歌を練習します。 しかし、動画再生に最適化されたYoutubeアプリのUIデザインと動画構成的に、曲の進行に伴ってその歌詞が表示される時間までスクロールする必要がありました。 スムーズで正確なスクロール操作は難易度が高く、ストレスフルなユーザー体験です。そこで、効率的にオリジナル記号付きの歌詞を見ながら歌を練習できるネイティブアプリのMVPを企画・開発しました。 以下の4つがコア機能です。

1. スクロールで記号付き歌詞をカンタン閲覧
2. ワンタップで該当の解説動画へ簡単アクセス
3. 歌名やアーティスト名での楽曲検索機能
4. よく見る歌のための、お気に入り登録機能

背景② : 音楽系Youtuberの収益問題

Youtube動画内で歌詞や楽曲を利用すると、JASRACに対し売上の約10%の使用料を支払い義務を負います。 つまり音楽系Youtuberは、その他のYoutuberよりも利益率が下がってしまう収益面の構造的なハンデがありました。 そこで、このアプリを私のための便利ツールで完結させず、しらすたさんと協力関係を結ぶことで個人クリエイターのサポートにも繋げられるのではと考え、開発したアプリを使ったアプリ紹介動画と資料を作成し提案しました。

紹介動画

歌の練習効率を上げるUIを実現する

しらすたさんの歌解説動画は、「Aメロ」「Bメロ」「サビ」数分に分けて解説します。解説時の画面には、約10種類の独自のアクセント記号が記されたオリジナルの歌詞が表示されるので、歌うとき気をつけると良いポイントがひと目でわかります。
しかし、その歌詞を見ながら歌を練習練習するには、曲の進行に伴ってその都度歌詞が表示される時間までスクロール操作が必要です。以下の操作が一曲分続きます。

① Aメロの時間までスクロールし歌詞を表示
② 音楽を再生し、Youtubeアプリへ移動
③ Aメロが終わったら、音楽アプリへ移動し曲を一時停止
④ Youtubeアプリへ戻り、Bメロの時間までスクロールバーを移動
⑤ 音楽アプリへ移動し曲を再生 ...

そこで、縦スクロールで一曲分の歌詞を見れるようにすることで曲進行に伴う歌詞切り替え操作のストレスを軽減します。

「Aメロ」「Bメロ」「サビ」…、各ブロック毎に解説動画へのアクセスボタンを配置

歌の練習中に、動画で言われたこと思い出したいシーンが訪れるはずです。Youtubeアプリで動画の該当箇所にアクセスするためには最低3ステップ必要になり、アクセス性が良くありません。

① Youtubeアプリを開く
② 該当動画を検索
③ 解説の時間までまでスクロール

そこで、歌詞ブロック毎に「Xメロ解説」ボタンを設置し、タップするとWebViewで動画の該当箇所から再生できるようにすることで解説動画へのアクセス性を改善しています。
また動画を見ずにサラッと要点だけ確認したい人もいるはずです。その人のために、動画で解説している要点だけをテキストで簡単に確認することもできます。

アプリに登録された曲を歌名、アーティスト名で全文検索することができます。

曲の詳細画面に設置された星ボタンをタップするとお気に入りリストに保存されます。