members

members

【初級編】SparkARでARエフェクトを作成しよう

Tweet

こんにちは。前回のコラム「リモート時代のSNSトレンド<ARエフェクト>をプロモーションに活用しよう」では、
ARの市場規模と企業がInstagramでARエフェクトを活用するメリットについて紹介いたしました。

今回は、SparkARでInstagram用のARエフェクトを作成する方法をご紹介いたします。

目次

■誰でも簡単にARエフェクトが作れるSparkAR
■作成に必要なもの
■エフェクトの作成方法
└STEP1 素材の準備
└STEP2 Facetrackerで顔に素材を表示させる
└STEP3 Patch editorで画面をタップするとエフェクトが切り替わるようにする
└STEP4 テストしてデモ動画を撮影する
└STEP5 申請して完成!
■まとめ

 

■誰でも簡単にARエフェクトが作れるSparkAR

Facebook社は2017年からARエフェクトを作成して、Instagramストーリーズ上で公開できるSparkARの提供を開始しました。利用できるのは一部の限られたクリエイターのみでしたが、2019年には全ユーザーが対象となり、誰でも簡単にARエフェクトを作成し公開することができます。

 

■作成に必要なもの

ARエフェクトを作成するために、必要なものはこちらの4つ。

①SparkAR

こちらから無料でダウンロードすることができます。
https://sparkar.facebook.com/ar-studio/download/

②Facebookアカウント
③Instagramアカウント

FacebookアカウントとInstagramアカウントを連携しておく必要があります。

④素材作成のためのツール(PhotoshopやIllustratorなど)

※④は、SparkAR内のサンプル素材やロイヤリティフリーの素材などがあれば、ツールを使わずとも作成できます。

 

■エフェクトの作成方法

今回は、基本機能のFacetrackerPatch editorの2つを使用して
「タップするとデザインが変わる、そばかす&花のフェイスペイントメイク風のエフェクト」を作成してみます。

 

 

■STEP1 素材の準備

まずは表示させる素材を準備します。素材には透過PNGを使用します。

今回はfacemeshを使用するので、SparkARのこちらのページからfacemesh用の素材をダウンロードします。
https://sparkar.facebook.com/ar-studio/learn/articles/people-tracking/face-reference-assets

ダウンロードした素材の中に下記のような画像がありますので、こちらを使って素材を作成します。
今回はスマホに転送し、Adobe Sketchを使用してお花とそばかすメイク風のイラストを作成しました。
タップするとデザインが変わる仕様にしたいので黄色と白の2パターン作成します。

イラストが完成したら、facemesh素材を非表示にし、透過保存して素材の完成!

 

 

■STEP2 Facetrackerで顔に素材を表示させる

SparkARをインストールして開いたら「New project」をクリックします。
こちらが最初の編集画面です。

 

左の列のカメラマークからプレビュー画面のモデルを選択することができ、様々な肌のトーンに合うように調整ができます。
またPC搭載のカメラに切り替えることもできます。

 

①素材をインポートする

まずは、左下のAssetパネルの「+Add Assets」をクリック。「Import from Computer」から先ほど作成した素材をすべてインポートします。

 

②Facetrackerをインサート

最初に黄色バージョンのエフェクトを作成します。
左上のSceneパネルの「+Add object」をクリック、「Facetracker」をインサートします。
このFacetrackerが顔を認識し、素材が追従するようになります。

 

③Facemeshをインサート

Facetrackerをインサートしたら、さらに「+Add object」をクリック、「faceMesh」をインサートします。
faceMeshは素材を表示させるパネルのようなものです。
素材が顔に追従するようにFacetrackerの配下にfaceMeshを設置します。

 

④Materialsを作成する

Facemeshを選択しながら、右側のインスペクタの「Materials」から「+」をクリックし「Create new materials」を選択するとAssetパネルにマテリアルが追加されます。このMaterialとFacemeshは対になっていますので、わかりやすいように名前を変更しておくことをお勧めします。今回は「Face_Mat_Yellow」にしました。

次に、Materialを選択したまま右側のインスペクタの「texture」から、アセットパネルの黄色バージョンの素材を選択すると、顔にイラストが表示されます。「Shader Type」で7種類の質感を選択することができ、今回は「Face Paint」を選択しました。「opacity」でフィルターの濃さを調整できます。

 

⑤おまけ:肌をきれいにする

「Facetracker」の下に新しく「Facemesh」をインサートします。
同じ方法で「Material」を作成したら今回はファイルを選択するのではなく「Shader Type」から「Retouching」を選択すると肌を滑らか見せることができます。「Skin smoothing」でパーセンテージを調整してください。

 

黄色バージョンのエフェクトはこれで完了。
タップしてエフェクトを切り替える機能を設定しない場合はここで完成です。

こちらは1人用のエフェクトですが、複数人にエフェクトを反応させる場合、Facemeshを右クリックし「Duplicate」を選択してFacemeshを複製します。
表示させたい人数分のFacetrackerを用意して、複製したFacemeshを設置し、「Tracked face」を「Face1」「Face2」と変更すれば複数人に反応させることができます。

 

 

■STEP3 Patch editorで画面をタップするとエフェクトが切り替わるようにする

次は、Patch editorを使用して黄色バージョンと白バージョンの切り替えを行っていきます。黄色バージョンと同じFacetracker配下に、③~④と同じ手順で白バージョンも作成し2パターンのエフェクトを作成します。この時点では2つ重なって表示されています。

 

①Patch editorを表示させる

メニューバーの「View」から「Show/Hide Patch editor」を選択すると、メイン画面の下にPatch editorが表示されます。

 

②Patch editorを編集する

次にPatch editorの中で右クリックして「screen tap」を追加します。
出てきたボックスの右上「tap」とある矢印をドラッグ&ドロップすると、先ほどと同じ画面が出るので次は「counter」を追加します。また同じように「counter」の矢印をドラッグ&ドロップして「equals Exactly」を2つ追加します。

「screen tap」>「counter」>「equals Exactly」の順番です。

ここまで来たら、SceneパネルからFacemeshを選択し右側の「Visble」の左の矢印をクリックします。そうするとパッチエディターに表示されるので「equals Exactly」からの矢印でつなぎます。

 

「Counter」の中の「Maximum Count」に「2」と入力します。ここは、パターンの最大値を入力します。「equals Exactly」の下の枠にはそれぞれ「0」「1」と入力します。0は最初に表示されるエフェクト、1は1回タップすることで切り替わる2つ目のエフェクトです。

これでエフェクトの切り替えの設定の完了です。
プレビューの右上のメニューから「Simulate touch」にカーソルを切り替えることで、プレビュー上で切り替えが試せます。

 

■STEP4 テストしてデモ動画を撮影する

エフェクトが完成したら、実機でテストを行います。
メニューバーの「test on device」からInstagramの「Send」を選択しInstagramアプリへエフェクトを送ります。
この時に後の申請で必要となるデモ動画を撮影して保存しておきます。

 

■STEP5 申請して完成!

エフェクトが完成したら、SparkARの管理画面「SparkAR Hub」
https://www.facebook.com/sparkarhub/publish/effect/)でエフェクトの申請をします。

タイトル、デモ動画、キャプチャ、アイコン、紹介文など必要事項を入力します。
(エフェクトの紹介文のみ、英語で入力する必要があります。)
Publishすると、審査中ステータスになり承認がおりたらアプリで使用が可能となります。
承認までの期間はバラバラですが、公式では10営業日程度となっています。エフェクトの公開日と、公開終了日を選択することも可能です。

エフェクトの公開後はSparkAR Hubでインサイトを確認することもできます。

 

■まとめ

今回紹介したエフェクトの作成方法のほかにも、様々なエフェクトを作ることができます。
公式ページにもチュートリアルが掲載されているので参考にしてみてください。
https://sparkar.facebook.com/ar-studio/learn/

SparkARは無料で使えるツールのため誰でもエフェクトを作成することができます。
企業もアプリ開発と比べて低コストで作成することができます。
今後のARビジネスの動向に注目です。

 


■コラム執筆者

    • 山田舞優(Yamada Mayu)