1-3. ステップ(ポップアップ)を作成しよう

1-2. シナリオを作成しよう」でシナリオを新規作成したら、続いてポップアップのテキストやデザインを設定します。Sprocketでは、1つのポップアップは「ステップ」という単位で表されます。複数のポップアップを連続して表示するシナリオなら、その数だけステップを作成するというわけです。

ここでは、ポップアップに表示するテキストや画像を設定していきましょう。

目次

1. ポップアップの位置を選択する

[ポップアップの編集]エリアでは、ポップアップの種類やレイアウトを選択します。今回は「カード型」のポップアップを画面の右下から表示したいので、[右下]のマスをクリックします。

「吹き出し型」は、ページ内の特定の要素からメッセージが出ているような表現ができるポップアップです。特定のボタンのクリックを促したい場合や、注目してほしい場所があるときに利用します。

t2-4-01.png

[ポップアップの位置]で[右下]をクリックする

ユーザーの邪魔にならない位置を選択しよう

ポップアップが表示される位置は、ユーザーの邪魔にならない位置になるように注意しましょう。例えば、じっくりと記事を読みたいのに中央にポップアップが表示されると、ユーザーの体験を損ねてしまいます。パソコンで横長の画面なのか、スマートフォンで縦長の画面なのかも考えて位置を選択します。

2. ポップアップのレイアウトを選択する

続いてポップアップのレイアウトを選択します。ポップアップは、見出し、画像、本文の要素で成り立っています。さまざまなレイアウトがありますので、作成したい要素の組み合わせを選びましょう。ここでは、見出し、画像、本文が上から順番に並ぶレイアウトを選択します。

t2-4-02.png

作成したいポップアップのレイアウトをクリックする

マウスポインターを合わせるとイメージが表示される

ポップアップのレイアウトにマウスポインターを合わせると、イメージのサンプルが表示されます。画像の位置が左寄せだったり右寄せだったりするレイアウトもありますので、参考にしてください。

3. ポップアップの見出しを入力する

選択したレイアウトの見出し、画像、本文をそれぞれ入力していきましょう。[見出し]エリアに、見出しとして表示したいテキストを入力します。見出しは長くなりすぎず、1行で収まる程度の文字数にするのがおすすめです。

t2-4-03.png

ポップアップの見出しテキストを入力する

ここでは見出しを太字にしたいので、入力したテキストを選択してツールバーの[B]をクリックします。すると、文字に太字の装飾を付けられます。

t2-4-04.png

テキストを選択して[B]をクリックすると太字になる

HTMLを編集することもできる

[入力形式]で[HTML]を選択すると、入力エリアが黒くなり、HTMLを直接入力できるようになります。HTMLやCSSを直接入力すれば、[リッチテキスト]よりも柔軟な設定が可能です。

4. ポップアップで使う画像をアップロードする

続いてポップアップで表示したい画像をアップロードしましょう。[画像]欄にある[新規の画像を登録する]をクリックすると、新たに画像をアップロードできます。企業ロゴなど、すでにアップロード済みの画像を使い回したい場合は、リストに表示されている画像をクリックします。

t2-4-05.png

[新規の画像を登録する]をクリックする

[新規画像登録]画面が表示されたら、画像ファイルを点線で囲まれたエリアまでドラッグします。アップロードできる画像形式はpng、jpg、gif、svgの4種類です。3MB以上の画像はアップロードできませんので、画像編集ソフトなどを使ってサイズを3MB以下に縮小してください。

t2-4-06.png

アップロードしたい画像ファイルをエクスプローラーからドラッグする

アップロードした画像が画面内に表示されたら、[登録]をクリックします。

t2-4-07.png

[登録]をクリックする

[新規画像登録]画面が閉じたら、アップロードした画像をクリックして選択します。これで、見出しと画像の設定は完了です。

t2-4-08.png

アップロードした画像をクリックする

[画像管理]画面で一括管理できる

アップロードした画像は、メインメニューの[画像管理]をクリックすれば一覧で確認できます。企業のロゴマークやキャラクターの画像など、ポップアップで使いそうな画像はあらかじめまとめて登録しておくと、その都度画像をアップロードする手間が省けます。

5. ポップアップの本文を入力する

最後に、ポップアップの本文を入力します。見出しと同様に[本文]エリアに直接テキストを入力しましょう。

t2-4-09.png

ポップアップの本文テキストを入力する

ここでは本文を左右の中央に寄せたいので、テキストを選択して[中央]をクリックします。すると、テキストが中央にそろえられます。

t2-4-10.png

テキストを選択して[中央]をクリックすると中央ぞろえになる

これで、ポップアップの内容をひととおり入力できました。続いては、入力した内容がどのように見えるのか、プレビュー機能を使って確認してみましょう。

 

【次の記事】
1-4. ステップを保存してプレビューを確認しよう

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