みなさまこんにちは！SONICJAM.studioの平井です。 最近、映像案件でモーショングラフィックス制作の相談が増えてきている弊社ですが、 AfterEffectsで作ったアニメーションをJSONファイルとして書き出し、SVGで描画できるプラグインがあるとの情報が！ Bodymovin https://github.com/bodymovin/bodymovin Adobe Animate CCを使ったスプライトアニメーションなど、ブラウザ上にアニメーションを実装する手法はいくつかありますが、 AfterEffectsを用いたモーショングラフィックス制作を得意としている自分としては非常に興味深い...！ ということで、今回はこの「Bodymovin」を使ってブラウザ上にアニメーションを実装してみました。 ※Adobe AfterEffects CC2014以降のみサポートとのこと 前準

こんにちは！ SONICJAM.studio の平井です。 以前から弊社デザイナー・エンジニアから「AfterEffectsを教えてほしい！」 という声が上がってきており、夏頃から定期的にAfterEffectsの勉強会を行っています。 WebサイトやインタラクティブコンテンツのUX向上に向けて映像表現を柔軟に取り入れられるようにしていこうという目的の下、主にモーショングラフィックス制作に寄った内容で実施しています。 本記事ではその勉強会の内容をお伝えすると共に、 勉強会で使っている資料とプロジェクトファイルを公開しちゃいます！ 内容はアプリケーションの使い方からモーショングラフィックス制作の実践まで。 参考に作ったプロジェクトファイルを配布して、参加者それぞれにリメイクしてもらうという形で実施しています。 ある程度形になっているものを編集していくスタイルになるので、気楽に参加できるのがこ

こんにちは、SONICJAMデザイナーの濱川です。 昨今、プロトタイプやUI制作に関わるツールが賑わってますね。 SketchやXDや最近のinvisionStudioなど、画面を描くツールは色々とありますが、Figmaというツールが個人的に便利だったので、ご紹介したいと思います。 Figmaについて少し触って見たところ、SketchやXDに使用感は似ています。 できることもそこまで大きく違いはないのですが、プロジェクトをシェアすると、オンラインでリアルタイムに共同作業ができるところが魅力なツールです。 （https://www.figma.com） ＊Figmaの詳しい解説は、こちらの記事が参考になりそうです。 Sketch はもういらない？ デザインツール Figma の紹介 - Qiita https://qiita.com/hikaru_tayama/items/49373412e

こんにちは、SONICJAMデザイナーの野辺地です。 サイト制作をしていると、避けては通れないアニメーション。マウスオーバーなどユーザー行動のアテンションとなるアニメーションはもちろん、会社やブランド等のイメージを演出するアニメーションまで、大小さまざまです。 しかしながら、WebデザインのメインツールとなっているのはPhotoshopやSketchなど、「アニメーションに特化したツール」ではない場合がほとんど。みなさんは普段、演出イメージをクライアントや実装側に伝える際、どうしていますか？ パラパラ漫画のようにシーンを書き出して見せるのも1つの手法ですが、今回は「Keynote」を使って、アニメーションのノウハウを知らなくてもモックを作れてしまう方法をご紹介します！ もくじ 01. Keynoteでローディングアニメーションをつくってみよう ・準備 ・動きをつける ・動きを繋げる ・動き

Apple SiliconのCore MLでStable Diffusionを使ってみた｜SJ Tech Blog こんにちは、SONICJAMのエンジニアのキムです。 今回は、近年注目を集めている生成AI「Stable Diffusion」のCore ML版を使う方法と、実際に動かしてみた感想をまとめました。 Core MLとは？Core MLは、Appleが2017年に発表した機械学習を扱うためのフレームワークです。iPhoneやMac上などのAppleのデバイスに機械学習モデルを組み込むことができ、画像解析、自然言語処理、音声テキスト変換などさまざまな機能をアプリ上で実現することが