K memo

K-POPや韓国旅行関連のメモです

【Spark AR】インスタグラムストーリーズのエフェクトを自作して推しを応援しよう！

PRODUCE X 101 クォンテウン How to

※2020.11.15更新
2020年２月後半頃からコロナの影響で審査が止まっていたりしましたが、最近はかなり審査が早く10日前後が目安と書かれていますが、半日〜数時間くらいで承認されることもあります！とはいえ、また状況が変わる場合もあるので、Spark ARのサイトのアナウンスをご注視くださいませ！

https://www.facebook.com/sparkarhub/announcements/

f:id:n7e3:20200130214955j:plain

正月のある日こんなツイートが流れてきました。

かわいい………ってかストーリーズのフィルターって自作できるの😳！？！？

 

インスタグラムストーリーズで様々なフェイスフィルターが公開されているのは知っていましたが、これが自作出来て配布もできるなんて知りませんでした！

 

このX1のフィルターをつくった人は3Dソフトなども触れる方のようですが、（頬の形に沿って画像が張り付いていたりするので）
そこまで出来ないけど、2D素材でだったら簡単に作れそうだな〜と思い挑戦してみました！

 

結果、作るのは超簡単だったんだが、公開までの審査がめちゃくちゃ厳しかったーッ！！

 

自作するにあたり最低限必要なもの

・Facebookアカウント（Instagramで公開する場合でもFBアカウントが必須）
・Instagramアカウント
・MacかWindows（OSのバージョンは新しめが必要）
動作環境の記載が見つけられなかったのですが、私が制作ソフトをDLした際にバージョンが合わなくて起動しなかったので、わざわざこのために最新版のOSにアップグレードしましたw
・PhotoshopもしくはIllustratorと、それらをある程度使いこなせる技術
・多少の英語力
ソフトや案内は英語のみになります。まぁ分からなくなったらGoogle翻訳使えばOK。わたしが出来たんだからみんな大丈夫

 

Spark AR StudioをDL

sparkar.facebook.com

※Spark AR Playerっていうスマホアプリがあるけど、それではフィルターは作れません！ 作った物のプレビュー用のアプリのようですが、他の方法でプレビューが出来るのでDLしませんでした！

 

Spark AR Studioの使い方の参考にした動画

www.youtube.com

日本人の方がめっちゃ分かりやすい動画を上げてくれていたー！！！
一度、動画と同じ流れでソフトを触ってみて、ある程度動作に慣れてアレンジを加えていくと操作しやすいと思います。

 

私はPRODUCE X 101に出演していた、クォンテウン君のファンなので、
クォンテウン君応援のためのデザインを考えてみようと思います。

 

テウン君といえば、プデュ出演時に出来たクォンテウンマークという物がありまして…

f:id:n7e3:20200130202310j:plain

マークと共に彼が書いた「권태은병 세계전파!!（クォンテウン病 世界伝播！）」の文字を使ったデザインにしようと思います。
（笑顔を伝播させていって世界をクォンテウン病にしたいという意味だそうです）

 

作っていくよ

トレースして画像を用意。素材をそれぞれ背景透過のpngで書き出します。

f:id:n7e3:20200130202858p:plain

参考動画の要領で、画面の配置したい位置に画像を配置していきます。
矢印で位置を変えられるので、感覚的に操作出来ます。（数値でも位置指定できるよ）

f:id:n7e3:20200130203610p:plain
インカメラで自分の顔を写して確認も出来ますが、デモ動画も用意されています。
このデモ動画の人たちは、自動的に色々な角度に顔を傾けたり、様々な表情をしてくれるので確認がとても便利です。
ただ、かなりポートレートサイズな画角しかなく、
実際使う時は自撮りの角度で使うことが多いと思うので、ある程度位置が決まったらテスト用のURLを発行して、実際にスマホで動作確認をしていました。

f:id:n7e3:20200130203845p:plain

「send」を押すと連携しているインスタアカウントに通知が飛びます。
友達に試してもらう時などは、このURLをコピーして送って試してもらいました。

f:id:n7e3:20200130203933j:plain

こんな感じで通知が飛びます。URLから試す場合は、URLを開けると画像右の画面に遷移してインスタのアプリが起動します。

何度か位置の調整などをして完成！（はやい）
とりあえず一刻も早く公開したかったので、今回は何のインタラクションも入れずとりあえず申請準備を進めました！
一度公開された後でバージョンアップが可能なので、段々リッチにしていこうかと思っています。
 

ちなみに、このあたり↓のチュートリアルを見れば、結構簡単にもっとリッチな表現の物を作るヒントが見つかりそうです！
今は英語の解説のみだけど、翻訳かけたり動画でわかりやすく説明してくれているので、しっかり読めば結構わかるぞ。

https://sparkar.facebook.com/ar-studio/learn/documentation/guides

※パッチエディターの使い方
※手の追跡
※何かオブジェクトを降らせる
※フェイスメッシュを使って目を大きくしたり、レタッチできたり
※背景を入れる
※音楽を入れる

 

ちなみに、並行して友達のフィルターも自作していたのですが、そっちのエフェクトに試行錯誤して入れた「タップすると画像の種類が変わる」というインタラクションは、以下の形でパッチを繋ぎ合わせれば実装できます！

f:id:n7e3:20200130205928j:plain

黄色い箱が素材で、たまたまこの時は2つの画像を切替えたかったので2つ繋がっていますが、任意の数でOKです！

 

また、こちらの動画もとても親切に解説してくださっており、大変参考になりました！（2020.11.15更新）

www.youtube.com

 

公開申請するよ

https://www.facebook.com/sparkarhub/

「Spark AR HUB」というサイトから公開申請をするよ！この時にFacebookのログインと、Facebookアカウントと公開したいInstagramアカウントとの連携が必須になります！ 

f:id:n7e3:20200130210543p:plain

このボタンを押すとポップアップが出て勝手にHUBにアップロードしてくれます。

友達のフィルターを代理で制作した時は「Export file」のボタンを押して生成されたファイルを友だちに渡して、自分のアカウントから申請を進めてもらいました。

 

エフェクト名を決めたり、アイコンの画像を用意したりして申請を進めました。

f:id:n7e3:20200130211042j:plain

アイコンは、フィルターを選ぶ所で表示されるこういうやつです。

 

申請周りはこの記事をさらっと読んで参考にさせていただきました！

koukichi-t.com

 

しっかり審査があるとの噂はキャッチしていたので、頭の上のテキストを審査をする人が怪しまないように細くしっかり説明を書いて申請しましたw

f:id:n7e3:20200130211611p:plain

 

数日後

「アイコン画像には自分以外の顔は入れてはけない」「デモ動画に文字要素を入れてはいけない」「画面に写した顔をデモ動画に使ってはいけない」などの理由で合計5回くらい非承認で戻されてしまった…

申請してから結果が来るまで3日〜5日くらいかかるので、何度も申請をやり直して、結局完成から公開まで１ヶ月弱時間がかかってしまった…。

 

規定を隅から隅まで読めば把握できる内容だと思うので、逆に何度も引っかかって審査の人の手を煩わせてすみませんという気持ちもありつつ…ようやく公開までこぎつけました！！

 

公開したよ！！

↑本当はこの動画をデモ動画にしたかったけど却下されますた。ちなみに公開されたデモ動画は前にイベントで本人に私のスマホで自撮りしてもらったやつを使用しました！

 

審査がやっっっとおりた！やったー！！と思って早速インスタにもUP。僭越ながらご本人もタグ付けさせていただき、ついでにストーリーズでも＠を飛ばして「こんなん作っちゃったテヘ」とか伝えてみる。

f:id:n7e3:20200130213046p:plain

※焦って誤字しまくっている…😭😭😭

 

それが平日昼休みのこと。

使ってくれたらラッキーだな〜〜〜〜〜〜〜なんてな〜〜

とか思いながら仕事に戻って仕事をしていたら、なんだか通知がたくさん

 

なんと本人がフィルターを使ってストーリーズにアップしてくれたんです！！！😂涙

びっくりしすぎて、嬉しくて仕事中ニヤニヤが止まりませんでしたw
こんなに早く試してアップしてくれたテウン君、優しすぎます……🥺💗つ、作ってよかった…😭

しかも、ずっと黒髪だったテウン君が急に金髪になってファンがざわついた翌日の出来事で、NEW ヘアー金髪テウンの初のセルカを引き出すことに成功しました！！！申請に時間がかかりすぎて、若干ヤキモキ・イライラしてたけど、結果的にこの時期に公開してベストタイミングすぎた！！！！ありがとう！！笑

 

このフィルターは、テウン君が使ってくれた効果でとんでもない表示数と使用数をカウントしています😭（使ってくれた人数がわかる簡単なアナリティクスもあるよ！）

自分が作ったエフェクトをタイの女子高生が使ってくれているのを見たりすると、謎の感動を感じましたw

 

時間ができた時に、美肌フィルターを追加してもっとバージョンアップさせたいと思います。みなさんも是非！オリジナル制作に挑戦してみてください〜！

 

ちなみに…同じような工程でZoomなどのビデオチャットアプリで使用できるSnap cameraのフィルターも作れるんです！

 しかも審査が無い(?)のかレビュー状態から、数分後には公開されますw

 Instagramフィルターの審査がなかなか降りなくてヤキモキしている方は、こちらも作ってみてZoom飲みに使用してはいかがでしょうか！

dekiru.net

 

最後に…一緒に食事に行ったモデル友達に、フィルターで勝手に「伝播員」にしてストーリーズにUPするクォンテウン君

 クォンテウン君は現在モデル活動と並行して、先輩たちと組んだA.FACTというバンドプロジェクトで音源リリース予定です。次はA.FACTフィルター作るか〜

 
 
 
この投稿をInstagramで見る

A FACT👋

권태은(@kwontaeeun_)がシェアした投稿 -