ニコニコ動画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月)

ニコ動アプリの進化

• 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

新しい動画視聴スタイル
• 従来

• 動画を一覧から選んで視聴、の繰り返し

• もっと気軽に動画を見てほしい

• ながら見

• 毎日アプリを起動してみたくなる仕掛け

• ダラ見

ながら見
• 動画を見ながら、他の動画を探せる

• ちょっと気になったらタップしてプレ
ビュー再生

• 面白そうなら全画面で引き続き再生

• 興味がなければ別の動画にすぐ切り替え

ながら見

• 動画視聴までのハードルを下げる
• 動画を見ながら次の動画を探す
• 動画を見ながら他のことをする
• テレビを見ているときと同じ感覚

ダラ見
• いつ、どういう状況でアプリが使われ
ているか？

ダラ見
• 夕食後から寝るまでの間
• 自宅でダラダラしている時間
• といえば、テレビのダラ見
• テレビのような垂れ流し機能があればア
プリを使ってくれるかも

あなたチャンネル機能
• あなたが興味のありそうな動画を
リコメンドして連続再生

視聴履歴を元にしたリコメンド

SNS上の友達のおすすめの動画

お気に入りうｐ主の新着動画

デザインの刷新
• 見た目はやはり重要

• 変わった感

• ユーザに飽きられるのを防ぐ

• ニコ動で、先進的・クールな感じ・未来感

• といえば・・・

ニコファーレをモチーフにした
デザイン（ボツ案）

隠されたメニュー

ここを引っ張る

「ランキングどこにあるの・・・」

引っ張りたくなる
タブのデザイン

デザイン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. 購読型（非自動更新）

• ユーザに継続手続きをしてもらう必要がある

• 審査は比較的ゆるい

価格をいくらに設定するか
• たとえば

• 月額課金：¥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を使ってミックス


アプリ web


web アプリ


アプリ

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
から視聴履歴データを取得、表示

• メリット

• ちょっとした機能の追加・修正であれば審査不要

• HTML/CSS/JSで開発可能

• webエンジニア・デザイナを活用できる

• デメリット

• 描画処理などネイティブアプリに劣る部分がある

• JS/CSS圧縮、キャッシュ最適化など必須

UIWebView使用時の注意点
• UIWebView ≠ Safari
• Safariよりレンダリングの性能は低い

• →あまり凝ったデザインにしない

• 一部のCSSが正常に動作しない（例：position:ﬁxed）

• →あきらめてデザインを変更

• アプリのバージョンアップによってLocalStorageが壊れ
ることがある

• →あきらめてcookieを使う

動画再生の仕組み
• iPhoneで再生可能な主なフォーマット

• mp4 (H.264, AAC)
• ニコ動に投稿される動画の形式は多種多様

• ﬂv, 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/ﬂv/...
サーバー

動画投稿者
再エンコード、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

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...
ンジニア

ご清聴ありがとうございました

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

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

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

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

Recently uploaded

Recently uploaded (10)

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

Editor's Notes