1-4. ポップアップの見え方をプレビューしよう

「1-3. ステップ（ポップアップ）を作成しよう」で設定したポップアップのテキストや画像が、実際にどのように見えるかをプレビューで確認してみましょう。

目次

• 1. ステップを保存する
• 2. ポップアップの見え方をプレビューで確認する
• 3. シナリオ編集画面に戻る

1. ステップを保存する

まずは入力した内容を保存します。画面の右下にある［保存］をクリックすると、右上に［保存されました］と表示されます。これでステップに入力した内容が保存されるので、管理画面を閉じても続きから設定を行えます。

［保存］をクリックする

［保存されました］と表示された

2. ポップアップの見え方をプレビューで確認する

画面の下部にある［プレビュー］をクリックします。プレビューする前に必ずステップの保存が必要です。「保存とプレビューはセット」と覚えておきましょう。保存せずにプレビューを実行すると、編集した内容がプレビューに反映されません。

［プレビュー］をクリックする

表示されたメニューから、［プレビューを確認する］をクリックします。

［URLをコピーする］は、プレビュー用のURLをコピーしてほかの人に送ったり、ほかのブラウザーでプレビューを確認したりするときに使います。QRコードをスマートフォンのカメラアプリで読み込むと、スマートフォンの実機でプレビューを確認することも可能です。

［プレビューを確認する］をクリックする

ブラウザーで新しいタブが開き、［Sprocketプレビューツール］画面が表示されます。画面内の数字は、これからプレビューしようとしているシナリオやフェーズ、パターンのIDです。そのまま［プレビューを確認する］をクリックします。

［プレビューを確認する］をクリックする

プレビューを実行すると、ポップアップのプレビューが表示されます。表示位置が適切か、メッセージがきちんと伝わるかなど、ユーザーの立場になって確認しましょう。

ポップアップの内容を確認する

3. シナリオ編集画面に戻る

プレビューで問題がなければ、プレビューを表示しているブラウザーのタブを閉じて管理画面に戻ります。もしテキストや画像を修正したい場合は、ステップの内容を編集して再度保存します。このように編集とプレビューをくり返して、納得いくポップアップに仕上げましょう。

これでステップの編集は完了です。［シナリオ編集画面へ戻る］をクリックして、シナリオの編集画面に戻りましょう。

［シナリオ編集画面へ戻る］をクリックする

最後に、ポップアップに表示されるボタンを設定します。

【次の記事】
1-5. ポップアップのボタンを作成しよう