The Potential of Voice Media on the Web - Trajectory of UIT INSIDE

「UIT INSIDEの運用を通してわかったWebと音声メディアの可能性」 - PWA Night Conference 2021
https://conf2021.pwanight.jp/speaker/line/

LINE株式会社
花谷拓磨 / 玉田晃寛

LINEのフロントエンド開発組織UITでは、2019年よりUIT独自で運営するPodcast「UIT INSIDE」を公開しています。音声メディアという少しだけ特殊なコンテンツをPWAで公開することについて、技術的な面からご紹介します。また、2年半継続して公開し続ける上での取り組みについても深堀りします。

Transcript

1. 2021/06/26 #pwanight @potato4d & @spring_raining UIT INSIDE の運用を通してわかった Webと音声メディアの可能性 #pwanight
2. Profile - LINE Corp. - UIT Front-End Dev9 Team Manager - UIT INSIDE founder, main personality Activity - Organize UIT commnuity - OSS Maintainer (Nuxt.js official library) Takuma Hanatani (@potato4d)
3. Profile - LINE Corp. - UIT Front-End Dev6 Team Engineer - UIT INSIDE main personality Activity - In-house icon library (LAICON) maintainer - OSS Contribution (Vivliostyle) Akihiro Tamada (@spring_raining)
4. Agenda - UIT INSIDE のご紹介 - 音声メディアを取り巻く環境と Web という選択肢 - メディアをあえて PWA として提供する意義 - 運用していく中で感じられたこと - 広がる Podcast の輪 - これからの抱負
5. Agenda - UIT INSIDE のご紹介 - 音声メディアを取り巻く環境と Web という選択肢 - メディアをあえて PWA として提供する意義 - 運用していく中で感じられたこと - 広がる Podcast の輪 - これからの抱負
6. https://uit-inside.linecorp.com/ UIT INSIDE について 運営の歴史 - 2018/12 にスタート - 毎週金曜日 18:00 に更新 - 登壇時点で ep.90 まで公開 - 70 人のゲストが出演 - ベストエピソードでは 3,500 PV メンバー構成 - メインパーソナリティ2名 - @potato4d - @spring_raining - パーソナリティ - @AlanGDavalos - (@kawasako) - (@G4RDS)
7. 短い Podcast のスタンダードを作りたい 1時間超えが基本の世界。だからこそ、
8. History of UIT INSIDE 2018/12 社内で運用開始
9. History of UIT INSIDE 2018/12 社内で運用開始 2019/03 社外公開 初の外部ゲスト
10. History of UIT INSIDE 2018/12 社内で運用開始 2019/03 社外公開 初の外部ゲスト 2019/04 @spring_raining 参加 初の 1,000 view 超え
11. History of UIT INSIDE 2018/12 社内で運用開始 2019/03 社外公開 初の外部ゲスト 2019/04 @spring_raining 参加 初の 1,000 view 超え 2019/11 Apple Podcast での 配信を開始 🍎
12. History of UIT INSIDE 2018/12 社内で運用開始 2019/03 社外公開 初の外部ゲスト 2019/04 @spring_raining 参加 初の 1,000 view 超え 2019/11 Apple Podcast での 配信を開始 🍎 2020/06 3人目のパーソナリティ ep.50 記念 🎉
13. History of UIT INSIDE 2018/12 社内で運用開始 2019/03 社外公開 初の外部ゲスト 2019/04 @spring_raining 参加 初の 1,000 view 超え 2019/11 Apple Podcast での 配信を開始 🍎 2020/06 3人目のパーソナリティ ep.50 記念 🎉 2021/11 『今日からはじめる技術 Podcast』で登壇
14. History of UIT INSIDE 2018/12 社内で運用開始 2019/03 社外公開 初の外部ゲスト 2019/04 @spring_raining 参加 初の 1,000 view 超え 2019/11 Apple Podcast での 配信を開始 🍎 2020/06 3人目のパーソナリティ ep.50 記念 🎉 2021/11 『今日からはじめる技術 Podcast』で登壇 2021/09 ep.100 予定 😎
15. Agenda - UIT INSIDE のご紹介 - 音声メディアを取り巻く環境と Web という選択肢 - メディアをあえて PWA として提供する意義 - 運用していく中で感じられたこと - 広がる Podcast の輪 - これからの抱負
16. Web で提供する 3 つのメリット
17. 1. 視聴までのハードルの低さ Web で提供する利点について - Podcast といえば Apple / Google / Spotify のプラットフォームがある - プラットフォームに載せる場合に得られる恩恵はもちろん豊富にある - 統一されたユーザー体験 - 他の Podcast から移ってくる回遊性 一方で存在する 専用のアプリを導入し、聴きに行くまでのハードルを超えられるかという課題
18. 1. 視聴までのハードルの低さ Web で提供する利点について - 『エンジニアブログのためにわざわざアプリを入れますか？』 - 技術 Podcast はエンジニアブログに近いメディア - さらに UIT INSIDE はほどよい長さで良い情報を届けたい - リンクをクリックするだけで聴ける気軽さは非常に重要 - ソーシャルからの流入に依存している技術メディアにおい て、大きな優位性がある
19. Web Ͱ͋Δ͜ͱΛ׆͔ͯ͠ͷ Twitter Card ্Ͱͷ࠶ੜͷ௅ઓ - 導線としてだけではなく、Webはソーシャルと相性が良い - Twitter であれば、カード内にWeb ページを埋め込める - 一時期 UIT INSIDE では試験的に埋め込み再生を有効化 - その後の伸び具合を見るに、当時のターゲット層には直接 遷移の需要のほうが高かったため廃止した - しかし、Web 特有のファーストインプレッションのハー ドルの低さを実感できる一件だった
20. 2. コンテンツの表現に対する自由度 Web で提供する利点について - Podcast といえど、技術によれば様々な付加情報が存在する - 例えば話している内容の登壇スライド - フロントエンドなら欠かせない動作イメージの映像・動画 - エビデンスと足り得る情報へのリンクや、話していることのまとめ プラットフォームに乗るだけでは実現できない表現の自由度が、Webにはある
21. 3. データが取りやすい Web で提供する利点について - Web といえば Analytics SDK を活用しやすい部分も特徴 - 自分たちで設定するイベント - 再生ボタンのクリック数や視聴完了数 - 一般的な Web Analytics の指標 - リファラや滞在時間など どのようにエピソードが広まり、どの程度再生されているかがわかりやすい
22. ep.45 ʰࠓ࿩୊ͷύϧεΦΩγϝʔλʔΛࣗ࡞͢Δʱ͕ಥવ৳ͼͨ೔ - パルスオキシメーターを自作したエピソード - GW の企画の一環として5月に公開 - GW 企画は毎日更新であったこともあり、初 動では 500 views 程度と控えめ → ある日突然 2,000 views を超えるエピソードに https://uit-inside.linecorp.com/episode/45
23. ep.45 ʰࠓ࿩୊ͷύϧεΦΩγϝʔλʔΛࣗ࡞͢Δʱ͕ಥવ৳ͼͨ೔ - 今年1月に突然 PV が上昇 - 訪問元を見ると、Google からの流入が多い - 調査の結果検索数が多く、かつ検索トップに → 通常 t.co からの流入が多い傾向を知っていた ことで、リファラを見ることによってより詳細 に伸びた理由を分析できた 🔬 https://uit-inside.linecorp.com/episode/45 0 350 700 1050 1400 2020/06 2020/07 2020/08 2020/09 2020/10 2020/11 2020/12 2021/01 2021/02 2021/03
24. ep.45 ʰࠓ࿩୊ͷύϧεΦΩγϝʔλʔΛࣗ࡞͢Δʱ͕ಥવ৳ͼͨ೔ - 今年1月に突然 PV が上昇 - 訪問元を見ると、Google からの流入が多い - 調査の結果検索数が多く、かつ検索トップに → 通常 t.co からの流入が多い傾向を知っていた ことで、リファラを見ることによってより詳細 に伸びた理由を分析できた 🔬 https://uit-inside.linecorp.com/episode/45
25. Agenda - UIT INSIDE のご紹介 - 音声メディアを取り巻く環境と Web という選択肢 - メディアをあえて PWA として提供する意義 - 運用していく中で感じられたこと - 広がる Podcast の輪 - これからの抱負
26. PWA とは？
27. そもそも PWA ってなんだろう - UIT INSIDE は狭義の PWA としても提供されている - Add to Home Screen が可能であり、アプリのように動作させる事ができる - 一方で、UIT INSIDE が PWA であると言えるのは、他の理由がある - 軸となるのはプログレッシブ・エンハンスメント - 「WebページがWebページの領域を超えた体験を提供している」こと - PWA であることは、SPA だからできることであり、SPAを選ぶ理由
28. UIT INSIDE を構成する要素 Web サイトとしての UIT INSIDE - エピソードごとに完結した情報が提供する - Webページとして音声・テキスト・スライド(画像)を提供する - それぞれのページが単体で価値を持つ Web アプリとしての UIT INSIDE - INSIDE 全体を通して回遊ができる体験を提供する - あるエピソードを再生しつつ、他のページへと遷移できる - 一つのアプリケーション上で、横断的な音声プレイヤーがある 異なる２つの要素がシームレスに融合している
29. エンジニアブログの場合……
30. エンジニアブログの場合…… 一覧ページの体験
31. エンジニアブログの場合…… 一覧ページの体験
32. エンジニアブログの場合…… 一覧ページの体験 記事ページの体験
33. UIT INSIDE の場合……
34. UIT INSIDE の場合…… 一覧ページの体験
35. UIT INSIDE の場合…… 一覧ページの体験
36. UIT INSIDE の場合…… 一覧ページの体験 エピソードページの体験
37. UIT INSIDE の場合…… 一覧ページの体験 エピソードページの体験 音声再生の体験
38. UIT INSIDE の場合…… 一覧ページの体験 エピソードページの体験 音声再生の体験 聴覚にアプローチする媒体だからこそ ページを跨ぐ体験が求められる
39. Agenda - UIT INSIDE のご紹介 - 音声メディアを取り巻く環境と Web という選択肢 - メディアをあえて PWA として提供する意義 - 運用していく中で感じられたこと - 広がる Podcast の輪 - これからの抱負
40. 何よりも音声メディアの運営というものに全力で挑戦できたことが収穫。 これまで慣れていたテキストベースの媒体とはコンテンツを見られ方や伸ばし 方も大きく違うなか、試行錯誤した経験は文字以外でのあらゆるコミュニケー ションに活かせそう。 収録を口実に多くのフロントエンドエンジニアと話せたこと！ 収録での情報交換の他にも、前準備での予習や収録内容の裏取りなど、知識を インプットする機会が大幅に増えた。 運営していてよかったこと
41. ウィークリーで技術テーマに Podcast を配信するという部分がやっぱり一番難 しかった。 Webという媒体が数値を取りやすい分、結果がダイレクトに出るのはつらい時 もあるが、一方でイテレーションの回しやすさはやっぱり無二かなと。 Podcastの内容以外にも、改善できる点が多くあった。 前情報のまったく無い音声を聞くという行為はとてもハードルが高い。導線を 工夫して、まず再生してもらうところまで持っていくために試行錯誤するとい う点では、他のWebメディアと同じといえると思う。 運用している中で感じられたこと
42. Agenda - UIT INSIDE のご紹介 - 音声メディアを取り巻く環境と Web という選択肢 - メディアをあえて PWA として提供する意義 - 運用していく中で感じられたこと - 広がる Podcast の輪 - これからの抱負
43. https://lfk-devpods.linecorp.com/ LFK Mobile Dev Pods 概要 - UIT INSIDE の流れを受けて LINE Fukuoka のモバイルチームも Podcast を運営開始 - Web システムとして作っていた 部分もあり、fork したシステム を使っている
44. https://uit-inside.linecorp.com/episode/92 ͋ͨΓͰ঺հ༧ఆʂ UIT UX 改善 Project 概要 - UIT の中で有志で UX の改善につ いて学ぶ取り組みが開始 - 目的のための UX 改善を考案 - 閲覧数を増やす - 演者とコンタクトできる導線を 増やす - 自分たちで開発する Web サイト だからこそできる改善たち
45. Agenda - UIT INSIDE のご紹介 - 音声メディアを取り巻く環境と Web という選択肢 - メディアをあえて PWA として提供する意義 - 運用していく中で感じられたこと - 広がる Podcast の輪 - これからの抱負
46. 音声メディアは滞在時間が長い一方で、ながらが体験の中心になってくる。 触れている時間に対して運営者が訪問者に取れるコミュニケーションが少ない ので、そのあたりをもっと使ってもらえるような工夫を考えていきたい。 自分たちで好きにできるポータルサイトを持っていることを生かして、たとえ ば音声内容を字幕に起こして見せる機能などを提供してみたい。 Podcastとしては一見矛盾しているが、文字媒体と組み合わせられるとアクセシ ビリティやSEOの面でより多くの人にリーチできると思う。 これからの抱負