Canvaで横スクロールアニメーションを作成する方法

記事
デザイン・イラスト
画面収録 2025-06-16 17.36.11.gif

横スクロールアニメーションとは、画像やコンテンツが横にスライドする動きのことです。こちらのテンプレートでは、一定方向でスクロールする横スクロールアニメーションが設定されており、これを使って動きのある、LP(ランディングページ)を作成できます!

実際、この横スクロールアニメーションは、専用のスクロール用テンプレートで設定されています。このスクロールアニメーションが完成した後、そのアニメーションを動画として書き出し、LPテンプレートにアップロードして組み込みます。


1. 4枚の画像をそのまま使う場合

まずは、4枚の画像をそのまま使いたい場合です。
アニメーションはすでに設定された状態なので、画像を差し替えるだけで簡単に利用できます。

スクリーンショット 2025-06-17 8.29.51.png
1️⃣スクロールアニメーション用のテンプレートを開きます。

2️⃣テンプレートにあらかじめ配置されている4枚の画像を、お好きな画像に差し替えます。(ドラッグ&ドロップで変更できます)

3️⃣画像を変更したら、テンプレートに組み込まれているアニメーションがそのまま適用されるので、特に設定を変更する必要はありません。

4️⃣完成したアニメーションを動画としてダウンロードします。「共有」→「ダウンロード」→「MP4形式」

5️⃣次に、その動画をLPテンプレートにアップロードします。これで、アニメーション動画がLPに追加されます。


2. 画像の枚数を変更して使う場合

次に、画像の枚数を変更して使いたい場合の手順です。
例えば、4枚の画像ではなく、もっと増やしたい場合は以下の手順で画像を追加できます。

1️⃣まず、テンプレートにある4枚の画像を、画面に収まるように少し小さくします。
スクリーンショット 2025-06-17 8.31.21.png

2️⃣すべての画像が画面内に収まる状態にしたら、グループ解除をします。
スクリーンショット 2025-06-17 8.32.07.png

3️⃣新しく追加したい画像を1枚複製して、写真を差し替えます。
スクリーンショット 2025-06-17 8.32.49.png

スクリーンショット 2025-06-17 8.38.00.png

4️⃣再度グループ化します。
スクリーンショット 2025-06-17 8.33.26.png

5️⃣全ての画像が画面に収まるようにサイズを調整(拡大)します。
スクリーンショット 2025-06-17 8.33.51.png

6️⃣「カスタム」アニメーション作成を選びます。
スクリーンショット 2025-06-17 8.34.15.png

7️⃣マウスでゆっくり画像を左に移動させます。移動すると紫色の線が表示されます。
スクリーンショット 2025-06-17 8.34.33.png

8️⃣「一定方向」を選んでスムーズに動くように設定します。
速度も調整できますので、ゆっくり動かしたい場合は、速度を遅くすることも可能です。
スクリーンショット 2025-06-17 8.35.13.png

9️⃣動画としてダウンロード
その後、LPテンプレートにアップロードして完成です。


⬇️テンプレートの利用はこちら

実際、こちらのLPがどのような作りになっているか気になる方は、こちらのURLよりテンプレートを購入できます。


他の人のテンプレートを見ることで、たくさん学べることがあります。
自分のデザインスキルが向上し、より効果的なLPを作成するためのヒントが得られます!

こちらのLPテンプレートについての別のブログも掲載していますので、合わせてチェックしてください!








サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す ココナラコンテンツマーケット ノウハウ記事・テンプレート・デザイン素材はこちら