Storyline 360での進捗メーターの作り方
更新日：11月27日
原文「How I Made This Progress Meter in Storyline 360」
eラーニングコースに進捗メーターを含めることは、学習者がコースのどの程度まで進んでいるかを視覚的にフィードバックする素晴らしい方法です。進捗メーターにはさまざまな形がありますが、一般的には、以下のアニメーションGIFのように、学習者がコースを進めるにつれて、スライドの下部付近にバーが満たされていく様子を見ることができます。
学習者がコースを終了するのに必要な時間を予測し、終了するまで今やるか、中断して後で戻ってくるかを決めることができるように、長いコースでは進捗メーターを含めると特に便利です。また、学習者にガイドすることで、自分がコースのどの位置にいるのかがわからず、迷ったり圧倒されたりすることを防ぐことができます。
Storyline 360のスライド番号のおかげで、1つのトリガーを追加することで、上記のようなカスタム進捗メーターを作成することができます。どのように作成したか、簡単に説明します。
1. スライダーの挿入と書式設定
すべてのスライドにプログレスバーを表示させたい場合は、スライドマスターに配置する必要があります。行うには、[View]タブを開き、[Slide Master]をクリックします。
そこから、[Insert]タブを開き、[Slider]をクリックし、スライダーの1つを選択します。この例では、後で書式設定するため、どのスライダーを選択するかはあまり重要ではありません。
次に、スライドと同じ高さの細長い長方形を挿入します。この長方形は、学習者がコースを進める際にプログレスバーに表示されるものです。長方形を選択した状態で、必要な塗りつぶしの色を選択し、[No Outline]を選択し、輪郭なしにします。
書式設定したら、矩形を右クリックし、[Export Shape as Picture]を選択します。作成した長方形をデスクトップなどのわかりやすい場所に保存し、わかりやすい名前をつけます。
次に、Storylineに戻り、この長方形をクリックし、タイムライン上で、目の部分をクリックすると、この長方形が非表示になります。後でまた使うことになりますが、今は邪魔にならないようにします。
そして、スライダーのThumb（つまみ）を調整します。スライダーを選択し、[Format]タブを開き、[Thumb Fill]をクリックし、[Picture]を選択し、先ほど保存した長方形画像を参照します。
次のステップでは、下のアニメーションGIFに示すように、矩形が完全にスライドから外れるまで、スライダーのサイズを調整します。
正しく設定されていれば、矩形は完全にスライドから外れているはずです。スライド上にある部分は、下のスクリーンショットのように、空部分でありながらスライドの幅全体を占めているはずです。
スライダーが正しいサイズになったら、好きなように書式設定します。この例では、[Thumb border]に[No Outline]を選択します。
そしてスライダーのトラックの塗りつぶし[Track fill]と[border]境界線には[No Fill]と[No Outline]を選択します。
次に、スライダーのつまみ（Thumb）を作成するのに使った矩形の非表示を解除します。この矩形を使用して、進捗バーのアウトラインを作成します。この例では、塗りつぶしの色を取り除き、グレーの輪郭を追加して、下のスクリーンショットのようになります。
そして、スライダーと長方形をスライドの下部に移動し、それらを整列します。下の画像のように、枠である矩形の高さはスライダーのThumbよりもわずかに高さを大きくしたいので、矩形の高さを調整する必要があるかもしれません。
矩形の高さがちょうどよくなったら、スライド中央に配置します。
最後に、スライダーをクリックし、[Design]タブを開き、[End]値を100に変更します。
2. トリガーを作成する
スライダーが設定できたので、学習者の進捗状況を表示するためのトリガーを追加する必要があります。トリガーは以下のような感じです。
オブジェクトは、マスタースライドの状況によりますので、上の図とは異なるかもしれないことに注意してください。
3. ホットスポットを挿入する
次に、学習者がスライダーをクリックして手動で位置を変更するのを防ぐために、ホットスポットを追加します。そのためには、[Insert]タブを開き、[Hotspot]をクリックし、長方形[Rectangle]を選択します。
それから、ホットスポットを右クリックして、[Show Hand Cursor]のチェックをはずすと、学習者はクリックできるとは思わないようになります。
もしよろしければ、ここでやめることもできます。これで進捗バーは完全に機能するはずです。しかし、もっと詳しく知りたい場合は、ステップ4へ進んでください。
4. ホバーステイトの追加(オプション)
進捗バーを次のレベルに引き上げるには、学習者が進捗メーターの上にカーソルを置いたときに確認できるように、完了している正確なパーセンテージをホバーステイトに追加します。
これを行うには、[Insert]タブを開き、[Slide Number]を選択し、ドロップダウンメニューの[More]をクリックします。
次に[Progress through project]（メニュー順でスライドに番号を付けている場合は[Progress through menu]）を選択し、スライドに挿入したい場所をクリックします。
このように、パーセントがテキストボックスに表示されます。
テキストを書式設定して、たとえば色を変えたり、下のように表示させたい場所に移動させたりできます。
ホバーステイトを動作させるには、学習者がスライダーと対話するのを防ぐホットスポットがあるので、トリガーを追加する必要があります。そのトリガーは以下のようになります。
これで完了です。これで、学習者はコースの進行状況を確認することができます。最終結果はこのようになります。進捗メーターの作成方法はこれだけではありません。自由に創造してください。今回どのように設定したのか、もっとよく理解するためにファイルをダウンロードしたい場合はこのページにアクセスしてください。
これらの機能を試してみたい方は、Articulate 360の30日間の無料トライアルをお試しください。ご登録にクレジットカードは必要ありません！！
株式会社ディーシェは日本におけるArticulate製品の販売代理店です