KARTE Growth Pick Ups 2021年5月号です。
ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidentialGrowth Pick-upsʂ20215
View Slide
ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidential 2Growth Pickups 5⽉号 ⽬次シナリオストア リニューアルシナリオストア内に「テーマ(β)」コンテンツをリリースしました• シナリオストア テーマ(β)とは?• この機能で得られるメリット• 機能説明• (旧)接客シナリオとの違い特集:アクションエディタの使い⽅徹底解説!アクションエディタの使い⽅をマスターしよう• アクションエディタで編集できること(概要)• アクションエディタを使いこなそう!• 基本の編集(画像)• 基本の編集(テキスト)• 基本の編集(ボタン)• 最⼩化表⽰の追加• アクションの表⽰⽅法を変更する• KARTEのデータをテキストに挿⼊• アクションエディタを使いこなして、より良い接客体験をつくりましょう!P 3P 13
ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidentialシナリオストア リニューアルシナリオストア内に 「テーマ(β)」コンテンツをリリースしました🎉3
ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidentialシナリオストア テーマ(β)とは?4⽬的から施策を考えるためのガイドです。課題(テーマ)ごとに考え⽅のシナリオテンプレートを⽤意しているため、施策を設計しやすくなります。シナリオストア テーマ(β)とは?旧接客シナリオはデザインベースで設計されていたため、⾃社の仮説に沿った施策を考えにくい(振り返りにくい)という声がありました。顧客体験を⾼める施策のアイデアを膨らませられるような構造のコンテンツを提供したいと思い、今回新たに追加いたしました。テーマ(β)を開発した背景KARTE利⽤初期のユーザー、施策アイディアが思い浮かばない⽅におすすめです!どんな⼈におすすめ?CX Clip 施策を考えるためのガイド「シナリオストア テーマ(β)」の開発背景や活⽤法についてご紹介します!より詳細な開発背景や活⽤⽅法はCX clipをみてね
ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidential 5この機能で得られるメリットFriendsの得られるメリット接客作成をはじめる きっかけになる最初から接客作成フローに⾶び込むよりも、 ⾒える情報が少ないため、 作成のハードルを下げられる施策を構造的に考える ヒントになる「初回来訪ユーザー向けには施策出来てるけど、リピーター向けには出来てないな」とか ジャーニーの中での抜け漏れに気づける施策アイデアを考える ⼒がつくKARTEを使い続けることで施策を考える⼒が ついて、マーケターとして成⻑していける (という仕組みをKARTEが作りたいと考えている)1 2 3
6ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidential機能説明シナリオを⽬的毎に分けてテーマ化対象ユーザーの条件がシナリオに紐付くように⾃分で施策アイデアを考えられるきっかけにプレーンなテンプレートから接客を作れるようにシナリオストア テーマ(β)画⾯1234シナリオストア(テーマ)の利⽤⽅法サポートサイト
ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidential機能説明7シナリオを⽬的毎に分けてテーマ化順番に実施していくことで、サイトのグロースに必要な⼀連の施策を網羅的に実施していけるようになります。1
ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidential機能説明8対象ユーザーの条件がシナリオに紐付くようにセグメント作成や設定の⼿間をスキップして、微調整だけで接客を作ることができます。2
ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidential機能説明9アイデアの箇条書きと関連する施策事例を掲載アイデアの箇条書きと、関連する施策事例を掲載することで、⾃分で施策アイデアを考えるきっかけになります。3
ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidential機能説明10プレーンなテンプレートから接客を作れるように作り込まれていないプレーンなテンプレートをベースに、 ⾃社のアイデアやデザインを反映した接客が作りやすくなります。4
ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidential(旧)接客シナリオとの違い11Q.「接客シナリオ」はどうなる?A. 引き続き残ります。• これまでの接客シナリオ … アクション• 今回つくったもの … テーマとして、タブで⾏き来できるようになります。
ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidential 12(旧)接客シナリオとの違いQ.「テーマ」と「アクション」どう使い分ければいい?テーマ(β) アクション(旧:接客シナリオ)こんな時におすすめ• 何から施策をすればいいか迷っている時• ユーザーのステージに合わせて、構造的に施策をしていきたい時• 対象にすべきユーザーや、課題の分解の仕⽅を⾝に付けたい時• 具体的にやりたい施策が決まっている時• 他社事例を取り⼊れたい時• アクションのアイデアを考えている時⼀⾔でいうと 施策を考える⼒をつけるためのガイド すぐ試せるアクションのネタ図鑑対象ユーザー プリセットされている(微調整できる) ⼿動で設定が必要施策のアイデア アイデア⼀覧・参考記事をもとに考える 施策事例が1:1で紐付いているアクションのテンプレート プレーンなテンプレートを元に考える インストールして使える
ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidentialアクションエディタの使い⽅13徹底解説!アクションエディタの使い⽅をマスターしよう接客サービスの編集画⾯(接客サービス作成フロー)の「アクション」から編集に⼊った画⾯を「アクションエディタ」と呼び、そこで選択したテンプレートに対して⾒た⽬(クリエイティブ)と表出⽅法の編集ができる画⾯です。アクションの編集⽅法サポートサイトお客様⽬線プレビューの背景には実際に配信を予定しているサイトのページを選ぶ(直接URLを指定する)ことが可能で、お客様の⽬線で配信イメージを確かめながら編集することができる。直感的編集した内容が即座にプレビューに表⽰され、直感的に編集ができる。HTML / CSSの編集ができなくても、思い描いたポップアップを簡単に作成することができるのがアクションエディタのすごいところ!誰でもできるテンプレートの要素はノーコードで編集可能なため、特別なスキルがなくてもサイトに馴染んだアクションを作成できる。
ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidentialアクションエディタの使い⽅14アクションエディタで編集できること(概要)KARTE提供テンプレートについてKARTE提供テンプレートは、どんなサイトにも馴染みやすいよう、それぞれの要素の⼤きさや組み合わせを考え、構成されています。そのバランスが⼤きく崩れてしまうと、サイトに馴染まないだけでなく、単純に⾒栄えやサイト⾃体の印象が悪くなってしまうリスクも潜みます。⾼度なデザインスキルや専⾨知識がなくても、誰が編集しても整った⾒た⽬のポップアップが作成できるのがKARTE提供テンプレートとエディタの操作項⽬の特徴です。なお、この資料でご案内するエディタ機能はすべてテンプレート v2を対象としたものです(テンプレートのバージョンについては後述します)。アクションエディタでは、選択したKARTE提供テンプレートの画像・テキスト・リンク先ボタンの変更ができます。スタイル(⾊やサイズ等の“⾒た⽬”に関する部分)とアニメーションなどの表出⽅法を編集することができます。アクションエディタの基本機能1.アクションの⾒た⽬を編集する 選択したテンプレートから、テキスト、画像、⾊などを変更。2.アクションの表出⽅法を編集する アクションが表⽰される際のアニメーション、配信ページで表⽰される具体的なタイミングを指定。
ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidentialアクションエディタの使い⽅15参考:KARTE提供テンプレートのバージョンについてカスタマイズについてKARTEのアクションテンプレートは、HTML / CSS / Javascriptで構成されています。エディタ画⾯では、HTML / CSS / Javascriptを直接編集できるカスタマイズ画⾯を⽤意しているため、スクラッチから作るのと同じレベルで編集することも可能です。残念ながらカスタマイズ画⾯で⾏う編集は⼀般的なHTML / CSS /Javascript⾔語の範囲となるためサポート対象外となってしまいますが、KARTE固有の記述や仕様についてはKARTE Develpers Portalにドキュメントをご⽤意しています。この資料で紹介するエディタの機能はv2のテンプレート固有のものが含まれます。例えば、v1のテンプレートでは最⼩化ステートの追加やボタンの追加はできませんのでご注意ください。KARTE Develpers PortalDevPortal注意点• KARTE提供テンプレートにはバージョンがある• 現⾏はv2(バージョン2)• テンプレート選択画⾯のサムネからバージョンは確認できるv1のテンプレートについては今後提供を終了する可能性もあるため(時期等詳細は不明)、v2のテンプレートをご利⽤いただくことをお勧めしています。なお、ストアからダウンロードした接客にセットされているアクションはすべてv2テンプレートをもとに作成されたものです。
ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidentialアクションエディタの使い⽅16画像挿⼊の際の基本知識:• テンプレートに指定された画像の倍のサイズの画像で、どのデバイスでも綺麗に表⽰されます。• 元画像の縦横⽐率を維持したまま⾃動調整して配置するので、正⽅形なのか⻑⽅形なのか、ざっくりと同じ形状の画像を⽤意して当てはめてもOKです。アクションで、最も⽬を引く「画像」はほとんどのテンプレートでデザインに含まれています。⽂字やボタンのみのポップアップに⽐べ、⽬を引くことで訴求⼒も⾼くなる「画像」の利⽤に関して基本的なノウハウをご案内します。登録されているアクションの画像サイズはどのように確認できますか?サポートサイトアクションエディタを使いこなそう!基本の編集(画像)👉Tips:画像がすぐに⼿に⼊らなかったり、デザイナーに画像作成を依頼する⼯数がかかる場合などは、すでにサイトで利⽤している画像を使⽤するも⼀つの⼿です。マウスオーバー時の表⽰⼿元にあるファイルをKARTEにアップロードして使う場合は「ファイル⼀覧から」、過去にKARTEにアップロードした画像を使う場合は「アルバムから」変更してください。
ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidentialアクションエディタの使い⽅17テキスト編集の際の基本知識:• ⾒出し、詳細テキストともに挿⼊できるテキストの⽂字数制限はなく、挿⼊されたテキストの⽂字数に応じて⾃動で改⾏されます。• ポップアップ全体の⻑さも、改⾏に応じて⾃動で伸びます。• 任意の場所で改⾏を⼊れることも可能です。• 中央寄せ・左右寄せなどテキストの配置はテンプレートで固定されています。• テキストカラーの変更は「スタイル」から⾏います。テキストボックスは、基本的にタイトルとなる「⾒出し」と補⾜⽂章を⼊れる「詳細テキスト」で構成されています。テキストが⻑くなる場合、ここをドラッグして表⽰エリアを広げることができます。アクションエディタを使いこなそう!基本の編集(テキスト)👉Tips:• ⽂字数が⻑くなってしまうと、ポップアップが伝えたいメッセージがぼやけてしまうため、簡潔な⽂章を⼼がけてください。• 情報量が多くなる場合は、ボタンで別ページに⾶ばすなどの⼯夫をしてみてください。
ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidentialアクションエディタの使い⽅18ボタン編集での基本知識:• ボタンレイアウトと個数はプルダウンから選択できる• 遷移先にサイト外のURLを指定してしまうとKARTEでその先の⾏動を追えないので要注意• ボタンの⾊をサイトの配⾊に合わせると、サイトに馴染みやすいKARTE提供テンプレートのボタンは、基本的に別のURLへの遷移を想定していますので、必ず遷移先URLを⼊⼒してください。これはKARTEの接客を配信することで、お客様に次のページすなわち次のサイト内⾏動に誘導することを⽬的としているためです。アクションエディタを使いこなそう!基本の編集(ボタン)👉Tips:指定したURL遷移時に別ウィンドウで開く指定をすることも可能です。もともと⾒ていたページを閉じさせたくない場合(フォーム⼊⼒ページ上で出した接客でFAQページへ遷移させる場合にフォーム⼊⼒中のページを閉じたくないなど)臨機応変にチェックを⼊れてご利⽤ください。
ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidentialアクションエディタの使い⽅19v2のテンプレートを使⽤しているKARTEの接客アクションは、複数のステート(表⽰状態)をもたせることが可能です。ステートとは、ポップアップが複数枚で成り⽴っている状態です。1枚⽬の表⽰となるステート1でバナーを表⽰、クリックし2枚⽬の表⽰となるステート2でカード表⽰といった動きはステートがあることで実現しています。KARTE提供テンプレートでは、アクションエディタから簡単に最⼩化表⽰のステートを追加することができます。最⼩化表⽰を使⽤する際の基本知識:• 選択したテンプレートが表⽰される前または後に最⼩化表⽰のステートを追加できます(前後の別はチェックボックスで指定)。• 最⼩化表⽰は、⼿元の画像またはテキストボタンの形式から選択。アクションエディタを使いこなそう!最⼩化表⽰の追加👉Tips:⼀度ポップアップを閉じてしまっても、同じPVにいる間はいつでもポップアップをお客様の好きなタイミングで表⽰させることができるよう、ポップアップをアイコンにしまっておくような感覚で最⼩化表⽰を利⽤することができます。
ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidentialアクションエディタの使い⽅20アクションが表⽰されるときの アニメーション と、アクションが表⽰されるまでの 間(配信条件に合致してからすぐに表⽰するのか、⼀定秒数 / スクロールの間を置いて表⽰するのか)をエディタで指定することができます。アニメーション表⽰されるときにスライドインやバウンスすることで、お客様の⽬を引くことができます。あえてポップアップの存在をアニメーションにより⽬⽴たせることで、伝えたい情報にしっかりとお客様の⽬を向けさせることができます。表⽰・⾮表⽰タイミング特別アクションで指定していない限り通常は、接客サービスの配信条件に合致する⾏動をお客様が取ったときに接客サービスの配信判断がくだり、すぐにアクションが表⽰されます。表⽰までのタイミングを設定して「間」を取ることで、より適切な瞬間にメッセージを届けられます。アクションエディタを使いこなそう!アクションの表⽰⽅法を変更する
ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidentialアクションエディタの使い⽅21ユーザー情報を埋め込んだアクション配信を⾏う(ユーザー情報変数)サポートサイトポップアップに引⽤したいデータを「ユーザー情報変数」として定義ポップアップが表⽰されたとき、「○○様、こんにちは」や「○⽉⽣まれの⽅へのプレゼント」のようにパーソナライズされたメッセージが⼊っていると⽬を引きませんか?お客様のお名前情報やお誕⽣⽇情報などがKARTEに連携されている場合、そのデータを動的に(表⽰するお客様に合わせて)挿⼊することが可能です。右記例のように、名前・誕⽣⽉の両⽅を表⽰したい場合、名前を引⽤するための変数と、誕⽣⽉を引⽤するための変数の2つの定義が必要です。定義した変数をテキスト内に #{ } と記述することで配信されたポップアップにお客様の情報が⼊ります。アクションエディタを使いこなそう!KARTEのデータをテキストに挿⼊テキスト内に変数で記述して動的にデータの挿⼊をする👉お客様に合わせたメッセージを実現!12
ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidentialアクションエディタの使い⽅22この特集ではアクションエディタの細かな機能の活⽤⽅法をご案内させていただきました。KARTE提供テンプレートを、アクションエディタで編集するだけで誰でも簡単にポップアップを作ることができますが、さらにステップアップしてサイト全体でデザインに⼀貫性をもたせる⽅法などについて、KARTE Academyにてオンラインで⾃学できるコンテンツを揃えています。ぜひこれらのコンテンツも参考にしながら、より良い体験をKARTEを通じてお客様に提供してください!アクションエディタを使いこなして、より良い接客体験をつくりましょう!KARTE AcademyはこちらKARTEAcademyKARTE Academy「よい顧客体験」をデザインし、実現できる⼒を⾝に付けられるようにサポートする総合学習プラットフォーム
ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidentialGrowth Pickups バックナンバー23Growth Pickups バックナンバーはサポートサイトからチェック!Growth Pickupsでは、KARTEの新機能アップデート情報や活⽤Tipsなど、KARTE Friendsの皆さまにお伝えしたい情報をPDF形式で毎⽉厳選してお届けしています。Growth Pickupsで取り上げた「接客したユーザーの平均購⼊単価」「特集:“⼈感”のある接客事例」もどうぞお⾒逃しなく!接客したユーザーの「平均購⼊単価」が⾒られるようになりました特集:“⼈感”のある接客事例Growth Pickups 4⽉号 ダウンロードはこちらサポートサイトGrowth Pickups すべてのバックナンバーサポートサイト
ʛɹɹɹɹ© PLAID, IncɹɹɹɹʛɹɹɹɹConfidential 24⾒出しテキスト