ドライブで窓の外を眺めたことがある人なら（できれば助手席で😉）、街路樹のような近いモノはあっという間に過ぎ去ってしまうのに、山のような遠くのものはほとんど動いていないように見えることに気づいたことがあるのではないでしょうか？この現象は「運動視差/遠近視差」と呼ばれています。
この視差効果によって、デジタルの世界でも奥行きや動きがあるように見えるのです。このリサイクルガイドコンテンツの例のように、現実的な学習シナリオと組み合わせることで、本当に魅力的なインタラクションが完成します。
このインタラクティブな視差効果をStoryline 360で作成する方法を紹介しましょう！
レイヤーコンポーネントを作成する
視差効果を作り出すには、異なる速度で動くいくつかのレイヤーコンポーネントが必要です。そこで、まず最初に、異なるレイヤーを意識して、すべてのスライド要素を作成しました。Storyline 360のシェイプとContent Library 360のアセットの組み合わせで、6つのレイヤーコンポーネントを作成しました。
構成要素1：リサイクルボックス
この例では、リサイクルボックスをメインにしたいと考えました。リサイクルボックスを傾けて車輪を回転させる予定なので、正面中央に置くことで、背景の動きに合わせてリサイクルボックスが動いているような効果を与えることができます。
構成要素2：公園
次に、メインのインタラクティブ要素である公園を作る必要がありました。学習者がこの作品に触れる際に、新たな内容が出現する唯一の要素であるため、空間デザインには細心の注意を払いました。グラフィックは水平に動くので、スライドサイズよりも横長にデザインすることを心がけました。また、ボタンやゴミ箱などのオブジェクトは、園内のさまざまな場所に、特定の順序で配置し、体験のガイドとなるように配慮しました。また、Content Library 360のアイコンやイラストとシンプルな図形だけを使用したので、必要に応じて移動したり、配置を変えたりすることも簡単にできました。
TIPS：[+]ボタンを複製する前に、ステイトをすべてあらかじめ作成しておくと時間の節約になります！
構成要素3：明るめの山
奥行きと動きを出すために、背景には山並みを作りました。山の形をしたアイコンをいくつか組み合わせて、幅の広いグラフィックに仕上げました。山のレイヤーは、近くにあるものは薄い色にしたかったので、これは薄い褐色にしています。
構成要素4：暗めの山
明るい色の山の後ろに、コントラストをつけるために暗めの色の山を追加しました。時間を節約するために、明るい山のシェイプの一部をコピーして貼り付けました。すべての山が同じ形ではないので、一部のシェイプを反転させたりサイズを変えたりして、動いたときにまったく同じ形にならないようにしました。
構成要素5：空
空がなければ、このシーンは完成しないです！一応、太陽も追加してみました。このコンポーネントは、時間を節約するためと、コンテンツに主眼を置くために、かなりシンプルにしています。
構成要素6：フレーム（オプション）
さて、ここからがちょっと複雑なところです。空と地面をスライドいっぱいに広げることで、もっと簡単にできたかもしれません。そうすれば、このフレームが不要になり、オブジェクトが長方形のスライドを自由に行き来することができます。しかし、ユニークな学習体験を作りたかったのです。
このコースに独自のルック＆フィールを与えるために、ユニークな形状の中にコンテンツを表示するフレームをデザインしました。
フレームは、タイトル、白い枠線、矢印ボタン、背景、そして2つのサイドシェイプで構成され、他のコンポーネントはユニークなシェイプの中にしか表示されないようにしています。
TIPS：スライドをプレイヤーの背景とシームレスに見せるには、プレイヤー設定から背景色を変更して一致させます。
こうして設定したのがこちらです。
静的オブジェクトの保存
すべての要素を作成した後、スライドにたくさんのオブジェクトがあることに気づきました。そこで、オブジェクトが多いレイヤー要素（公園、明るめの山、暗めの山など）の一部を別な画像として保存し、画質を保つためにスケーラブルベクターグラフィック（SVG）に置き換えて、ファイルの管理を容易にすることにしました。
例えば、「暗めの山」オブジェクトをすべて選択し、右クリックして[Export Shape as Picture]（図形を画像としてエクスポート）を選択しました。
図形はPNGとして保存しました。このPNGファイルをAdobe Illustratorで開き、SVGとして保存すると、最高の画質が得られます。Storyline 360のプロジェクトに戻り、スライド上のオブジェクトに合わせてSVGを挿入してサイズを変更し、オリジナルの暗めの山の図形オブジェクトをすべて削除しました。
この作業を明るめの山でも行いました。
公園の要素では、インタラクティブな要素が多く、そのうちの静的な部分だけを保存したかったので、画像としてエクスポートする前に、少し特別な手順を踏んでいます。タイムライン上で、目のアイコンをクリックして、ステイト、アニメーション、テキストを持つオブジェクトをいったん隠し、その後いつでも編集したりトリガーを割り当てられるようにしました。
これが、SVGとして保存するために図形をエクスポートした、公園の静的要素です。
また、コンテキストとして、エクスポートに含めなかったすべての要素はこちらです。
公園SVGを挿入してサイズを調整した後、隠してあるタイムライン上の公園オブジェクトの下層に移動させました。目のアイコンを選択し、すべての公園のコンポーネントを再び表示させ、デザインした時と同じ場所に配置しました。そして、それらをグループ化し、グループ名を「Park」に変更しました。
要素をSVGとして保存することで、作業をスピードアップすることができました。タイムライン上のオブジェクトが少なくなったので、編集したいものやトリガーを追加したいものを簡単に選択できるようになりました。また、ファイルサイズも小さくなったので、コンテンツの読み込みも速くなりました。スケーラブルベクターグラフィックス（SVG）について詳しくは、記事「Storyline 360: SVG Support」をご覧ください。
物を動かす
ベースレイヤーのグラフィックがすべて揃ったところで、さらにいくつかのレイヤーを作成し、ストーリーを説明するのに役立てました。あとは、動きをつけるだけです。視差効果の作り方を説明するために、例を見ながら進めていきましょう😊
背景
右に動かすと、背景は左に動き、リサイクルボックスが前に進んでいるように見えます。
左に動かすと、同じ背景パーツが右に動き、リサイクルボックスが後ろに進んでいるように見えます。
この視差効果を作るために、モーションパスのアニメーションを追加して、背景の要素（公園、明るめの山、暗めの山）を動かしています。
ちなみに、同じオブジェクトに複数のモーションパスを追加することができます。この機能は本当に便利です。各要素に対して、左方向と右方向のモーションパスを追加しました。
すべての要素を同じペースで動かしたいので、それぞれのモーションパスのイージング方向を[None]で編集しました。
また、各要素が常に現在位置から移動するように、[Relative Start Point]（相対開始点）を選択しました。
次に、パスの移動時間を1秒に変更しました。
この時間を選んだのは、リサイクルボックスを左右に1秒ずつ進める予定だったからです。１秒間に統一すれば、すべてのアニメーションが同時に止まったり始まったりすることになります。
また、後でトリガーを管理しやすくするために、モーションパスの名前を、要素名とパスの方向を含むものに変更しました。例えば、公園グループを右に移動させるモーションパスは、[Park Right]と名付けました。
次に、パスの長さを変えました。ここが要素ごとに違うところです。背景のオブジェクトは、前景のオブジェクトよりも遅い速度で移動させたいので、各要素の左右のモーションパスの長さを、以下のように編集しました。
公園：180 px
明るめの山：90 px
暗めの山：40 px
この設定だと、最も遠い位置にある暗めの山は、1秒間の間に左右に40 pxしか移動しません。一方、明るめ山は約2倍近くの90 pxの移動となります。
以上で、モーションパスの設定は完了です！次に、これらの要素を正しい方向に動かすためのトリガーを追加する必要があります。デフォルトでは、オブジェクトにモーションパスのアニメーションを追加すると、自動的にトリガーが作成されます。今回は、ユーザーが右ボタン、左ボタンを選択することで要素が動くようにしたいので、ベースレイヤーからトリガーを削除し、代わりに[Bin Right]と[Bin Left]レイヤーにトリガーを追加しています。
[Bin Left]レイヤーには、タイムラインの開始と同時に要素を移動させる下記のトリガーを追加しました。
また同じように[Bin Right]レイヤーには、タイムラインの開始と同時に要素を左に移動させる下記のトリガーを追加しました。
これで、学習者が左か右を選択すると、それに応じて背景が移動するのがわかります。
リサイクルボックス
さて、次はリサイクルボックスです。背景が動くと進んでいるように見えるように、正面中央に置いてみました。
右に進むと、ボックスは傾いて前に進み、左に進むと傾いて後ろに移動します。1秒後にアニメーションが止まり、リサイクルボックスは直立した状態に戻ります。
この視覚効果を生み出すために、[Bin Right]と[Bin Left]のレイヤーが表示される時にベースレイヤーのリサイクルボックスを隠し、見えなくしました。
その代わりに、傾いたボックスを両方のレイヤーに追加し、ボックスが動く方向によって進んでいる効果線をつけました。
 |  |
[Bin left]レイヤーのボックス | [Bin Right]レイヤーのボックス |
次に、車輪にSpin entranceのアニメーションを追加しました。通常の車輪と同じように、左に行くと車輪の方向は反時計回りに進みます。
右に行けば、時計回りに回転します。
各方向の回転量は、1/4回転が一番現実的に見えたので、1/4回転にしました。
リサイクルボックスの移動方向を強調するために、効果線にWipeとFadeのアニメーションを追加しました。
また、これらのレイヤーの背景要素の継続時間とタイムラインの両方を1秒に設定しているので、すべてのアニメーションが同時に停止します。
リサイクルボックスが元の直立した位置に戻るように、タイムラインが終了したら、[Bin Right]と[Bin Left]のどちらのレイヤーでも非表示にするトリガーを追加しました。
学習者は自動的にベースレイヤーに戻り、そこで学習の旅を続けることができます。
境界線（移動できる範囲）を設定する
リサイクルボックスを左右に自由に動かせるので、背景の要素が動きすぎるのをどうやって止めたか気になりますよね。
冒頭で左に進むと、小さな亀が現れ、左ボタンが無効化しているので、それ以上移動することはできません。
学習者がメインエリアの外側に移動できないようにするには、境界線を設定する必要がありました。そのために、左ボタンの上に無効化のためのボタンを追加し、境界線に移動した時だけ表示するようにしました。このボタンとして、透明な図形を追加して、既存のグループ[Park]の中に貼り付けました。
左に移動すると、Parkグループが右に移動し、リサイクルボックスと透明なシェイプが交差（intersect）し、「無効化のためのボタン」がNormal（見える）に変化します。学習者がそこから離れると、リサイクルボックスと透明なシェイプの交差が終わり、元の非表示の状態に戻ります。
これと同じテクニックを、最後の部分にも使いました。
リサイクルボックスが家の横の透明なシェイプと交差すると、最終レイヤー[Well done]を表示します。
これによって、視差効果をつかった学習体験をグラフィックの最後で終わらせることができました。
まとめ
視差効果を使えば、コンテンツに命を吹き込むような、魅力的な学習体験ができます。まだプロジェクトファイルをご覧になっていない方は、このリサイクルガイドプロジェクトをダウンロードして、どのように作ったかを詳しく見てください。
モーションパスの使い方に関する詳しいアドバイスは、こちらの記事「Storyline 360でモーションパスを使ったアニメーションを作成するための7つのコツ」をご覧ください。
これらの機能を試してみたい方は、Articulate 360の30日間の無料トライアルをお試しください。ご登録にクレジットカードは必要ありません！！
株式会社ディーシェは日本におけるArticulate製品の販売代理店です