eラーニングコースにインタラクティブな機能を追加する場合、ドラッグ＆ドロップデザインを検討してください。ドラッグ＆ドロップは、学習者がコンテンツの進行をいったん止めて思考させ、注目させる良い方法です。例えば、プロセスのステップ順序を確認させたり、用語の確認をさせたり、関連するアイテムを確認させたりするでしょう。
Storyline初心者は、フリーフォーム ドラッグ＆ドロップをどのように作るのか疑問に思うかもしれません。手順を説明します。
ステップ1：スライドをデザインする
カナダの地理に関するインタラクティブを作ることを例に説明します。学習者にカナダの様々な都市を地図上の適切な場所に配置するドラッグ＆ドロップを作ってみましょう。
最初に行うことは、スライドの外観をデザインすることです。ドラッグアイテムとして使用するオブジェクトやドロップターゲット（両方ともドラッグ＆ドロップを作成するためキーポイントになります。）を含め、すべてのアイテムをスライドに追加しておく必要があります。ドラッグアイテムは、スライド上でドラッグするオブジェクトです。一方、ドロップターゲットは、ドラッグアイテムをドロップする領域です。
次の例では、スライドの上部にタイトル付きの黒い長方形、背景にカナダの地図画像、ドラッグアイテム（各都市の名前）を作成し、ドロップターゲットとして使用される白い長方形があります。（地図上の都市の位置）。また、マップ上の都市の正確な配置を示すために星マークを使用しています。スライドは次のようになります。
現在はまだ静的なスライドです。デフォルト設定の[次へ(Next)]ボタンと[前へ(Previous)]ボタンがあり、プレビューしてもスライド上では何も起こりません。つまり都市名をドラッグして、マップ上の都市の場所にそれらを移動させることはまだできません。
ステップ2：フリーフォームに変換する
静的なスライドからインタラクティブなドラッグ＆ドロップスライドにするには、Storylineリボンの[INSERT]タブにある[Convert to Freeform]ボタンをクリックします。
[Convert to Freeform]ボタンをクリックすると、フリーフォームスライドタイプのオプションが表示されます。この例では、「Drag and Drop」を選択します。
「Drag and Drop」を選択します。
静的スライドをフリーフォームドラッグ＆ドロップスライドに変換すると、いくつかのことが起こります。まず、次のような「Form View」が表示されます。
「Form View」でドラッグアイテムとドロップターゲットを指定できます
静的スライドをフリーフォームスライドに変換すると他にもいくつかのことが起こります。これは「Slide View」に切り替えると表示されます。スライドの「前へ(Previous)」ボタンと「次へ(Next)」ボタンがなくなり、代わりに「送信(Submit)」ボタンが現れます。同時に正解/不適切フィードバックレイヤーが自動的に作成されます。
（デフォルトのフィードバックレイヤーをそのまま利用することもできますし、フィードバックレイヤーの外観をカスタマイズすることもできます。）
[Convert to Freeform]をクリックすると、[送信(Submit)]ボタンと、正解/不正解フィードバックレイヤーが作成されます。
ステップ3：ドラッグアイテムをドロップターゲットに割り当てる
次に、「Form View」に切り替えて、どのオブジェクトをドラッグアイテムやドロップターゲットにするかを割り当てます。とても簡単です。左の列でドラッグアイテムを選択し、右の列で対応するドロップターゲットを選択するだけです。右側のエリアには、選択したオブジェクトがどれかを示す便利なプレビューもあり、間違いを最小限に抑えます。ドラッグアイテムとドロップターゲットを割り当てると、次のようになります。
ヒント：ドラッグアイテムとドロップターゲットにきちんと名前を付けると、オブジェクトを確実に選択できるようになります。
ステップ4：インタラクションをプレビューする
これで、ドラッグ＆ドロップが機能するはずです。[Preview]ボタンをクリックして、外観を確認し、動作を確認できます。
インタラクティブ機能が機能しています。さらに学習者の体験を改善するために下記のような点を変更したい場合があります。
不正解レイヤーには、正しく場所にドロップされたドラッグアイテムと間違ったドラッグアイテムに関するヒントや表示がありません。
現在ドラッグアイテムは、マップ上の任意の場所にドロップできます。ドロップターゲットの外側でも可能です。
ドロップターゲットに複数のドラッグアイテムをドロップできます。
現在は正しいか間違っているかのフィードバックが表示されませんし、ドロップターゲットの外にドラッグアイテムを配置できます。
では、このフリーフォームのドラッグ＆ドロップをカスタマイズして、希望どおりに機能させる方法を紹介します。
ステップ5：ステイトをドラッグアイテムに追加する
まず、Storylineのカスタムドラッグ＆ドロップステイトを使用すると、正しいか間違っているかについてのフィードバックを提供することができます。ステイト（状態）は、フィードバックするための迅速かつ簡単な方法です。ステイトを追加するには、ドラッグアイテムオブジェクトを選択し、ステイトパネルの「Add State」ボタンをクリックするだけです。新しいステイトを作成すると、ドロップダウンの下に次の3つのオプションが表示されます。
ドラッグ＆ドロップには3つの状態があります。
使用可能な3つのステイトは次のとおりです。
Drag Over State：この状態は、オブジェクトがドロップターゲット上にドラッグされている時の外観を指定できます。
Drop Correct State：この状態は、オブジェクトが正しいドロップターゲット上にある時の外観を指定できます。
Drop Incorrect State：この状態は、正しくないドロップターゲット上にあるオブジェクトの外観を指定できます。
一つ目のオブジェクトにカスタムドラッグアンドドロップステイトを追加したら、[Format Painter]を使用すると、他のドラッグアイテムにすばやく適用できます。
これで[送信(Submit)]すると、どのドラッグアイテムが正しいか間違っているかを知ることができます。
ステップ6：ドラッグ＆ドロップオプションでさらにカスタマイズする
ドラッグ＆ドロップをさらにカスタマイズするには、Storylineリボンの[DESIGN]タブに移動します。
ヒント：[DESIGN]タブは複数あります。一番右の[DESIGN]タブを選択します。
リボンのこの[DESIGN]タブには「Drag & Drop Options」というボタンがあります。クリックするとこのウィンドウが表示されます。
ここには、ドラッグアンドドロップ機能をカスタマイズする多くのオプションがあります。それらを試してみましょう。
Drag Item Options
Return item to start point if dropped outside：別な場所にドロップした時、アイテムを元の開始点に戻す。
Any drop target：このオプションを選択すると、[Form View]で指定したいずれかのターゲットにドラッグアイテムをドロップしなかった場合、ドラッグアイテムを元の開始点に戻します。
A correct drop target：このオプションを選択すると、ドラッグアイテムを正しいターゲットにドロップしなかった場合、ドラッグアイテムを元の開始点に戻します。
Reveal drag items one a time：すべてのドラッグアイテムをスライドに配置するスペースがない場合があります。このオプションを使用すると、ドラッグアイテムを一度に1つずつ表示できます。（そのサンプルはこちら）それらを表示する順序も指定することができます。
Drop Target Options
Snap dropped items to drop target：このオプションを使用すると、アイテムをターゲットにドロップした時のドラッグアイテムの反応を指定できます。次のオプションがあります。
Tile（タイル状に）
Stack random（ランダムに重ねる）
Stack offset（ずらして重ねる）
Snap to center（中心に重ねる）
Free（フリー）
Allow only one item in each drop target：このオプションを使用すると、各ドロップターゲットに1つのドラッグアイテムのみをドロップすることができます。ドロップターゲットに2つめのアイテムをドロップすると、ドロップターゲットに既にあるアイテムが元の開始点に戻ります。
Feedback
Delay item drop states until interaction is submitted：このオプションでは、前述のドラッグアンドドロップステイトをカスタマイズします。
デフォルトでは、カスタムステイトを使用している場合、学習者が[送信]ボタンをクリックすると、ステイトが表示されます。ただし「Delay item drop states until interaction is submitted」を解除することで変更できます。このオプションを解除すると、ユーザーが[送信]ボタンをクリックした後ではなく、ターゲットにドラッグアイテムをドロップするとすぐに、ドラッグ＆ドロップステイトが表示されます。
これらのオプションを使用して、このインタラクションを変更できます。
「Return item to start point if dropped outside: any drop target」を選択して、ドロップターゲット以外にドラッグアイテムした場合、アイテムを元に戻すようにします。
「Allow only one item in each drop target」を選択して、ドロップターゲットに複数のドラッグアイテムを配置できないようにします。
この変更をした場合のサンプルの動作を見てみましょう。
このインタラクションは、かなりスムーズになり、ドラッグ＆ドロップステイトを使用して、どの回答が正解/不正解になったかのフィードバックも学習者に提供できます。
さらに一歩進めて、回答回数を無制限にし、すべての都市が正しい場所に来るまで続けられるようにできます。これは、正しい答えがわからないまま学習者を放り出したくないというインストラクショナルデザインの観点に役立ちます。無制限の試行でインタラクションがどのように機能するかを実際に見てみましょう。
学習者は、正解するまで続けるようになります。正解についての疑いはなくなります。
このブログとサンプルが、フリーフォームドラッグ＆ドロップの作成方法、およびドラッグ＆ドロップオプションでカスタマイズする方法の理解に役立てれば幸いです。
※こちらの動画も参考になるかと思います。
株式会社ディーシェは日本におけるArticulate製品の販売代理店です