動画アプリをなめらかに動かす技術～『AbemaTV』のユーザー体験を支えるエンジニアリング

アプリの累計ダウンロード数 3,000万以上。
月間アクティブユーザー数 1,100万以上。

膨大な利用者を抱え、日本屈指のインターネットテレビ局となった『AbemaTV』。人気の理由は、バラエティー豊かなコンテンツだけではありません。ユーザーを惹きつける魅力的なUIにもあります。高い没入感と滑らかな操作性が、ストレスのない視聴体験を支えているのです。

では、こうしたUIの奥底にはどのような設計思想があり、どのような技術で実装されているのでしょうか。同サービスのUIデザイナーである松本俊介さん、iOSエンジニアの横山祥平さんに、「AbemaTVのユーザー体験とそれを支える技術」を聞きました。

• UIのもととなる3つのコンセプト
  • 「テレビ的な体験」を表現するUI
  • ザッピングUIを表現するチャンネル表示
  • スマホの画面サイズに合わせ、表示する要素を最適化
• 画面の描画に特化したフレームワークを、社内で自作
• Viewの状態を管理するため、MVVMアーキテクチャを導入
• 縦・横の向きを判別できないiPadで、どうやって縦画面視聴を実装する？
• 『72時間ホンネテレビ』の負荷対策
• 目指すは、国内最高レベルのプロダクト

UIのもととなる3つのコンセプト

──松本さんは『AbemaTV』の立ち上げフェーズからUIデザイナーを務めていたそうですね。どのようなコンセプトのもと、デザインはスタートしたのでしょうか？

松本　最初に、弊社代表の藤田から『AbemaTV』で大切にすべき以下の3つのキーワードが与えられました。

1. インターネットテレビ
2. 数十チャンネルのザッピングUI
3. シンプルでスタイリッシュなUI