ニコニコ動画iOSアプリの UX・マネタイズ・技術の話

ニコニコ動画iOSアプリの UX・マネタイズ・技術の話
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話株式会社ドワンゴ松前健太郎 @kenmaz
自己紹介 • 松前健太郎 (@kenmaz) • ドワンゴニコニコ事業本部ニコニコiPhone 開発リーダー • 2009/06 中途入社 • 前職は大手メーカー系SIerで研究開発
アジェンダ • ニコ動・ニコ生iOSアプリの概要 • ニコ動アプリのUX • マネタイズ • 技術的な話
ニコニコ動画ニコニコ生放送 iOSアプリの概要
ニコニコ動画iOSアプリ • ニコニコ動画を視聴するためのアプリ • iPhone/iPadの両方に対応 • 2009年5月リリース • 月間ログインUU：102万 (2012年4月)
ニコニコ生放送iOSアプリ • ニコニコ生放送を視聴・放送するアプリ • iPhoneに対応（近日iPad対応予定） • 2010年5月リリース • 月間ログインUU：34.7万 (2012年4月)
ニコ動アプリのUX
ニコ動アプリの進化 • 2009年にリリース以来、30回以上アップデートを繰り返してきた • まずはアプリの進化の歴史をちょっと振り返り
ver1.0 • まず“iPhoneでニコ動が見れる” • ガラケー向けに変換された動画を流用（低画質） • UITableViewを使ったシンプルなUI
ver2.0 • 画質の向上 • WiFi接続時のみ、mp4で高画質再生 • UIはver1.0から大きな変更なし
ver3.0 • さらなる画質の向上 • WiFi/3G問わず、常にmp4で高画質再生 • UIをHTML/CSSで実装、デザインの見直し
ver4.0 • UXの再設計 • ver3.0で基本は完成 • ver4.0でUXを再設計
UXの再設計 • UIの見直し • 新しい動画視聴スタイル • デザインの刷新
UXのハニカム構造 The User Experience Honeycomb http://semanticstudios.com/publications/semantics/000029.php
UIの見直し • 使いやすい • 探しやすい • 迷わない
画面の向き • 現状 • 動画を探すとき：縦固定 • 動画を視聴するとき：横固定 • 問題点 • 頻繁に端末をクルクルと持ち替える必要がある • 快適な動画視聴の妨げ • 動画系のiPhoneアプリでは一般的なUI • ex) Youtube、Ustream、Hulu
画面の向き • 実際の利用シーン • 片手しか使えない状況（外出時など）→縦 • 両手が使える状況（自宅でまったり）→横 • フリック入力でコメントを入力したい→縦 • じっくり全画面で動画をみたい→横 • 状況ごとに最適な画面の向きがある • 縦横両方に対応して、より使いやすく
タブバーの廃止 • 従来 • 広告は表示したい • 画面領域は確保したい • 改善 • タブバーによるメニューは廃止 • 必要なときに”ひっぱり出す”メニュー
コンテンツ領域コンテンツ領域
2ペインスタック構造 • 横向き画面を最大限を活かすUI • 横フリックで戻る、進むが可能 • ビュー自体はUIWebView
UIWebView
新しい動画視聴スタイル • 従来 • 動画を一覧から選んで視聴、の繰り返し • もっと気軽に動画を見てほしい • ながら見 • 毎日アプリを起動してみたくなる仕掛け • ダラ見
ながら見 • 動画を見ながら、他の動画を探せる • ちょっと気になったらタップしてプレビュー再生 • 面白そうなら全画面で引き続き再生 • 興味がなければ別の動画にすぐ切り替え
ながら見
ながら見
ながら見
ながら見
ながら見
ながら見
ながら見 • 動画視聴までのハードルを下げる • 動画を見ながら次の動画を探す • 動画を見ながら他のことをする • テレビを見ているときと同じ感覚
ダラ見 • いつ、どういう状況でアプリが使われているか？
ダラ見 • 夕食後から寝るまでの間 • 自宅でダラダラしている時間 • といえば、テレビのダラ見 • テレビのような垂れ流し機能があればアプリを使ってくれるかも
あなたチャンネル機能 • あなたが興味のありそうな動画をリコメンドして連続再生
視聴履歴を元にしたリコメンド SNS上の友達のおすすめの動画お気に入りうｐ主の新着動画
デザインの刷新 • 見た目はやはり重要 • 変わった感 • ユーザに飽きられるのを防ぐ • ニコ動で、先進的・クールな感じ・未来感 • といえば・・・
ニコファーレ
ニコファーレをモチーフにしたデザイン（ボツ案）
最終的にこうなった
隠されたメニューここを引っ張る「ランキングどこにあるの・・・」
引っ張りたくなるタブのデザイン
デザインvsパフォーマンスデザイン案実際のアプリ
デザインvsパフォーマンスデザイン案実際のアプリ
デザインvsパフォーマンス透過＋ブラー透過のみ • 実装可能だがレンダリングが激しく重くなった •→適度な落とし所を
リリース後の反応
• 狙っていた点については、ある程度の評価を得た • 特にiPadのような大きな画面での利便性が高まった • 一方で、想定していなかった観点からの指摘がいくつかあった
コメ数・視聴者数表示 • 動画一覧からコメント数・視聴者数の表示を削除 • 「コメント数や視聴者数で動画を探してたので不便」 • →UIを変更する際は、既存の文化を破壊しないように注意
画面の向き • 加速度センサで画面の向きを変更 • 「ロック解除がめんどくさい」 • 「そもそもロック解除の方法が分からない」 • →明示的に設定できるようにした • iPhoneの標準のUIに従った • 標準のUIが最良とは限らない
マネタイズ
マネタイズ • ニコ動iPhoneアプリのマネタイズ手段 • プレミアム会員の入会導線 • 広告収益
プレミアム会員 • 月額525円で以下のような特典 • 高速回線で快適に動画視聴 • 混雑時でも優先的に生放送を見れる • 生放送の配信ができる • などなど
iPhoneアプリでの導線 • アプリ内の各所に導線を設置 • 動画再生前、生放送追い出し時 • リンクをタップするとSafariが起動して入会web ページに遷移（クレカ決済、携帯キャリア決済、 webマネー決済など） • プレミアム入会導線としてのアプリ • ニコ動アプリからは、毎月それなりの数の入会がある
従来の入会導線 Safari起動アプリ Safari Safari
2011年11月事件発生 • ニコ生アプリがリジェクト • リジェクト理由 • 「プレミアム入会ページへリンクするためのボタン等はアプリ内に設置してはいけない（審査ガイドライン11.13違反）」 • 「アプリ内課金(IAP)機能を使って決済してプレミアム入会させるのはOK」 App Store Review Guidelineより 11.13 外部の課金メカニズムにリンクしているアプリはリジェクトされる。たとえば「購入」ボタンをタップすると、電子書籍の販売サイトが開くような仕組みをもつアプリなど。
どうしよう • アプリ内から入会導線を消す？ • アプリ経由の入会がまるごと消滅？ • IAPを使って入会機能を実装？ • Appleへの30%の手数料を受け入れるのか？ • 今回はニコ生アプリがリジェクトされたが・・ • ニコ動アプリも次回審査時にリジェクトされることは間違いなし！
２つの選択肢 1. ニコ動アプリ開発を凍結、放置して入会を維持 2. 素直にIAPを使ってプレミアム入会機能を追加する（手数料30%を飲む）
ニコ動アプリ開発を凍結、放置して入会を維持 • 短期的に見れば正解かもしれないが・・・ • スマホ主流の昨今、これはありえない！ • とはいえ藤は結構あった (~_~;)
２つの選択肢 1. ニコ動アプリ開発を凍結、放置して入会を維持 2. 素直にIAPを使ってプレミアム入会機能を追加する（手数料30%を飲む）これしかない（消去法的に）
どのIAPプロダクトを選ぶか 1. 購読型（自動更新） • 自動引き落としの月額課金が可能 • 審査が厳しい（電子書籍・新聞など向け） 2. 購読型（非自動更新） • ユーザに継続手続きをしてもらう必要がある • 審査は比較的ゆるい
どのIAPプロダクトを選ぶか 1. 購読型（自動更新） • 自動引き落としの月額課金が可能 • 審査が厳しい（電子書籍・新聞など向け） 2. 購読型（非自動更新） • ユーザに継続手続きをしてもらう必要がある • 審査は比較的ゆるい
価格をいくらに設定するか • たとえば • 月額課金：¥700/月 (取り分¥490) • チケット：¥2000/3ヶ月 (取り分¥1400) • 要判断 • 自動更新購読型ではない • 実はwebから入会してくれたほうが嬉しい
価格をいくらに設定するか • たとえば • 月額課金：¥700/月 (取り分¥490) • チケット：¥2000/3ヶ月 (取り分¥1400) • 要判断 • 自動更新購読型ではない • 実はwebから入会してくれたほうが嬉しい
経理まわりの注意点 • 翌月：速報値を元に仮計上 • 翌々月：ファイナンシャルレポートを元に本計上 • →速報値と数値が合わない！クレジットカードの入金タイミングや締め日の問題で必ずしも数値は一致しない。全体的に見れば帳尻は合っているはずだから気にするな by Apple
広告周りの改善 • これまで • AdMobなどアドネットワークの広告を表示 • 各社提供のSDKをアプリに組み込み • 問題点 • 新しいアドネットワークを追加するたびにアプリの改修が必要 • 広告表示ロジックがアプリ組み込みなので、その時々の最適な広告表示ができない
広告周りの改善従来広告業者A A用SDK B用SDK 広告業者B C用SDK 広告業者C D用SDK 広告業者D 各業者ごとにSDK の組み込み必要そのたびに審査が必要
広告配信システム+Web • どこにどのような広告を表示するかはすべてサーバーサイドの広告配信システムが調整して配信 • アプリ側では配信される広告をWeb ページ内に表示
広告配信システム+Web 広告業者A 広告業者B <iframe> 広告配信 web サーバー広告業者C 広告業者D 配信比率 Webベースなのでの最適化 SDKの組み込み不要
広告配信システム+UIWebView • メリット • いま一番かる広告を、専任の担当者がサーバー側で調整・配信 • webベースなので、新たなアドネットワークを使用する際もアプリの更新は不要
ところで • アプリで稼ぐのは大変 • Appleの規約による制限 • アプリ修正のたびに審査が必要 • アプリをやめて、webでやれば良いのでは？ • webなら入会導線貼り放題 • 審査もいらない
HTML5でニコ動 • ニコ動HTML5プレイヤー • アプリなしでSafari上で動画再生 • HTML5のvideoタグを使用 • iPhoneのSafariでは動画にコメントを重ねられない！ • iOSについてはしばらくはアプリがメイン
技術的な話
トピック • UIWebViewを用いたUI • 動画再生の仕組み • 生放送再生の仕組み
UIWebViewを用いたUI • 動画再生処理やUIの骨組みはCocoa/ Objective-Cによるアプリの実装 • それ以外の部分はほぼwebで実装 • UIWebViewを使ってミックス
UIWebViewを用いたUI
UIWebViewを用いたUI アプリ web
UIWebViewを用いたUI web アプリ
UIWebViewを用いたUI アプリ web
UIWebViewを用いたUI アプリ
Web-アプリ間の連携 • Web→アプリの連携 • URL Schemaを使ってwebからアプリの機能を呼び出し • ex) “nicovideo://play/sm9” • ex) “nicovideo://web?/Ranking/genre=game” • アプリ→webの連携 • UIWebViewに対するJSの実行
1. web上でリンクをタップ <a href=”nicovideo://web?/Ranking/genre?type=game”>.. 2. appはUIWebViewを新規生成してスタック UIWebView 3. appはスタックした新規UIWebViewに ”/Ranking/genre?type=game”をロード
1. 動画視聴開始後、アプリはUIWebViewに対して以下のコードを実行 NSString js = @”playHisotory.add(‘sm123’)”; [webview stringByEvaluatingJavaScriptFromString:js]; 2. web上のplayHistoryオブジェクトは、動画ID「sm123」をlocalStorageに保存 3. webの視聴履歴画面表示時に、JavaScriptでlocalStorage から視聴履歴データを取得、表示
UIWebViewを用いたUI • メリット • ちょっとした機能の追加・修正であれば審査不要 • HTML/CSS/JSで開発可能 • webエンジニア・デザイナを活用できる • デメリット • 描画処理などネイティブアプリに劣る部分がある • JS/CSS圧縮、キャッシュ最適化など必須
UIWebView使用時の注意点 • UIWebView ≠ Safari • Safariよりレンダリングの性能は低い • →あまり凝ったデザインにしない • 一部のCSSが正常に動作しない（例：position:fixed） • →あきらめてデザインを変更 • アプリのバージョンアップによってLocalStorageが壊れることがある • →あきらめてcookieを使う
動画再生の仕組み • iPhoneで再生可能な主なフォーマット • mp4 (H.264, AAC) • ニコ動に投稿される動画の形式は多種多様 • flv, mp4, divx, mpeg1,2, wmv, swf... • iPhoneでは再生できない可能性がある • サーバーサイドでmp4(H.264/ACC)に変換 • 2010/8以降に投稿された動画はすべて変換済み • 過去動画についても2012/3より再変換開始 • それ以外の動画はモバイル画質(osec形式)動画を再生
おせち osec形式？ • パラパラ漫画のようにJPEGを１コマずつ再生して動画っぽく見せるガラケー端末向けの独自動画形式 • 映像 = JPEG、音声 = ADPCM • 動画データを１秒 (One-Sec)ごとに分割・パケット化像画像画像画像画像画像画像画像画像画像画像画像音声音声音声１秒分１秒分１秒分
動画再生の仕組み osec変換 osec サーバー一部動画 mp4 動画配信 mp4/flv/... サーバー動画投稿者再エンコード、mp4生成
実装上の問題 • mp4の再生にはMPMoviePlayerを使用 • 一回の動画取得で複数回のRangeリクエストが発生 • 動画ストレージのサーバー負荷増大 • Cookieを自由に更新できない • ニコ動の動画ストレージはCookieによる認証を行っている • 認証に失敗して動画が取得できない ※MPMoviePlayer: iOSが提供する動画再生用クラス
実装上の問題アプリ内部にローカルプロキシを実装アプリニコ動 MPMoviePlayer ローカルプロキシ動画ストレージ動画取得動画取得動画取得認証動画データ返信動画取得動画取得
生放送の配信形式 • ニコニコ生放送はRTMP形式で映像を配信しているが・・・ App Store Review Guidelineより 9.4 3G回線上で動画のストリーミング再生を行う場合は、HLS (HTTP Live Streaming) 形式で映像を配信する必要がある。
RTMP (Real Time Messaging Protocol) • 動画・音声のライブストリーミングのためのプロトコル • Adobeが仕様を策定 • Flashプレイヤー等で採用されている • ニコ生(PC)は全面的にRTMPを採用 • iPhoneはRTMPの直接再生は不可
HLS (HTTP Live Streaming) • HTTPだけで擬似的にライブストリーミングを実現するプロトコル • Appleが仕様を策定 • IETFのインターネットドラフトとして提出 • iPhone,QuickTimeなどで採用
HLS (HTTP Live Streaming) HTTPサーバー (Apacheなど) #EXTM3U プレイリスト(m3u8) #EXT-X-TARGETDURATION:10 #EXT-X-MEDIA-SEQUENCE: 0 が動的に更新される #EXTINF:10, sample_0001.ts #EXTINF:10, sample_0002.ts #EXTINF:10, sample_0003.ts sample_0001.ts 映像データをプレイリストどおりに sample_0002.ts 10秒ごとに分割連続再生 sample_0003.ts
HLSの特徴 • 長時間の動画であっても一度の通信で取得するのは10秒分の動画データだけ • 帯域を圧迫しない • インフラや通信キャリアには優しい
HLSの特徴 • 動画データはHTTPで転送 • Apacheのような普通のwebサーバーだけで動画ストリーミングが実現できる。Adobe FMSなどの高価なサーバーは不要 • HTTPなので多くの環境で使用できる
HLSの特徴 • 帯域幅に応じた画質自動切り替え • 帯域が細くても快適に動画を視聴できる通信状況が sample_0001.ts sample_0002.ts 高画質動画良い時 sample_0003.ts 帯域幅に応じて自動切換え通信状況が sample_0001.ts sample_0002.ts 低画質動画悪い時 sample_0003.ts
HLSの特徴 • 生放送で使用する場合は遅延が問題になるデメリットもある • コンテンツ保護の仕組みが不十分
生放送の配信形式 • RTMP→HLSのリアルタイム変換サーバー (nicolis) を開発 • HLSで配信すればAppleの審査もOK! • マルチデバイス化 • iPhoneだけでなく、PSVITA、家電、組み込み機器などでもHLSを使用する予定
HLS RTMP ニコ生 HLS nicolis 配信サーバー HLS (H.264/AAC) HLS RTMP リアルタイム変換 RTMP 家電組み込み機器
まとめ • UX • 使いやすい、探しやすい、気持ち良いを追求 • 作って、壊して、ユーザの声を聞いて、進化するのが基本 • マネタイズ • Appleの規約は厳しいが受け入れる • 広告についてはチューニングしやすいように • 技術 • Webとアプリの密な連携 • マルチデバイス化を見据えたアーキテクチャを設計
人材募集ドワンゴではniconico事業をより盛り上げてくれる人材を募集中！ • webアプリエンジニア • データマイニングエンジニア • スマートフォンアプリエンジニア • インフラエンジニア • インフラエンジニア • webデザイナ • C++エンジニア • スマートフォンアプリデザイナ • ニコファーレ3Dシステム開発エ • etc... ンジニア
ご清聴ありがとうございました

Check these out next

ニコニコ動画iOSアプリの UX・マネタイズ・技術の話

Recommended

More Related Content

Slideshows for you(19)

Similar to ニコニコ動画iOSアプリの UX・マネタイズ・技術の話(20)

Recently uploaded(20)

ニコニコ動画iOSアプリの UX・マネタイズ・技術の話

Editor's Notes