necco Advent Calendar 2025の13日目の記事になります。
neccoのデザイナーの中川です。
Figmaでつくったデザインを簡単に、リッチに動かしたい！と思う時はありませんか？
ブラウザ上で簡単に利用できるモーションデザインツール「Jitter」の使い方を、作例を動かしながら紹介します！今回はマーケットイベントのサイトのメインビジュアルを作例として用意しました。
Jitterでモーションをつけたものがこちらになります。
Jitterについて
Jitterは無料でブラウザ上でモーションを作成できるツールです。
作成したモーションは4Kビデオ、GIF、Lottieなど、様々な形式でエクスポートできます。
※料金プランによって書き出せる形式やサイズに制限があります
イージングのプリセットが多くあり、直感的にデザインに動きをつけることができます！
Figmaプラグインがあるので、Figmaからデザインをワンクリックでインポートできます。
共同編集も可能なので、チームでモーションを考えることも可能です。
- クライアントやエンジニアへの共有用にサイトのビジュアルを動かしたい
- ホバーデザインを作成したい
- サイト内のイラストをLottieで作成したい
モーションツールの使い方を覚えなくても、Jitterを活用すれば簡単にモーションをつけることができます。
Jitterの会員登録について
公式サイト（https://jitter.video/?noredir=1）にアクセスして、右上の「Try for free」ボタンをクリックしましょう。
Googleアカウントもしくはメールアドレスで会員登録できます。
名前を入力して「Coninue」ボタンを押します。
職種を選択して「Coninue」ボタンを押します。
どの場面でJiterを利用するか選択します。
Jitterの利用目的を選択します。
招待したいアカウントがあれば入力しましょう。なければスキップで大丈夫です。
以上で会員登録は完了です！
FigmaからデザインをJitterにエクスポート
モーションを作成したいデザインがあるFigmaファイルを開きましょう！
Figma上で画面中央下部にあるツールバーから①「アクションメニュー」をクリックし、②「プラグインとウィジェット」タブを選択します。検索窓でJitterと検索すると「Jitter Animation to Figma」というプラグインが表示されるので、クリックして立ち上げます。
動かしたいデザインのフレームクリックして、Jitterのウィジェット内の「Copy」ボタンをクリックします。
コピーが完了したら、ウィジェット内の「Open in Jitter」をクリックします。
ブラウザ上でJitterが開かれ、先ほどコピーしたデザインが読み込まれています。ここから動きをつけていきましょう！要素のレイヤー名を整理しておくと動かす時に選択しやすいです。
Jitterで動きをつけてみよう！
ビジュアルの軸となる要素をスライドイン
まずはビジュアルの軸となるイベントタイトルとイベント情報を動かします。目を引きたいので、要素を上から下に出現させます。①動かしたい要素をクリックして、②右上の「New Animation」ボタンをクリックします。
右サイドバーにモーションのテンプレートが表示されます。今回は「Slide in」をクリックします。
モーションの種類を選択すると、時間やイージングなどの細かい調整ができます。出現の方向を上から下にしたいので、モーションの向きを「↓」に変更します。
「スペースキー」を押すと、プレビューが再生されます。イベントタイトルとイベント情報が上から下に移動しながら出現する動きをつけることができました！
補足情報をフェードイン
続いて補足のコピーとあしらいのリボンをふわっと出現させます。動かしたい要素を選択し、右サイドバーから「Fade in」をクリックします。
補足情報なので、先ほどのイベントタイトルよりも少し後のタイミングで出現させます。下のタイムラインのパネルから、 コピーとリボンのタイムラインを選択し、ドラッグで後ろに移動して出現タイミングを調整します。
コピーとリボンをふわっと出現できました。
オブジェクトをグロウイン
あしらいとして配置しているオブジェクトを拡大しながら出現させます。動かしたい要素を選択して、右サイドバーから「Grow in」をクリックします。
オブジェクトが拡大しながら出現してきて、華やかな印象になりました。
キラキラを一回転
最後にキラキラを一回転させます。動かしたい要素を選択した後、右サイドバーのパネルから「Custom」タブを選択します。Transform内の「Rotate」をクリックします。
1回転させたいので、角度のところに「180°」と入力します。出現タイミングをずらしたいので、タイムラインをバラバラにします。
キラキラが回転することで良いアクセントになりました！
時間の調整と書き出し
動きをつけ終わったら、動画の時間を調整します。動画を終わらせるところまで、画面下部のタイムラインパネル上部をドラッグで移動します。白くなっている箇所が動画全体の長さになります。
モーションが完成したら、右上の「Export」ボタンをクリックして書き出し形式を選択しましょう。今回は「Video・720p」を選択します。大きい動画形式などは有料プランでないと書き出せないので要注意です。
書き出し形式を選択後、下記画面に遷移します。右下のダウンロードボタンをクリックすればダウンロードできます。
完成した動画がこちらになります。
より動きを細かく調整したい時
アニメーションを選択した後、右サイトバーパネル内の調整アイコンをクリックするとイージングが表示されます。プリセットがたくさんあるので、イメージした動きにあわせて変更したりカスタム調整することで、より理想の動きにすることができます。
別案を作成したい時
動きの別案を作成したい時、Jitterではフレームを「opt＋Shift」を押しながら横にドラッグすることで複製できます。1つのプロジェクトで同時に複数のモーションを作成できます！
最後に
Figmaで作成したデザインを簡単に動かしたい方のお役に立てれば幸いです。
明日のアドベントカレンダーはエンジニアの佐藤さんです！お楽しみに🎉
