プレイドが提供している『KARTE Blocks』は、これまでにない画期的なサイト運営プラットフォーム。Scriptタグの導入だけですぐに利用開始でき、既存のWebサイトをブロックの集合体として捉え直し、ブロック単位でノーコード/ローコードで直感的に編集できるようになります。その上、A/Bテストやパーソナライズといった改善、さらには効果測定までワンストップで実現できます。

すでに200以上のWebサイトで採用され、「簡単にWebサイトの価値があげられる」「これまで億劫だったサイトの改修・更新が楽しくなった」といったポジティブな声を多くいただいています。

もっとも、2021年9月の正式版リリース時は異なる価値提供のあり方にトライしており、KARTE Blocksが実現する新しいサイト管理手法についてSNSを中心に大きな反響がありました。その後、2023年2月に「リーン・サイト運営プラットフォーム」としてリニューアル。新コンセプトのもと機能開発・UI/UX改善を重ねてきた結果、より多くのユーザーに支持・導入されるようになったのです。

正式版リリース後の反響にも関わらず、大幅リニューアルを決断した経緯とは？
リニューアルを通じて、新たに提供し始めた体験価値とは？

チームを代表して、職種も経緯も異なる4名の開発メンバーに話を伺いました。

Webサイトを「ブロック」ごとに更新・改善・評価する画期的なしくみ

あらためて『KARTE Blocks』とは何か、から教えてください。

大東：「あなたのサイト改善　あっという間に。継続的に。」というメッセージのとおり、サイト運営・改善のアイデアをスピーディに検証し、また、一回きりではなく継続的に実現できるプロダクトです。

Webサイトにタグを設置するだけですぐに利用できること、そして、直感的な操作だけでWebサイトを好きなタイミングに好きな場所を編集できるようになることが特徴です。その名の通り、サイトを「ブロック」の集合体として捉え直す、という新しいアプローチを採用しています。 ブロック単位で編集していきながら、「サイトやページの改修・更新」や「A/Bテストによる仮説検証」や「定量的なパフォーマンス評価」、そして「ユーザー別の効果や反応の可視化」といったサイト改善サイクルを一気通貫で実現します。

渡辺：通常、Webサイトの改修にはコーディングスキルが必要となります。KARTE Blocksは、マーケターをはじめとする非エンジニアの方々でも直感的にブロックの編集ができるような、使いやすいUI/UXを提供することを何よりも大切にしています。

KARTE Blocks デザインエンジニア 渡辺和豊

KARTE Blocksの正式版リリースは2年前の2021年9月です。当初はどのような経緯で、開発にいたったのでしょう？

大東：KARTE Blocksの初期構想は2019年末にさかのぼります。サービス名も「Rewrite」と、今とは違いました。既存のWebサイトを“後から書き換える”ツールという意味が込められていたと思います。

Webサイトの変更、書き換えは容易ではなく、多くの企業にとって億劫な作業となりがちです。

ECサイトにしてもランディングページにしても、作って終わりではありません。Webサイトを制作した後でも、「ユーザーからの反応が思ったより乏しい」「もうちょっとここを分かりやすくしたい」といった思いを抱くものです。

KARTE Blocks プロダクトマネージャー 大東寛明

渡辺：しかし、バナーひとつ変えるのもコピーを変えて試すのも、コーディングをはじめとするWebサイトの改修・更新に関する専門的な知識が必要となりがちです。とくに、大企業で採用されるWebサイト管理システムとオペレーションでは、一見簡単に思える些細な改修でも、その都度制作会社に依頼して数万円のコストが発生し、2週間ほどのリードタイムが必要、といったことが数多く見受けられます。

そこから、依頼側での確認や追加の修正依頼、さらなる対応作業が繰り返し入る……といった具合です。

大東：もっと直感的に、スピーディにサイトをアップデートできたら「Webサイトで本当にやってみたいことが誰しもできるようになるよね」と。

そう考えて開発をすすめ、数段階のベータ版提供を通じて多くのユーザーの方々からのご意見も取り込みながらリリースしたのが、『KARTE Blocks』なんです。

KARTE Blocksでサイト更新フローに大きな変化が生まれる

ブロックごとのコピーや画像をカンタンな操作で編集できる。その効果検証までできる。だから工数もコストも大幅に減るわけですね。画期的なプロダクトで、皆さん『KARTE Blocks』開発チームも、その思想に惹かれてジョインした方が多いと伺いました。

渡辺：はい。私の前職はWeb制作会社で、先ほど出てきた「ちょっとした改修をしたい」企業の要望を受けてまさに手を動かして実装する側でした。

一連のWebサイト更新業務で、クライアント企業側も制作会社側も、双方で時間とコストがかかるペインを身にしみて感じていました。 そんな折、たまたま担当クライアントでKARTE Blocksの導入支援案件があり、当時まだ限定公開中のベータ版だったこのプロダクトの存在を初めて知ったんです。WordPressやmicroCMSなど、Webサイト制作に関するツールは取り扱うことも多かったですが、純粋に「なんて画期的なプロダクトが国内にあるんだ！」と感動したのを覚えています。自分もWebの可能性をひろげるプロダクトづくりに参画したいと思い、転職してきたんです。

現在は、『KARTE Blocks』のUI/UXデザインの実装を中心に、いくつかの機能オーナーも担当しています。

茨木：私は以前はファッションEC系Webサイトなどを運営する会社でエンジニアをしており、近しい経験をしました。

そこでは、社内のマーケターからですが、「このコピーを変えたい」「A/Bテストをやりたい」と頻繁に要望が入っていました。1つ1つの実装自体はそこまで大変ではないものの、チリツモとなってコードを書き換えるのにいちいち手間と時間をとられてしまい、「もっとサービスの根幹に関わるような開発に集中したい」とジレンマを抱えていました。

プレイドへの転職後はKARTEの機能開発を担当した後、KARTE Blocksのコアにあるフロントエンドの高度な技術に惹かれたこともあり、開発チームへの参画を希望しました。
今は複数の新機能の開発を担当しています。

KARTE Blocks プロダクトエンジニア 茨木暢仁

渡部さんは、デザイナーですが、また違う観点で『KARTE Blocks』を見ていたんでしょうか？

渡部：デザイナーはサイトの体験をよくするために、使いやすいレイアウトや商品に合う外観のデザインを考える側です。ただ、いざ実装をお願いする際に、工数と手間がかかるのも予見できてしまうので、依頼を躊躇して「まあ、いいか」とあきらめちゃう瞬間もあったんです。

だからこそ、多彩なアイデアを躊躇せず試せる、そして、そのアイデアの質を妥協することなく形にできる『KARTE Blocks』はとても価値があると感じていました。「本当はこうしたい」をあきらめなくてよくなりますからね。

KARTE Blocks リードデザイナー 渡部恵美

大東：今ここにいる4名を含めた、事業・開発メンバー一体型の専門チームで『KARTE Blocks』は開発・運営されています。その中で、私はプロダクトマネージャー兼事業責任者を務めています。

KARTE Blocksの提供価値やそれを支える技術への関心が強く、さらにそれらを磨いて行きたいという強い想いを持ったチームを中心に、2023年2月に、『KARTE Blocks』のコンセプトリニューアルを遂行し、新たなスタートを切りました。

リニューアルを経てプロダクトビジョンに掲げた、サイト運営の「楽しさ」と「やりがい」

2023年に『KARTE Blocks』をリニューアルさせた背景には何があったのでしょう？

大東：2021年の正式版リリース直後から、『KARTE Blocks』は多くのユーザーの方々に使っていただきました。一定の利用範囲までは無料でご利用いただけるフリーミアムモデルだったことも後押ししたと思います。

狙いどおり、「Webサイトを簡単に編集・改修していきたい」ニーズは強く、大手企業のマーケ担当から、極端な話をすれば地方のコンビニエンスストアの店長さんまで、本当に幅広い方々にアカウント登録いただけました。

結果、ローンチ4ヶ月足らずで2000人もの方に無料アカウント登録いただき、『KARTE Blocks』に触れていただけました。

しかし、継続的な利用まで進んでいただけたのは一部のユーザーだけでした。

継続利用されづらかった理由は？

大東：「Webサイトで簡単に編集や更新がしたい」「エンジニア人材に頼らずスピーディにサイト改修がしたい」というニーズがあったのは確かで、そこは間違っていませんでした。

ただ、ユーザーへのヒアリングを繰り返すと、自ら手を動かしてサイト更新するのは「まだまだハードルが高い」と感じている方が多かった。

渡部：大きく分けると、ハードルは２つありました。

１つはいくら簡単にブロックごとのサイト編集や検証ができるようになったといっても、「まだ少し怖い」と感じる方が多かったこと。

当初はまだプロダクト自身もノーコードとは完全に言えず、ほんの少しコーディングの必要もありましたからね。多少のスキルがまだ必要で、そこがハードルになっていました。

大東： また、上長や社内の承認を得るプロセスもそう簡単ではなかった。現在も公開されているサイトであるため、サイト更新には決められたフローが存在します。 ユーザーが無料アカウント登録して、タグ設置をして、では思い立ってすぐにサイトを書き換えられるか、というと、そうではない。KARTE Blocksがもたらすアプローチが革新的であることも相まって、まずはこちらからクライアント企業にあった提案と導入後の運用イメージのすり合わせなどが必要と考えました。

なるほど。それらの課題を踏まえて、リニューアルはどこから手掛けられたのでしょうか？

大東：まずは徹底的にユーザーインタビューを。そこから見えてきた課題をもとに、メインターゲットを絞りました。

これまでは広範囲に「Webサイトを手軽に更新したい」「Webサイト運営にはリソースを割かず、できれば外注してしまいたい」層も含めて考えていましたが、まずは「自分たちの手で今あるサイトをどんどん改善したい」と前のめりにサイト改善に取り組もうとしている企業そしてサイト運営チームにフォーカスすることにしました。

渡部：その上で、プロダクトのミッション・ビジョンも改めてチームで考えました。Webサイト運営とそこに携わる方々の気持ち、実現したいことを丁寧に汲み取りながら、自分たちが提供すべき価値、目指すべき方向性をチーム全体のオフサイトで言語化していきました。結果生まれたのが、「Webサイト運営を継続して・安心して・自由にできるようにする」というミッション。そして、「サイト運用者が楽しさとやりがいを感じ、ユーザーも心地よい体験を得られるようにする」というビジョンでした。

「楽しさ」や「やりがい」といった文言が入っているのが、すてきですね。

渡部：はい、そこはチームで話しあっていく中で、最終的に出てきたポイントなんですが、特に大切にしていて。というのも、サイト改善や改修をするときは、新しいアイデアをどんどん試す必要があります。

こうしたアイデア出しって、心身がポジティブな状態じゃないと出づらいよね、と。

「こういうのはどうかな？」「こんなのもいいかも！」と気持ちよく言い合える雰囲気は大事ですよね。ギスギスと「数字を出せ！」だけでは、同じ作業でも出てくるアイデアの質と量が変わりそうです。

渡部：そう、いつものサイト運営の業務に取り組む瞬間に、ツールを触るたびに、「億劫だな」と感じるか、「楽しいな」と感じるか。当たり前のようにある業務なのに少し情緒的すぎるかもしれませんが、その違いでサイト運営の結果も大きく変わると思うんです。

「億劫だな」と思うようなところをKARTE Blocksが置き換えたり、新しい発見・ヒントを 与えることで「お！」っと楽しくなってくれたり。モチベーションの段階を上げたりしながら、その人もチームもポジティブな状態になっていけば、いつもと違うアプローチができるようになったり、それをお互いに認め合ってチャレンジしやすい雰囲気になっていくはず。

そのうえで、プロダクトのコンセプトも「リーン・サイト運営プラットフォーム」とリニューアルしました。

リーン・サイト運営とは？

大東：ご存知のように、リーンとは「贅肉がない」「無駄がない」という意味です。「リーン・スタートアップ」「リーン開発」などと使われることが多いかと思いますが、そこでの意味合いをサイト運営にも持ち込めないだろうかと考えました。

すなわち、より良い価値をもっとスピーディに顧客に提供していくことを目的に、サイト運営・改善のアイデアを素早く検証・実現していくこと。これを「リーン・サイト運営」と表現しました。

KARTE Blocksではさらに、Webサイト運営には少なからず複数人、もしくはチームが連携しながら取り組んでいく実態を踏まえ、単に担当者個人がスポット利用するだけでなく、継続的にWebサイト利用者の体験と事業成果の向上につなげていくプラットフォームという構想にアップデートしました。

顧客が新しいアイデアを楽しみながらどんどん形にできる。そんな変化を生み出したいと考えました。

KARTE Blocksが次々と仕掛けるアップデートと”Blocks Friends”に起こる変化

そうしたコンセプトを実現するため、具体的にはどのようなアップデートをされてきたのでしょうか？

渡辺：本当にいろいろ手掛けてきていますが、個人的に思い入れが大きいのは「ブロックストア」機能の実装ですね。

「ブロックストア」には、あらゆるサイトですぐに組み込んで利用できる汎用的なブロックテンプレートを多数用意しています。 例えば、画像を左右にスライド表示できる「カルーセル」は特に人気のテンプレートで、自前で制作すると難易度が高く外注費用も高くなりやすいものです。それが、ブロックストアからこのテンプレートをワンクリックするだけで、簡単に自社サイトにカルーセルを実装できるようになりました。Web制作会社にいた身からしても、驚異的だな、と。

カルーセルをコーディングなしで既存のWebサイトに実装できるようにしたのは、とても困難だったと伺いました。

茨木：その点は渡辺のすばらしい設計があったからこそ実現できました。

「サイト編集や改修のハードルを下げる」ための具体的な提供機能としては、最もわかりやすく効果的な要素だと自負しています。

「カルーセル」や「追従バナー」など、あらゆるサイトでワンクリックで組み込みできる汎用的なブロックテンプレート

そもそもWebサイトを後からノーコードで、見たまま直感的に編集する、ということ自体が技術的に難しいわけですよね？

茨木：開発している自分たちで言うのもアレですが笑、贔屓目なしになかなか高度なことをやっているなと思います。 例えば、実際のサイトをプレビューしながら、エディター上で見たままブロックを選択して、その中の画像やテキスト、さらには余白などのスタイルまでノーコードで編集する体験です。

少し専門的な内容ですが、KARTE Blocksでは専用のGoogle Chromeの拡張機能を利用し、サーバーにHTTPリクエストする際の一部を改変して、管理画面内でプレビューできるようにしています。そこから、読み込んできたサイトのHTML構文を解析・処理して、直感的に編集しやすいよう調整しているんです。

さらには、実際にサイトに変更を反映して表示する際のパフォーマンスも担保することも重要...といった具合なので、常に最新の技術を活用できないかアンテナを張っています。エンジニアとしてもとても挑戦しがいがあるんです。

おかげさまで、お客様には「とても直感的でわかりやすいUI」とご評価いただくことも多いです。

なるほど。直感的でわかりやすいUI、にはたくさんの試行錯誤があるわけなんですね。 しかも、ただブロックを編集するだけでなく、「A/Bテスト」もとても簡単にできる、と。

渡辺：そうですね。正式版リリース当初から、ブロックごとにA/Bテストを実践できるようになっており、来訪ユーザーを一定の割合で複数のパターンに振り分けて、その結果を比較検証できます。

これまでならば、専用のコードを実装してもらってA/Bテストを実施し、、別のアクセス解析ツールなどで効果分析を行う、といった運用がなされていたところから、『KARTE Blocks』というひとつのプラットフォーム上でA/Bテストから効果検証まで直感的に実施できるようになっています。

プラン→ドゥ、で止まりがちだったPDCAが回しやすくなったというわけですね。もっとも、効果検証・分析で求められるノウハウは、Webサイトの編集で必要とされるエンジニアリングスキルとは違う難しさがあるのでは？

茨木：そこに『KARTE』が活かされているんです。

プレイドの中核プロダクトの1つである『KARTE』では、n=1レベルの細かな効果分析までできる技術と知見があります。そこで積み上げたノウハウを『KARTE Blocks』で活かしています。例えば、A/Bテストなどの施策を実施した後の効果分析において、シンプルにテストパターンごとのコンバージョン率やその変化率を確認できるだけでなく、ユーザーセグメント別にさらに精緻な分析をワンクリックで可能にしたり、という感じです。

大東：結果を見ても「なんとなく良かった、悪かった」で終わってしまい、その一歩先へ深掘りができていない、というWebサイト運営者は多いです。 全体の数値に丸められてしまった、その裏にあるユーザーごとの反応に目をむけることで、仮説検証における学びも増え、次の改善に向けた具体的なアイデアも生まれやすくなります。チェック→アクションができるわけですね。

精度が高ければ、上長やチームに効果を実証するときの、自信と裏付けになりますね。

茨木：その意味では、最近実装して気に入っているのが「ライブ連携機能」です。

『KARTE』にはユーザーがサイトを訪れたとき、実際にどんな動きをするのか、カーソルの動きを動画で記録してあとで見返せる『KARTE Live』という機能があります。

たとえば、あるバナーの前でどこをクリックするか迷っていたり、ページにたどり着いたけれど見分けづらくて離脱していたり……といったユーザーの繊細な動きがみえる。ユーザーの息遣いというか、本心のようなものが垣間見れ、Webサイトで改善すべきポイントの解像度を高めることができるんです。

このライト版のような機能を『KARTE Blocks』にも実装しました。

動画でユーザーの来訪時の体験を再現、追体験する「ライブ連携」

大東：人は数値だけでは着想しづらい。「5％の人が離脱しました」と言われても、数字だけ聞くのと、実際にサイト上で逡巡しながら迷って離脱した映像も合わせて見るのでは、明らかに捉え方が違うはず。ユーザーの心理を自然に想像してしまいますし、その際の解像度はうんと変わってくると思うんです。

定量的なデータだけでは見えない、定性的なデータを掛け合わせるからこそ見えてくるものがあります。

「サイト離脱率」の数字でみるより体温を感じる。その結果、ユーザーの顔が浮かびやすくなるのかもしれませんね。

渡辺：先ほど茨木が触れた、ユーザーセグメント別の詳細分析ができる画面では、数値を一覧で見る一般的な表データの前に、視覚的にセグメントごとの反応を捉えることができるバブルチャートを表示しています。

ワンクリックでユーザーセグメントごとに効果を再集計・可視化できる「ユーザー別の効果探索」機能

バブルの1つ1つは、ユーザーセグメントを示します。例えば、バブルが右上にあれば、そのセグメントは施策によってポジティブな結果が出ており、他セグメントに比べてもゴール（＝ コンバージョン等、ユーザーへ期待する任意の行動）する割合が高い。 逆に、左下にバブルがあれば、施策によって逆にネガティブな傾向が出ている。

数字データが並んだグラフを見て「めんどくさいな」と感じるWebサイト運営者は少なくないと思いますが、入口として可愛いバブルが並んでいると取り付きやすくなるはず。「あ、施策はこのセグメントには効果的だね。もうちょっと推し進めてみようか」とか「あまり効果が出てなかった...でも、それならこんな施策は？」といったポジティブな意見が出てきやすくなる。

なにかアイデアを思いついて、チームメンバーに共有したり、承認を得たりするための準備の手間や難しさがある。それを軽減する役割もあるだろうし、先ほどの「楽しさ」にもつながりそうです。

渡部：そう思います。私たち『KARTE Blocks』チーム自身も、リーン・スタートアップのように”Blocks Friends” （＝KARTE Blocksのユーザー）と密に連携をとって、日々ヒアリングしてプロダクトやサービス、価値経験をブラッシュアップしています。

その一貫でインタビューをすると「Webサイトの提供価値が高まった」「効果がもう何割も高まった」というのはもちろん多いのですが、同じくらい「チームの意識が変わった」「皆がポジティブにアイデアを出してくれるようになった」というチームの雰囲気や考え方の変化について共有してくださるお客様がとても増えたんですよ。

会社の雰囲気、カルチャーにまで作用しているとしたらすごいですね。実際、ユーザーの方々のインタビュー動画を拝見しましたが、なんだかみなさんがいい笑顔なのも特徴的でした。

渡部：はい。私たちがミッション・ビジョンで思い描いたプロダクトを通して、日々Webサイト運営に取り組む方々を笑顔にすることができていると実感できました。

KARTE Blocksのコンセプトムービー 「フレンズが語るKARTE Blocksの魅力」編

茨木：僕自身もエンジニアとして、人を楽しくするプロダクトに携われる喜びがある。Webサイトを通して「本当はこうしたい」「あれができたらいい」という思いって、多くの方が持っていると思うんです。

それを難しさやめんどくささやリソース不足でできないなら、何とかしてそれらの「負」をとりのぞいていきたい。誰しも実現したいことを、実現できる世界をつくる一端を担いたいですね。

渡辺：Webサイト運営に「楽しさ」をもっと増やしていくことも込みで、Webサイトにまつわる人のインフラになっていけたらと思います。そのためにも、アイデアもテクノロジーも含め耐えまなく挑戦を続け、磨き上げて、どんどん使いやすく、多くのWebサイトの体験価値をあげていきたいです。

茨木：業界やサイト特性にあったブロックテンプレートを増やしていく活動や、レコメンド機能をもつブロックの実現など、直近でもやりたいことは多いです。

何だか、皆さん自身も楽しそうなのが、いいですね。

大東：それは間違いないですね。だからアイデアがどんどん出てくるのかもしれない。またそれが『KARTE Blocks』を通じて、ユーザーの皆さんの幸せに少しでもつながると、私たちが信じているからでしょうね。

大きくリニューアルを進めてきている『KARTE Blocks』ですが、今後もブロックの直感的な編集・配信体験を中心に、新しいサイト改善サイクルを実現していきます。今後のアップデートにもご期待いただきたいですね。