{"data":{"site":{"siteMetadata":{"title":"bauhausify","siteUrl":"https://www.bauhausify.com","subtitle":"美大出身のWEBエンジニアリング奮闘記","descriptionMyself":"\n多摩美術大学
プロダクトデザイン専攻卒業 ->
GUIデザイン会社勤務 ->
\n現在フロントエンジニア
\n
\nMy site ->
\nwww.mwrote.com\n"}},"markdownRemark":{"id":"97897291-11c4-5dba-b0d8-0bbcd0851d00","html":"

Framer XやPrincipleといったすばらいいツールもありますが、なかなかデファクトスタンダードにはなっていない印象です。
\nそこで、アニメーション制作に関して、特に映像分野ですでに地位を獲得している、AfterEffects(以下AE)を使ったアニメーションの書き出し方法を説明します。

\n

なぜAEがいいのか、以下の理由があげられます。

\n\n

さらに、Bodymovinというプラグインを使うと、デザイナーが作ったものを二次加工や書き写ししなくても、そのままWebやアプリで使えることができます。

\n

\n \n \n \n \n \n \n \nBodymovinとは

\n

hernanさんが制作された、AEのアニメーションを解析し、Webで読み込み可能なJSONファイルとして出力するAEプラグインです。\n宿泊予約サイトAirbnbが公開しているLottieという、ネイティブアプリやWebで書き出せる方法の中で使われています。\n余談ですが、Airbnbのデザインチームが以下にすばらしいかは、https://airbnb.design/で見ることができます。
\nまた、GoogleのデザインチームもBodymovinを利用しているようです。Mediumの記事にアプリで使用している形跡がありますし、実際にブラウザ上のコードの中身をみるとBodymovinの文字がありました。

\n

これだけでも使う価値がありますね。特に企業ユースで。

\n

\n \n \n \n \n \n \n \nインストール手順

\n
    \n
  1. 念のためAEは終了してください
    2. \n
  2. \n

    AEのプラグインをインストールするためZXP Installerをインストールします。公式サイトからダウンロードしましょう。
    \nhomebrewをインストールしている人は以下のコマンドでインストールできます。

    \n
    brew cask install zxpinstaller
    \n
    3. \n
  3. BodymovinはAirbnbのlottie-webリポジトリから最新のzipファイルをダウンロードできます。リンク先の最新のv*.*.*の箇所をクリックし、Source code(zip)をダウンロードしましょう。
    4. \n
  4. 解答した中にある、bodymovin.zxp(build > extension > bodymovin.zxp)を、先程インストールしたZXP Installelrを起動し、ウィンドウ内にドラッグします。
    5. \n
  5. AEを起動します。メニュー > Window > 拡張機能 を確認し、Bodymovin が追加されていたらインストール完了です。
    \n頻繁に更新されるので、定期的に新しいバージョンにすることをお勧めします。
    6. \n
  6. 最後に設定を変更します。環境設定 > 一般設定 > スクリプトによるファイルへの書き込みとネットワークへのアクセス をチェックしてください。
    7. \n
\n

\n \n \n \n \n \n \n \nアニメーションを作る

\n

AEのすべての機能が使えるわけではありません。
\n公式サイトを確認して、対応している機能のみを使ってアニメーションを作りましょう。
\nAEの使い方は長くなるので割愛します。
\nこのようなデザインツールのリソースの勉強にはYoutubeをおすすめします
\nae bodymovinなどで検索するとたくさんでてきますね。
\n例えばDesignCourseさんはアイコンアニメーションを作り、Bodymovinで書き出す方法を紹介されています。
\nhttps://www.youtube.com/watch?v=2Tm8ijJsuMc

\n

\n \n \n \n \n \n \n \nWeb向けに書き出す

\n
    \n
  1. メニュー > Window > 拡張機能 > Bodymovin を選択します。
    2. \n
  2. 書き出したいコンポジションを選択し > 歯車アイコンを選択します。
    3. \n
  3. 書き出したい種類を選択し、demoを選択するとHTMLファイル１つに書き出してくれます。
    4. \n
  4. Destination Folder(3点リーダーのアイコン)をクリックして保存先を指定します。
    5. \n
  5. Renderを実行すると、指定したフォルダに書き出してくれます。
    6. \n
  6. 書き出されたHTMLをブラウザーで表示し、アニメーションが動いていることを確認します。
    7. \n
\n

完成したらフロントエンドエンジニアに、Webの実装方法のURLとAEファイルか書き出したファイルを渡しましょう。

\n

参考です。powermojoさんが動画で書き出し方法を説明されています。
\nhttps://www.youtube.com/watch?v=5XMUJdjI0L8

\n

Lottieのサイトをみると、見ていて楽しい魅力的なアニメーションがたくさんありますね。
\nフロントエンドエンジニアとしても、このようなアニメーションを実装するのは楽しいはずです。

\n

今回はAdobeのAEを使った手法を紹介しましたが、
後日、Framer XやPrincipleなどの他のツールを使ったアニメーション構築方法も記事にしたいと思います。

\n

Happy Designing Animation!

","fields":{"slug":"/2019-08-24_Bodymovinでサイズを拡大しても綺麗なWeb用アニメーションを作る方法/"},"tableOfContents":"","frontmatter":{"date":"2019.08.24","title":"Bodymovinでサイズを拡大しても綺麗なWeb用アニメーションを作る方法","cover":"","category":"Design","excerpt":"アニメーション作成にはどのツールを使うべきでしょうか。SVGアニメーションのように拡大してもあれない、そして再利用しやすいアニメーションが作れるBodymovinというAfterEffectsのプラグインを紹介します。"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"97897291-11c4-5dba-b0d8-0bbcd0851d00","next":{"path":"/2019-08-21_ブラウザで機械学習が実行できるml5jsを試してみる/","title":"ブラウザで機械学習が実行できるml5jsを試してみる","category":"Coding"},"prev":{"path":"/2019-08-27_フォーミュラによる美しいパターンをjavascriptで描く/","title":"フォーミュラによる美しいパターンをJavaScriptで描く","category":"Design"},"relatedPosts":[]}}