直感的なGUIで柔軟に編集。KARTEの新しい「エレメントビルダー」開発の裏側

KARTEでは、サイトやアプリでの顧客に合わせた多様なコミュニケーションを実現するための機能を拡充し続けてきました。

今回新たに開発した「エレメントビルダー」は、KARTEの接客サービスを直感的なGUIで柔軟に作成・編集できる機能。2023年9月現在はβ版が公開され、複数の企業で利用が進んでいます。

今回は、エレメントビルダーの開発背景やプロセス、実現したい体験について、開発に携わった片居木誠、篠原純一、川口和也、茨木暢仁に聞きました。

直感的な操作で、自由度高く施策をデザイン

はじめに、エレメントビルダーがどういった機能かを教えてください。従来のエディタとは、どのように違うのでしょうか。

篠原：前提として、KARTEにはさまざまな施策のテンプレートが用意されており、それらを使って、簡単に施策を実装できます。

これまでのエディタでも、テンプレートをベースに、表示するテキストや画像、ボタンのリンク先、表示位置・表示タイミングを設定できました。

従来のエディタ画面

一方で、テンプレートで決まっている部分以外を変更するには、HTMLやCSSなどプログラミングの知識が一定は必要でした。

たとえば、施策に表示する画像を増やしたい場合。カスタマイズ用の画面で変数を追加し、その変数に画像のURLを設定し、変数を参照するようHTMLやCSS、JavaScriptを一部書き換える…といった工程を踏まなければいけません。

プログラミングの知識がある方が触る場合には問題ないのですが、プランナーやマーケターといった企業内で施策を担当する役割の人がプログラミングの知識を十分に備えていることは多くありません。

今回開発した「エレメントビルダー」は、こうしたカスタマイズを行わずとも、自由度高く施策をデザインできるようにしました。

配信する接客施策を、一般的なプレゼンテーション作成ツールのように、ドラッグ&ドロップの操作で作成・編集できます。

画像やテキスト、ボタンなどの要素追加、各要素のサイズや配置調整、テキストのフォントや色、背景色の変更などの変更を簡単に行うことができます。

エレメントビルダーの画面。左側の「エレメント」からテキストや画像、ボタンを簡単に追加できる

テキストと画像で構成されたシンプルな接客はもちろん、入力フォームやカウントダウン、スライドショーなど、多様なデザインの接客を作成できます。

この機能により、プログラミングの知識がなくても、実現できる施策の幅が広がります。デザインの質を高められるのはもちろん、KARTE Friends（以下、 Friends）の施策の考案から実行までの速度が上がり、プロダクトや事業の成長により一層貢献できればと思っています。

篠原純一：開発初期から参加し、エディタの品質向上やカスタムエディタの開発を担当

シンプルな機能を実現するためにいくつもの「壁」を越える必要があった

一見すると、シンプルな機能かと思いますが、どのように開発を進めていったのでしょうか。

片居木：まずは施策の見た目や動きを編集する画面から作り始め、その後にKARTEのユーザーデータとつなぎこむ仕組みを開発していきました。

まさに、その“一見シンプル”な見た目や動きを作る部分が、当初想定していた以上に大変でした。ドラッグ＆ドロップによる基本的な操作、施策の編集画面の動きやビジュアル、エンドユーザーへの見え方、出来上がる施策の配信速度の最適化、遅延のないプレビュー機能など…。

Friendsがストレスなくエレメントビルダーを使える状態にたどり着くまでには、さまざまな課題を解決する必要がありました。

片居木誠：チームリードとして、配信基盤との相談や仕様調整などを中心に担当。他には配信時のユーザーデータをアクションに組み込む機能も開発

編集画面の見た目や動きの開発において、どのような難しさがあったのでしょう？

茨木：ノーコードでFriendsがコンテンツを操作できるようにするには、裏側で複雑な処理をする必要があります。

画像を一つ動かすにも、JavaScriptでドラッグしているマウスの動きを察知し、HTMLの内部構造を解析して書き換え、画面上で動作するコードをコンパイルして生成するといったプロセスを踏みます。これらの処理を、ユーザーの操作を邪魔しないように、瞬時に行わないといけません。

当然、一つひとつのステップのパフォーマンスをしっかり高める必要がありますし、複数のステップの中で不具合が起きやすくなりますから、地道に検証を重ねて、修正していきました。

基本的な操作については、僕以外のメンバーも含めて開発をし、リリース数ヶ月前にはなんとかストレスなく使えるレベルを達成できました。エレメントビルダーのUIを開発するだけでも、かなり時間がかかりましたね。

茨木暢仁：1年半ほど前から開発に参加。ビジュアルエディタの機能開発、主にグリッド機能を担当

茨木：さらにリスト要素のあるポップアップ施策では、リストの内部を独立して編集できるようにしました。リストの内外を簡単に行き来できるよう、要素に階層構造を設けました。これを実現するための計算や内部構造の整理も苦労したポイントですね。

リスト要素のあるポップアップの編集画面。リストアイテムのデザインも同じ画面で編集できる

基本的な操作をストレスなく行えるようにするだけでも、さまざまな試行錯誤が必要だったのですね。他にも編集画面を作るうえで大変だったポイントはありますか？

茨木：スライド要素のあるポップアップの編集画面ですね。スライド要素のあるポップアップは、一般的なプレゼンテーション作成ツールで言えば、一枚のスライドの中にさらに別のスライドが入れ子になっているような状態です。画面上でどう見せると編集する人にとって使いやすいのかは参考にできる例も少ない。作りながら一から考える必要がありました。

スライド形式のポップアップの編集事例。左側でスライドのページを切り替え、編集できる

さらに、スライド要素のあるポップアップについては、エンドユーザーへの見え方も試行錯誤しました。エンドユーザーがスライドショーを直感的に操作できるようにするために、ページ送りをどのようなデザインで見せるのかなど。接客を編集する側とエンドユーザー側、双方の使いやすさを探っていきました。

どのように現在の見た目にたどりついたのでしょう？

片居木：基本的には実際に作ったものをFriendsに使ってもらい、得られた反応や声を参考にしながら磨き込んでいきました。最初の頃は、プレイド社内のエンジニアやデザイナーではないメンバーに触ってもらって感想を聞き、クローズドβとしてリリースしてからは関係の深いFriendsにヒアリングを重ねました。

茨木：クローズドβでいろいろなパターンを検証していくと、明確に「これがわかりやすい」という反応が返ってくるパターンがわかるので面白かったですね。触っていただいた方の声を随時反映していったおかげで、Friendsにとって使いやすいだけでなく、エンドユーザーが接客を受けたときにも情報を受け取りやすい形にできたと思います。

施策配信の“速さ”にもこだわり、改善を重ねる

編集画面の使いやすさ以外に、開発においてこだわったポイントはありますか？

川口：そもそもエレメントビルダーを作る目的として、Friendsが実現できる施策の幅を広げること以外に、KARTEの施策配信を速くすることも含まれていました。そのため、施策の配信速度をいかに高めるかは常に念頭に置いて開発していました。

とりわけGUIはユーザーが画面で操作をするためにさまざまなデータを扱うので、だんだんと仕組みが複雑になり、結果として処理速度が落ちてしまいやすい。

この課題を解決するために、いくつかの処理はSDKという形でKARTEとは切り離し、施策を実行するときに必要な処理を最小限で構成してビルドできる仕組みを構築しました。ビルド時にSDKから必要な機能を呼びだす際、使っていないコードを削り落とすような仕組みなど、施策を軽量化し速度を向上させるための細かなチューニングも行っています。

川口和也：1年半ほど前から開発に参加。エレメントビルダーで作成されるアクション自体の速度向上のためのビルドプロセスの構築と最適化を担当

また、今回のエレメントビルダーはGUIで操作しながらリアルタイムにプレビューを見ることができます。これも最初はユーザーの操作を受けてコードをビルドし、プレビューに反映させるまでに1、2秒の遅れがあり、非常に使いづらい状態でした。

本来、コードのビルドの作業といえば、エンジニアの開発環境上のマシン上かもしくはCI/CD上の環境上で行うもので、数秒以上、長いときは分単位で待たされるのが普通なんです。これを一般的なブラウザで動かせるものにするのは容易ではありません。コンマ何秒単位の細かい調整を重ねながら、何とかユーザーにとってストレスなく使える状態を実現していきました。

自由にやりたいことを実現するために使ってほしい

大変な開発を経てリリースしたエレメントビルダーのβ版の反響や手応えはいかがですか？

篠原：思った以上に使いこなしてくださって嬉しいですね。この前も実装したばかりの新しい機能を、私たちが紹介する前に見つけて使いこなしているFriendsの方がいました。

片居木：機能を使いこなし、ブランドの世界観やデザインに合わせた綺麗なデザインを形にしてくださってますよね。

細かい部分ですが、サイトのデザインに合わせてポップアップの四隅を丸くしているFriendsがいました。角を丸くするにも従来のエディタではコードを書く必要があったんです。こうした「やりたいけど、できなかったこと」をどんどん形にしてもらいたいです。

今後、この機能をどのように進化させていきたいですか？

片居木：KARTEの接客施策からリアルタイムにデータを参照できる「アクションテーブル」を使った施策を、エレメントビルダーでも簡単に扱えるようにしたいですね。

たとえば、商品の売り上げデータをアクションテーブルに格納し、そのデータをもとに人気商品のトップ10を接客で表示するなど。動的にデザインが変わる施策のハードルも下げていきたいと思います。

茨木： UIの使い勝手の良さは無限に磨けると思うので、今後も地道に改善し続けたいです。アクションテーブルなどを使ったデータ連携機能についても、まずは機能や仕組みの開発からですが、直感的に操作できるビジュアルも作り込んでいきたいです。

進化したエレメントビルダー、今後Friendsにどんなふうに使ってもらいたいですか？

片居木： 自由に使ってほしいという気持ちが大きいですね。自由度高く多様な施策を実現できるようになっているので、私たちの想定していない面白い使い方を見つけてもらえたらと思っています。

あとは、今回ノーコードで編集できるというのが利点ではありつつ、エンジニアやデザイナーにも寄り添うエディタを作ることを意識していました。引き続き、HTMLやCSSによる編集も可能です。カスタマイズしやすいよう篠原さんがこだわって作ってくれましたので、エンジニアやデザイナーの方にも使ってもらえたら嬉しいですね。

篠原：メインのターゲットはマーケターですが、それ以外にもエンジニアやデザイナーなど、Webサイトに関わるすべての人のことを考えて作れたかなと思います。

また、自由度高く編集できるようになったのはとてもよかったと思う一方、自由度が広がりすぎても、何をどう作ればいいか迷うFriendsもいるはずです。なので、できる範囲で一定のルールというか「こうするとうまくいきますよ」と教えてくれるガイドのような機能もChatGTPを活用するなど含めて検討していけたらと考えています。

大幅に広がった自由度は大切にしつつ、Friendsとエンドユーザーにとってより良い体験を実現するために、今後も機能を磨き込んでいきたいです。