今回で3回目となるCanvaテンプレートの出品ですが、今回のバージョンではさらに便利な機能を追加しています！
今回のテンプレートには、3つの注目すべき特徴があります。ピクピク動く背景アニメーション、自動で切り替わるスライドアニメーション、そしてクリックで動くスライド機能です。これらをうまく活用することで、よりインタラクティブで視覚的に魅力的なLPを簡単に作成できます。
動くアニメーション背景の作成方法
このようにアイコンで作ったパターンがピクピク動くアニメーションの作り方を紹介します！
PDFのテンプレート.02を開いてください。
1. パターンの作成
まず、アニメーションがかかっている動く背景を作ります。これは、Webサイト用ではなく、動画用のページで作成します。
(1) 背景にしたい洋服アイコンを配置し、隣にコピーします。
(2) ここで、右側にコピーしたアイコンブロックはグループ化しておきましょう。
理由は、Canvaでは画面外にオブジェクトが出ると自動で削除されてしまうことがあるため、グループ化することで削除されるのを防ぎます。
(3) 1列のアイコンがコピーできたら、続けて下にも同じようにコピーし、全体がパターンで埋まるように配置します。
2. パターンの動き設定
(1) 次に、このページを複製します。
(2) 複製したページのアイコンは、すべてグループ化を解除します。解除後、アイコンすべてを選択し、配置 → 回転で「3」と入力して回転させます。
もっと動きをつけたい場合は、回転角度を「5」にしても違和感はありません。
(3) 2つのページをShiftキーを押しながら選択し、タイミングを0.5秒に設定します。
これで、1ページ目と2ページ目が0.5秒間で繰り返されるアニメーションになります。
(4) 完成したら、共有 → MP4形式の動画を選択してダウンロードします。
3.アニメーション背景をLPに適用
(1) ダウンロードした動画をCanvaにアップロードし、ドラッグ&ドロップでLPの背景に差し替えます。
(2) 背景の色を変更したい場合は、お好みの色を選択して、パターンはそのままに色だけを変更することができます。
スマホの画面がスライドする動き
1.スライドの構成
スライドは、3つの写真が2回繰り返してスライドするシンプルな構成になっています。この繰り返しにより、自然なループアニメーションを作成できます。
2. トランジション効果「マッチ＆ムーブ」の活用
スライドの切り替えをスムーズにするために、トランジション効果「マッチ＆ムーブ」を使います。この効果を使うことで、写真の動きが滑らかに切り替わるようになります。
• 最初のスライドでは、画像が右に移動し、次のスライドで左に戻るように設定されています。
• これを写真の枚数×2回繰り返すことで、自然に自動で切り替わるアニメーションが完成します。
3. 動画のダウンロードと配置
写真を差し替えたら、共有から動画をダウンロードし、Webサイト用のLPにアップロードします。
WebサイトLPには、中央にスマホの画像が切り抜かれたデザインがあるので、スライド動画をそのスマホの背後に配置します。
画面サイズによっては、スマホの画像とスライド動画がずれてしまうことがあります。そのため、スライド動画とスマホ画像はグループ化しておきましょう！
クリックでスライドさせる方法：Canvaでのリンク埋め込み
今回は、ユーザーが実際にクリックしてスライドできる方法について解説します。前回のスライドはMP4形式の動画として書き出し、挿入していましたが、今回はリンクを埋め込むことで、クリックでスライドが動く仕組みを作成します。
1. スライド用ページのリンク取得
まず、スライド用ページのリンクを取得します。共有メニューから「公開閲覧リンク」をクリックし、URLをコピーします。
2. LPページへの埋め込み
次に、ウェブサイトLPページに戻り、コピーしたURLを貼り付けます
スライドを埋め込んだ後、前回と同様にスマホの画像サイズに合わせて配置し、スライドをスマホ画像の背後に配置します。
これで、クリックによってスライドが動くインタラクティブな要素を取り入れることができ、さらに操作性のあるデザインが実現できます。
まとめ
今回のテンプレートでは、これまで以上に豊富なアニメーション機能を取り入れています。背景にピクピク動くアニメーションを加えることで、動きのあるデザインを実現。さらに、自動で切り替わるアニメーションや、クリックで操作できるスライドを組み合わせることで、視覚的なインパクトを持たせながら、ユーザーの操作性も高めることが可能です。
これらの機能を活用し、誰でも簡単にプロフェッショナルなLPを作成できるこのテンプレートを、ぜひチェックしてみてください！
