はじめに
今年 3 月に NTT Tech Conference 2023 が開催されました。
本イベントは、毎年 NTT グループに所属する技術者の有志が培った技術や知識、思うままにやってみたことを共有する場です。
私はスタッフの 1 人としてその運営に携わっていますが、本イベントも COVID-19 の影響を受けて、ここ何回かはオンラインで発表映像をライブ配信するスタイルになっています。
オンラインのカンファレンスは気軽に参加できる良さがある一方で、どうしても他の参加者と触れ合う機会が乏しく、そのイベントに 確かに参加している感じ が希薄になりがちです。
特に、カンファレンス特有の わいわいがやがやとした雰囲気 が好きなのですが、こちらも伝わりにくく、どこかさみしいような印象を抱いてしまうこともあります。
これまでの本イベントについても同様に感じており、何かしら盛り上げる手立てはないかなーと考え、オンラインホワイトボードサービスの "Miro" を使ってみることにしました。
この記事に書いてあること
NTT Tech Conference 2023 における Miro の活用方法 や その背景にある考え を振り返りながら書いています。
なお、本件の実施にあたっては、他のなんかすごいスタッフたちに随時相談に乗ってもらったり、検証に協力してもらったりと、たくさん助けてもらいました。
誤解されないとは思いつつも、けっして私一人の頑張りによるものではない点も予め明記しておきます。
前回やったこと・改善点
本イベントでの Miro の利用は、今回が初めてではありません。
去年の NTT Tech Conference 2022 でも、参加者からの質問やリアクションを集めるために使わせてもらいました。
その時に作った Miro のボードは、このような構成でした。
発表のタイムテーブルに沿って、各発表ごとに質問やリアクションを貼ってもらうコメントエリア（中央）と、そのためのポストイットやスタンプを置いた資材エリア（左）を用意し、参加者に自由に使ってみてもらいました。
結果として、それなりの数のコメントを集めることができました。
特に、ポストイットが矢印で繋がっている部分では参加者の質問に発表者が回答してくれたり、別の参加者と思われる人が追記していたりと、 ある程度のコミュニケーション機会は作れたのかな と感じています。
ただ、その一方で、実際にやってみると改善点もいくつか見つかりました。
例えば、以下のような コメントする状態になるまでのハードルの高さ が挙げられます。
- 発表映像とボードが別の Web ページで提供されていて、参加者が両方のページを開いて適宜切り替えないとコメントできなかった点
- ボードを開いた後のケアが無く、各コメントエリアに参加者自らが移動して見やすい大きさに拡縮する必要があるなど、コメントするまでの操作コストが高かった点
また、本イベントでは、発表数と時間の兼ね合いから各発表を 2 つの映像に分けて並列で配信しており、参加者は基本的に片方しか視聴しないため、もう片方の賑わいをリアルタイムに知ることができません。
この時、ボードがお互いの賑わいを伝える役割を担えれば良いなと考えていたのですが、前述の通り動き方をケアできておらず、不十分だったように感じました。
今回やってみたこと・工夫点
前回の内容を踏まえて、今回は次のような観点でコメント環境を検討し、構築してみました。
Point 1 : 発表映像との同居
最初に Miro のボードの表示方法を考えます。
コンテンツの一覧性を高めるために、発表映像とボードを 1 つの Web ページに同居させることにしました。
検討当初は Miro の機能を用いてボードの中に映像プレイヤーを埋め込み、ボード上で発表映像を視聴しながらその周囲にコメントする形式を想定していました。
この形式であれば、参加者目線ではボードのみを開けば良く、デザイン的にも Miro 内の表現で完結するので（独自に高い製作コストをかけずに）映像プレイヤーとコメントエリアに一貫性を持たせることが容易になります。
しかし、試してみたところ映像プレイヤー外の要素を触ると映像が停止する挙動でした……。
よって、代替案として、映像プレイヤーがある Web ページ下部に iframe で別途ボードを読み込み、両者を並べて表示する形式を選択しました。
なお、読み込んだ映像の継続再生は、オンライン授業など Miro と親和性が高い他のシーンでも活きる機能ではないかと考えており、いずれ具備されると良いなーと感じています。
実際、似たような質問やアイディアがコミュニティでもいくつか投稿されていました。かなしい……。
Point 2 : 同じ時間帯のコメント可視化
ともあれ、ボードの表示方法を決めたので、次はボード内のレイアウトを考えます。
今回も前回と同様に、各発表を 2 つの映像に分けて並列配信するため、同時間帯の発表のコメントエリアと資材エリアを 1 つのかたまり（ブロック）として配置するようにしました。
具体的には、このような構成です。
このブロックを、発表のタイムテーブルに沿って横向きに並べておきます。
左から 1 つ目が Opening セッション用，2 つ目が最初の時間帯の発表用，3 つ目が次の時間帯の発表用……という順番です。
その上で、ページを開いた直後の見た目（iframe でボードを読み込んだ際の初期表示位置）を規定します。
この位置は、iframe で読み込む際にボードの URL にパラメータを付けることで変更可能です。
今回は 1 つのブロックを囲うような「枠」型のオブジェクトを別途用意し、その枠を moveToWidget で指定することで、常に枠を中心に初期表示するようにしました。
moveToWidget で指定すべき値は、そのオブジェクトの外部リンクをコピーすると取得できます。
そして、どちらの映像を視聴していても、両側のコメントエリアを含むブロック全体がちょうど見えるように、枠の位置やサイズを調整しました。
実際には調整の都合でブロック全体を囲っていませんが、透明な枠がこっそりと置いてあります。
以上の準備を経て、ページ上での最終的な見え方 はこのようになりました。
ページ上部に映像プレイヤー1、下部にボードをそれぞれ置いています。
なお、初期表示位置を指定する他の方法として、ボード上の座標を用いる moveToViewport もありますが、今回はその位置を徐々に動かしたかったので、オブジェクト基準としています。（詳しくは後述。）
Point 3 : イベント進行との同期
ボードの基本的なレイアウトまで決めたので、最後に当日の運用方法を考えます。
参加者がいつでも現在の発表に紐づくブロックを基点に動けるようにするため、当日の進行に合わせてボードの動き方や見た目をケアすることにしました。
参加者の誘導
発表が切り替わるタイミングで、新しい発表のブロックに全参加者を集める仕組みを作ります。
発表開始時点ですでにページを開いている継続参加者については、「全員を呼ぶ」機能を使い、その発表のブロックに呼び寄せることにしました。
この機能を使うと、表示位置だけでなく表示倍率も呼んだユーザの状態が反映されます。
そのため、前の発表の視聴中にボードの表示倍率を変更していたとしても、あらためてブロック全体が見渡せる状況に戻すことができます。
一方、発表開始後にページを開いた新規参加者については、iframe の初期表示位置を担う枠のオブジェクトを発表中のブロックまで動かすことで対応します。
これにより、どの時間帯の発表から視聴し始めても、その発表のブロックを自然と開けるようになります。
これが初期位置を決める際に moveToViewport ではなく moveToWidget を選択した主な理由です。
ささやかなライブ感の演出
その他、細かい部分では、デザイン的にライブ感（今まさにイベントが進行していて、そこに確かに参加している感覚）をゆるく醸成できるように務めてみました。
具体的には、発表が切り替わる際に、各ブロックの両脇にある「<< 過去の発表」「次の発表 >>」というブロック間を移動できる内部リンクを徐々に活性化してみたり、中央の矢印線を常に最新のブロックまで伸ばしてみたりといった演出などです。
正直効果があったかは分かりませんが、蓄積される過去のコメントを手軽に見返せつつも、状況の変化を可視化することでライブ感を与えられる点がオンラインの特長だと感じており、そういう要素をわずかでも表現できればと考えました。
実際のところは、本筋と密に関係ない部分に拘っている時が一番楽しいというだけ。
やってみた結果と感想
イベント終了時点で、ボードはこのような状態になりました。
左上から右下に向けて、実際には一列に並んでいます。
（途中で Closing セッション用を追加したため、最終的には 7 ブロック。）
俯瞰して見ると、参加人数の差など厳密ではないものの、前回と比べてより多くの方にコメントしてもらえたようです。
内容的にも、発表内容に即したフロー図をポストイットと矢印で作ってコメントしやすくする工夫や、スタンプを目印に感想と質問のエリアを分けて見やすくする工夫が見られました。
また、同時間帯の両発表のコメントが見られる点に言及しているものや、おそらく敢えて両コメントエリアの間に付けられたものもあり、お互いの賑わいを伝える役割も少しは果たせたのではないかと思います。
さらに、Sandbox 的に用意した Opening のブロックが、早めに訪れた参加者の方々によって 自由に散らかして 好意的に使ってもらえたことが、その後コメントする時の心理的障壁を下げてくれたように感じています。
イベント開始時点で、ほぼこの状態。すごい。
ちなみに、Opening の司会を担当した @mahito が気を利かせて Miro 練習用のクイズ2 を用意してくれていたのですが、答えを書くスペースがない事態に陥りました。（上にはみ出た。）
以上、いくつかの特徴的な部分をピックアップして結果を述べてみました。
総論として、想定よりも賑わい 前回よりも参加者全体でのコミュニケーション機会を作り出せたのではないか と考えています。
その上で、当たり前のことですが、どれだけ仕組みを作ったとしても、結局は参加者の方々の協力があってこそだと分かります。
当日コメントして盛り上げてくださった方々、あらためてありがとうございました。
おわりに
これまでの NTT Tech Conference における Miro の活用を振り返ってみました。
最近では COVID-19 に対する世間の受け止め方も徐々に変化してきて、いろいろな物事を対面に戻す動きが見られます。
対面でのカンファレンスも勿論好きですが、個人的にはせっかく根付いたオンラインカンファレンスの文化が、今後も何かしらの形で続けば良いなーと感じています。
書き散らしてしまいましたが、引き続きオンラインカンファレンスを盛り上げようとする誰かの一助になれれば、とても嬉しいです。
最後までお読みいただき、ありがとうございました。