ABEMAへようこそ。日本のインターネット企業CyberAgent, Incが運営する動画配信プラットフォームです。
「テレビの新しい未来」を創造し、テレビを革新することを目指すABEMAには、日本で唯一の24時間ニュースチャンネルがあります。それだけでなく、さまざまなジャンルにわたる約25のチャンネルも備えています。オリジナルドラマ、恋愛番組、アニメ、スポーツ中継はすべて、視聴者が無料で、登録不要で楽しめます。
2022年11月から12月にかけて、ABEMAはある注目度の高い世界的なサッカーイベントを配信しました（何の大会か、皆さんもすでにお気づきかもしれません）。このイベントを設計する際、デザインチームは視聴体験を向上させるためにいくつかの課題に直面しましたが、その解決策をProtoPieに見いだしました。
ここでは、ABEMAのプロダクトデザイナーである松本さんに、配信動画のデザインプロセスでチームがProtoPieをどのように活用しているのかを伺います。
ABEMAのデザインチームにとってプロトタイピングが重要な理由
ABEMAのデザインチームは、2017年からProtoPieを最優先のプロトタイピングツールとして使い続けています。つまり、実に6年以上にわたって活用しているということです。
プロトタイピングの主な目的は、配信UIのデザインを評価し、判断することです。
しかし、動画配信サービスのプロトタイプでは、次の点も重要です。
プロトタイピング時に動画ファイルを扱えること。
バッファリング中の動画を再現できること。
動画視聴時のUIを評価できること。
そのために、チームには高精細プロトタイプが必要でした。幸運なことに、ProtoPieはその要件をすべて満たしてくれました。
ABEMAが動画配信システム設計でプロトタイピングをどう活用しているか
ABEMAのプロダクトデザインチームは2023年時点で6名で、毎年新しいメンバーが加わっています。現在では、全メンバーがProtoPieに精通していることが求められています。
「Figmaを学ぶことがUIデザイナーにとって不可欠であるのと同じように、ProtoPieもチームメンバーが日々トレーニングを受ける位置づけになっています」と松本さんは語ります。
ここでは、チームがライブ配信システムの設計でProtoPieをどのように活用しているかの例をいくつか紹介します。
1. マルチアングル
サッカー視聴体験を開発するにあたり、ABEMAの試行錯誤は、日本の放送テレビではまだ実現できない体験をつくることに焦点を当てていました。少なくとも、まだ当時はそうでした。
そこで浮かび上がったアイデアの一つが、マルチアングル機能でした。
ABEMAにはもともとマルチアングル機能がありましたが、利用範囲は限定的で、UIもまだ発展途上でした。まだ主要機能とは言えない状態だったのです。
そこでチームは自問しました。ABEMAのマルチアングル機能は、アングル切り替えの要件を満たしつつ、さらに視聴体験を損なうことなく、さまざまなアングルを確認・切り替えできるようにするにはどうすればよいのか。
チームはユーザー調査や議論を行いながら、複数のデザインパターンを作成しました。
最終的に、次のデザインに決定しました。
過去のパターンを見直した結果、アングルを切り替える際に動画の読み込みが発生することが分かりました。そこで、その挙動を考慮したプロトタイプを作成しました。
その結果、より現実的な状況を再現でき、UI評価の精度を高めることに成功しました。
このプロトタイプの制作には、開発チームだけでなく、事業チーム、動画配信チーム、プロモーションチームなど、社内の多くの関係者が参加しました。これは、組織全体で最終的なプロトタイプについて共通の認識を持つためでした。
2. 試合データ
「試合データ」機能では、視聴しながら試合の状況を確認できます。デザインチームは、ライブ配信システムの設計開発を考慮しながらこの機能をプロトタイプ化しました。
試合データを認識しやすくするアニメーションを作れるかどうかを確認するため、次のプロトタイプを作成しました。
残念ながら、そのアニメーションは実現しませんでしたが、それでもプロジェクトチーム内のプロモーション議論では役立ちました。
3. ユーザーの通信環境に応じたアラート
インターネット上での動画配信は、ユーザーの通信環境やサービス提供側のサーバーなど、さまざまな要因によって不安定になることがあります。
このような大規模なサッカーイベントには、多くの視聴者がアクセスすると想定されます。そのため、画質の制御と、配信をスムーズに継続できるようにすることに特別な注意が払われました。
たとえば、ABEMAのデザインチームは、通信環境が不安定で画質が低下した際に、ユーザーのライブ配信UIにアラートを追加しました。
画質を落とした動画ファイルのパターンをいくつか用意し、各動画ごとに複数のアラートUIパターンを表示できるProtoPieファイルを作成することで、プロジェクトメンバーに実際の体験がどのようなものになるかを明確に共有できました。
ProtoPieの利点の一つは、素材とUIの切り替えを使って、1つのプロトタイプでさまざまな状況を再現できることです。
チームはさらに次のことも可能でした。
ユーザー調査を実施する。
視聴体験のストレスを最小限に抑えつつ、どのデザインがアラートを適切に伝えられるかを評価する。
提案Aは、動画の上に少しだけ被せることで、視聴体験を妨げずに視聴者へ通知できる案だと考えられていました。
調査の結果、提案Aは、動画テロップのように見えるため、36%のユーザーがアラートに気づいていなかったことが分かりました。提案Bのほうが、アプリからのメッセージをより正確に伝えられていました。
アプリを実装したほうが早いのでは？
このような高精細プロトタイピングについて考えるとき、よく浮かぶ疑問の一つが、「クリエイティブツールを使ってわざわざプロトタイピングする必要は本当にあるのか？ アプリを実装して動かしたほうが確実ではないのか？」というものです。
場合によります。ここでは、いくつかの基準を考慮する必要があります。
1. プロトタイプ作成にかかる時間
ここまで紹介したProtoPieファイルは、作業に必要な時間がわずか1時間です。よりシンプルな動画プロトタイプなら、10分で作成できます。1日以上の工数が必要な複雑なプロトタイピングであれば、別のアプローチを検討したほうがよいでしょう。
どれほど簡単に テレビコントローラのプロトタイプが作れるのか、ぜひご自身で確かめてみてください。
2. データの複雑さ
ProtoPieは現在、画像・動画・テキストなどのアセットをファイルに直接埋め込んで作成する方式を採用しています。
プロトタイプに大量のスクロールやコンテンツを含めたい場合は、データを動的に扱えるようアプリを実装して動かすほうがよいかもしれません。
デザイナーと開発者の協業を支えるプロトタイプ
ABEMAチームは、詳細なUIの遷移をエンジニアに伝えるためにもProtoPieを活用しています。インタラクションレコーディングを使うことで、遷移のタイムラインと、エンジニアが実装しやすいフローを作成しました。
以下は、ABEMAのUIから、ProtoPieを使ってライブ配信システムの設計をどのように行ったかを示す例です。
例1: ホーム画面のプレビューエリアからテレビ視聴画面への遷移
モーダル遷移やプッシュ遷移を重ねたビューとして表現する方法もありました。しかし、チームは遷移前後を明確につなぎ、認識しやすくすることで、没入感を生み出したいと考えていました。
参考にしたのは、過去のiOS写真アプリであるForYouの構成でした。
例2: 起動シーケンス
アプリ起動からホーム画面表示までの流れを確認するうえでも、プロトタイプは有用でした。
読み込みUIや、待ち時間がユーザー体験に与える影響を確認するために、ABEMAのデザインチームは、各画面の読み込み時間を秒単位で指定できるプロトタイプを作成しました。
ご覧のとおり、ProtoPieを使った高精細プロトタイピングは、ABEMAチームのデザインワークフローのさまざまな場面で役立っています。具体的には、
認識に関する課題の調査;
使いやすさの評価;
実装時の詳細イメージの共有。
パイみたいに簡単。
ProtoPieでライブ配信UIに革命を
何千ものデザイナーや企業が、動画配信UIの未来をデザインするためにProtoPieを活用しています。次はあなたの番かもしれません。今すぐProtoPieを無料で使い始めましょう！
この記事を日本語で読む場合は、こちら。
