コロナ禍に対応するオンラインツール、エニマリ「ウェディングボード」

エニマリ「ウェディングボード」は、結婚式場のスタッフが新郎新婦ごとに合わせた結婚式の提案資料を手軽に作成し、そのURLを共有できるツールです。 初めて触った多くの方が驚くのが、オンラインで通話しながらリアルタイムに資料を作れる機能です。

これまでウェディング業界では、結婚式場に来館したお客様に対して、結婚式のイメージ集などを送付する会場は、現場の工数などの兼ね合いから、一部の会場様だけが実施している状況でした。ウェディングボードによって手軽にデザイン性のある資料を共有できるようになり、来館後の顧客満足につながる事例も増えているといいます。

そんなウェディングボードのプロジェクトは、同じくふうカンパニーのグループ会社であるDa Vinci Studioのメンバーとともに2020年のコロナ禍の中、手探りで始まりました。 初めてのフルリモート環境の中で、どのようにプロジェクトが進んだのかをプロジェクトメンバーに訊いてみました。

※この記事の取材は、12月下旬に実施しました。

吉川 崇倫（インタビュアー）

Da Vinci Studio 代表取締役

髙橋 真実子

Da Vinci Studio デザイナー

伊藤 祐希

Da Vinci Studio エンジニア

K氏(本人希望によりイニシャル)

エニマリ 商品企画部

集結した「みんなのウェディング」新卒

―― 僕は今日、集まっていただいたお三方とも話す機会が多々あるんですが、この三人が一堂に会するのは珍しい気がしますね。

髙橋 言われてみるとそうですね。伊藤さんとは今、別のプロジェクトでも一緒に開発しています。この三人で集まるのは珍しいと思います。

K氏 実は僕、伊藤さんとリアルで会うのは今日が初めてなんです。リモートでは毎週打ち合わせをしているんですが。 伊藤さん、いつもお世話になっております。

伊藤 こちらこそ（笑）。

K氏 でもかなり昔に一度だけ、バーベキューで集まりましたよね。

―― バーベキュー！？なんだかすごく仲が良さそうなイベントですね。

髙橋 みんなのウェディング（現・株式会社エニマリ）の2017年新卒〜2019年新卒で集まろうというイベントがあったんです。 私が18年新卒、Kさんが17年、伊藤さんが19年ですね。

――  あー言われてみれば！普段あまり意識してなかったんですが、みなさんみんなのウェディング（現・株式会社エニマリ）の新卒入社組なんですね。
良いですね、新卒入社のつながりがあるのは。19年卒は、めちゃめちゃ仲が良いですよね。

伊藤 厳密には、僕はRCUBE（現・株式会社エニマリ。RCUBEは2018年にくふうカンパニーグループにジョインしたウェディングプロデュース会社）への入社で、途中でみんなのウェディングに合流させてもらって。 今は転籍して同期はみんなDa Vinci Studioにいます。

髙橋 私も転籍してDa Vinci Studioに来まして、今日のテーマであるウェディングボードは、転籍して最初に手掛けたプロジェクトでした。

―― そうか、ちょうどこのときでしたね。来てもらってすぐに立ち上げメンバーに入ってもらったんでした。

髙橋 そうなんです。転籍したてというのもあり、戸惑うことも多かったのですごく印象に残っています。

―― ジョインして間もないのにしっかり進めてくれてた印象があったけれど、実は迷いながらだったんですね。
どういうところで戸惑いました？

髙橋 まず、ゼロから新規サービスを立ち上げるのが初めてだったんです。 みんなのウェディングでは、サービス全体で共通するデザインのベースがありましたし、プロジェクトが開始する時点で最終的に作るものの大枠のイメージは出来上がっているのが普通でした。 ウェディングボードはコンセプトから考えていったので、最終的にどういうものができるのか見えない状態で進めるのは大変だと感じていましたね。

あとは一緒に動くエンジニアが社長だったというのには戸惑いました（笑）。 今はもう慣れちゃいましたけど、最初は「え？社長が？一緒に開発するの？」というのが衝撃でした。

―― そこか（笑）。Da Vinci Studioの社長、めちゃくちゃ開発するもんね（笑）。
普通になりすぎて気が回ってなかったです。なんだかごめんなさい。

そう、ウェディングボードは僕もかなり開発に携わってきて思い入れがあるので、今日はみなさんの目線からも改めて話を聞いてみたいなと思っています。

Kさん、ウェディングボードはどんなサービスなんですか？

K氏 唐突に本題が始まりましたね（笑）。

ウェディングボードは、結婚式場のスタッフが結婚式の資料を作成できるツールです。 結婚式を考えている方と打ち合わせた後に持ち帰ってまた見ていただくための資料を作ったり、オンラインで接客したりすることが可能です。作成した資料へのアクセスログも確認できるので、当日中にその結婚式場で挙式するかを決めなかったお客様に、後日ご案内するといった使い方も可能です。

正式リリースは2021年の2月で、ご利用いただいている式場様も増えてきました。

ウェディングボードの画面イメージ。左が式場スタッフが操作するページで、右が式を検討する顧客向けのページ。

プロトタイプの反応を見ながら機能をピボット

―― 良いですね〜この調子で増えていってほしいですよね。
今、使ってくださっている式場様にはどのあたりが喜ばれているんですか？

K氏 アフターフォロー営業ができるようになった、やり始めたという式場様が多いです。意外に思われるかもしれませんが、ウェディング業界はもともと来場したお客様に対してアフターフォロー営業をほとんどしないんです。 来場して、その場で決めてくれたお客様にフォーカスしていたわけです。

ただ、来場したにもかかわわらず決定まで至らなかった方に対して、せっかく関心を持ってもらったのに何もしないままで良いのか、大事にしなければならないのでは、という課題意識を持っている式場様も多かったんです。

これまでだとホスピタリティの高い式場様や社員の方が、自分でパワーポイントなどを活用して資料を作成してるケースはありましたが、やはり手間がかかるので、あまり広まっていませんでした。 ウェディングボードは、まさにそういった用途で喜んでいただいてます。

ウェディングボードについて語るK氏

―― 不動産業界でいう「追客」みたいなものですかね。確かにアフターフォロー営業がないというのは意外な気もします。業界ならではの要因があるんですか？

K氏 そういった文化がないといえばそこまでなのですが。そうですね……。 成約率が高いというのが一因かもしれません。来場した方の3分の1は成約すると言われています。

―― 3分の1！すごく高いですね。

K氏 はい。あとは資料の作成が難しいというのもあります。ウェディング関連の資料はやはり華やかさが必要で、それには見合ったデザインスキルが要求されますから。

―― たしかに……。箇条書きの資料をもらっても、あまり嬉しくなさそうですね。
では最初から「資料作成ツール」としてプロジェクトを開始したんですか？

K氏 いえ、そういうわけではありません。実は、正式にリリースした2021年2月以前、2020年の夏ごろにはプロトタイプ版をリリースしていました。 もともとクライアントだったいくつかの式場様にテストにご協力いただき、そのフィードバックをもとに方向を修正していって、今の形になったんです。

もともとはオンライン接客ツールがメインで、資料作成は付随的な機能に過ぎませんでした。 今は、それが逆転した形です。

―― プロトタイプの反応を見ながらピボットしたわけですね。すごく柔軟性のある進め方ですね。

開発スタートはたしか、緊急事態宣言が出てちょっと経ったあたりでしたね。
オンライン接客ツール作りたいんです！って僕に相談が来たのを覚えてます。

K氏 当時、いろいろな業界でオンライン接客ツールが一気に出てきたのと、ウェディング業界だとオンライン結婚式が増えてきていた時期でした。

同じくふうカンパニーグループ内でも、オウチーノの「くらすマッチ」がすぐにオンライン接客に対応したのを見て、焦りもありました。

――  エニマリに限らず、社会全体で今後どうしたら良いんだろうってなってましたよね。
そうしてオンライン接客ツールとしてリリースしたウェディングボードが、ピボットしていくきっかけはあったんですか？

K氏 Zoomです。当時Zoomが一気に普及し、式場様でもZoomがもう浸透し始めていました。 営業に行くと、「オンライン接客はもうZoomやMeetを使っているからいらないよ」と言われてしまうこともありました。

―― 取り付く島もないですね……。

K氏 そうなんです。でも、式場様の中にはデモを見たら興味を示してくれるところもあって。 当初のウェディングボードは、オンラインで会話しながら挙式のイメージ資料を作り上げていく使い方をメインに考えていました。お客様と式場様側で資料の画面を共有して、お互いで操作できるんです。

お客様は自分のスマホから、カテゴリごとに会場や料理の画像を見ながら、自分で何をやりたいかを選んでプランを作っていきます。 式場様側の画面では、お客様の操作している画面を確認しつつ、必要に応じてカテゴリに出すアイテムを差し替えたり、お客様が操作に迷ったら、式場様側からお客様の画面を操作したりということが可能です。

これをデモすると、「え？何これどうなってるの？」「面白い」と興味を示してくれる式場様がいたんです。

―― 嬉しいですね！そこ頑張ったんですよ。

K氏 やっぱり驚かれる方が多いです。「これだったら資料を作って、フォローアップ営業できるかも」というアイデアを出してくださる式場様がいたのがきっかけとなって、資料作成ツールとしての機能を強化していきました。

リッチな資料作成UIを実現するためReactとGraphQLを採用

伊藤 僕は後からジョインしたので初期設計には関わっていないのですが、最初に触ったときは、僕も驚きました。 どうやって技術を選定していったのか、気になります。

―― そうか。改めて話したことなかったですね。

「お客様と式場スタッフが相互に資料を操作しながら会話できる」というのが初期コンセプトでした。
ちょうどテーブル上にカタログを開いて、触りながら話を進めていくイメージです。

まず、画面上で操作しながら資料ができあがっていくリッチなUIが必要そうなので、React による SPA（シングルページアプリケーション）にしようと考えました。
Reactにしたのは、単純にDa Vinci Studioでよく使っているからです。

当時を振り返って経緯を説明。

次に、双方の画面をどう同期するかを検討しました。Reactで「何を表示するのか」という状態はReactのstateで表現するので、このstateをGraphQLで共有してしまえば良いのではと思いついたんです。
stateの変更は、ローカルのstateを変えるのではなく、GraphQLのサーバー側で更新する。各クライアントは、GraphQL Subscriptionを使って変更をstateに取り込む。
こうすることによって、stateのアップデートが一方向で表現できます。

伊藤 バックエンドは、Da Vinci StudioだとRuby on Rails（以下Rails）を使うケースが多いんです。でも、ウェディングボードはNode.jsを使ってますよね。

―― そうです。Railsって、全部Railsに閉じていると、開発環境を構築したりコーティングしたりと作業がすごくスムーズになりますよね。
作ったり壊したりもしやすい。でもReactが入ってくると、当然TypeScriptとRailsのコードのシンタックスの違いがあるし、開発が行き来することを考えると地味にストレスになるんですよね。

伊藤 分かります、他のプロジェクトでReact + Railsで開発しているとき、ちょっと頭の切り替えが必要だなと感じました。

―― ですから、Railsで開発する体験となるべく同じような感覚にしたいと思ったんですよ。
あとから開発に参加するメンバーも、とりあえずnpmコマンド叩けば開発を始められて、クライアントサイドもサーバーサイドも同じ書き味で書けるような環境にしたかったんです。
以前、NestJSでプロトタイプを開発したことがあったので、NestJSの構成を参考にしつつカスタマイズした構成にしました。
結果としてDTO（Data Transfer Object）のインターフェイスはフロントエンドとバックエンドで共有できるなど、メリットは多かったですね。

伊藤 僕はそれまで主にRailsのプロジェクトに関わっていたので、最初は不安もありました。でも、おかげでReactが書けるようになったのでチャレンジさせてもらえてよかったです。吉川さんに結構サポートしてもらいましたが（笑）。 今は別のプロジェクトでもReactを使ってます。

―― 苦労させてしまって申し訳ない（笑）。今に活きているなら良かったです。

ユーザーテストを繰り返しながらの情報設計

―― 苦労させてしまったといえば、デザインも大変だったんじゃないですか？

髙橋 苦労させられました（笑）。私も転籍するまでRailsのプロジェクトのデザインばかりで、ウェディングボードのようにリアルタイムでやりとりが発生したり、画面の構造が切り替わったりするようなサービスのデザインは経験したことがなかったので。

最初のフェーズでは、特に情報設計について考えました。 ウェディングボードは、式場様はパソコンから、お客様はスマートフォンから使うことを想定しています。 資料は画像がメインなので、なるべく広く見せたいというニーズがあります。一方で、通話やコミュニケーションのための情報も必要です。 スマートフォンアプリの使い勝手をイメージして下部にメニューを配置し、画面を切り替えられるようにしました。また、特にお客様は初めて使う方がほとんどなので、説明なしで使えるよう配慮しました。

といっても試行錯誤の連続で、Figmaでプロトタイプを作ってユーザーテストを実施して……というのを繰り返して、やっと完成まで持っていけたんです。

―― 何度もやってましたよね。Kさんもテストのための日程をアレンジしてくれて。

髙橋 本当にありがとうございました。

K氏 いえいえ、勉強になりました。

髙橋 あとは資料の機能を作り込んでいく上では、デザイン性とカスタマイズ性を強化しました。 先ほど話しましたが、結婚式の資料なので、お客様がどんな方であっても華のある仕上がりだと喜ばれます。 でも、人によって好みの「華」って異なるんですよね。キレイ系だったりカワイイ系だったり。 デザインのパターンをいくつか作り、式場の方はその中から選ぶだけで使えるようにしました。

一方で、式場様の立場としては独自性も出したいんですよね。そのニーズに応えるため、デザインをカスタマイズできる機能も追加していきました。

K氏 式場様の要望を組み入れてもらえて嬉しかったです。このあたりからセールスの方向性も固まっていきましたね。

―― そうして、オンライン接客ツールから資料作成ツールに変化していったんですね。
今はもう、対面で接客しながら資料を作成する使い方がほとんどですか？

K氏 いえ、オンライン接客で使ってくださっている式場様も多くいらしゃいます。その場合はZoomなどと併用されていますね。 対面かオンラインかによらず、資料を作る機能が使いやすいみたいなので。

―― ウェディングボードにも通話する機能はあるんですけどね（笑）。でも使っていただいているのは嬉しいですね。

「フィードバックは短いサイクルで」という学び

―― クライアントからのフィードバックをとらえて上手に変化できているので、進め方として良いプロジェクトだと感じました。
改めて振り返ってみて、「もっとこうしておけばよかったな」ということはありますか？
特に初期からいたKさんと髙橋さんに伺いたいです。

K氏 ユーザーテストをもっと頻繁にやればよかったです。

―― え、何度もセッティングしてくれていたじゃないですか。

K氏 いえ、もっと短いサイクルでできたなと感じるんです。 振り返ると、僕は新規にサービスを立ち上げた経験がなかったので、式場様にも開発チームにも遠慮がありました。 具体的には、式場様に対しては「まだ機能が全部できてないのに意見をもらいに行くなんて……」、開発チームに対しては「もっと意見が集まってからフィードバックした方が良いかな……」という気持ちが先走っていました。

今から考えると、どんどん触ってフィードバックをもらえていたら、もっと早い段階で「資料作成ツール」に舵を切れたかなと思いますし、今の自分なら、そうすると思うんです。

―― そうですね、フィードバックサイクルは短い方が良いですね。開発側としてもやりやすいです。

髙橋さんは何かあります？

髙橋 進め方ですね。当時はあまり分かっていなかったんですが、今から考えると、みなさんの意見をまとめつつ、コンセプトを形にして握っていくところはほとんど吉川さんにやっていただいたなと。 デザイナーとしてやれる部分はもっとあったなと思いますし、今ならより良い進め方ができるなと思います。

―― 自身のレベルアップを実感できているのは、すごく良いですね。

まだまだ尽きない今後の発展アイデア

―― 最後に、ウェディングボードで今後やりたいことがあれば聞かせてください。

K氏 式場ごとのカスタマイズ性は、発展しがいがあると思います。それぞれの式場様のやり方に合った、アフターフォローができるようにしていきたいです。 例えば、ロケーションが売りの式場であれば、周辺環境を入れ込めるようにするといったようなイメージですね。

あとは、そのままお客様に提示する見積もりが作れる機能があったら、式場様も喜びそう。

―― 周辺環境は、あると嬉しいですね。当日のゲストのことも考えられそうですし。

髙橋 私は資料をチューニングできるようにしていきたいですね。 デザインと一緒ですが、お客様やクライアントが実現したいことをより想像しやすく、また感情面でも選びやすいようなものにするのが理想です。

―― 改めて振り返るといろいろなストーリーがあって楽しかったです。
今日はありがとうございました！