1. アシカガCAST
  2. Instagramのエフェクトを作り..
2023-03-08 10:15

Instagramのエフェクトを作りました(第633回)

spotify apple_podcasts youtube

Instagramでストーリーかリールを撮影するときに選べるエフェクトを自作した話です。Meta Spark Studioという専用ツールを使い、背面カメラの映像にちょっとだけ3D化したイラストを表示するエフェクトを作りました。

=== 目次 ===
Instagramのエフェクトは自作できる
AR的なエフェクトを作った
Meta Spark Studioでエフェクトを作成
スマホでの確認用アプリもある
パブリッシュして公開(審査あり)
ファイル容量の制限があった
-------
#アシカガCAST
デジタル活用のヒントをスキマ時間で。
話題のサービス、注目のソフトウェアの紹介、デジタルツールの活用術など、テック系情報をわかりやすくお届けします。
月〜水 朝8時に更新

■Twitterアカウント
https://twitter.com/ashikagacast

Apple Podcast、Spotify、Google Podcastなどでも配信しています。
■アシカガCAST on アシカガノオト
http://bit.ly/ashikagacast_notion

■アシカガノオト
http://bit.ly/ashikaganote

00:01
Instagramのエフェクトは自作できるということで、やってみたところ、意外と簡単でした。
Instagramでストーリーかリール動画を撮影するときに、カメラのエフェクトを選べるんですね。
フィルターという言い方の方が分かりやすいかもしれませんが、顔が化粧したみたいになったり、周りを何か飛んでたりとか、
全体的に色合いが変わったりとか、そういうフィルター的な効果ですね。
で、このカメラのエフェクトを専用のツールを使って、誰でも自由に作ることができます。
Meta Spark Studioというツールを使います。Metaは会社の名前ですね。元Facebookですね。
Mac、Windowsで使えて無料でダウンロードできるアプリケーションです。
これ、スナップカメラ用のエフェクト、レンズをレンズスタジオというツールで作れるのと基本的に同じですね。
スナップカメラというのは、ウェブカメラで撮影している自分の顔の映像にエフェクトをかけるためだけのツールです。
で、そのエフェクトをかけた状態でズームだったり、ビデオ会議などに参加できるというためのツールです。
スナップカメラはスナップチャットが提供しているんですが、スナップカメラの場合は効果、エフェクトのことをレンズと呼んでるんですが、
このレンズも自分で作れるんですね、誰もが。その時使うツールがレンズスタジオというものなんですが、
インスタグラムのエフェクトを作るためのメタスパークスタジオとスナップカメラのレンズを作るレンズスタジオのアプリは似てるというかそっくりなものでした。
やろうとしていることもほぼ同じですからね。
これらのツールを使うと比較的簡単に人の顔の動きに合わせて動くようなエフェクトレンズも作ることができます。
例えばメガネのイラストを用意しておいて、人物と合成してちょうどメガネをかけているようになって顔の動きに合わせて動くとか、そういうものを比較的簡単に作れるはずです。
今回作りたかったものは人の顔を動向するという系のエフェクトではないです。
インカメラじゃなくてアウトカメラ、背面のカメラで撮影した風景というか目の前のものにイラストを合成するというAR的なものを作ってみました。
03:00
以前ちょっと話しましたが、Adobe Aeroというツールで作ったARのコンテンツを配布してみたんですが、
見るためにプレイヤーが自動でインストールされはするんですが、やっぱりちょっとわかりにくかったりとか対応している機種が限られていたりとか、
アンドロイドは対応している機種がものすごく限定されてたりとかしたので、あまり反響がなかったんですね。
そこでじゃあもうちょっとわかりやすいものをということでインスタグラムのエフェクトを作ろうというところに行き着きました。
Adobe Aeroで作ったARコンテンツの場合は、アニメーションGIFを貼り込むことができたので、それで動かせたんですが、
インスタグラムのエフェクトでは、Meta Spark StudioにはアニメーションGIFを取り込めなかったので、動かすことは一旦諦めて単に止まっているイラストがポツンと現れるようにしました。
Spark Studioに取り込む素材は3Dのデータじゃないといけなかったので、今回簡単な方法として、
Adobe Illustratorでイラストに対して3DとMaterialという効果をかけて、そうするとそのオブジェクトを3Dのデータとして
OBJという形式で書き出せるので、そうやって書き出したファイルをSpark Studioに取り込みました。
Spark Studioはインターフェース類が全部英語ということもあり、また開発者向けのツールということもあり、ちょっととっつきにくい印象はあると思います。
私はネット上の公式のメタが出している使い方紹介の記事と、誰かがブログ的に出している記事2つ3つ参考にしてやりたかったことが単純ということもあって、何とか使うことができました。
多分そういうのなしでいきなりSpark Studioを使っていたらかなり手間取ったんじゃないかなと思います。
Spark Studioでやったことは、平面を1つ空間に追加して、そこに3Dのオブジェクトを追加して、
それがかなり大きく表示されていたので、サイズを調整した、小さくしたくらいですね。
あと、ライトの明るさも調整しました。
06:01
3D的なアプリケーションなので、環境光とかライトとかの設定があるんですね。
作ったカメラのエフェクトがどう使えるかをスマートフォン上で確認するためのメタSparkPlayerというアプリもあります。
私の場合はMacで作ってiPhoneで確認したんですが、
MacとiPhoneをケーブルでつないで、Spark Studioのメニューから私のiPhoneに送るというのを選んで、ファイルを送ることでiPhoneを使って確認作業を行いました。
また、Instagramでプレビューするという機能もあります。
これは専用のリンクが発行されて、そこにアクセスするとInstagramが起動して、そのエフェクトを確認することができます。
これは時間制限があるみたいですね。
そして実際にスマホで確認して、これでOKだとなったら、Publishというのを選んで公開することができます。
エフェクトを公開するには一応審査が入るんですが、基本数時間で審査は終わるようです。
場合によっては3日間ぐらいかかるかもみたいな表記があったんですが、私が2回試したところでは、どちらも多分2、3時間以内とかで公開されていたと思います。
Publishするとき、公開するときにデモ動画が必要になります。
このエフェクトを使うとこんな感じになりますよという動画を用意する必要があるんですね。
まだ公開していないフィルターの使用事例の動画を作らないといけないので、これがちょっと面倒に感じました。
これは1回公開した後、また違う動画に差し替えたりもできるようです。
エフェクトを公開するときにはインスタグラムのアカウントと紐付けて公開するんですが、そのインスタグラムのアカウントのページに行ったときに、
投稿とかリールとかタブで分かれているところにエフェクトのタブが追加されて、そこにエフェクトが表示されるんですね。
さっき言った使っているところのデモ動画というのがそこに表示されます。
そこでそのエフェクトを選ぶとデモ動画が流れて試してみるみたいなボタンがあって、そこから使うことができるんですね。
後は公開されているエフェクトは検索して探すこともできます。
一般公開しないでリンクを知っている人しか使えないようにすることもできます。
09:06
またさっき言った公開した人のインスタグラムのアカウントのエフェクトのところに表示されると、これを表示しないけど公開するということもできます。
なお今回いざパブリッシュ公開しようとしたらファイル容量が大きすぎてこのままではインスタグラムでは使えないよという表示が出てしまいました。
なので無料で使える3DグラフィックソフトのBlenderでobjファイルを開いてDecimateという機能でポリゴン数を減らしてそれで容量を軽くした後
fbxというファイル形式で書き出してそれをSparkStudioに取り込みました。
Blenderの知識とかはほぼないんですがネットで調べてこの方法に行き着きました。
今回は以上です。アシカガコウジがお届けしました。
10:15

コメント

スクロール