NEWS / デザイン百科
MOTION KIT 100を公開しました
動画制作に使える100種類のモーションを、好きな画像で試せます。Web用CSSコードとAfter Effectsの手順を、制作や発注時のイメージ共有に活用できます。
etomojiでは、After Effectsを使って動画を制作しています。写真の見せ方や画面が切り替わるタイミング、動きの速さを調整し、伝えたい内容に合う表現を考えています。同じ素材でも、モーションの選び方によって伝わる印象は変わります。
制作に使える動きを気軽に見比べられるよう、デザイン百科の第一弾として、100種類のモーションを試せる「MOTION KIT 100」を公開しました。好きな画像で動きを試し、Web用のCSSコードやAfter Effectsの手順を制作に活かせる、無料のリファレンスです。
発注時の共有にも便利です。
MOTION KIT 100は、動画の表現を増やしたい制作者、グラフィックに動きを加えたいデザイナー、SNS動画やWebサイトを担当する方に向けたツールです。
動画を依頼する広報・マーケティング担当者にも使っていただけます。「もう少し印象的に」「なめらかに見せたい」といった言葉だけでは共有しにくいイメージも、実際に動くサンプルを見ながらなら相談しやすくなります。気に入ったモーションの番号を伝えれば、制作チームとの打ち合わせにも役立ちます。
100種類から選びます。
収録しているのは、ズームやフェードなどの基本から、画面の分割、立体的な回転、光の演出まで、100種類のモーションです。13のカテゴリで絞り込みながら、気になる動きを比較できます。
たとえば商品紹介なら、ゆっくり寄って細部を見せる動きと、全体を見せるズームアウトを比較します。SNS動画の冒頭なら、短い時間で目を引く登場の仕方を探します。動きごとの説明も、用途を考えるヒントになります。
自分の画像で試せます。
「画像を選ぶ」から商品写真や制作中のグラフィックを読み込むと、自分の素材で100種類の動きを試せます。PCではドラッグ＆ドロップにも対応しています。
速さや緩急を調整しながら、写真のどの部分を見せたいか、文字が読めるか、ブランドに合う動きかを確認できます。ブラウザ上の試作なので、制作に入る前の方向性の検討にも使えます。
差し替えた画像はブラウザの中だけで処理され、サーバーへの送信や保存は行いません。
コードや手順を活用できます。
気に入った動きが見つかったら、使う場所に合わせて制作へ取り入れてください。
WebやLPに使う場合は、「土台のCSSをコピー」と「このCSSをコピー」からコードを取得できます。画像のパスと必要なHTML要素を設定し、実装先に合わせて調整してください。分割や多層の表現など、動きによって必要な要素は異なります。
After Effectsで動画を制作する場合は、プレビューの「AFTER EFFECTS」欄で、使うエフェクトやプロパティの数値を確認できます。手順を参考に素材へキーフレームを設定し、動画全体の尺や演出に合わせて仕上げます。ブラウザのプレビューは表現を検討するための参考としてお使いください。
掲載しているCSSとAfter Effectsの手順は、商用案件でも利用可能です。サンプル画像は配布対象に含まれないため、ご自身で利用できる素材に差し替えてお使いください。
まずは、お手元の画像で試してみてください。
MOTION KIT 100を使ってみる動画制作をご相談ください。
etomojiには、動画制作の現場で培ってきたさまざまな表現や演出のノウハウがあります。今回公開した100種類も、伝えたい内容に合う動きを考えるための選択肢の一部です。
商品やサービスの魅力をどう見せるか、どこで視聴者の目を止めるか、最後に何を伝えるかを整理します。目的と素材を伺いながら、構成やデザイン、モーションを一緒に考えます。
「この画像から動画をつくりたい」「サービスの説明を分かりやすくしたい」など、まだイメージが固まっていない段階でも、お気軽にご相談ください。