リンクエディターでステップを配置する

Sprocketでは、複数のポップアップを表示して選択肢ごとに分岐していくマルチステップ型のWeb接客を行えます。

パターンは複数のステップで構成され、1つの「開始ステップ」で始まり、1つまたは複数の「終了ステップ」で終わります。ステップの遷移や動作を設定するのがリンクエディターです。

ここではリンクエディターの使い方を解説します。

目次

リンクエディター画面の項目

リンクエディターは、[シナリオの編集]画面でパターンの詳細を開くと表示されます。リンクエディターには複数のステップが配置されており、ステップが表示される順番を設定できます。

それぞれのステップの設定については「ステップの基本設定を行う」や「終了ステップを設定する」を参照してください。

img-01.png

項目の内容

番号 項目 内容
1 拡大/縮小 リンクエディターの表示を拡大/縮小できます。複雑なパターンの全体像を見たいときは、適切な大きさに縮小します。
2 ステップを作成する 新しいステップを追加します。
3 ステップ パターン内のステップとリンク状況が表示されます。
4 説明 ステップの枠が表す意味の説明です。

リンクエディターを編集したら必ず保存する

リンクエディターでステップの配置やリンクを変更したら、必ず画面右下の[保存]をクリックしてください。保存せずに画面を移動すると、リンクエディターの変更が反映されません。

ステップの追加

リンクエディターの右上にある[ステップを作成する]をクリックすると、新しくステップを追加できます。ステップの追加について詳しくは「ステップを追加する」で解説しています。

img-02.png

ステップの移動

ステップをドラッグすると、自由な位置に移動できます。配置した位置でシナリオの動作は変わりません。見やすいように配置しましょう。

img-03.png

ステップのリンク

ステップの右側の丸いマークから、別のステップの左側にある丸いマークまでドラッグすると、ステップをリンク(接続)できます。ステップをリンクすると、1つ目のステップのボタンをクリックしたら、2つ目のステップに移動するようになります。リンクを解除するには、矢印をマウスオーバーすると表示される×印をクリックします。

img-04.png

img-05.png

ステップのコピー

ステップにあるコピーアイコンをクリックすると、既存のステップの内容を複製できます。ステップのコピーについて詳しくは「ステップをコピー・削除する」を参照してください。

img-06.png

ステップの編集

ステップの操作で最も利用するのが、ステップの編集です。ステップにある鉛筆アイコンをクリックすると[ステップ編集]画面が表示され、ステップの内容を編集できます。[ステップ編集]画面では、ポップアップの内容や表示位置などを設定します。[ステップ編集]画面については「ステップの基本設定を行う」を参照してください。

img-07.png

ステップの削除

ステップにあるゴミ箱アイコンをクリックすると、ステップを削除できます。確認の画面が表示されたら[はい]をクリックします。ステップの削除について詳しくは「ステップをコピー・削除する」を参照してください。

img-08.png

開始ステップの設定

ステップにあるしおりのアイコンをクリックすると、そのステップを開始ステップに設定できます。開始ステップや終了ステップに設定されているステップには、しおりのアイコンは表示されません。

ただし、設定済みのパターンで後から開始ステップを変更すると、思わぬ不具合が発生する可能性があります。開始ステップを変更する際は、必ず設定と動作をよく確認してください。

img-13.png

リンクエディターの設定例

よくあるシナリオを例に、リンクエディターの設定例を紹介します。

バナー型(1つのポップアップのみ)の場合

ポップアップを1つだけ表示するバナー型のシナリオは、開始ステップ(緑色の枠)と終了ステップ(グレーの枠)が1つずつのシンプルな構成になります。分岐(矢印)が1つだけなのでポップアップに表示されるボタンも1つになり、ボタンをクリックすることでシナリオが終了します。終了ステップについては「終了ステップを設定する」を参照してください。

img-11.png

マルチステップ型(複数ポップアップ)の場合

複数のポップアップを連続して表示するマルチステップ型のシナリオの場合は、1つの開始ステップ(緑色の枠)から複数のステップにリンクします。矢印の数だけボタンが作られ、複数のステップに分岐します。分岐の最後には、必ず終了ステップ(グレーの枠)が必要です。終了ステップについては「終了ステップを設定する」を参照してください。

img-12.png

この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています