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。これだけで実装できるの？すごくない？？
また使ってみたいと思います！