RAKSUL TechBlog

ラクスルグループのエンジニアが技術トピックを発信するブログです

【社内ハッカソンで】HACK WEEK 2022 クリエイティブ目検比較ツール「クラベル」【クリエイティブ賞ゲット】

こんにちは!ノバセル株式会社*1でソフトウェアエンジニアをしています mktakuya です。
最近はサバゲーとEscape from Tarkovというゲームにハマっています。

今年もHACK WEEKが開催されました!
HACK WEEKはラクスル社内で行われているハッカソンで、毎年1週間程度業務を止めて(!)開催されます。

5回目の開催となるHACK WEEK 2022では、「Inventing the Next Value」をテーマに、エンジニア視点で顧客への価値提供をするべく各チームがプロダクト開発を行っていました。

詳しくは採用サイトの記事をどうぞ。 recruit.raksul.com

クリエイティブ目検比較ツール「クラベル」

私の所属していたチームでは、「クラベル」というプロダクトを作りました。
クラベルは、複数のクリエイティブ*2を同時に比べることが出来るツールです。

こんな感じで広告主を選択すると……

その広告主のクリエイティブが一覧で表示されます。 この画面では、同時にクリエイティブを再生することが出来ます。
クリエイティブごとで非表示にしたり、ミュートを切り替えたりすることも。

クラベル 動画再生画面のサンプル

きっかけ

クラベルの元ネタは、個人的な技術勉強ついでに作ったツールでした。

ノバセルでは、運用型テレビCMの企画から制作、放映、その後の分析までのワンストップサービスを提供しています。*3
運用型テレビCMとは、ただテレビCMを放映するだけでなく、放映期間中により効果の高いクリエイティブや放映プランに差し替えることによって、より高いマーケティング効果を目指すものです。

クリエイティブの制作も担うノバセルでは、日々クリエイティブの研究を行っています。
その業務の一環として、社内のクリエイティブチームの方々が、「今日のNA」というタイトルでお客様のクリエイティブの効果の良し悪しとその理由について共有されていました。

「今日のNA」のSlack投稿の一例(クリエイティブは黒塗りにしてあります)

Slackにクリエイティブを動画ファイルとして添付して頂いていたのですが、複数のクリエイティブを同時に見比べながら再生するのが大変、という課題がありました。
そこで、「複数のクリエイティブを同時に比べることが出来たら便利なのではないか?」という仮説のもと、かんたんなプロトタイプを制作しました。

プロトタイプ版のクラベル

利用技術は、当時僕が勉強していたVite + Vue 3です。*4
仮説を検証したいだけだったので、実装をかんたんにするため動画はYouTubeのものを利用しました。

こちらを社内に展開してみたところ、クリエイティブチームの方々からかなり良い反応を頂けたので、HACK WEEKのテーマとして本実装することにしました。

HACK WEEKで磨き込み

HACK WEEKに向けて編成されたチームは、私含めエンジニア2名とデザイナ1名の3人チームでした。

HACK WEEK中は、Figmaで作って頂いたデザインを元に実装を進めました。
私がサクッと作ったプロトタイプが、こんなにキレイなものになるとは……。デザイナさんのパワーに驚きです。

プロトタイプ版ではYouTube上の動画を同時再生するのみでしたが、ノバセル社内のデータを利用出来るように。
また、プロトタイプ版を作ったときに頂いたフィードバックも反映しました。

技術スタックとしては、TypeScript とExpress.jsそしてNext.jsを採用しました。
ノバセル社内でこれからはReact / Next.jsに寄せていこうという意思決定があったので、その検証も兼ねていました。

3日間のHACK WEEKを乗り越え、完成したのが「クラベル」です。
最終日の成果発表会でも高い評価を頂き、ユーザーにとって利便性・エンゲージメント・体験が最も優れたプロジェクトに贈られる賞である「クリエイティブ賞」を受賞することが出来ました。

当日使用したスライドの一部

クリエイティブ賞の受賞理由を解説してくださった和泉さん

おわりに

今回私達は、日々の業務の中の気付きを元にプロトタイプを作って価値を検証したあとに本実装をしていくというプロダクト開発手法を実践しました。
実はこの手法は、ラクスルの日常業務でも実践されています。

BtoBのプロダクト開発における私の哲学は「圧倒的に高い事業解像度で、分解。まずはヒトが属人的にやってみる。それをテクノロジーによって数百倍以上の効率と精度にする」です。ラクスルで学んだこと。

ラクスルの成長の要因は、5年で50億以上をかけたテレビCMの効果を可視化し、デジタルマーケのように運用してきた仕組みを構築できたことです。我々はテレビCMの効果をほぼ可視化できていました。但し、EXCELやタブローを駆使し、数十時間をかけて・・・。これ一瞬でできたら民主化じゃないですか、と。100MBのExcelをグリグリ回す自分にとって、そこからブレイクスルーがはじまります。営業組織に、PM、エンジニア、デザイナーを1人ずつ巻き込んでいって・・・

そこから数か月・・・私が営業ばかりしている間に、気がついたら魔法使い達によって完成していました。

ラクスル・ハコベルに続く第三の事業は「ノバセル」。事業に込めた想いを語る5,382文字の初note。|tabemasaki1208|note

上記で引用したように、私の所属するノバセルも「テレビCMの運用」の価値を人の手で検証した後に、テクノロジーの力で一気にスケールするという中で生まれた事業・会社です。

今回HACK WEEKを通じて、日々の業務から課題発見→仮説立て→プロトタイプで価値検証→作り込み、という一連の流れを体感することが出来たのはとても楽しかったですし、こんな開発の進め方を出来たのもノバセルで日々仕事をしているからこそだと思います。

というわけでお決まりの流れですが、記事末尾に採用情報のご案内があります。 特にノバセルはテレビCMという複雑な事業ドメインを扱っており、「この人の仕事を徹底的に理解してシステム化すれば顧客価値になる!」という業務がたくさんあって楽しいですよ。

*1:2022年2月からラクスルのノバセル事業部はノバセル株式会社になりました

*2:広告業界においては、広告の素材のことを指します。テレビCMにおいては、15秒や30秒のCM動画そのもののことです。

*3:運用型テレビCMなら【ノバセル】 | ラクスルのテレビCMサービス

*4:勉強のログはこちら https://blog.m6a.jp/entry/2022/06/19/211035