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

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

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

コメント

スクロール