WordPressでアニメーションを実装するプラグイン「WP Bodymovin」【JSONファイル】

2020-11-10
デザイン制作

WordPressで「JSON(.json/JavaScript Object Notation)」ファイルのアニメーションを表示させる方法です。表示には「WP Bodymovin」というプラグインを使います。

結果はこんな感じになります。

Web用アニメーションをWordPressで使う【軽量で鮮明!】

最近、Webサイトで高画質なアニメーショングラフィックを目にする機会が増えました。動画やGIFアニメとはまた違う、ベクターデータの鮮明なアニメーションです。これは、Adobeの「After Effects」などのモーショングラフィック制作アプリを使ってアニメーションを作り、それを「JSON」というプログラムに出力して表示させているようなのです。

JSONファイルのアニメーションを使うメリット

JSON形式で出力したアニメーションを使うメリットは「軽量化」と「高画質」の実現。SVG(イラレのようなベータグラフィック)を使い、鮮明なままのアニメーションを出力できるので、ピクセルに依存することがありません。さらに動画やGIFに比べると、高画質なのに軽量。Web界隈でトレンド化しているようです。

以前、私が書いた「おしゃれすぎるフリーイラスト素材集【海外のかわいい人物イラスト集合】」記事で紹介した海外のフリー素材の中にも、このJSON形式のアニメーショングラフィックがいくつかあったので、これをWordPressに表示させる方法を共有したいと思います。

WordPressでJSONアニメーションを表示させるプラグイン「WP Bodymovin」

JSONファイルのアニメーションを表示させるには、「WP Bodymovin」という専用プラグインが必要です。WordPressの管理画面でプラグイン「WP Bodymovin」を新規追加し、有効化しておきます。

そして、今回はこちらのサイトのフリー素材を使って説明していきたいと思います。スクロール中央あたりにある「ブログ」ファイルをダウンロードします。

ダウンロードファイルを解凍すると、中に「Blogging – Colour」というフォルダがあり、その中の「Blogging Colored.json」ファイルを使います。これがJSON形式で作られたアニメーションコードです。

WP Bodymovinの使い方

WordPress管理画面に戻ります。「WP Bodymovin」を追加後、メニューに「Animations」という項目が追加されるので、そこから「Add New」を選択します。

こんな画面が出てきます。Add New Animation。

管理用のタイトルを入力し、「JSON Data file」で先ほどの「Blogging Colored.json」ファイルをアップロード。「Settings」はSVGでOK。これで「公開」ボタンをクリックします。

「Shortcode generator」の一番下に貼り付け用のショートコードが現れるので、これを固定ページなり投稿ページなりに貼り付ければもう完成!細かい設定は下記を参考にしてください。

  • Loop animation(アニメーションの繰り返し)
  • Lazyload(画像の遅延読み込み)
  • Autoplay when in viewport(ビュー画面内で作動)
  • Autostop when out of viewport(ビュー画面外で停止)
  • Element’s width(アニメの横幅)
  • Element’s minimum Height(アニメの高さ最小値)
  • Element’s Alignment(アニメの表示位置)

これらを設定していくと、ショートコード内にコードが追加されていきます。このショートコードを全部記事内にペーストしてください。

プラグインを使うと簡単!

Webサイトに表示させる場合は「LottieFiles」を使う

LottieFilesというサイトを利用すれば、アニメーションをJSONファイルやHTMLコードで出力することができるみたいです。備忘録として書き残しておきますが、まだ未実装。

まずはトップページの「Get Started for free」でアカウント登録をします。

LottieFilesにも無料で使えるアニメーションが色々あるみたいですが、CCに帰属したクレジット表記が必須みたいです。

上のナビゲーションメニューから「Preview」を選択し、次の画面でJSONファイルをドラッグ&ドロップし、アップロード。次にプレビュー画面が現れます。

上の切り替えタブで「Handoff」に切り替えると、右側にコードが現れました。これをHTMLファイルにコピペするだけらしいです。

アニメーションの詳細設定は、コードの右上にある編集アイコンをクリックすると出てきます。

編集後、一番下に表示されているコードをコピペすればOK。これだけで実装できるの?すごくない??

また使ってみたいと思います!

モバイルバージョンを終了