ChatGPT
Perplexity
Claude
Gemini
Grok
Canvaで動きを付ける前に、商品動画で最初に見せたいものを一つ決めます。商品名、写真、特徴の説明が同時に動くと、見る人はどこから読めばよいか迷います。この記事では、ページ全体の動きと個々の要素の動きを分け、商品名から特徴へ視線をつなぐ方法を考えます。
Canvaで動かす文字と素材を選ぶ
既存のデザインを複製し、商品名、商品写真、説明する特徴を一つずつ置きます。文字は短くし、素材は主役と説明対象が分かる画像を選びます。Canvaで文字にアニメーションを加えるなら、見出しや一つのキーワードなど、動かす目的がある文字に絞ります。全ての文章に効果を加える必要はありません。
Canvaの公式ヘルプ「アニメーションを適用、変更、削除する」では、選択したページ、素材、テキストごとにアニメーションの種類を選び、プレビューや速度・時間を調整する方法が説明されています。選択内容により利用できるスタイルが異なるため、実際に使うアカウントで表示される項目から選びます。
要素の動きとページ全体の動きはどう違う？
Canvaのページ全体のアニメーションは、ページ全体の切り替わりや背景を含む画面の印象を変えます。素材や文字のアニメーションは、選択した要素を動かします。商品名だけを先に見せたいならテキストを選び、ページ全体の入場効果とは別に設定すると、どこに変化を加えたか追いやすくなります。
最初にページ全体へ大きな動きを加えるのではなく、要素を一つずつプレビューします。ページの演出と素材の動きが重なると、効果が二重に見えたり、文字の開始が遅れたりすることがあります。動きが必要な要素と静止させる要素を分け、意図しない動きは削除します。商品名など文字に動きを付ける際は、テキストアニメーションの作り方も参考になります。動かす文字と静止させる文字を分け、読み終える時間を確保する考え方が紹介されています。
商品名から特徴へ目線を誘導する順番
動画の順番を「商品名」「特徴を示す写真」「短い説明」にすると、何を見ているのかが先に伝わります。たとえば商品名を画面に残し、特徴を示す素材を次に出す構成なら、画面全体の動きと各要素の出るタイミングを別々に調整できます。Canvaで素材を動かすときも、商品が主役の場面では背景や装飾を同時に動かしすぎないようにします。
動きは読む順番を助けるために使います。派手な効果で視線を引くより、読み終わる時間を確保できるか、商品の形やラベルを隠さないかを見ます。Canvaの動画演出を増やす前に、動かした結果、元の情報より理解しやすくなったかを確認してください。タイトル・字幕などの画面表現はPexo Motionでも紹介されています。
一度に動かす要素を絞る
まず一つだけアニメーションを加え、次に必要な要素を追加します。商品名の表示と商品画像の動きが重なるなら、片方の開始を遅らせるか、画像を静止させます。動かす要素が少ないと、文字や商品が変形したように見えないか、位置がずれないかも確かめやすくなります。
ページを複製して前後案を作り、動きを加えた版と静止版を並べると、演出の意味を比較できます。これは結果が必ず良くなるという評価ではなく、どちらが商品情報を読み取りやすいかをチームで確認するための方法です。
読み終わるまで画面を保つ
文字の表示時間は、出現する速さだけでなく読む時間から決めます。商品名や数字が一瞬で消えないか、字幕やナレーションとタイミングがずれていないかをプレビューします。速度やタイミングの細かな指定が表示されるかは、選択したアニメーションやアカウントで異なる場合があります。
スマートフォンで見る場合は、編集画面を縮小表示するだけではなく、書き出した動画を実機で再生します。小さな画面でも数字、価格、単位、重要な注意書きが読めるかを確認し、短い文へ直す、表示を延ばす、静止させるなどの修正を選びます。
スマートフォンの画面で動きを確かめる
Canvaからプレビューした後、公開する端末の画面比率で動画を再生します。タイトルや字幕が画面の端に寄りすぎていないか、プラットフォームの操作表示と重ならないか、商品写真の一部が切れていないかを見ます。縦型に変えたときは、横型のデザインで読めた説明がそのまま残るとは限りません。
動きを軽減する端末設定では一部のアニメーションが簡略化されることも、Canvaヘルプで案内されています。動きだけで内容を伝えず、静止した状態でも商品名と特徴が分かる文字を残します。見え方を確認する端末、書き出し形式、公開先は、チームの公開前チェックに記録します。
どんな場合は静止表示が伝わりやすい？
価格、寸法、成分、保証の条件など、正確に読み取ってほしい情報は静止表示の方が確認しやすい場合があります。商品画像の文字や細部を見せたい場面では、大きく回転させるより写真を固定し、説明テキストだけに短い動きを付ける案を比べます。動かす意味を説明できない要素は、静止させるか外します。
点滅や明滅で視線を集める演出は避け、特に速いフラッシュを商品動画へ加えないようにします。W3Cの点滅に関する基準は、1秒に3回を超える点滅を含むコンテンツを避ける考え方を示しています。これは動画全体のアクセシビリティを保証するものではありません。点滅を使わない方法を優先し、公開前に実際の動画を確認してください。
