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

by LINE Developers

Slide 1

Slide 1 text

2021/06/26 #pwanight @potato4d & @spring_raining UIT INSIDE の運用を通してわかった Webと音声メディアの可能性 #pwanight

Slide 2

Slide 2 text

Proﬁle - 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)

Slide 3

Slide 3 text

Proﬁle - 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)

Slide 4

Slide 4 text

Agenda - UIT INSIDE のご紹介 - 音声メディアを取り巻く環境と Web という選択肢 - メディアをあえて PWA として提供する意義 - 運用していく中で感じられたこと - 広がる Podcast の輪 - これからの抱負

Slide 5

Slide 5 text

Slide 6

Slide 6 text

https://uit-inside.linecorp.com/ UIT INSIDE について運営の歴史 - 2018/12 にスタート - 毎週金曜日 18:00 に更新 - 登壇時点で ep.90 まで公開 - 70 人のゲストが出演 - ベストエピソードでは 3,500 PV メンバー構成 - メインパーソナリティ2名 - @potato4d - @spring_raining - パーソナリティ - @AlanGDavalos - (@kawasako) - (@G4RDS)

Slide 7

Slide 7 text

短い Podcast のスタンダードを作りたい 1時間超えが基本の世界。だからこそ、

Slide 8

Slide 8 text

History of UIT INSIDE 2018/12 社内で運用開始

Slide 9

Slide 9 text

History of UIT INSIDE 2018/12 社内で運用開始 2019/03 社外公開初の外部ゲスト

Slide 10

Slide 10 text

History of UIT INSIDE 2018/12 社内で運用開始 2019/03 社外公開初の外部ゲスト 2019/04 @spring_raining 参加初の 1,000 view 超え

Slide 11

Slide 11 text

History of UIT INSIDE 2018/12 社内で運用開始 2019/03 社外公開初の外部ゲスト 2019/04 @spring_raining 参加初の 1,000 view 超え 2019/11 Apple Podcast での配信を開始 🍎

Slide 12

Slide 12 text

History of UIT INSIDE 2018/12 社内で運用開始 2019/03 社外公開初の外部ゲスト 2019/04 @spring_raining 参加初の 1,000 view 超え 2019/11 Apple Podcast での配信を開始 🍎 2020/06 3人目のパーソナリティ ep.50 記念 🎉

Slide 13

Slide 13 text

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』で登壇

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Web で提供する 3 つのメリット

Slide 17

Slide 17 text

1. 視聴までのハードルの低さ Web で提供する利点について - Podcast といえば Apple / Google / Spotify のプラットフォームがある - プラットフォームに載せる場合に得られる恩恵はもちろん豊富にある - 統一されたユーザー体験 - 他の Podcast から移ってくる回遊性一方で存在する専用のアプリを導入し、聴きに行くまでのハードルを超えられるかという課題

Slide 18

Slide 18 text

1. 視聴までのハードルの低さ Web で提供する利点について - 『エンジニアブログのためにわざわざアプリを入れますか？』 - 技術 Podcast はエンジニアブログに近いメディア - さらに UIT INSIDE はほどよい長さで良い情報を届けたい - リンクをクリックするだけで聴ける気軽さは非常に重要 - ソーシャルからの流入に依存している技術メディアにおいて、大きな優位性がある

Slide 19

Slide 19 text

Web Ͱ͋Δ͜ͱΛ׆͔ͯ͠ͷ Twitter Card ্Ͱͷ࠶ੜͷ௅ઓ - 導線としてだけではなく、Webはソーシャルと相性が良い - Twitter であれば、カード内にWeb ページを埋め込める - 一時期 UIT INSIDE では試験的に埋め込み再生を有効化 - その後の伸び具合を見るに、当時のターゲット層には直接遷移の需要のほうが高かったため廃止した - しかし、Web 特有のファーストインプレッションのハードルの低さを実感できる一件だった

Slide 20

Slide 20 text

2. コンテンツの表現に対する自由度 Web で提供する利点について - Podcast といえど、技術によれば様々な付加情報が存在する - 例えば話している内容の登壇スライド - フロントエンドなら欠かせない動作イメージの映像・動画 - エビデンスと足り得る情報へのリンクや、話していることのまとめプラットフォームに乗るだけでは実現できない表現の自由度が、Webにはある

Slide 21

Slide 21 text

3. データが取りやすい Web で提供する利点について - Web といえば Analytics SDK を活用しやすい部分も特徴 - 自分たちで設定するイベント - 再生ボタンのクリック数や視聴完了数 - 一般的な Web Analytics の指標 - リファラや滞在時間などどのようにエピソードが広まり、どの程度再生されているかがわかりやすい

Slide 22

Slide 22 text

ep.45 ʰࠓ࿩୊ͷύϧεΦΩγϝʔλʔΛࣗ࡞͢Δʱ͕ಥવ৳ͼͨ೔ - パルスオキシメーターを自作したエピソード - GW の企画の一環として5月に公開 - GW 企画は毎日更新であったこともあり、初動では 500 views 程度と控えめ → ある日突然 2,000 views を超えるエピソードに https://uit-inside.linecorp.com/episode/45

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

PWA とは？

Slide 27

Slide 27 text

そもそも PWA ってなんだろう - UIT INSIDE は狭義の PWA としても提供されている - Add to Home Screen が可能であり、アプリのように動作させる事ができる - 一方で、UIT INSIDE が PWA であると言えるのは、他の理由がある - 軸となるのはプログレッシブ・エンハンスメント - 「WebページがWebページの領域を超えた体験を提供している」こと - PWA であることは、SPA だからできることであり、SPAを選ぶ理由

Slide 28

Slide 28 text

UIT INSIDE を構成する要素 Web サイトとしての UIT INSIDE - エピソードごとに完結した情報が提供する - Webページとして音声・テキスト・スライド(画像)を提供する - それぞれのページが単体で価値を持つ Web アプリとしての UIT INSIDE - INSIDE 全体を通して回遊ができる体験を提供する - あるエピソードを再生しつつ、他のページへと遷移できる - 一つのアプリケーション上で、横断的な音声プレイヤーがある異なる２つの要素がシームレスに融合している

Slide 29

Slide 29 text

エンジニアブログの場合……

Slide 30

Slide 30 text

エンジニアブログの場合…… 一覧ページの体験

Slide 31

Slide 31 text

エンジニアブログの場合…… 一覧ページの体験

Slide 32

Slide 32 text

エンジニアブログの場合…… 一覧ページの体験記事ページの体験

Slide 33

Slide 33 text

UIT INSIDE の場合……

Slide 34

Slide 34 text

UIT INSIDE の場合…… 一覧ページの体験

Slide 35

Slide 35 text

UIT INSIDE の場合…… 一覧ページの体験

Slide 36

Slide 36 text

UIT INSIDE の場合…… 一覧ページの体験エピソードページの体験

Slide 37

Slide 37 text

UIT INSIDE の場合…… 一覧ページの体験エピソードページの体験音声再生の体験

Slide 38

Slide 38 text

UIT INSIDE の場合…… 一覧ページの体験エピソードページの体験音声再生の体験聴覚にアプローチする媒体だからこそページを跨ぐ体験が求められる

Slide 39

Slide 39 text

Slide 40

Slide 40 text

何よりも音声メディアの運営というものに全力で挑戦できたことが収穫。これまで慣れていたテキストベースの媒体とはコンテンツを見られ方や伸ばし方も大きく違うなか、試行錯誤した経験は文字以外でのあらゆるコミュニケーションに活かせそう。収録を口実に多くのフロントエンドエンジニアと話せたこと！収録での情報交換の他にも、前準備での予習や収録内容の裏取りなど、知識をインプットする機会が大幅に増えた。運営していてよかったこと

Slide 41

Slide 41 text

ウィークリーで技術テーマに Podcast を配信するという部分がやっぱり一番難しかった。 Webという媒体が数値を取りやすい分、結果がダイレクトに出るのはつらい時もあるが、一方でイテレーションの回しやすさはやっぱり無二かなと。 Podcastの内容以外にも、改善できる点が多くあった。前情報のまったく無い音声を聞くという行為はとてもハードルが高い。導線を工夫して、まず再生してもらうところまで持っていくために試行錯誤するという点では、他のWebメディアと同じといえると思う。運用している中で感じられたこと

Slide 42

Slide 42 text

Slide 43

Slide 43 text

https://lfk-devpods.linecorp.com/ LFK Mobile Dev Pods 概要 - UIT INSIDE の流れを受けて LINE Fukuoka のモバイルチームも Podcast を運営開始 - Web システムとして作っていた部分もあり、fork したシステムを使っている

Slide 44

Slide 44 text

https://uit-inside.linecorp.com/episode/92 ͋ͨΓͰ঺հ༧ఆʂ UIT UX 改善 Project 概要 - UIT の中で有志で UX の改善について学ぶ取り組みが開始 - 目的のための UX 改善を考案 - 閲覧数を増やす - 演者とコンタクトできる導線を増やす - 自分たちで開発する Web サイトだからこそできる改善たち

Slide 45

Slide 45 text

Slide 46

Slide 46 text

音声メディアは滞在時間が長い一方で、ながらが体験の中心になってくる。触れている時間に対して運営者が訪問者に取れるコミュニケーションが少ないので、そのあたりをもっと使ってもらえるような工夫を考えていきたい。自分たちで好きにできるポータルサイトを持っていることを生かして、たとえば音声内容を字幕に起こして見せる機能などを提供してみたい。 Podcastとしては一見矛盾しているが、文字媒体と組み合わせられるとアクセシビリティやSEOの面でより多くの人にリーチできると思う。これからの抱負