ライトボックスは、他のスライドを表示するポップアップウィンドウです。例えば、下記のように表示されます。
このライトボックスは、現在のスライドから離れることなく学習者に補足内容を表示することができる優れた方法です。ライトボックスにより、コースのどこにいるかを気にする必要はありません。
Storyline 360は、トリガーを追加するだけでライトボックスを簡単に作成できます。詳細については、「Storyline360のライトボックスを使ってみる」を参照してください。
もしライトボックスウィンドウのサイズ、背景のスライドを暗くする色を変更したり、「×(閉じる)」アイコンを変更する場合など、ライトボックスの外観をより細かくカスタマイズしたい場合は、次の方法で独自のカスタムライトボックス効果を作成できます。
どういう意味かを確認するには、まず作成したサンプルをご覧ください。
幸いなことに、これはStoryline 360で非常に簡単に設定できます。手順をご説明します。
1. スライドレイヤーを追加します
ライトボックスを表示したいスライドにスライドレイヤーを追加することからスタートします。スライドレイヤーを追加するには、[Slide Layers]パネルの[新しいレイヤー]アイコンをクリックします。
2. ライトボックスをデザインする
次に、スライド全体を覆う半透明の長方形を追加します。この例では、透明度を32％に設定しました。
塗りつぶし色には、スライドの色より少し暗い色を選択しました。これにより、スライドが「薄暗くなった」ような錯覚が生じます。
塗りつぶしの色の暗い色合いを見つける最も簡単な方法は、[Format Shape settings(図形の書式設定)]を開くことです。次のGIFアニメが示すように、[Color(色)]ドロップダウンで、[More Color(他の色)]を選択し、右側にある矢印を下にスライドして、塗りつぶし色として少し暗い色合いを選択します。
そこに、背景として単色の長方形を追加します。下記のようにスライドと同じ色にもできますし、別の色も指定できます。
次に内容を加えていきます。テキスト、画像、ビデオなど、必要なものを配置していきます。
最後に、ライトボックスを閉じるボタンもしくは図形を追加します。下記の例はシンプルに×字型を選びました。
3. スライドレイヤーを閉じるトリガーを追加する
最後に行う必要があるのは、学習者が[×(閉じる)]ボタンをクリックした時にスライドレイヤーを閉じるトリガーを追加することです。
同じスライド上に複数のライトボックスを作成することを計画している場合は、このレイヤーを必要な分だけ複製します。このサンプルでは、4つ複製し、合計5つのスライドレイヤーを作成しました。
4. スライドレイヤーを表示するボタンを追加する
ベースレイヤー（メインスライド）に戻り、クリックするとスライドレイヤー（ライトボックス）を開くボタンを追加します。
この例では、ボタンとして機能する5つの円形の画像を追加しました。
次のステップは、５つの画像に学習者がクリックした時に適切なレイヤーを表示するトリガーを追加することです。
最も簡単な方法は、最初のボタンにトリガーを追加してから、そのトリガーをコピーして他のボタンに貼り付けることです。以下のGIFに示すように、そのあとトリガーパネルで各ボタンが開くレイヤーを更新するだけです。
また、ボタンにホバーステイト(マウスホバー状態)を追加して、学習者がクリックできることを直感的に認識できるようにしたり、訪問済みステイトを追加して、既にクリックしたボタンを認識したりすることもできます。
※ Storyline 360の基本操作を日本語で紹介しております。
「Chapter4 インタラクティブな仕組み」でステイトについてご紹介しています。
5. トランジションの追加（オプション）
ライトボックスをより洗練された外観にするには、レイヤーにフェードトランジションを追加します。これを行うには、各レイヤーを選択し、[Transitions]タブをクリックして、[Fade(フェード)]を選択します。
その他のリソース
数分で、独自のカスタムライトボックス効果を作成できましたね。
今回の例がもし気に入っていただけたなら、ここからテンプレートをダウンロードできます。
また、ライトボックスに関するその他のリソースをお探しの場合は、以下のリンクを確認してください。
ここで学んだことを試してみたいけれど、もしStoryline 360をお持ちでない場合は、Articulate 360の30日間の無料トライアルをお試しいただけます。ご登録にクレジットカードは必要ありません！！
株式会社ディーシェは日本におけるArticulate製品の販売代理店です
Comments