横スクロールアニメーションとは、画像やコンテンツが横にスライドする動きのことです。こちらのテンプレートでは、一定方向でスクロールする横スクロールアニメーションが設定されており、これを使って動きのある、LP(ランディングページ)を作成できます!
実際、この横スクロールアニメーションは、専用のスクロール用テンプレートで設定されています。このスクロールアニメーションが完成した後、そのアニメーションを動画として書き出し、LPテンプレートにアップロードして組み込みます。
1. 4枚の画像をそのまま使う場合
まずは、4枚の画像をそのまま使いたい場合です。
アニメーションはすでに設定された状態なので、画像を差し替えるだけで簡単に利用できます。
1️⃣スクロールアニメーション用のテンプレートを開きます。
2️⃣テンプレートにあらかじめ配置されている4枚の画像を、お好きな画像に差し替えます。(ドラッグ&ドロップで変更できます)
3️⃣画像を変更したら、テンプレートに組み込まれているアニメーションがそのまま適用されるので、特に設定を変更する必要はありません。
4️⃣完成したアニメーションを動画としてダウンロードします。「共有」→「ダウンロード」→「MP4形式」
5️⃣次に、その動画をLPテンプレートにアップロードします。これで、アニメーション動画がLPに追加されます。
2. 画像の枚数を変更して使う場合
次に、画像の枚数を変更して使いたい場合の手順です。
例えば、4枚の画像ではなく、もっと増やしたい場合は以下の手順で画像を追加できます。
1️⃣まず、テンプレートにある4枚の画像を、画面に収まるように少し小さくします。
2️⃣すべての画像が画面内に収まる状態にしたら、グループ解除をします。
3️⃣新しく追加したい画像を1枚複製して、写真を差し替えます。
4️⃣再度グループ化します。
5️⃣全ての画像が画面に収まるようにサイズを調整(拡大)します。
6️⃣「カスタム」アニメーション作成を選びます。
7️⃣マウスでゆっくり画像を左に移動させます。移動すると紫色の線が表示されます。
8️⃣「一定方向」を選んでスムーズに動くように設定します。
速度も調整できますので、ゆっくり動かしたい場合は、速度を遅くすることも可能です。
9️⃣動画としてダウンロード
その後、LPテンプレートにアップロードして完成です。
⬇️テンプレートの利用はこちら
実際、こちらのLPがどのような作りになっているか気になる方は、こちらのURLよりテンプレートを購入できます。
他の人のテンプレートを見ることで、たくさん学べることがあります。
自分のデザインスキルが向上し、より効果的なLPを作成するためのヒントが得られます!
こちらのLPテンプレートについての別のブログも掲載していますので、合わせてチェックしてください!