Ateam Tech Blog

エイチームのエンジニアたちによるテックブログ

ハイブリッド配信を実現した社内Fesのスゴい舞台裏

はじめに

こんにちは。エイチームライフデザイン デザイン開発本部の馬場です。 Ateam Techブログの番外編として、本記事ではエイチームグループ子会社の エイチームライフデザインで2023年2月22日に開催した社内イベント、 「LifeDesign-Half-Year-Fes」の模様をレポートさせていただきます。

本記事はエイチームグループのテックブログではありますが、子会社のエイチームライフデザイン社での取り組みについて書いています。 正式社名は「株式会社エイチームライフデザイン」ですが、本稿では社内通称である「ライフデザイン」の呼称で統一して書いていきます。ご承知おきのうえ、以降をお読みください。

LifeDesign-Half-Year-Fes概要

エイチームグループは従前より、どの子会社も節目ごとにこういった大々的な社内イベントを皆で設営して全力で楽しむ会社ですが、 コロナ禍の影響で3年ほど、この手のイベントはリアルではなくフルリモート開催をしておりました。 フルリモートでも趣向を凝らして非常に盛り上がっていたのですが、 今年はライフデザイン発足から1年の節目でもあり、子会社イベントとしては数年ぶりのリアル開催に踏み切りました。

イベントは名古屋市の代表的なライブハウス「DIAMOND HALL(ダイアモンドホール)」を貸切、 名古屋オフィスの社員だけでなく、全国各地で勤務している社員が一同に集まりました。

当日は午前中にも全社員研修を実施し、 午後13時半〜20時半まで、以下のような構成のイベントとなっていました。

  • 社内表彰式
  • 懇親会(第1部、全員参加型を含む社員有志によるコンテンツ)
  • 懇親会(第2部、バンド演奏)

表彰式で半年間特に活躍した社員を全員で讃える厳か(かつ大盛り上がり)なパートもあり、 懇親会では、全員参加型の脱出ゲームライクなコンテンツや、 各人非常に力の入った出し物コンテンツもあり、盛りだくさんの内容でした。

とはいえ、徐々に世の中の風向きは変わってきているものの、 コロナが完全に終息しているわけではない昨今でもありますので、 会場でリアル参加するメンバーは、事前に抗原検査で陰性である事を確認するなどの徹底とともに、 リモート参加を選択するメンバーも一定数いました。

リアル参加のメンバーだけでなく、リモート参加するメンバーも 会場と一体となってこのイベントに参加し、楽しんでもらう為に、 ハイブリッド配信のシステム構築と当日運営にも、ライフデザインメンバーが非常に力を入れてくれました。

本稿では、イベントの全容をすみずみまでお伝えしたいのがやまやまですが、 テックブログの趣旨に沿って、特にこのハイブリッド配信をライフデザインのエンジニア達が実現した舞台裏や、 イベントのクリエイティブ全般を非常に高いクオリティで彩ってくれたチームの働きについてレポートさせて頂きます。

配信システムと運営の舞台裏

当日、会場のダイアモンドホール壇上には左右2枚のスクリーンから、 当日の進行に合わせて別々のコンテンツが投影されていました。

会場を客席から見た様子

左手スクリーンのチャット配信は、事前に参加者各位に スマホから投稿できるチャットアプリの案内がされており、 皆で会場を盛り上げたり、壇上の皆さんへのエール(やツッコミ)をリアルタイムで書き込んで それを見て皆で盛り上がる演出です。

右手のスクリーンでは、各種コンテンツの投影がされるとともに、 適宜オンライン参加している皆さんのカメラ映像も配信される運用をしていました。

オンライン参加されてる皆さんは、こちらの右手スクリーンの映像を手元で映像配信しながら、 適宜手元のスマホでチャット参加して会場と双方向につながる、、という趣向でした。

リアル会場では、壇上の2スクリーンを進行に合わせてリアルタイムで操作しつつ、 オンライン参加の皆さん向けにも、進行中のコンテンツをリアルタイムで配信する、、という、 どちらか片方に寄せた運営ならともかく、この2系統の配信運営を同時にリアルタイムで実施するために、 全体の構成や段取りにも入念な準備がなされていました。

※以下に、実際の配信システム構成や当日までの段取りなどを記載しますが、 これらは執筆者である私がまとめたものではなく、 実際の担当者によって、今後のイベント運営担当者へのナレッジとすべくまとめられた重厚な社内記事から大いに借用させていただいております。 読みやすいよう構成しているため、さも私が配信システムやクリエイティブ制作を行なったように見えてしまいますが、すごいのはうちのメンバー達です。

機材構成図

ハイブリッド配信に必要な要素

ハイブリッド配信に必要な要素は、ざっくり以下です

  • オンライン配信
  • 会場での映像配信
  • 映像
    • 映像の切り替え等を行うソフトウェア・ハードウェアの知識が必要。
  • 音声
    • PCで音声を扱う知識、および会場の音声配信にあたり音響知識が必要。

いわゆるIT技術者としての範疇はとっくに超えてまして、 改めて我が社のクリエイター達の多様性に感嘆しました。

当日までの段取り

いくつかのスコープで、それぞれに普段のソフトウェア開発と まったく異なる種の課題を整理し、アプローチを講じていきました。

1. 会場等の環境調査・要件整理

会場での配信に必要な要件を確認していきます。

  • 会場規模
  • 会場にプロジェクターやスクリーンは設置されているか
  • 会場のインターネット環境を借りることはできるか
  • 会場のPA卓やミキサーから音声をもらうことはできるか
  • オンライン配信はどのソフトで行うか
  • その他特殊な要件はないか
  • etc

ハイブリッド配信への理解が浅い会場だと、苦労することがあるかもしれません。 会場に音響スタッフがいない場合(会議室などで行う場合など)は、自分で会場への音声配信が必要なので、音声機材についても詳しく確認する必要があります。

得られた情報をもとに、プロジェクターの設置台数や必要な機材を洗い出していきます。

2. オンライン配信の環境調査・要件整理

オンライン配信に必要な要件を確認します。

  • 配信プラットフォームの確認
  • 配信中に双方向での通話が発生するか(オンライン参加者へのインタビューや記念撮影等)
  • 通話が発生する場合、その音声を会場にも流す必要があるか
  • etc

得られた情報をもとに、必要な機材を調整したり、映像や音声の配信方法を決めていきます。

3. 当日の進行スケジュール・配信コンテンツの整理

会場投影・オンライン配信するスライドや動画等の内容の確認をします。

  • 映像データやスライドの比率
  • スライド送りは誰が操作するのか
  • スライドや映像の文字サイズは適切か
  • 配信するファイル等に音声は含まれているか
  • その音声を会場にも流す必要があるか
  • etc

配信するデータを誰かに作ってもらったり登壇形式でスライドを持ち込んでもらう場合は、データのフォーマット等を事前に決めておくといいです。(サイズや形式、最小文字サイズ、比率など) トラブルが発生した際に流す「しばらくお待ちください」的な映像なども決めておくと安心できます。

得られた情報をもとに、必要な機材を調整したり、当日の作業内容を決めたりします。

4. 必要機材の選定・整理・手配

会場やオンライン配信の要件をもとに、配信機材の構成をまとめていきます。 実際にその構成で動くかどうか分からない部分がある場合は、動作検証もしながら進めていきます。

足りない機材があれば、手配します。

機材トラブルが発生した場合に詰まないように、予備プランも考えておくと良いです。 機材トラブルは割と高確率で起きます。急な熱暴走とか急な断線とか起きがち。 今までの配信でトラブルが起きなかったことがないです。 高スペックの高い機材を揃えるとトラブルの発生確率は減ります

当日の準備・動き

1. 配線・リハーサル

イベント当日になったら、まず会場で配線を行います。 一通り動作と流れのチェックをします。

大体何か配線ミスりますが、冷静に見直せばすぐ解決します。 (「モニターの音声聞こえない!あ、ヘッドホンの電源入れてなかった!てへぺろ!」とかね) どうしようもない忘れ物があれば、急いで買いに行ったりします。

2.イベント開催中

配信や会場の準備が整ったら、イベントを開始します。 配信担当はイベント中、スライド送りや動画の再生、配信画面の切り替えなど細かな作業を行うので忙しいです。 マウスカーソルを少し動かすだけでかなり神経を使うので、作業者の寿命が縮みます。

また、配信トラブルが発生した際にも対応をします。 脳のリソースが足りないので、横に冷静な人が一人いるとそれだけでとても助かります。

担当者に聞いた総括

ハイブリッド配信は、とにかく大変でした。 様々な要素が絡み、必要な知識も多いです。 ただ、きちんと当日の環境情報や必要な要素を整理して、それぞれの分野に長けているメンバーを募ればきっとうまくいきます。 チームプレイは必須です!

。。とのことです。ライフデザインのチームワークも窺い知れるコメントでした。

上記に紹介したのは、今後の社内担当者に向けて、 まずは全体像を掴んでもらうための文書として書かれたQiita Team記事(エイチームグループでは、Qiita Teamを用いて業務日報や社内ナレッジを蓄積する習慣があります)から大幅に借用してありますが、 さらにそれぞれのスコープを詳しく掘り下げた記事も、担当者の手によって翌週には公開されておりました。

今回は全文を紹介するのは割愛しますが、雰囲気だけでもご紹介します

後日公開された詳細解説記事

クリエイティブの舞台裏

本ブログはタイトル通り「技術ブログ」が本来の趣旨ですが、 ライフデザインでは、エンジニアとデザイナーは非常に近い距離でサービス開発にあたっており、日々の密な連携は欠かせません。

そんな頼れるデザイナー達もまた、本イベントでは重要な役割を担っていました。 「テックブログ記事だけど、クリエイティブの情報も勝手に載せるよ。協力して?」と社内で問いかけ、快く協力してくれましたので以下に掲載します。

全体のクリエイティブ方針・制作体制

全体のクリエイティブ方針

冒頭に掲載したメインビジュアルを筆頭に、 当日配布のノベルティ、オンライン参加者がZoom接続時に使用するZoom背景・表彰式で授与する表彰状や上映コンテンツ、イベント告知や情報周知のための社内特設サイトなど、イベントのコンセプト・世界観を一貫して表現することを意識しました。

制作体制

総合ディレクションを新卒入社数年の若手デザイナーが務め上記の世界観統一を指揮しつつ、 メインビジュアル担当、表彰式担当、ノベルティ担当、イベント開会時に上映のオープニング映像担当など、成果物ごとに専任で若手デザイナーを中心に担当してくれました。 さらにビジュアル全般のクオリティ担保のために、社内のエースグラフィックデザイナーも適宜監修として関わるなど、盤石の体制でした。

どのデザイナーも本プロジェクト専任ではなく、各自が担当サービスを持つ業務状況でもあり、限られた時間の中で 効率よく、かつクオリティに妥協をしないで進行できるよう以下のような工夫を凝らしながら進めていました。

  • デザインレビューはディレクター/デザイン監修者が一堂にZoomに集まり一気に結論を出す
  • 全体の進行スケジュールをガントチャートで見える化して管理、各自の繁忙状況に応じて主体的に助け合い
  • Figmaプロジェクト上で制作を関係者一堂で実施。素材の受け渡しもスムーズに実施する
  • 誰かが作業している際はSlackハドルMTGに常駐し、適宜声かけ・相互フォローがしやすいように配慮

Figma上で制作過程を共有

ここを見て!こだわりのポイント

メインビジュアル

細部にいたるまでこだわり全開だったため、いくつかに絞るのも憚られるんですが、 まずはメインビジュアルのこだわりについて語らせてください。

メインビジュアル

LIFE DESIGNの部分の配色で事業/職能/個性が混ざり合い、 今まで以上にカラフルで豊かな新しい文化を形成していく様子を表しています。 また、Half-year Fesの部分ではクラフト感の強いスプレーによる手描き文字を使用して、 型に囚われない創造性・クリエイティビティを感じる表現をしています。 メンバー一人一人が新しい文化を自らの手で作り上げる、そんな心意気を感じてもらえるよう制作しました。

エイチームライフデザインは2022年2月に、もともとグループ5社で分かれていたチームが一つに統合して発足しましたが、 徐々にそれぞれの子会社カルチャーの違いに気づいたり融合していくことで、より強くて楽しい会社に成長してきています。 そんな個性が混ざり合って新しい文化を形成するきっかけに、本イベントがあってほしいとの想いも込めてデザインしています。

キャッチコピー

イベントキャッチコピー

デザインコンセプトにもある「型に縛られない創造性・クリエイティビティ」「手作り感」「自らの”手”で作り上げる」という所をキャッチコピーで表しました。 今回のFesをきっかけに「新しい文化」「新しい繋がり」「暮らしのよかった(エイチームライフデザインのミッション)」「一体感」など、様々な「つくろう」に着想してもらえるように考えられています。

ほかにもたくさんのこだわり満載!!

デザイン制作物まとめ

他にも、投影スライド・配布グッズ・Zoom用背景・会場配布の名札・ステッカー・コンセプトムービーなどなど、参画したデザイナー各位のこだわりが随所に込められています。 その熱量の一端でもぜひ感じていただけると嬉しいです。

その他、ライフデザインに興味を持った人にぜひ伝えたいこと

ライフデザインは『一人ひとりの、暮らしの「まよい」を「よかった」に。』というミッションを達成するために、引越しや結婚式・お金に関するサービスなど、 様々なWebサービスを運営しています。 基本的に社内のデザイナーはみんな、いずれかのサービスを担当し、お客さまへ価値を届けるべく、それぞれのサービスに愛着とこだわりをもって日々デザイン業務に取り組んでいます。

皆自分のサービスに全力で取り組んでいて充実した毎日ですが、 やはり一人のデザイナーとして、普段関わることのできないようなゼロからデザインコンセプトを立案する、普段担当しているサービスではチャレンジしにくいテイストや課題解決など、新しい挑戦機会は常に追求しています。

そんな中で、今回のイベント企画をゼロから携わらせてもらうことで、 一人一人のデザイナーとしての殻をやぶるきっかけをもらえたと感じています。 代表取締役をはじめ会社をあげて、時間も費用も企画への裁量も、 最大限の応援をしてくれたからこそ、ここまでこだわりに溢れたデザインに挑戦することができました。 ここで得た経験は、ぜひそれぞれの担当サービスにも持ち帰って、さらにお客様に支持いただけるサービスづくりに取り組んでいきたいと思います!

おわりに

いかがだったでしょうか? ライフデザインに興味をもっていただいたITエンジニアの皆さんにとっては、少し期待した方向とちがった内容だったかもしれませんが、 エイチームグループが昨年策定したAteam Purposeではこう言っています

Creativity × Techで、世の中をもっと便利に、もっと楽しくすること

ここでいうTechは、”IT技術”のような狭い範囲を指すのではなく、 さまざまなプロフェッショナルが集結したチームであるエイチームの、各人が発揮する専門性すべてを指しますし、 それにも増して、創造性(Creativity)を発揮することで、本当の意味でTechが活かされ、世の中を便利に楽しくしていく、、としています。

今回のFes舞台裏をお伝えすることで、ライフデザインがいかに多様な人材に恵まれており、創造性をもって高め合って取り組んでいるチームであるかの一端を感じとっていただけると嬉しいです。

お伝えしきれなかった舞台裏のさまざまなエピソード、 ぜひ興味が湧いた方は私たちとお話しましょう。

最後まで読んでいただき、ありがとうございました。