paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。

logo

ITエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。

高度なモーションデザインを無料で作成できるWebエディタ「Jitter」を使ってみた!

f:id:paiza:20210630121216j:plain
どうも、まさとらん(@0310lan)です!

今回は、Webデザインに活用できるモーションデザインをブラウザ上のエディタから誰でも簡単に作れるWebサービスをご紹介します。

手軽に高度なアニメーションを実現できる機能が豊富に提供されており、簡単なものならマウスで数回クリックするだけで完成してしまいます。無料で書き出しにも対応しており、記事後半ではFigmaとの連携方法についても解説しています。

Webのアニメーションにご興味ある方はぜひ参考にしてみてください!

Jitter

f:id:paiza:20210630121302j:plain

■「Jitter」の使い方

それでは、「Jitter」をどのように使えばいいのか詳しく見ていきましょう!

まずはサイトのトップページから【Try it now】ボタンをクリックして無料のユーザー登録を済ませておきます。

f:id:paiza:20210630121321j:plain


メールアドレスや名前などを入力するだけなので簡単です。

f:id:paiza:20210630121334j:plain

登録したメールアドレス宛にログイン用のリンクが送付されるのでクリックしましょう。


すると自分専用のダッシュボード画面が表示されます。

f:id:paiza:20210630121343j:plain

これで準備は完了です!
あとはこの画面から新規にモーションデザインを作成したり、複数のプロジェクトを管理できるようになります。また、YouTubeに公式チュートリアルも公開されているので、最初にいくつかチェックしておくといいでしょう。

■「Jitter」の機能紹介

まず最初に「Jitter」のWebエディタがどのような機能を提供しているのかについて、基本的な部分をピックアップして解説しておきます。

新規のプロジェクトを作成するにはダッシュボード画面から「New file」ボタンをクリックします。

f:id:paiza:20210630121426j:plain


モーションデザインを作成するための編集エディタが表示されます。

f:id:paiza:20210630121519j:plain


このエディタはざっくり言うと、3つの画面に分かれています。

f:id:paiza:20210630121527j:plain

それぞれの画面は以下のような役割があります。

  • 【レイヤー】キャンバス上に配置したオブジェクトのリスト
  • 【キャンバス】デザインを作成するメイン画面
  • 【プロパティ】オブジェクトの設定やアニメーションの編集

メインで利用するのが「キャンバス」画面で、ここにアニメーションさせたいテキストや画像などを配置していくことになります。

自分のデザインを取り込む機能もありますが、画面上部のメニューから「テキスト」「シェイプ」「画像」を好きなように組み合わせることもできます。

f:id:paiza:20210630121549j:plain


「プロパティ」画面は【Design】と【Animate】の2種類のタブが切り替えられるようになっています。

f:id:paiza:20210630121558j:plain


【Design】タブは、選択されているオブジェクトの詳細設定をおこなうことが可能です。

f:id:paiza:20210630121607j:plain

フォント、スタイル、サイズ、カラー、配置など、細かい設定項目を調整できるので便利です。


そして【Animate】タブがもっとも特徴的な機能になっており、さまざまなアニメーションを手軽に追加できます。新規のアニメーションを作成するには、【New Animation】ボタンをクリックします。

f:id:paiza:20210630121616j:plain


すると、多彩なシーンに最適なアニメーションのテンプレートが右側に表示されます。

f:id:paiza:20210630121626g:plain

これは選択されているオブジェクトがテキストであれば、そのテキストに合わせたアニメーションのテンプレートが表示されます。そのため、シェイプや画像の場合には、その対象に合わせて異なったテンプレートが表示されるのが特徴です。


アニメーションを作成する作業としては、テンプレートをクリックしてタイムラインに並べていくだけなので非常に簡単です。

f:id:paiza:20210630121735j:plain

アニメーションは細かい調整も可能で、方向・持続時間・発生タイミング・加速度…などのパラメータを設定できるようになっています。


また、テンプレート以外にも独自のアニメーションを作成できるように「カスタムモード」も搭載されています。

f:id:paiza:20210630121746j:plain

これはアニメーションの移動・スケール・回転・透明度・カラー…などの項目を好きなように調整できる機能になります。すべてビジュアルエディタからパラメータを設定するだけなので初心者でも簡単に操作できるように工夫されています。


最終的に作成した作品は【Export】ボタンをクリックするだけで、動画ファイル(MP4)やGIFとしてダウンロードも可能です。

f:id:paiza:20210630121757j:plain

動画ファイルをダウンロードする場合は、無料プランだと最大で720pまでの画質に対応しています。

■モーションデザインのサンプル事例

「Jitter」を利用してすでにいくつかのモーションデザインが公開されているので、特徴的な機能を解説しながらご紹介しておきます。

最初は「カウントアップ」のアニメーションを作成した事例です。

これはアニメーションの「Mask」テンプレートにある「Mask in」「Mask out」を交互に組み合わせることで簡単に実現できます。

f:id:paiza:20210630121822j:plain

数字のテキストをいくつか用意して、それぞれにアニメーションを適用させてタイムライン上に並べていくだけです。


するとこんな感じの動きを実現できるようになります。

f:id:paiza:20210630121834g:plain

カウントアップやカウントダウンのアニメーションは、イベントやプロモーションなどでも活用できるので応用範囲は広いと思います。


次に、カスタムモードを利用して独自アニメーションを取り入れた事例をご紹介します。

カスタムモードはいくつかの項目が設定できるのですが、たとえば「Move」を選択すると画面に表示される矢印をドラッグ&ドロップさせて好きな方向に移動するアニメーションが作れます。

f:id:paiza:20210630121849j:plain


複数の画像に適用させると以下のような作品が作れます。

f:id:paiza:20210630121949g:plain

カラーバリエーションの豊富な商品をアピールできるアニメーションが手軽に作れるわけです。


さらにもっと複雑なアニメーション事例もご紹介しておきます。

ただし、動きをリアルにするためにさまざまなアニメーションを追加していくと、タイムラインが縦に長くなって複雑化していきます。

f:id:paiza:20210630122007j:plain


そこで、複数のアニメーションを選択してグループ化できる機能が提供されています。

f:id:paiza:20210630122016j:plain


動きの役割ごとにグルーピングしていけばタイムラインがすっきりと見やすくなります。

f:id:paiza:20210630122028j:plain

グループ化された項目をクリックすれば、非表示になっているアニメーションが展開されて再編集もおこなえるので便利です。


グループ機能を活用すれば、以下のような複雑なアニメーションも手軽に作れるようになります。

f:id:paiza:20210630122039g:plain

このように「Jitter」の機能を活用していくことで、シンプルなアニメーションから複雑なものまで素早く対応できるようになります。ユーザーに分かりやすい動きをデザインすることで、Webサイトの使いやすさも大きく変わってくるので、ぜひみなさんも有効活用していきましょう。

■Figmaとの連携機能について

「Jitter」はブラウザ上でWebデザインやプロトタイプを開発できる「Figma」と簡単に連携できる機能があるので合わせてご紹介しておきます。

この機能はFigmaのプラグインとして提供されており、以下のリンクから簡単にインストールできるようになっています。

<参考リンク>

f:id:paiza:20210630122204j:plain


インストールしたら、アニメーションを追加したいFigmaのプロジェクトを開いて、右クリックから「Jitter」プラグインを選択します。

f:id:paiza:20210630122213j:plain


対象のフレームを選択したら青いボタンをクリックするだけでOKです。

f:id:paiza:20210630122325j:plain


自動的に「Jitter」のプロジェクトに取り込まれるので、【Open in Jitter】ボタンをクリックしてみましょう。

f:id:paiza:20210630122334j:plain


すると「Jitter」の編集エディタが表示されるので、このまますぐにアニメーションを追加していくことができるわけです。

f:id:paiza:20210630122410j:plain


Figmaと連携することで、より高度でユニークなアニメーションを構築できるようになるでしょう。

f:id:paiza:20210630122418g:plain

■動画&ゲームでプログラミングが学べるpaizaラーニング


動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。

Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。

また、paizaでは『コードクロニクル』をはじめゲームで楽しくプログラミングを学べるコンテンツもご用意しています。ぜひプレイしてみてください!


■まとめ

今回はブラウザ上で手軽にモーションデザインを構築できるWebサービスについてご紹介しました。

「Jitter」はシンプルな操作感でありながら、リアルな動きを簡単にデザインできるのが大きな魅力と言えます。まだリリースされたばかりということもあって、現在もさまざまなアップグレードが実施されているので今後も新機能が搭載されていくと予想されます(参考リソース)。

アニメーションやWebデザインにご興味ある方も含めて、ぜひ自分だけのモーションを構築してみてください。


<参考リンク>




paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら
paizaラーニング

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら
paizaのスキルチェック

paizaのおすすめコンテンツ

Webセキュリティ入門 ハッカー入門 Webセキュリティ講座がスタート!CVは内田真礼さん! Python✕AI 機械学習入門講座 CVに上坂すみれさんを起用!人気の機械学習講座を公開中!
paiza転職 paiza新卒 EN:TRY paizaラーニング 記事内に記載している情報は、記事公開時点でのものとなります。 Copyright Paiza, Inc, All rights reserved.