4月に「開局」したばかりながら、すでに600万ダウンロードを超えるヒットアプリとなっている「AbemaTV（アベマティーヴィー）」。24時間無料で豊富なコンテンツが見られるサービスの魅力もさることながら、チャンネルをサクサク切り替えながらザッピングできる、気持ちのいいUIも評判となっている。YouTubeやNetflixなどの海外発のオンデマンド型ストリーミングとは異なる、「テレビ的な体験」がウケているのだ。
UIも評判のAbemaTV
そんなヒットアプリのUIはどのようにデザインされたのか？ 8月3日に東京・渋谷で開催されたサイバーエージェント主催のイベント「UX生トーク vol.4 」では、AbemaTV デザイナーの内田達也さんが舞台裏を明かした。
モックアップに4カ月、Pixateのファイルは200以上
AbemaTVの開発チームは総勢30〜40名。デザイナーはうち4名で、Android、iOS、ブラウザーといったプラットフォーム別の担当制をとっている。サイバーエージェントでは「テクニカルクリエイター」と呼ばれる職種を推進していることもあり、「AbemaTVのデザイナー全員がコードに触っている状態」（内田さん）というのが特徴だ。
藤田 晋社長肝いりのプロジェクトとして始まったAbemaTVでは、UIについても藤田社長から直接、指示が降りてきたそうだ。「最初は『Facebookのインフィード再生みたいなの』と言われて」（内田さん）、デザインチームがFlashで作った初期のモックアップは、縦に動画が並ぶスタイルのUIだった。
縦のUIだった、初期のモックアップ
ただ、実際にモックアップを作ってみると、やはり縦位置では動画が小さくみづらいことがわかり、現在の横位置のUIに落ち着いた。「実際に触れるのでわかりやすいし、社長やエンジニアにも伝えやすい」とのことで、この段階ではプロトタイピングツールのPixateを使ってモックアップを作ったそうだ。4カ月間、毎日ひたすらモックアップを作り続けた内田さんのPixateのファイル数は、200以上にも上ったという。
Pixateで作ったモックアップ。かなり完成に近づいている状態
GitHubを使うことで安心してコードに触れる
「デザイナーがコードに触る」といっても、モックアップから実装へ落とし込むのは当然ながらエンジニアの仕事だが、実装後の細かいチューニングはデザイナーが担当するのがAbema流だ。アニメーションの長さやイージングを変更したり、レイアウトを微調整したり、といった作業は、XcodeやAndroid Studio上でデザイナーがコードを直接編集する。
「エンジニアは他人にコードを触らせたくないんじゃないかと不安だったが、お願いしてみたら『自由にやっていいよ』と言ってもらえて」（内田さん）。開発環境の構築などはエンジニアの協力を得て、一緒に作業を進めていったという。
そんなAbema流のワークフローのポイントは、デザイナーもGitHubを使うこと。デザイナーが調整したコードはプルリクエストし、エンジニアがコードをレビューしてからマージする。「『自由にやっていいよ』の裏側には、しっかりレビューしてもらえる安心感があった」と内田さんは振り返る。
デザイナーがコードに触れれば改善サイクルは早くなる
デザイナーがコードに触るワークフローを取り入れたことで得られるメリットは、「改善サイクルが早くなること」だ。たとえば実装したあとになって、アニメーションの秒数をもうちょっと短くしたい、となったときに、以前ならエンジニアにその都度依頼する必要があった。コードを直接触ることで依頼する手間が減るだけでなく、「クリティカルなバグが発生したときなど、エンジニアからするとデザインの修正どころじゃないときにも、サクッと直せる」（内田さん）。
一方で、課題もある。内田さんが感じているのは、タスク管理の難しさだという。「コードを書く時間もタスクとして設定し、時間を確保すべき。普段のデザイン業務とは別に時間を確保しないと、なかなか手をつけられず、後回しになることもある」。
「なんでも屋さんにならないようにする」のも気をつけているポイントだ。デザイナーがある程度コードを書けるようになると、『じゃあやっておいて』となってしまう可能性もある。「本来のデザイン業務がおろそかにならないように、タスク管理の重要性を感じている」。
現在は、Apple TV向けアプリの開発に取り組んでいる内田さん。スマホ発のAbemaTVが今度はテレビの大画面でどんなUIや体験を生み出していくのか、楽しみだ。
