top of page
  • 執筆者の写真DISCE

Storyline 360での進捗メーターの作り方

更新日:2023年11月27日


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製品の販売代理店です

 

Comments


bottom of page