masuP.net

#deisui_html_radio の作り方

#deisui_html_radio というお酒を飲みながら主にウェブ制作、特にHTMLマークアップ、コーディングの話題を取り扱うライブ配信をやりはじめて結構たった。放送回数も15回を超えて、手慣れてきた部分もあるのでこれまでを思い出しながら振り返ってみる記事。

はじまり

はじまりは「HTMLは大事だけど、大事に思われてなくなくなくなくない?」というテーマで、 @magi1125@o_ti@ahomuのお三人と私で飲み会をしたことによる。

この時のハッシュタグが #deisui_html。

当日の内容はさておき、飲みながら界隈の話をするというのがとても楽しかったのでこういう形でポッドキャストでもやろうかと @o_ti と話をして始めたのが、#deisui_html_radio。ライブ配信なのにradioなのは、最初がポッドキャストだったため。

まぼろしの第一回目とゲストを呼んで生放送の第二回

とりあえず何も考えずに、酒を飲みながら収録をしたのが第一回目。機材はiPhoneで録音アプリか何かで録音するスタイルだったと思う。

収録自体は楽しかったのだけど、結構酔ってしまって世に出せない内容になってしまい残念ながらお蔵入り。録音も2時間しかできてなくて最後の方は撮り逃しているという。

その反省をもとに考えたのが生放送という形式。生放送であれば緊張感を持ってやれる(かもしれない)。何かあってもアーカイブを非公開にすれば問題は小さくできる。終わったあとに編集もしなくて良い。あたりで生放送を試してみて思いの外うまく行ったので継続している。FRESH LIVEに自分が開発に携わっていてドッグフーディングができる、すぐに始められるというのももちろん大きかった。

ゲストを呼ぶ経緯ははっきり覚えていないが、筋道ができて話が脱線しなくなるので第二回以降、ずっとゲストに来ていただいて放送している。もう一度、二人での配信をやりたいねっていう話は半年ぐらいしている。

見てもらえれば分かるが、最初のゲスト @momdo_ さんが遠隔というのもあり音声のみの放送だった。このあたりはまだラジオの名残があるかもしれない。

機材は、この回からマイクを用意している。

短めのスタンドにかけられた有線マイクの写真
Amazon | SONY エレクトレットコンデンサーマイクロホン PCV80U ECM-PCV80U | 楽器・音響機器 | 楽器

とにかく映像、音声の機材について素人なのと継続できるかどうか怪しいまま始めているので、安くて追加の機材が要らないものを、という選定理由。マイクの出力値をUSB type Aに変換してくれる何かが付属してそのままPCに繋いで使えるし、値段も3,500円程度なので、失敗しても痛くないというのもあった。

ゲストのもんどさんとはSkypeで通話しその音声を、我々の音声はマイクの音声をそのまま利用するという配信。配信ソフトウェアはOBS Studioを利用して、これは現在でも利用している。

Open Broadcaster Software | ダウンロード

このとき、Skypeの音声とマイクの音声をアレコレして配信ソフトに認識させるために設定を頑張ったが、結果めんどくさくなりゲストをリアルで呼ぶというスタイルに変わっていく。

話す内容は、事前にアジェンダを用意してゲストと共有し、追加の話題や、触れられたくないNGな内容の確認などをしている。概ね、どのゲストもほとんどこちらの用意したアジェンダで進行させていただいている。

映像配信スタート、音割れ、飲みすぎる問題

カメラを用意し、映像を加えての配信となった「#3 ~ engineer meets designer and abroller ~」はほとんど現在のスタイルと変わらない。映像ありに変えてみると前回ますぴーさんとおちさんの声聞き分けられなかったので、映像ありうれしいというコメントがあり、やはり音声だけでは色々と考慮しないといけないことも多いと実感した。

音声の品質をあげれば解決できることもあるだろうが、それはコストもかかるし機材沼への入り口でもある。映像があると音声品質向上をサボタージュできるところもあって、例えば、配信中の袋をガサガサしている音や、缶の飲料を開ける音などは音声だけだとノイズになりうるが、映像があるとそれらの音があってもあまり気にならなくはなる(多分)。

カメラは、第三回だけはビデオカメラの映像をエンコーディングして...とやっていたが準備も大変なのでこちらもUSB接続できるウェブカメラを利用している。

ウェブカメラの写真、固定部分が折り曲げて引っ掛けるタイプのもの
Amazon.co.jp: AUSDOM ウェブカメラ FullHD(1080P)画質 ウェブカム 1/4.5インチCMOSセンサ200万画素 マイク内蔵 360度回転 AW615: ホーム&キッチン

こちらも価格が安く、単焦点でピントを固定できる、色んなところで使うことを考えてフレキシブルアームが良いかなーと思って選定した。ただフレキシブルアームが固定しにくいのと、画角が狭く3人並ぶと端が見切れてしまうことが不満で現在は利用していない。

放送中のスクリーンショット、ゲストが真ん中に写っているが両端のホスト二人がほとんど見切れてしまっている
#4 ~ そめちゃん ~」の一場面より

音声に関しては、1本だとどうしても拾う音の量にばらつきが出てしまうため同じマイクを3本用意した。ただマイクの特性として口元で使うタイプのため、卓上に置いて飲みながらでは拾う音が安定しなかった。そのためマイクの音声を大きくすると急な大声(主に私が酔っ払って叫ぶ)のときに音が割れてしまうし、小さくすると音自体が小さくなりがちで、コンプレッサーとかフィルターとかを駆使してなんとか...という状態で長らく放送していた。

ただ「#13 ~ 自動魔法おじさん、オレの案件にも魔法をかけてくれ! ~」でゲストがマイクを手持ちで持って話し始めたときに急に音声が安定したのがキッカケでこの卓上置きのスタイルを諦めている。


また当初は第一回の反省もあり一人3本程度としていた飲酒量も、回を重ねるごとになぁなぁになっていき、配信の長時間化で電車で帰れない問題と酔っ払いすぎ問題が出てくる。

特に「#7 ~ デザイナーの彼女が何人できたのか教えてほしい ~」と「#8 ~ デザインこじらせおじさん VS マークアップこじらせおじさんたち ~」は、4時間を超える配信になり、毎回こうなると体が持たないのでできるだけ21:00スタートで電車で帰れる時間に終わる、ということを目標にしている。

また何か告知したいことがある時の宣伝タイムも、放送の最後では酔っ払って適当になってしまうのと、最後まで見るツワモノが少ないため、最後ではなくて最初の方に持つようにしている。


また回を重ねる毎に回の副題がどんどんプログレッシブ(失礼)になっているが、こちらはアジェンダと同様にゲストと事前にやりとりして決めている。

放送前のゲストのやり取りは Discord を利用している。ボイスチャットでそのまま配信ができると思って選んだが、オフラインで集まってという形に落ち着いたため、今は Slack のチャンネルを無駄に増やしてないぐらいがメリット(アプリが増えるというデメリットのほうがツラい)。

カメラ、マイクの変更、現在の構成

#13 で卓上スタイルを諦めてピンマイクを検討した。酒を飲みながら、つまみながら、配信しながらというスタイルのため、どうしてもテーブルに物を置く必要がありテーブルが狭くなってしまうのと、割と動いてしまうのでマイクと口の距離が安定しないのを解決するには口元にマイクを固定する小さいマイクである必要がある。

ヘッドセットという選択肢もあるが、飲んでいるときにヘッドセットしているのは邪魔になりそうなのと、絵的にもあまり飲んでる感じがしなくなるため、ピンマイクを検討して、Amazonで適当に安いピンマイクを3セット購入した。

ピンマイクの商品写真。有線で黒くて小さい
Amazon | Olycism コンデンサーマイク ミニマイク 高性能 ピンマイク 3.5mmプラグ1.5m(iPhone/iPad/iPod Touch/PC/Android)対応 日本語説明書付き | コンデンサ | 楽器

これを最初に買ったSony ECM-PCV80U付属の変換プラグに刺して使用している。使用開始は「#14 ~ ベテランの初心者 ~」から

卓上スペースの問題は解決できたが、無指向性のマイクのため隣の人の声を拾って二重音声になりがちなところと有線のため配線に気をつけないといけないというところはまだ向上の余地があるが、良いピンマイクは良いお値段するので大変厳しい。

またこの #14 でたまたま放送した部屋にあったウェブカメラが三脚に固定できるタイプでそれを利用してみたらカメラ固定の問題と画角の問題が一気に解決され、今まで俺は何をしていたんだという気持ちに。早速その次の「#15 ~ カズマックスってアズマックスのパクリですよね ~」から同タイプのカメラを購入し使用している。

ウェブカメラの商品写真。USB type Aで接続するタイプ
Amazon | LOGICOOL HDウェブカム フルHD動画対応 C615 | ロジクール | ウェブカメラ 通販

これを収録場所によって三脚を用意して固定して配信している。

その他、まとめ

どういう方にゲストに来ていただくか、というのは明確に決めてなくてホストのどちらかの知り合いで自分たちのノリに違和感が無さそうなぐらいで選んでいる。毎回ゲストを変える必要もないのかもしれないが、なんとなく新しい人と話すのが楽しいのでしばらくはお声がけ続けると思う。

ゲストへの声かけとかスケジューリングは @o_ti が担当することが多く、自分は配信機材や番組設定、サムネイルの作成とかが担当。アートワークが素人感強いので、グラフィックに強い人の力を借りたいと思っているが何もしていない。

また生放送なので事前の告知がとても大事で、放送日の1週間前には告知をしておかないと視聴数が下がってしまう傾向にあり、アーカイブも残るが生放送時の視聴数が少ないと放送の盛り上がりも変わってくるため、それなりに意識して告知を行っている。

宣伝ツイートもだんだんとアグレッシブ(失礼)になる傾向もあって、すみませんという気持ちもあります。


紆余曲折あったが、初回から徐々に配信品質は向上できているはず...(最近は配信ソフトの操作ミスで放送事故が多い)。機材や告知など事前の準備が大事とはいえ、どれも安価な機材ばかりですぐに真似できると思うし、放送しているFRESH LIVEも審査無しでアカウント開設できるようになったので、私もと思う方は是非チャレンジしてほしい。

FRESH LIVE(フレッシュライブ)無料でチャンネルを開設 | FRESH LIVE(フレッシュライブ) - ライブ配信サービス